HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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。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 文件将自动重新编译到 template.css 中，该文件位于 mytheme/css-compiled/ 文件夹下，然后 Grav 准确引用此文件。

❮ 上一节 下一节 ❯