设计样式¶

在 XF2 中，我们引入了一种全新的方式来创建和编辑样式，称为 "设计师模式"。 设计师模式是一个 CLI 工具集合，允许您直接在文件系统中修改样式中的某些模板。 它还输出各种 metadata 和样式属性信息，这对版本控制和协同合作非常有帮助。

开启设计师模式¶

开启设计师模式的第一步是在 config.php 中激活它。

$config['designer']['enabled'] = true;

您也可以选择为设计器模式文件指定不同的路径存在于文件系统中。 以下是默认路径。 要改变路径，请在你的 config.php 中添加以下内容，并相应修改路径。

$config['designer']['basePath'] = 'src/styles';

开启样式设计师模式¶

设计师模式必须为每个样式明确激活。 我们通过使用 CLI 和指定样式的样式 ID，并选择 "设计师模式 ID" 来激活样式的设计师模式：

设计师模式 ID 是未来与设计师模式相关的命令中使用的标识符。 一旦开启，当前修改后的样式组件将被导出到 [basePath]/[designer_mode_id] 目录中。

当开启该样式的设计师模式时，如果该目录已经存在，你会有一个选择，即我们是否应该从样式中复盖该目录的当前内容，或者是否应该从该目录的当前内容中复盖当前样式。

关闭样式设计师模式¶

要关闭某个样式的设计师模式，您只需运行以下 CLI 命令。

默认情况下，这将在文件系统中保留设计师模式的输出副本。 要删除数据，你可以用 --clear 选项运行同样的命令。

什麽是输出，在哪里输出？¶

重要的是要记住，XF 中的样式只由在该样式中 修改的内容 组成。 这意味着设计师模式的输出将只包括在样式中被修改的内容。 在父样式中被修改的模板和样式属性不会被输出。

模板¶

模板将被输出到 [basePath]/[designer_mode_id]/templates 目录中。 在该目录中，您可以为每种类型（如 admin、email 和 public）设置另一个目录。

模板将以 HTML 格式输出，并可在文件系统中直接编辑。 在文件系统上所做的更改会在该模板加载到页面时被导入并编译。 同样，您也可以通过从文件系统中删除模板（如果它以前被修改过）来恢复它。

样式属性和群组¶

样式属性和群组将被输出到 [basePath]/[designer_mode_id]/style_properties 和 [basePath]/[designer_mode_id]/style_property_groups 目录下。 它们以 JSON 格式导出，作为一种有用的方式，通过版本控制系统监控这些文件的变化。

不建议直接修改这些文件，因为对它们的修改 不会 像模板那样自动导入。

修改特定模板¶

考虑到一个样式只代表在该样式中被修改的组件，当设计师模式开启时，文件系统也将只包含在该样式中被修改的组件。 这样就无法输出每个模板和样式属性的有效版本。

要将一个模板标记为样式中已修改的，您可以通过在 Admin CP 中编辑它的常规方式进行。 如果激活了设计器模式，在 Admin CP 中修改的模板和样式属性将自动写入文件系统。 然而，使用 CLI 命令来修改或 "touch" 一个模板可能会更方便。

只要指定的模板存在于父样式或主样式中，它就会被复制到当前样式中，并输出到文件系统中。 然后你可以直接在文件系统中修改模板。

如果你想在你的样式中创建一个完全自定义的模板（在树状结构中的任何其他样式中都不存在），你可以使用同样的命令，但你只需要传递 --custom 选项：

其他有用的命令¶

还有其他一些与设计师模式有关的有用命令：

从数据库中导出¶

当设计师模式被激活时，这个命令通常会自动运行，但如果出于某种原因，你想用当前数据库中的内容复盖文件系统副本，那麽你可以运行以下命令：

也可以只导出特定的类型，例如 xf-designer:export-templates。

从文件系统导入¶

这条命令将用文件系统中的内容复盖数据库中的样式副本：

也可以只导入特定的类型，例如 xf-designer:import-templates。

同步模板¶

该命令类似于导入模板（见上文），但它不会复盖所有内容，而只会导入模板，并在 metadata 发生变化时重新编译。 它还会相应地应用版本号更新。

还原模板¶

这个命令可以用来恢复模板，有效地从当前样式中删除自定义版本。

也可以通过从文件系统中删除模板来触发还原。