目录
  1. WIKI教程
  2. 学习Grav
  3. Grav - 主题定制( Theme Customization)

Grav - 主题定制( Theme Customization)

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

自定义CSS

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

custom.css 

body a {
   color: #FFFF00;
}

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

Custom 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。 这是选择这种方式来定制主题的主要缺点。 这可以通过使用主题继承来解决。

主题继承

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

  • 要存储新主题，请创建名为mytheme/ inside /user/themes/ folder的新文件夹。

  • 接下来，您需要在新创建的/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

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

它使用以下设置 -

  • 首先复制放在antimatter/scss/文件夹中的template.scss文件，然后将其粘贴到mytheme/scss/文件夹中。 此文件将包含各种文件的所有@import调用，如template/_custom.scss和子文件。

  • load-path指向包含大量SCSS文件的antimatter/scss/文件夹。 要运行SCSS编译器，需要为其提供load-path to it as shown below. 

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

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

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

<上一篇.Grav - 资产经理( Asset Manager)
Grav - 插件基础知识( Plugin Basics).下一篇>
↑回到顶部↑
WIKI教程 @2018