📜  Grav-主题自定义

📅  最后修改于: 2020-10-25 05:24:55             🧑  作者: Mango


在本章中,让我们研究主题定制。有几种自定义主题的方法。 Grav提供了许多功能和一些功能来轻松自定义主题。

自定义CSS

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

custom.css

body a {
   color: #FFFF00;
}

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

自定义SCSS / LESS

提供自定义CSS文件的另一种方法是使用custom.scss文件。 SCSS(语法很棒的样式表)是CSS预处理程序,它使您可以通过使用运算符,变量,嵌套结构,导入,局部和混合来有效地构建CSS。反物质是使用SCSS编写的。

为了使用SCSS,您需要SCSS编译器。您可以使用命令行工具和GUI应用程序在任何平台上安装SCSS编译器。反物质使用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主题。

它使用以下设置-

  • 首先复制这是摆在反物质/ 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会准确地引用此文件。