Grav-主题基础

Grav是一个高效的平面文件CMS平台，通过使用Markdown格式，Grav允许您快速轻松地构建并扩展网站。Grav主题是一种模板，帮助用户更轻易地自定义网站外观及交互。

安装Grav主题

要开始使用Grav主题，首先确保您已安装Grav。您可以跟着Grav文档操作进行安装。以下是如何安装Grav主题的步骤：

1. 下载主题文件并解压缩。
2. 将主题文件添加到Grav的/user/themes/文件夹中。
3. 打开Grav主题设置文件(/user/config/themes.yaml)并激活您的新主题。

Grav主题结构

Grav主题是一个包含各种文件和目录的文件夹。它可以包括模板文件夹、CSS和JavaScript文件、图片和其他资源。这些文件和文件夹的命名和组织方式与Grav的其他部分有很大不同。以下是Grav主题中的一些基本文件和文件夹：

• blueprints 文件夹包含主题的配置文件。可以指定主题的参数、区块等。
• templates 文件夹包含模板文件。这些文件指定了网站的不同页面类型的布局、样式和内容。
• css 文件夹包含网站的CSS样式表。
• js 文件夹包含网站的JavaScript文件。
• images 文件夹包含图片和其他资源。

主题结构的目录结构基于Grav页面的路由结构。

Grav主题模板

Grav主题模板是主题中最重要的部分之一。主题模板确定了Grav站点的不同页面的布局和样式。Grav模板使用Twig模板引擎来把模板和数据渲染成HTML页面。

Grav提供了一些内置的Twig变量和过滤器，以帮助您从Grav站点和页面中提取所需的数据。以下是一些最常用的Twig变量和过滤器：

• grav.page.header.title - 获取页面的标题。
• grav.page.content - 获取页面的内容。
• grav.theme.logo.url - 获取主题的logo URL。
• |markdown - 将Markdown格式转换为HTML格式。

Grav主题区块

Grav主题区块是一种重复使用的UI组件，可以在不同的页面中重复使用。它可以包含明确的HTML和Twig代码以为DIY提供灵活的制作方式。

Grav主题中的区块以特定格式声明在配置文件中。例如：

blocks:
    - location: banner
      title: Banner
      class: banner
      fields:
        . . .

在模板文件中，可以使用Twig模板引擎来渲染区块代码。例如：

{% for block in page.header.blocks if block.location == 'banner' %}
    <div class="{{ block.class }}">
        {{ block.content }}
    </div>
{% endfor %}

总结

Grav主题是将网站设计视觉和互动分离的方式。通过使用Grav主题，用户可以轻松地改变他们网站的整个外观，而不需要修改任何的Grav门面。因此，程序员可以专注于编写逻辑而不必担心网页设计问题。