ftw.theming 2.1.2

检查SCSS注册表

@@theming-resources（在任何导航根目录下）列出了所有资源。

资源槽

注册表允许将资源注册到一系列固定槽位。这些槽位按包含顺序排序

• 顶部

• 变量

• 混入

• ftw.theming

• 插件

• 主题

• 策略

• 底部

添加资源

在包的ZCML中添加SCSS资源。SCSS应始终放在具有样式模板的同一包中。

<configure
    xmlns:theme="http://namespaces.zope.org/ftw.theming"
    xmlns:zcml="http://namespaces.zope.org/zcml"
    i18n_domain="ftw.tabbedview">

    <configure zcml:condition="installed ftw.theming">
      <include package="ftw.theming" />

      <theme:scss
          file="resources/tabbed.scss"
          slot="addon"
          profile="ftw.tabbedview:default"
          />
    </configure>

</configure>

<configure
    xmlns:theme="http://namespaces.zope.org/ftw.theming"
    xmlns:zcml="http://namespaces.zope.org/zcml"
    i18n_domain="plonetheme.fancy">

    <include package="ftw.theming" />

    <theme:resources
        slot="theme"
        profile="plonetheme.fancy:default"
        layer="plonetheme.fancy.interfaces.IFancyTheme">

        <theme:scss file="resources/foo.scss" />
        <theme:scss file="resources/bar.scss" />

    </theme:resources>

</configure>

资源排序

当从注册表中检索SCSS资源时，资源是有序的，以确保尽可能一致。

排序优先级

1. 资源的槽位（参见下文的槽位部分）1. before和after选项（拓扑图排序），在每个槽位内。1. 资源的ZCML加载顺序

请注意，ZCML加载顺序通常是随机的。

动态资源的资源工厂

资源工厂是一个可调用对象（接受上下文和请求），它返回一个DynamicSCSSResource对象。由于可调用对象实例化了资源，因此其内容可以动态创建。

<configure
    xmlns:theme="http://namespaces.zope.org/ftw.theming"
    xmlns:zcml="http://namespaces.zope.org/zcml"
    i18n_domain="plonetheme.fancy">

    <include package="ftw.theming" />

    <theme:scss_factory factory=".dynamic_resource_factory" />

</configure>

from ftw.theming.interfaces import ISCSSResourceFactory
from ftw.theming.resource import DynamicSCSSResource
from zope.interface import provider

@provider(ISCSSResourceFactory)
def dynamic_resource_factory(context, request):
    return DynamicSCSSResource('dynamic.scss', slot='addon', source='$color: blue;',
                               cachekey='1')

当生成SCSS花费时间较多时，应该继承DynamicSCSSResource类并实现自定义的get_source和get_cachekey方法。应该非常轻量级和便宜地实现get_cachekey：它会在每次页面访问时被调用。它应该返回任何字符串，并且仅在get_source结果将改变时更改返回值。

from Products.CMFCore.utils import getToolByName
from ftw.theming.interfaces import ISCSSResourceFactory
from ftw.theming.resource import DynamicSCSSResource
from zope.annotation import IAnnotations
from zope.interface import provider


class CustomSCSSResource(DynamicSCSSResource):

      def get_source(self, context, request):
          return 'body { background-color: $primary-color; }'

      def get_cachekey(self, context, request):
          portal = getToolByName(context, 'portal_url').getPortalObject()
          config = IAnnotations(portal).get('my-custom-config', {})
          return config.get('last-change-timestamp', '1')

@provider(ISCSSResourceFactory)
def dynamic_resource_factory(context, request):
    return CustomSCSSResource('my.package:custom.scss', slot='addon')

声明用于门户类型的图标

门户类型图标在插件包的scss文件中声明。通过为每个图标集声明图标，可以支持多个图标集。

@include portal-type-font-awesome-icon(repository-folder, leaf);
@include portal-type-icon(repository-folder, "\e616", customicons);

使用这些混入不会生成任何CSS，也不会引入对这些图标集的依赖。它只是将这些信息存储在一个列表中，稍后处理。

切换图标集

主题或策略包可以更改图标集。标准图标集是font-awesome。更改图标集应该在variables槽位的SCSS文件中完成。

$standard-iconset: customicons;

自定义图标集

默认图标集是font-awesome，它会在将$standard-iconset变量设置为font-awesome时自动加载，并生成必要的CSS。

为了使用自定义图标集，必须在bottom槽位中注册一个SCSS文件。这通常由主题或策略包完成。

SCSS文件应该在将$standard-iconset设置为该图标集时才应用必要的CSS。

@if $standard-iconset == customicons {

  @font-face {
    font-family: 'customicons';
    src:url('#{$portal-url}/++theme++foo/fonts/customicons.eot?-fa99j8');
    src:url('#{$portal-url}/++theme++foo/fonts/customicons.eot?#iefix-fa99j8') format('embedded-opentype'),
    url('#{$portal-url}/++theme++foo/fonts/customicons.woff?-fa99j8') format('woff'),
    url('#{$portal-url}/++theme++foo/fonts/customicons.ttf?-fa99j8') format('truetype'),
    url('#{$portal-url}/++theme++foo/fonts/customicons.svg?-fa99j8#opengever') format('svg');
    font-weight: normal;
    font-style: normal;
  }

  .icons-on [class^="contenttype-"],
  .icons-on [class*=" contenttype-"] {
    &:before {
      font-family: 'customicons';
      content: "x";
      text-align:center;
      position: absolute;
    }
  }

  @each $type, $value in get-portal-type-icons-for-iconset(font-awesome) {
    body.icons-on .contenttype-#{$type} {
      &:before {
        content: $value;
      }
    }
  }
}

使用媒体查询混入

ftw.theming为大多数常见的媒体查询提供了混入函数。

• 小（480px）

• 中（800px）

• 大（1024px）

示例用法

#container {
    width: 1600px;

    @include screen-medium {
        width:1000px;
    }
    @include screen-small {
        width:500px;
    }
}

包含字体样式

@include font-face($name: 'VerdanaRegular', $path: '++resource++nidau.web/fonts/Verdana');

$path参数的文件扩展名将被自动连接。必须提供woff和woff2。

混入函数随后产生以下CSS代码

@font-face {
  font-family: 'VerdanaRegular';
  font-style: normal;
  font-weight: normal;
  src: url("++resource++nidau.web/fonts/Verdana.woff2") format(woff2),
    url("++resource++nidau.web/fonts/Verdana.woff") format(woff);
}

@font-face {
  font-family: 'VerdanaBold';
  font-style: normal;
  font-weight: bold;
  src: url("++resource++nidau.web/fonts/Verdana-Bold.woff2") format(woff2),
    url("++resource++nidau.web/fonts/Verdana-Bold.woff") format(woff);
}

2.1.2 (2020-11-25)

• 扩展readme关于如何使用embed-resource与多个颜色[Nachtalb]

• 提高从brain/solr flare获取图标的稳定性。[mathias.leimgruber]

2.1.1 (2020-01-14)

• 修复Plone 4中未定义图标时的mimetype图标问题。[jone]

2.1.0 (2020-01-10)

• 改进mimetype图标的支持，以更好地支持Plone 5。[jone]

2.0.2 (2019-03-19)

• plone.browserlayer订阅必须在我们的订阅之前注册[Nachtalb]

2.0.1 (2019-01-17)

• 修复内容类型名称中的Unicode字符引起的UnicodeEncodeError错误[Nachtalb]

2.0.0 (2018-01-17)

• 弃用旧版断点混入函数和变量。[Kevin Bieri]

• 删除已弃用的变量。[Kevin Bieri]

1.11.0 (2017-12-19)

• 在plone 5.1中使用时，避免在test_cachekey_refreshes_when_navroot_changes中使用freeze，因为我们得到一个ReadConflictError。如果我们删除freeze上下文管理器，测试的值不会改变。[mathias.leimgruber]

• 实现Plone 5.1兼容性[mathias.leimgruber]

1.10.2 (2017-07-03)

• 引入webkit-only混入函数。[Kevin Bieri]

1.10.1 (2017-06-02)

• 修复fontface混入函数中字体类型的转义。[Kevin Bieri]

• 为tab-list混入函数提供背景选项。[Kevin Bieri]

• 引入分音混入函数。[Bieri Kevin]

1.10.0 (2017-03-20)

• 添加卸载配置文件[raphael-s]

• 确保在安装ftw.theming时使用quickinstaller安装默认配置文件[raphael-s]

1.9.0 (2017-02-09)

• 更新font-awesome到4.7.0。[elioschmutz]

1.8.2 (2017-01-11)

• 1.8.1意外地从错误的分支发布。请使用1.8.2代替。[Kevin Bieri]

• 使用两列布局打印。[Kevin Bieri]

• 避免在“图像”类型上出现重复（mimetype）图标。[jone]

• 引入新的混入函数

  • 引入link-color助手

  • 引入font-face助手

  • 引入rem助手

  [Kevin Bieri]

1.8.0 (2016-10-06)

• 由于CSS不包含任何特定用户的数据，因此从“私人”缓存切换到“公共”缓存。[jone]

• 修复未发布导航根的缓存，不使用p.a.caching。[jone]

• 引入外观助手[Kevin Bieri]

1.7.1 (2016-09-26)

• 支持替换portal-type-和mimetype图标。[jone]

• 修复支持具有长名称的mimetype图标。[jone, mbaechtold]

1.7.0 (2016-09-22)

• 修复embed-resource混入函数的多填充支持，引入新的语法和签名。[Kevin Bieri]

1.6.1 (2016-08-08)

• 减少tab悬停状态当前悬停状态将是选中状态[Kevin Bieri]

1.6.0 (2016-07-18)

• 将zindex系统从plonetheme.blueberry迁移[Kevin Bieri]

1.5.2 (2016-07-06)

• 使用来自plonetheme.blueberry的字体家族定义[Kevin Bieri]

1.5.1 (2016-06-23)

• 支持链接（a标签）上tab-list的选中状态。[mathias.leimgruber]

• ie-only选择器现在支持ms edge和IE11。[raphael-s]

1.5.0 (2016-05-26)

• 引入旋转器混入函数。[Kevin Bieri]

1.4.0 (2016-05-24)

• 引入ie-only混入函数。[Kevin Bieri]

1.3.0 (2016-05-20)

• 扩展列表组混入接口以配置悬停颜色。[Kevin Bieri]

• 添加新变量 $color-content-background。[mathias.leimgruber]

• 引入叠加混入。[Kevin Bieri]

• 扩展 floatgrid 以 by-index 指令。[Kevin Bieri]

1.2.0 (2016-03-30)

• 引入水平定义列表混入。[Kevin Bieri]

• 支持文本区域的响应式。[Kevin Bieri]

• 引入肖像混入。[Kevin Bieri]

• 支持输入字段的响应式。[Kevin Bieri]

• 引入活动列表组项目混入。[Kevin Bieri]

1.1.0 (2016-03-03)

• 引入进度条。[Kevin Bieri]

• 将图像缩放注册为动态 SCSS 资源。[Kevin Bieri]

• 添加标签元素混入。[elioschmutz]

• 引入反转链接颜色。应用蓝莓配色方案。[Kevin Bieri]

• 更新 font-awesome 到 4.5.0。[jone]

• 为旧版支持添加网格系统的 width-full 功能类。[Kevin Bieri]

• 引入浮动网格系统。[Kevin Bieri]

• 使用更多模块化和自适应混入，为构建主题提供基础。已弃用的变量仍然可用，但将在下一个主要版本中删除。因此，请使用新的变量集进行进一步样式化。[Kevin Bieri]

1.0.3 (2015-11-17)

• 更改收藏/主题图标以避免冲突。[jone]

• 添加 OpenOffice MIME 类型图标。[jone]

1.0.2 (2015-10-28)

• 为 solr flairs 提供MIME 类型图标。[jone]

1.0.1 (2015-10-26)

• 删除搜索结果中文件的重叠图标。[jone]

1.0.0 (2015-09-30)

• 初始实现。[jone]