使用 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中文網其他相關文章！