📌  相关文章
📜  Grav-主题基础

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

主题控制着Grav网站的外观。 Grav中的主题是使用功能强大的Twig Templating引擎构建的。

内容页面和树枝模板

您创建的页面通过名称或通过设置页面的模板标题变量来引用特定的模板文件。建议使用页面名称以简化维护。

安装GRAV基础包后，你会发现在用户/页/ 01.home文件夹中的文件defauld.md。文件的名称，即default，告诉Grav该页面应该使用放置在theme / / templates文件夹内的树枝模板default.html.twig呈现。

例如，如果您有一个名为contact.md的文件，则它将使用twig模板作为themes / /templates/contact.html.twig呈现。

主题组织

在以下各节中，我们将讨论主题组织，即主题组织的定义，配置等。

定义和配置

有关主题的信息将在user / themes / antimatter / blueprints.yaml文件中定义，并且可选提供要在“管理”面板中使用的表单定义。您将在user / themes / antimatter / blueprints.yaml文件中看到Antimatter theme的以下内容。

name: Antimatter
version: 1.6.0
description: "Antimatter is the default theme included with **Grav**"
icon: empire
author:
   name: Team Grav
   email: devs@getgrav.org
   url: http://getgrav.org
homepage: https://github.com/getgrav/grav-theme-antimatter
demo: http://demo.getgrav.org/blog-skeleton
keywords: antimatter, theme, core, modern, fast, responsive, html5, css3
bugs: https://github.com/getgrav/grav-theme-antimatter/issues
license: MIT

form:
   validation: loose
   fields:
      dropdown.enabled:
         type: toggle
         label: Dropdown in navbar
         highlight: 1
         default: 1
         options:
            1: Enabled
            0: Disabled
         validate:
            type: bool

为了使用主题配置选项，您需要在名为user / themes / / .yaml的文件中提供默认设置。

例

enable: true

主题和插件事件

主题通过插件架构与Grav交互的能力是Grav的另一个强大功能。为此，只需创建user / themes / / .php （例如，默认的Antimatter主题为antimatter.php ）文件，然后使用以下格式。

 ['onThemeInitialized', 0]
      ];
   }
   public function onThemeInitialized() {
      if ($this->isAdmin()) {
         $this->active = false;
         return;
      }
      
      $this->enable([
         'onTwigSiteVariables' => ['onTwigSiteVariables', 0]
      ]);
   }
   public function onTwigSiteVariables() {
      $this->grav['assets']
         ->addCss('plugin://css/mytheme-core.css')
         ->addCss('plugin://css/mytheme-custom.css');

      $this->grav['assets']
         ->add('jquery', 101)
         ->addJs('theme://js/jquery.myscript.min.js');
   }
}

范本

Grav主题的结构没有设置规则，只是每个页面类型内容的模板/文件夹中必须有关联的树枝模板。

由于页面内容和树枝模板之间的紧密联系，因此最好根据下载页面中提供的Skeleton软件包创建一般主题。

假设您要在主题中支持模块化模板，则必须创建模块化/文件夹并将树枝模板文件存储在其中。如果要支持表单，则应创建表单/文件夹并在其中存储表单模板。

蓝图

为了为每个模板文件定义选项和配置形式，使用了blueprints /文件夹。这些将无法通过“管理员面板”进行编辑，可以选择使用。没有蓝图文件夹，该主题功能齐全。

SCSS /无损/ CSS

如果你想发展与SASS或更少的网站，那么你必须创建在用户的子文件夹/主题/ / SCSS /或更少/如果你想少用CSS /文件夹一起。

对于从SASS或LESS编译的自动生成的文件，使用css-compiled /文件夹。在Antimatter主题中，使用SASS的scss变体。

请按照以下步骤在计算机中安装SASS。

  • 在主题的根目录下，键入下面给出的命令以执行scss shell脚本。

$ ./scss.sh
  • 键入以下命令以直接运行它。
$ scss --sourcemap --watch scss:css-compiled

css-compiled /将包含所有已编译的scss文件，并且css文件将在主题内生成。

其他资料夹

建议在用户/主题/ /文件夹中为主题中使用的任何图像，字体和JavaScript文件创建单独的image /，fonts和js /文件夹。

主题范例

到目前为止，我们已经讨论了Antimatter主题的整体文件夹结构，如下所示。

Grav主题基础