Grav - 主题定制

本章我们将学习主题定制。有多种方法可以定制您的主题。Grav 提供了许多功能和一些实用程序来轻松定制您的主题。

自定义 CSS

您可以提供您自己的custom.css文件来定制您的主题。Antimatter 主题通过使用资源管理器引用css/custom.css文件。如果找不到对 CSS 文件的引用，则资源管理器不会将引用添加到 HTML。在 Antimatter 的css/文件夹中创建 CSS 文件将覆盖默认 CSS。例如：

custom.css

body a {
   color: #FFFF00;
}

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

自定义 SCSS/LESS

提供自定义 CSS 文件的另一种方法是使用custom.scss文件。SCSS（语法高效样式表）是一个 CSS 预处理器，它允许您通过使用运算符、变量、嵌套结构、导入、部分和混合器来高效地构建 CSS。Antimatter 使用 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 都将被覆盖。这是选择这种主题定制方式的主要缺点。这可以通过使用主题继承来解决。

主题继承

主题继承是修改或定制主题的最佳方法，可以通过一些设置来实现。基本思想是将主题定义为您从中继承的基础主题，并且只能修改某些部分，其余部分由基础主题处理。使用主题继承的优点是，每当更新基础主题时，定制的继承主题都不会直接受到影响。为此，您需要遵循以下步骤。

要存储您的新主题，请在/user/themes/文件夹内创建一个名为mytheme/的新文件夹。
接下来，您需要在新建的/user/themes/mytheme/文件夹下创建一个名为mytheme.yaml的新主题 YAML 文件，内容如下：

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:选项以将您的默认主题更改为新主题，如下所示：

pages:
   theme: mytheme

现在创建了新主题，Antimatter 将成为这个新mytheme主题的基础主题。如果要修改特定的 SCSS，我们需要配置 SCSS 编译器，以便它首先查找您的mytheme主题，其次查找 Antimatter 主题。

它使用以下设置：

首先复制位于antimatter/scss/文件夹中的template.scss文件，并将其粘贴到mytheme/scss/文件夹中。此文件将包含对各种文件（如template/_custom.scss和子文件）的所有@import调用。
load-path指向包含大量 SCSS 文件的antimatter/scss/文件夹。要运行 SCSS 编译器，您需要向其提供load-path，如下所示。

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

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

更改自定义 SCSS 文件后，所有 SCSS 文件都将自动重新编译到位于mytheme/css-compiled/文件夹下的template.css中，然后 Grav 将准确地引用它。

打印页面