本文首發(fā)于 Symfony Station。

介紹

如果您正在閱讀本文，您就會知道如今構(gòu)建面向內(nèi)容的網(wǎng)站是一件過于復(fù)雜的事情。

但是有一個內(nèi)容管理系統(tǒng)可以讓它變得更容易和更簡單。對于前端開發(fā)人員來說尤其如此。這是 Grav CMS。

我將為 grav.mobileatom.net 定制一個主題，這是我的主要業(yè)務(wù)網(wǎng)站。你猜怎么著？它不會涉及任何人工智能。

寫這篇文章將是我學(xué)習(xí)如何做到這一點并幫助社區(qū)的方式。你看不到很多關(guān)于 Grav 的文章。

我們將介紹：

(1) 組織/文件結(jié)構(gòu)
(2) 樹枝模板
(3)CSS
(4) Twig 功能
(5) 定制

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

本文的技術(shù)細(xì)節(jié)大部分來自 Grav 文檔。正如我剛才所說，我正在自己學(xué)習(xí)這個。

格拉夫說：

“Grav 的核心是圍繞內(nèi)容文件夾和 Markdown 文件的概念構(gòu)建的。這些文件夾和文件會自動編譯為 HTML 并緩存以提高性能。

其頁面可通過與支撐整個 CMS 的文件夾結(jié)構(gòu)直接相關(guān)的 URL 訪問。通過使用 Twig 模板渲染頁面，您可以完全控制網(wǎng)站的外觀，幾乎沒有任何限制?！?/p>

好吧，我們來看看主題。

嚴(yán)重主題

Grav 中的主題是使用 Twig 模板構(gòu)建的，您可以在我的文章《Twig：高級 PHP 模板語言終極指南》中了解有關(guān) Twig 的更多信息。另外，我們將在這里討論一些細(xì)節(jié)。

正如我在那里所寫的，Twig 是一種 PHP 模板語言，可將變量輸出到 MVC（模型、視圖、控制器）編程中視圖的 HTML 中。因此，它有助于您網(wǎng)站前端的結(jié)構(gòu)。

它是由 Fabien Ponticier 創(chuàng)建的，他也創(chuàng)建了 Symfony，因此它在 Grav 中使用也就不足為奇了。

他指出“模板語言可以幫助您編寫尊重這種 (MVC) 關(guān)注點分離的模板。模板語言應(yīng)該在提供足夠的功能以輕松實現(xiàn)表示邏輯和限制高級功能之間找到良好的平衡。功能以避免業(yè)務(wù)邏輯削弱您的模板?！?/p>

PHP 模板到底是什么？如上所述，它們用于將 PHP 應(yīng)用程序的視圖與其模型和對象分開。

Twig 的主要特點是：

• 快速：Twig 將模板編譯為簡單的優(yōu)化 PHP 代碼。與常規(guī) PHP 代碼相比，開銷已降至最低。
• 安全：Twig 有沙箱模式來評估不受信任的模板代碼。該模式允許將 Twig 作為模板語言用于用戶修改模板設(shè)計的應(yīng)用程序。
• 靈活：Twig 由靈活的詞法分析器和解析器提供支持。這種靈活性允許開發(fā)人員定義自定義標(biāo)簽和過濾器（稍后會詳細(xì)介紹）并創(chuàng)建他們獨特的 DSL。

最后一些快速說明：

• Twig 模板名稱以 .html.twig 結(jié)尾。
• 您可以使用 YAML 配置它們。
• 而且它們與普通 CSS 配合得很好。

您通過管理界面在 Grav 中創(chuàng)建的每個頁面都會引用 Twig 模板文件。最佳實踐是盡可能將模板文件名與頁面名稱匹配?；蛘咧辽偈悄膬?nèi)容文件的文件夾結(jié)構(gòu)。

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

進(jìn)行渲染

(1)組織/文件結(jié)構(gòu)

好吧，讓我們看看 Grav 主題的結(jié)構(gòu)。

每個主題都有一個名為 blueprints.yaml 的定義文件。它還可以為管理面板提供表單定義。

要使用主題定義選項，請在 your_theme_name.yaml 文件中提供默認(rèn)設(shè)置。

在主題根目錄中包含一個名為thumbnail.jpg的303x300 jpg。

(2) Twig 模板等

您的 Grav 頁面的 Twig 模板應(yīng)位于 templates/ 文件夾中，其中包含以下子文件夾：

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

最佳實踐是根據(jù)內(nèi)容來推測主題。這一策略是我如此投資 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 邏輯。

僅供參考，如果您想構(gòu)建一個商業(yè)主題出售給其他人，您還需要這些文件：

• 變更日志.md
• 許可證.md
• README.md
• 截圖.jpg
• 縮略圖.jpg

基本模板

您只需使用 Grav 的默認(rèn) Twig 模板即可獲得我的。

但是，最好使用 Twig Extends 標(biāo)簽通過基本模板中的塊來定義基本布局。該文件作為base.html.twig 存儲在partials/ 子文件夾中。請參閱上圖。

在默認(rèn)模板和其他專用模板中，使用 extends 標(biāo)簽從 base.html.twig 拉入基本布局。

因此，對于使用 Twig 語法的 default.html.twig 文件，您需要編寫：

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

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

第一組代碼擴(kuò)展了包含基本布局的基本模板。

第二個使用新模板的代碼覆蓋基本模板中的內(nèi)容。

(3) 主題CSS

接下來讓我們看看 Grav 主題的 CSS。有多種方法可以實現(xiàn)它，包括 SCSS。但是，為了保持簡單，我將專注于普通 CSS。很短。添加 custom.css 文件并前往城鎮(zhèn)。

(4) Twig 功能

讓我們快速了解一下 Twig 的工作原理。

Extend 等 Twig 標(biāo)簽控制模板的邏輯。他們告訴 Twig 該怎么做。恕我直言，阻止是最重要的標(biāo)簽。

其他包括：

• 緩存
• 降價
• 腳本
• 風(fēng)格
• 切換
• 等等

Twig 過濾器對于格式化和操作文本和變量非常有用。

它們包括：

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

函數(shù)可以生成內(nèi)容并實現(xiàn)功能（顯然）。它們還可以做一些與過濾器相同的事情。

因此，對于您的模板，請使用滿足您獨特需求的 Twig 標(biāo)簽、過濾器和函數(shù)。

格拉夫的樹枝 的標(biāo)簽

除了您選擇的標(biāo)簽之外，Grav 還包含自定義 Twig 標(biāo)簽來擴(kuò)展其功能。

它們包括：

• 降價
• 腳本（例如，您可以引入 JavaScript）
• 風(fēng)格
• 鏈接
• 切換
• 延遲（資產(chǎn)加載）
• 拋出（異常）
• 嘗試/捕捉
• 渲染（彈性對象）
• 緩存

主題配置

使用 Grav，您可以從 Twig 和 PHP 文件訪問主題配置和藍(lán)圖信息。您可以通過主題對象來完成此操作，也可以使用具有 PHP 語法的 Grav 插件。

作為最佳實踐，不要更改主題的默認(rèn) your_theme_name.yaml 文件（參見上圖）。在 user/config/themes 文件夾中覆蓋它。

最后一點，Twig 也有自定義對象和變量，我們在這里不討論。請記住，我會保持簡單。

資產(chǎn)管理人

Grav 的資源管理器提供了一種靈活的方式來管理 CSS 和 JavaScript 文件。它包括一個資產(chǎn)管道，用于縮小、壓縮和內(nèi)聯(lián)資產(chǎn)。

它可用，可以在插件事件掛鉤中訪問，也可以通過 Twig 調(diào)用直接在主題中訪問。它在 user/config/system.yaml 中有自己的配置文件。

您可以使用 Asset Manager 獲得企業(yè)級粒度，因此我們在此不會詳細(xì)介紹。

為了保持簡單，我建議使用資產(chǎn)插件（見上圖）。從 Grav 管理中心下載。然后根據(jù)需要使用它來更新或添加資產(chǎn)。

(5) 定制

所以，我們介紹了構(gòu)建快速簡單的 Grav 主題的方法。設(shè)置您的結(jié)構(gòu)，構(gòu)建 Twig 模板，并根據(jù)需要添加 CSS 和 JavaScript。

您已經(jīng)看到，有多種方法可以使 Grav 主題滿足您簡單或復(fù)雜的需求，但 Grav 提供的特性和功能使其變得更加容易。這就是我自定義網(wǎng)站主題的方式。

主題傳承

更簡單的方法是使用主題繼承。我喜歡這個，因為它與我對 WordPress 和 Drupal 主題所做的類似。

這也是 Grav 定制主題的首選方式。

您定義一個繼承自的基本主題。例如默認(rèn)主題 Quark 或您購買的主題。然后，您添加或編輯您想要自定義的內(nèi)容，并讓基本主題處理其余的事情。

此策略還可以讓您更新基本主題，而不會丟失繼承主題的自定義內(nèi)容。

創(chuàng)建繼承主題的方法有多種。但同樣為了簡單起見，讓我們看一下手動過程。

創(chuàng)建一個新文件夾-> user/themes/your_theme_name 保存自定義主題。

然后將您要繼承的主題中的 YAML 文件復(fù)制到新文件夾中。將其命名為 your_theme_name.yaml 并在您看到 Quark 的任何地方切換新主題名稱。

接下來，將 users/themes/quark/blueprint.yaml 文件復(fù)制到您的 user/themes/your_theme_name 文件夾中。

現(xiàn)在，更改 user/config/system.yaml 文件中的默認(rèn)主題。

頁面：
主題：你的主題名稱

最后，要添加高級事件驅(qū)動功能，請創(chuàng)建 user/themes/your_theme_name/your_theme_name.php 文件。

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

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

您現(xiàn)在已經(jīng)設(shè)置了 Grav 的流，以便它首先在 your_theme_name 中查找，然后嘗試 Quark。

現(xiàn)在，提供您需要的 CSS、JS 和 Twig 模板修改。

你已經(jīng)完成了。相當(dāng)簡單。

結(jié)論

哇。感謝您閱讀整篇文章。

您現(xiàn)在對 Grav 主題有了更多了解':

(1) 組織/文件結(jié)構(gòu)
(2) 樹枝模板
(3)CSS
(4) Twig 功能
(5) 定制

考慮使用 Grav 因為它簡單，尤其是在自定義主題時。 PHP、Twig、vanilla CSS 和 JS 有什么理由不喜歡呢？您甚至可以在 Markdown 中創(chuàng)建內(nèi)容。

繼續(xù)為 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 構(gòu)建簡單的 Grav CMS 主題的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！