README

此包允许您在后台模块中自定义主题包。

功能

完全可定制，预定义任何 SCSS 变量
支持 Bootstrap、Foundation 以及更多
在 Neos 后端更改颜色和字体
添加自定义的 SCSS/CSS 代码
渲染您的 SCSS 文件
不依赖于 Sass 编译器库
额外的 ViewHelper
支持 Google Webfont
添加任何字体（本地、CDN、Google Webfont）
支持 Neos 多站点设置

需求/限制

此包已在 Neos 3.0、3.1 和 3.2 上进行测试
不支持 .sass 样式！仅支持 .scss！

入门指南

在您的站点包中运行 composer require --no-update cm/neos-thememodule
在您的项目中运行 composer update。如果无法安装此包，因为您的站点包不是通过 composer 管理的，您需要在项目根目录中再次运行步骤 1 中的 require。
运行 ./flow doctrine:migrate

登录到您的 Neos 后端，在后台菜单中打开 主题设置

查看 CM.Neos.ThemeModule\Configuration\Settings.yaml.example，其中定义了一些默认值，您可以根据需要轻松覆盖和/或扩展。

根据您的需求调整 Settings.yaml

在 Settings.yaml 中，您必须声明 SCSS 代码和编译后的 CSS 的位置。

CM:
  Neos:
    ThemeModule:
      scss:
        # folder of your scss code
        importPaths: 'resource://Vendor.Site.Package/Private/Styles/'
        # Contains all scss rules and @imports to other files
        mainScssFile: 'Main.scss'
        # Expanded, Nested (default), Compressed, Compact, Crunched
        formatter: 'Leafo\ScssPhp\Formatter\Nested'
        # Output path has to be in Package Public folder
        outputPath: 'resource://Vendor.Site.Package/Public/Styles/'
        outputFilename: 'Main.css'

您可以在 importPaths 和 outputPath 设置中使用 {packageKey}，它将自动替换为当前包键。这是默认值，因此您可能甚至不需要定义它们。

重要：您所有的 SCSS 代码都必须在指定的 importPaths 之下。在 SCSS @import 中使用相对路径到 importPaths 之外的文件夹将失败。

确保您已将此包作为依赖项添加到您的站点包中。这定义了加载顺序，因此您可以通过您的站点包覆盖此包的设置。

如果您在单个 Neos 设置中拥有多个站点，您还可以定义特定于站点的设置

CM:
  Neos:
    ThemeModule:
      scss:
        # your default settings here...

      sites:
        'Vendor.Other.Site':
          scss:
            # override file names for this package
            mainScssFile: 'Application.scss'
            outputFilename: 'app.css'

定义 SCSS 变量

您可以为后端模块定义应可用的 SCSS 变量。

要定义新变量，请将它们添加到您的 Settings.yaml。不要在此包中编辑 Settings.yaml，因为这会破坏更新包的可能性，就像对任何其他包一样。

基本模式，更多详情请参阅 Configuration/Settings.yaml 和 Configuration/Settings.yaml.example

CM:
  Neos:
    ThemeModule:
      scss:
        presetVariables:
          color: # group
            label: 'Your Color Settings'
            type:
              color:
                greyBase:
                  value: '#000000'
                  scssVariableName: '$grey-base'
                  label: 'Grey Base'
                bodyBgColor:
                  value: '#ffffff'
                  scssVariableName: '$body-bg'
                  label: 'Background Color'
                [...]

          font:
            label: 'Your Font Settings'
            type:
              font:
                fontFamilySansSerif:
                  label: 'Font Family Sans Serif'
                  category: 'sans-serif'
                  value:
                    family: 'Arial'
                  fontFallbackValue: 'Helvetica, sans-serif'
                  scssVariableName: '$font-family-sans-serif'
                fontFamilySerif:
                  label: 'Font Family Serif'
                  category: 'serif'
                  value:
                    family: 'Custom Font from CDN'
                    variants:
                      - 'regular'
                  fontFallbackValue: '"Times New Roman", Times, serif'
                  scssVariableName: '$font-family-serif'
                [...]

              textfield:
                fontSizeBase:
                  value: '14px'
                  scssVariableName: '$font-size-base'
                  label: 'Base Font Size in px'
                headingsFontWeight:
                  value: '500'
                  scssVariableName: '$headings-font-weight'
                  label: 'Headings Font Weight'
                [...]

注意

为了能够在您的 SCSS 文件中覆盖定义的 SCSS 变量，变量必须具有值 !default。

定义颜色

要添加带有附加颜色选择器的输入表单，请添加此内容并按需更改

type:
  color: # Possible types are: color, font, textfield
    greyBase: # Name of your scss variable, can be any name if unique
      value: '#000000' # default value
      scssVariableName: '$grey-base' # variable name in your scss file
      label: 'Grey Base' # The label which should be shown in the backend.

定义字体

要添加具有 Google Webfont 和其他附加字体的选择框，请添加此内容并按需更改

type:
  font: # Possible types are: color, font, textfield
    fontFamilySerif:
      label: 'Font Family Serif'
      category: 'serif' # Category to show only fonts of e.g. serif or monospace
      value: # predefined values
        # font family name, must be part of Google Webfonts or defined as font in fontOptions
        family: 'Custom Font from CDN'
        # the font variant which should be choosen, "regular" for fontSource CDN and Local
        variants:
          - 'regular'
      # fallback values which got append to value.family in compiled css
      fontFallbackValue: '"Times New Roman", Times, serif'
      # The scss variable to overwrite. IMPORTANT only scss variables with "!default" will get overwritten
      scssVariableName: '$font-family-serif'

添加字体

您可以在 Settings.yaml 中添加额外的字体，以便在后台中可选择。

在 Settings.yaml 中添加新字体的路径

CM:
  Neos:
    ThemeModule:
      fontOptions:
        items:
          -
            [...]

有四种 fontSource 类型

FONT_SOURCE_SYSTEM Web字体，通常在所有设备上都可用，如字体"Arial"。
FONT_SOURCE_LOCAL 模板公共文件夹中可用的Web字体。
FONT_SOURCE_CDN 如果字体通过页面头部中的<link>标签添加，请使用此功能来获取来自其他字体分发商（如font.com、linotype）的Web字体。
(FONT_SOURCE_GOOGLE) 用于内置的Google Web字体，因此您可能不需要此字体源。

根据所选的字体源，字体将通过@font-face规则添加到您的CSS中（FONT_SOURCE_LOCAL），或者为FONT_SOURCE_CDN和FONT_SOURCE_GOOGLE类型添加一个标签到您的prototype(Neos.Neos:Page)中的head.cmfont。

字体选项也可以按站点设置。

FONT_SOURCE_SYSTEM的配置

  # a system font
  -
    family: 'Arial'
    category: 'sans-serif'
    fontSource: FONT_SOURCE_SYSTEM

FONT_SOURCE_LOCAL的配置

  # a local font
  -
    family: 'My Local Custom Font'
    category: 'sans-serif'
    fontSource: FONT_SOURCE_LOCAL
    variants:
      - 'regular'
      - '700'
      - '700italic'
    files: # Define your paths for each font variant
      regular:
        - 'resource://CM.Theme.PurpleHeart/Public/Fonts/my-font.ttf'
        - 'resource://CM.Theme.PurpleHeart/Public/Fonts/my-font.woff'
        - 'resource://CM.Theme.PurpleHeart/Public/Fonts/my-font.woff2'
      700: 'resource://CM.Theme.PurpleHeart/Public/Fonts/my-font-700.woff2'
      700italic: 'resource://CM.Theme.PurpleHeart/Public/Fonts/my-font-700-italic.woff2'

FONT_SOURCE_CDN的配置

  # Fonts from e.g. fonts.com, linotype, adobe, ... if they are using a <link> tag
  # to include the font on your page.
  # If the font is added via JS or any other methode use the "FONT_SOURCE_SYSTEM" to
  # add the font and add your css/js by yourself
  -
    family: 'Custom Font from CDN'
    category: 'serif'
    fontSource: FONT_SOURCE_CDN
    variants:
      - 'regular' # has to be regular
    files:
      regular: '//your.custom-font-cdn.tld/css?family=the+font+family' # array key has to be regular

定义一个文本框

要添加常规输入表单，请添加此代码并根据需要更改它

type:
  textfield: # Possible types are: color, font, textfield
    fontSize: # Name of your scss variable, can be any name if unique
      value: '16px' # default value
      scssVariableName: '$font-size' # variable name in your scss file
      label: 'Font Size' # The label which should be shown in the backend.

颜色值检查器验证器：十六进制、rgb、rgba

将验证器添加到节点属性中，如下所示

'Neos.NodeTypes:Column':
  properties:
    backgroundColor:
      type: string
      validation:
        '../../CM.Neos.ThemeModule/JavaScript/Inspector/Validators/ColorValidator': []

目前存在一个bug，需要添加../../，此问题已报告。请参阅github问题#1562

有效值包括

十六进制：#fff 或 #ffffff
rgb：rgb(255,255,255)
rgba：rgba(255,255,255,0.3)

感谢您对

@kdambekalns
施瓦贝AG，瑞士穆滕茨
@Sebobo

贡献

我强烈鼓励每个人都为缺失的功能、改进或错误修复提供PR。

许可证

许可协议：GPLv3+

cm / neos-thememodule

维护者

详细信息