Grav 主题教程

Grav 是一个现代化的 CMS（内容管理系统），它使用 MarkDown 和 YAML 作为内容和配置文件的格式，因此非常适合程序员和写作爱好者。

本文将介绍如何使用 Grav 来创建一个自定义主题。我将使用 OnePress 主题作为例子，这是一个现代化的单页主题，适合用于展示产品或服务信息。

1. 安装 OnePress 主题

首先，我们需要安装 OnePress 主题。在 Grav 的根目录下，打开终端（Terminal）并执行以下命令：

bin/gpm install onepress

这将下载并安装 OnePress 主题。

2. 创建一个子主题

为了让我们可以在不影响 OnePress 主题的情况下自定义样式，我们将创建一个子主题。打开终端并执行以下命令：

cd user/themes
mkdir mytheme
cd mytheme
touch theme.yaml

这将在 user/themes 目录下创建 mytheme 子目录，并在其中创建一个空的 theme.yaml 文件。

3. 配置子主题

现在，我们需要在 theme.yaml 文件中设置一些配置，以便 Grav 能够识别和使用我们的子主题。以下是一个示例的配置文件，其中包含了一些必要的配置项:

enabled: true
inherits: onepress
form:
  validation: true
  blueprints: /themes/onepress/blueprints.yaml

• enabled: true 表示该主题已启用。
• inherits: onepress 表示我们的子主题继承了 OnePress 主题。
• form 配置项是为了让我们可以在 Grav 后台设置一些选项。validation 表示表单验证已开启，blueprints 指定了默认的蓝图文件。

4. 编写模板文件

现在，我们需要创建一些模板文件来自定义主题的外观和功能。以下是一个基本的目录结构，其中包含了一些必要的文件：

user/themes/mytheme/
│   theme.yaml
│
└───templates
│   │   error.html.twig
│   │   form.html.twig
│   │   item.html.twig
│   │   list.html.twig
│   │   modular.html.twig
│   │   navigation.html.twig
│   │   page.html.twig
│   │   partials.html.twig
│   │   search.html.twig
│   │   sidebar.html.twig
│   
└───blueprints
│   │   form.yaml
│   │   modular.yaml
│
└───assets
    └───css
        │   custom.css

Grav 使用 Twig 模板语言来渲染页面。具体的模板文件详细说明请参考 官方文档。在本教程中，我们只介绍其中的一部分，以便展示如何自定义样式。

在 templates 目录下，我们需要创建以下文件：

• page.html.twig：用于显示页面的内容。
• modular.html.twig：用于显示模块的内容。
• partials.html.twig：通用的分块模板，用于显示头部、尾部、导航等内容。
• sidebar.html.twig：用于显示侧边栏的内容。
• navigation.html.twig：用于显示导航菜单的内容。

在 assets/css 目录下，我们可以创建一个 custom.css 文件来覆盖 OnePress 主题默认的样式。

5. 自定义 CSS 样式

在 custom.css 文件中，我们可以添加自定义样式来覆盖 OnePress 主题默认的样式。以下是一个示例的样式表：

body {
   background: #f5f5f5;
   color: #333333;
   font-family: 'Helvetica Neue',Helvetica,sans-serif;
}

a {
   color: #385998;
}

/* 覆盖默认的 OnePress 样式 */
.breadcrumb {
   display: none;
}

.breadcrumb + h1 {
   margin-top: 0;
}

.btn-primary {
   background-color: #385998;
}

/* 自定义样式 */
.custom-header {
   background-color: #ffffff;
   padding: 30px;
   text-align: center;
}

.custom-header h1 {
   font-size: 60px;
   margin-top: 0;
   color: #385998;
}

.custom-header p {
   font-size: 24px;
   color: #333333;
}

6. 编辑模板文件

编辑 page.html.twig 文件以实现自定义样式。以下是一个示例：

{% extends 'partials/base.html.twig' %}

{% block content %}
   <div class="custom-header">
      <h1>{{ page.title }}</h1>
      <p>{{ page.content }}</p>
   </div>
   <div class="container">
      {{ page.content|raw }}
   </div>
{% endblock %}

{% block javascripts %}
   <script>
      alert("Hello, Grav!");
   </script>
{% endblock %}

7. 更新配置文件

最后，我们需要更新 theme.yaml 文件以指定 Grav 使用我们的子主题：

enabled: true
inherits: onepress
form:
   validation: true
   blueprints: /themes/onepress/blueprints.yaml

将 inherits 配置项的值设置为我们的子主题名称：

enabled: true
inherits: mytheme
form:
   validation: true
   blueprints: /themes/onepress/blueprints.yaml

现在，我们可以在 Grav 后台中选择我们的子主题，并在页面上看到自定义样式的效果。

结论

本文介绍了如何使用 Grav 来创建自定义主题。我们可以使用 Twig 模板语言来渲染页面，使用 YAML 和 MarkDown 来管理内容和配置文件。我们还学习了如何使用 CSS 样式来覆盖默认样式，以及如何在页面上添加 JS 脚本。