Grav - 主题定制

本章我们来学习一下主题定制。有多种方法可以自定义您的主题。Grav 提供了许多特性和一些功能来轻松定制您的主题。

自定义CSS

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

自定义.css

body a {
   color: #FFFF00;
}

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

自定义 SCSS/LESS

提供自定义 CSS 文件的另一种方法是使用custom.scss文件。SCSS （Syntropically 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 都将被覆盖。这是选择这种方式来定制主题的主要缺点。这可以通过使用主题继承来解决。

主题传承

主题继承是修改或自定义主题的最佳方式，可以通过一些设置来完成。基本思想是，主题被定义为您继承的基本主题，并且只能修改一些位，其余的事情由基本主题处理。使用主题继承的优点是，每当基础主题更新时，自定义的继承主题不会受到直接影响。为此，您需要执行以下步骤。

  • 要存储新主题，请在/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文件编辑页面中： theme:将默认主题更改为新主题的选项，如下所示。

pages:
   theme: mytheme

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

它使用以下设置 -

  • 首先复制位于antimatter/scss/文件夹中的template.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 文件将自动再次编译到位于mytheme/css-compiled/文件夹下的template.css中，然后 Grav 准确地引用它。