开发主题

• 主题信息文件
• 版本文件
• 主题预览图片
• 主题定制
  • 资产编译器变量
• 主题依赖
• Localization
  • 本地化目录和文件结构

主题目录可以包括theme.yaml,version.yaml 和assets/images/theme-preview.png 文件。这些文件对于本地开发是可选的，但对于在 Winter CMS Marketplace 上发布的主题是必需的。

#主题信息文件

主题信息文件theme.yaml 包含主题描述、作者姓名、作者网站URL等一些信息。该文件应放在主题根目录中：

📂 themes
 ┗ 📂 example-theme
   ┗ 📜 theme.yaml    <-- Theme information file

支持以下字段theme.yaml 文件：

主题信息文件示例：

name: "Winter CMS Demo"
description: "Demonstrates the basic concepts of the frontend theming."
author: "Winter CMS"
homepage: "https://wintercms.com"
code: "demo"

#版本文件

主题版本文件version.yaml 定义当前主题版本和更改日志。该文件应放在主题根目录中：

📂 themes
 ┗ 📂 example-theme
   ┗ 📜 version.yaml    <-- Theme version file

文件格式如下：

"v1.0.1": Theme initialization
"v1.0.2": Added more features
"v1.0.3": Some features are removed

#主题预览图片

主题预览图像用于后端主题选择器。图像文件theme-preview.png 应该放在主题的assets/images 目录：

📂 themes
 ┗ 📂 example-theme
   ┗ 📂 assets
     ┗ 📂 images
       ┗ 📜 theme-preview.png    <-- Theme Preview Image

图片宽度应至少为 600 像素。理想的纵横比为 1.5，例如 600x400 像素。

#主题定制

主题可以通过定义一个来支持配置值form 键入主题信息文件。此键应包含配置数组或对表单字段定义文件的引用，请参阅表单字段 了解更多信息。

下面举例说明如何定义一个名为site_name:

name: My Theme
# [...]

form:
    fields:
        site_name:
            label: Site name
            comment: The website name as it should appear on the frontend
            default: My Amazing Site!

NOTE: 如果使用具有数组语法的嵌套字段 (contact[name],contact[email 等）您需要将顶层添加到ThemeData 楷模jsonable 使用以下数组：

\Cms\Models\ThemeData::extend(function ($model) {
    $model->addJsonable('contact');
});

NOTE: 当使用fileupload 主题中的字段，Winter 会自动将字段添加到attachOne 关系。如果要为一个字段使用多个文件上传，请添加multiple: true 字段定义的选项。这会将字段添加到attachMany 关系。

然后可以使用以下任何主题模板访问该值默认页面变量 称为this.theme.

<h1>Welcome to {{ this.theme.site_name }}!</h1>

您也可以在单独的文件中定义配置，其中路径是相对于主题的。以下定义将从文件中获取表单字段config/fields.yaml 主题里面。

name: My Theme
# [...]

form: config/fields.yaml

config/fields.yaml:

fields:
    site_name:
        label: Site name
        comment: The website name as it should appear on the frontend
        default: My Amazing Site!

#资产编译器变量

资产组合使用资产编译器 （通常通过 thh| theme filter) 可以将值传递给支持过滤器，例如 LESS 过滤器。只需指定assetVar 定义表单字段时的选项，值应包含所需的变量名称。

form:
    fields:
        # [...]

        link_color:
            label: Link color
            type: colorpicker
            assetVar: 'link-color'

在上面的示例中，所选颜色值将在 less 文件中可用，如下所示@link-color.假设我们有以下样式表参考：

<link href="{{ ['assets/less/theme.less'] | theme }}" rel="stylesheet">

在里面使用一些示例内容themes/yourtheme/assets/less/theme.less:

a { color: @link-color }

#主题依赖

主题可以通过定义一个依赖于插件require 中的选项主题信息文件，该选项应提供一组被视为要求的插件名称。一个依赖的主题Acme.Blog 和Acme.User 可以像这样定义这个要求：

name: "Winter CMS Demo"
# [...]

require:
    - Acme.User
    - Acme.Blog

首次安装主题时，系统会同时尝试安装所需的插件。

#Localization

主题可以通过放置在lang主题目录的子目录。这些本地化密钥仅在与 Winter 后端交互时自动注册，并且可以用于表单标签，就像插件本地化

NOTE: 翻译前端内容应该用Winter.Translate 插入。

#本地化目录和文件结构

下面是主题的 lang 目录的示例：

📂 themes
 ┗ 📂 example-theme     <-- Theme directory
   ┗ 📂 lang            <-- Localization directory
     ┣ 📂 en            <-- Specific locale directory
     ┃ ┗ 📜 lang.php    <-- Localization file
     ┗ 📂 fr
       ┗ 📜 lang.php

这lang.php 文件应定义并返回任意深度的数组，例如：

<?php return [
    'options' => [
        'website_name' => 'Winter CMS'
    ]
];

然后您可以使用引用键themes.theme-code::lang.key.在上面的示例中，您将用于引用“website_name”本地化密钥的完整语言密钥是themes.acme::lang.options.website_name