Grav - 主题定制

在本章中，让我们研究一下主题定制.有几种方法可以自定义主题. Grav提供了许多功能和一些功能，可以轻松自定义主题.

自定义CSS

您可以提供自己的 custom.css 文件来自定义您的主题. Antimatter主题通过使用 Asset Manager 引用 css/custom.css 文件.如果未找到对CSS文件的引用，则 Asset Manager 将不会添加对HTML的引用.在Antimatter的 css/文件夹中创建CSS文件将覆盖默认的CSS.例如 :

custom.css

body a {
   color: #FFFF00;
}

默认链接颜色被覆盖并设置为黄色.

自定义SCSS/LESS

另一种提供自定义CSS文件的方法是使用 custom.scss 文件.  SCSS(Syntactically Awesome Style Sheets)是一个CSS预处理器，它允许您通过以下方式有效地构建CSS使用运算符，变量，嵌套结构，导入，部分和混合.反物质是使用SCSS编写的.

为了使用SCSS，您需要SCSS编译器.您可以使用命令行工具和GUI应用程序在任何平台上安装SCSS编译器. Antimatter使用 scss/文件夹放置所有 .scss 文件.编译后的文件存储在 css-compiled/文件夹中.

应该监视 SCSS 文件是否有任何可以完成的更新通过使用以下命令 :

scss --watch scss:css-compiled

上面的命令告诉SCSS编译器监视名为scss的目录，每当更新 css-compiled 文件夹时，SCSS编译器都应编译它.

您可以将自定义SCSS代码保存在 scss/template/_custom.scss 文件中.将代码保存在此文件中有很多优点.

• 编译SCSS文件和其他CSS文件的任何更新进入 css-compiled/template.css 文件

• 您可以访问主题中使用的任何SCSS并使用可用的所有变量和混合.

• 为了便于开发，您可以访问标准SCSS的所有功能和特性.

_custom.scss 文件的示例如下所示 :

body {
   a {
      color: darken($core-accent, 20%);
   }
}

升级主题时，将覆盖所有自定义css.这是选择这种方式来定制主题的主要缺点.这可以通过使用主题继承来解决.

主题继承

主题继承是修改或修改的最佳方式自定义主题，可以通过一些设置完成.基本思想是将主题定义为您继承的基本主题，并且只能修改一些位，其余部分由基本主题处理.使用主题继承的优点是，只要更新基本主题，定制的继承主题就不会直接受到影响.为此，您需要按照以下步骤操作.

• 要存储新主题，请创建名为的新文件夹mytheme/在/user/themes/文件夹中.

• 接下来你需要创建一个名为YAML的新主题文件 mytheme.yaml 在新创建的/user/themes/mytheme/文件夹下，包含以下内容.

streams:
   schemes:
      theme:
         type: ReadOnlyStream
         prefixes:
            '':
               - user/themes/mytheme
               - user/themes/antimatter

• 在/user/themes/mytheme/文件夹下创建一个名为 blueprints.yaml 的YAML文件，其中包含以下内容.

name: MyTheme
version: 1.0.0
description: "Extending Antimatter"
icon: crosshairs
author:
   name: Team Grav
   email: devs@getgrav.org
   url: http://getgrav.org

我们现在将了解如何定义由基本元素组成的主题 blueprints.yaml .可以为表单定义提供更多详细信息以控制表单功能.可以检查 blueprints.yaml 文件以获取更多详细信息.

• 在您的 user/config/system.yaml 文件编辑页面:主题:选项，将默认主题更改为新主题，如下所示.

pages:
   theme: mytheme

现在新主题已创建，反物质将成为此新 mytheme 主题的基本主题.如果你想修改特定的SCSS，我们需要配置SCSS编译器，使它首先看你的 mytheme 主题，其次是反物质主题.

它使用以下设置 :

• 首先复制 template.scss 文件，该文件位于 antimatter/scss/文件夹并将其粘贴到 mytheme/scss/文件夹中.此文件将包含对 template/_custom.scss 和子文件等各种文件的所有 @import 调用.

• 加载路径指向 antimatter/scss/文件夹，其中包含大量SCSS文件.要运行SCSS编译器，您需要提供加载路径，如下所示.

scss --load-path ../antimatter/scss --watch scss:css-compiled

• 现在，在 mytheme/scss/template/下创建一个名为 _custom.scss 的文件.此文件将包含您的所有修改.

更改自定义SCSS文件后，将自动将所有SCSS文件再次编译为 template.css 位于 mytheme/css-compiled/文件夹下，然后Grav会准确地引用它.