使用 Twig、PHP 和 CSS 构建简单的 Grav CMS 主题

本文首发于 Symfony Station。

介绍

如果您正在阅读本文，您就会知道如今构建面向内容的网站是一件过于复杂的事情。

但是有一个内容管理系统可以让它变得更容易和更简单。对于前端开发人员来说尤其如此。这是 Grav CMS。

我将为 grav.mobileatom.net 定制一个主题，这是我的主要业务网站。你猜怎么着？它不会涉及任何人工智能。

写这篇文章将是我学习如何做到这一点并帮助社区的方式。你看不到很多关于 Grav 的文章。

我们将介绍：

(1) 组织/文件结构
(2) 树枝模板
(3)CSS
(4) Twig 功能
(5) 定制

如果你不知道，GravCMS 是众多基于 Symfony 的 CMS 之一。

本文的技术细节大部分来自 Grav 文档。正如我刚才所说，我正在自己学习这个。

格拉夫说：

“Grav 的核心是围绕内容文件夹和 Markdown 文件的概念构建的。这些文件夹和文件会自动编译为 HTML 并缓存以提高性能。

其页面可通过与支撑整个 CMS 的文件夹结构直接相关的 URL 访问。通过使用 Twig 模板渲染页面，您可以完全控制网站的外观，几乎没有任何限制。”

好吧，我们来看看主题。

严重主题

Grav 中的主题是使用 Twig 模板构建的，您可以在我的文章《Twig：高级 PHP 模板语言终极指南》中了解有关 Twig 的更多信息。另外，我们将在这里讨论一些细节。

正如我在那里所写的，Twig 是一种 PHP 模板语言，可将变量输出到 MVC（模型、视图、控制器）编程中视图的 HTML 中。因此，它有助于您网站前端的结构。

它是由 Fabien Ponticier 创建的，他也创建了 Symfony，因此它在 Grav 中使用也就不足为奇了。

他指出“模板语言可以帮助您编写尊重这种 (MVC) 关注点分离的模板。模板语言应该在提供足够的功能以轻松实现表示逻辑和限制高级功能之间找到良好的平衡。功能以避免业务逻辑削弱您的模板。”

PHP 模板到底是什么？如上所述，它们用于将 PHP 应用程序的视图与其模型和对象分开。

Twig 的主要特点是：

• 快速：Twig 将模板编译为简单的优化 PHP 代码。与常规 PHP 代码相比，开销已降至最低。
• 安全：Twig 有沙箱模式来评估不受信任的模板代码。该模式允许将 Twig 作为模板语言用于用户修改模板设计的应用程序。
• 灵活：Twig 由灵活的词法分析器和解析器提供支持。这种灵活性允许开发人员定义自定义标签和过滤器（稍后会详细介绍）并创建他们独特的 DSL。

最后一些快速说明：

• Twig 模板名称以 .html.twig 结尾。
• 您可以使用 YAML 配置它们。
• 而且它们与普通 CSS 配合得很好。

您通过管理界面在 Grav 中创建的每个页面都会引用 Twig 模板文件。最佳实践是尽可能将模板文件名与页面名称匹配。或者至少是您的内容文件的文件夹结构。

例如，blog.md 将使用 Twig 模板 blog.html.twig

进行渲染

(1)组织/文件结构

好吧，让我们看看 Grav 主题的结构。

每个主题都有一个名为 blueprints.yaml 的定义文件。它还可以为管理面板提供表单定义。

要使用主题定义选项，请在 your_theme_name.yaml 文件中提供默认设置。

在主题根目录中包含一个名为thumbnail.jpg的303x300 jpg。

(2) Twig 模板等

您的 Grav 页面的 Twig 模板应位于 templates/ 文件夹中，其中包含以下子文件夹：

• 表格/
• 模块化/
• 部分/

最佳实践是根据内容来推测主题。这一策略是我如此投资 Grav 的原因之一。页面文件 = Twig 模板。

同样，default.md、blog.md、error.md、item.md、modular.md 等同于 default.html.twig、blog.html.twig 等

您的主题需要一个 css/ 文件夹来存放 CSS。

将 images/、fonts/ 和 js/ 文件夹添加到根目录，以存储自定义资源。

blueprints/ 文件夹将包含前面提到的包含表单定义的文件。

插件通过钩子引入 Grav 主题。

因此，your_theme_name.php 将容纳您的非 Twig 逻辑。

仅供参考，如果您想构建一个商业主题出售给其他人，您还需要这些文件：

• 变更日志.md
• 许可证.md
• README.md
• 截图.jpg
• 缩略图.jpg

基本模板

您只需使用 Grav 的默认 Twig 模板即可获得我的。

但是，最好使用 Twig Extends 标签通过基本模板中的块来定义基本布局。该文件作为base.html.twig 存储在partials/ 子文件夹中。请参阅上图。

在默认模板和其他专用模板中，使用 extends 标签从 base.html.twig 拉入基本布局。

因此，对于使用 Twig 语法的 default.html.twig 文件，您需要编写：

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

{%block content %}
  {{page.content | raw}}
{%endblock%}

第一组代码扩展了包含基本布局的基本模板。

第二个使用新模板的代码覆盖基本模板中的内容。

(3) 主题CSS

接下来让我们看看 Grav 主题的 CSS。有多种方法可以实现它，包括 SCSS。但是，为了保持简单，我将专注于普通 CSS。很短。添加 custom.css 文件并前往城镇。

(4) Twig 功能

让我们快速了解一下 Twig 的工作原理。

Extend 等 Twig 标签控制模板的逻辑。他们告诉 Twig 该怎么做。恕我直言，阻止是最重要的标签。

其他包括：

• 缓存
• 降价
• 脚本
• 风格
• 切换
• 等等

Twig 过滤器对于格式化和操作文本和变量非常有用。

它们包括：

• 日期
• 逃脱
• 加入
• 降低
• 切片
• 等等

函数可以生成内容并实现功能（显然）。它们还可以做一些与过滤器相同的事情。

因此，对于您的模板，请使用满足您独特需求的 Twig 标签、过滤器和函数。

格拉夫的树枝 的标签

除了您选择的标签之外，Grav 还包含自定义 Twig 标签来扩展其功能。

它们包括：

• 降价
• 脚本（例如，您可以引入 JavaScript）
• 风格
• 链接
• 切换
• 延迟（资产加载）
• 抛出（异常）
• 尝试/捕捉
• 渲染（弹性对象）
• 缓存

主题配置

使用 Grav，您可以从 Twig 和 PHP 文件访问主题配置和蓝图信息。您可以通过主题对象来完成此操作，也可以使用具有 PHP 语法的 Grav 插件。

作为最佳实践，不要更改主题的默认 your_theme_name.yaml 文件（参见上图）。在 user/config/themes 文件夹中覆盖它。

最后一点，Twig 也有自定义对象和变量，我们在这里不讨论。请记住，我会保持简单。

资产管理人

Grav 的资源管理器提供了一种灵活的方式来管理 CSS 和 JavaScript 文件。它包括一个资产管道，用于缩小、压缩和内联资产。

它可用，可以在插件事件挂钩中访问，也可以通过 Twig 调用直接在主题中访问。它在 user/config/system.yaml 中有自己的配置文件。

您可以使用 Asset Manager 获得企业级粒度，因此我们在此不会详细介绍。

为了保持简单，我建议使用资产插件（见上图）。从 Grav 管理中心下载。然后根据需要使用它来更新或添加资产。

(5) 定制

所以，我们介绍了构建快速简单的 Grav 主题的方法。设置您的结构，构建 Twig 模板，并根据需要添加 CSS 和 JavaScript。

您已经看到，有多种方法可以使 Grav 主题满足您简单或复杂的需求，但 Grav 提供的特性和功能使其变得更加容易。这就是我自定义网站主题的方式。

主题传承

更简单的方法是使用主题继承。我喜欢这个，因为它与我对 WordPress 和 Drupal 主题所做的类似。

这也是 Grav 定制主题的首选方式。

您定义一个继承自的基本主题。例如默认主题 Quark 或您购买的主题。然后，您添加或编辑您想要自定义的内容，并让基本主题处理其余的事情。

此策略还可以让您更新基本主题，而不会丢失继承主题的自定义内容。

创建继承主题的方法有多种。但同样为了简单起见，让我们看一下手动过程。

创建一个新文件夹-> user/themes/your_theme_name 保存自定义主题。

然后将您要继承的主题中的 YAML 文件复制到新文件夹中。将其命名为 your_theme_name.yaml 并在您看到 Quark 的任何地方切换新主题名称。

接下来，将 users/themes/quark/blueprint.yaml 文件复制到您的 user/themes/your_theme_name 文件夹中。

现在，更改 user/config/system.yaml 文件中的默认主题。

页面：
主题：你的主题名称

最后，要添加高级事件驱动功能，请创建 user/themes/your_theme_name/your_theme_name.php 文件。

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

{%block content %}
  {{page.content | raw}}
{%endblock%}

您现在已经设置了 Grav 的流，以便它首先在 your_theme_name 中查找，然后尝试 Quark。

现在，提供您需要的 CSS、JS 和 Twig 模板修改。

你已经完成了。相当简单。

结论

哇。感谢您阅读整篇文章。

您现在对 Grav 主题有了更多了解':

(1) 组织/文件结构
(2) 树枝模板
(3)CSS
(4) Twig 功能
(5) 定制

考虑使用 Grav 因为它简单，尤其是在自定义主题时。 PHP、Twig、vanilla CSS 和 JS 有什么理由不喜欢呢？您甚至可以在 Markdown 中创建内容。

继续为 Symfonistas 和 Gravinaus 编码！

资源

https://learn.getgrav.org/17/themes

https://twig.symfony.com/

https://twig.symfony.com/doc/3.x/

https://www.drupal.org/docs/contributed-modules/twig-tweak-2x/cheat-sheet

以上是使用 Twig、PHP 和 CSS 构建简单的 Grav CMS 主题的详细内容。更多信息请关注PHP中文网其他相关文章！