Grav - 主題定製

本章我們將學習主題定製。有多種方法可以定製您的主題。Grav 提供了許多功能和一些實用程式來輕鬆定製您的主題。

自定義 CSS

您可以提供您自己的custom.css檔案來定製您的主題。Antimatter 主題透過使用資源管理器引用css/custom.css檔案。如果找不到對 CSS 檔案的引用，則資源管理器不會將引用新增到 HTML。在 Antimatter 的css/資料夾中建立 CSS 檔案將覆蓋預設 CSS。例如：

custom.css

body a {
   color: #FFFF00;
}

預設連結顏色被覆蓋並設定為黃色。

自定義 SCSS/LESS

提供自定義 CSS 檔案的另一種方法是使用custom.scss檔案。SCSS（語法高效樣式表）是一個 CSS 預處理器，它允許您透過使用運算子、變數、巢狀結構、匯入、部分和混合器來高效地構建 CSS。Antimatter 使用 SCSS 編寫。

要使用 SCSS，您需要 SCSS 編譯器。您可以使用命令列工具和 GUI 應用程式在任何平臺上安裝 SCSS 編譯器。Antimatter 使用scss/資料夾來放置所有.scss檔案。編譯後的檔案儲存在css-compiled/資料夾中。

應監視SCSS檔案是否有任何更新，這可以透過使用以下命令來完成：

scss --watch scss:css-compiled

上述命令告訴 SCSS 編譯器監視名為 scss 的目錄，並且每當css-compiled資料夾更新時，SCSS 編譯器都應對其進行編譯。

您可以將自定義 SCSS 程式碼儲存在scss/template/_custom.scss檔案中。將程式碼儲存在此檔案中有很多好處。

來自 SCSS 檔案和其他 CSS 檔案的任何更新都將編譯到css-compiled/template.css檔案中。
您可以訪問主題中使用的任何 SCSS，並利用所有可用的變數和混合器。
為了更輕鬆地進行開發，您可以訪問標準 SCSS 的所有功能。

下面顯示了_custom.scss檔案的示例：

body {
   a {
      color: darken($core-accent, 20%);
   }
}

當您升級主題時，所有自定義 css 都將被覆蓋。這是選擇這種主題定製方式的主要缺點。這可以透過使用主題繼承來解決。

主題繼承

主題繼承是修改或定製主題的最佳方法，可以透過一些設定來實現。基本思想是將主題定義為您從中繼承的基礎主題，並且只能修改某些部分，其餘部分由基礎主題處理。使用主題繼承的優點是，每當更新基礎主題時，定製的繼承主題都不會直接受到影響。為此，您需要遵循以下步驟。

要儲存您的新主題，請在/user/themes/資料夾內建立一個名為mytheme/的新資料夾。
接下來，您需要在新建的/user/themes/mytheme/資料夾下建立一個名為mytheme.yaml的新主題 YAML 檔案，內容如下：

streams:
   schemes:
      theme:
         type: ReadOnlyStream
         prefixes:
            '':
               - user/themes/mytheme
               - user/themes/antimatter

在/user/themes/mytheme/資料夾下建立一個名為blueprints.yaml的 YAML 檔案，內容如下：

name: MyTheme
version: 1.0.0
description: "Extending Antimatter"
icon: crosshairs
author:
   name: Team Grav
   email: devs@getgrav.org
   url: http://getgrav.org

現在我們將瞭解如何定義一個包含基本元素的主題blueprints.yaml。可以為表單定義提供更多詳細資訊，以控制表單功能。可以檢查blueprints.yaml檔案以瞭解有關此方面的更多詳細資訊。

在您的user/config/system.yaml檔案中，編輯pages: theme:選項以將您的預設主題更改為新主題，如下所示：

pages:
   theme: mytheme

現在建立了新主題，Antimatter 將成為這個新mytheme主題的基礎主題。如果要修改特定的 SCSS，我們需要配置 SCSS 編譯器，以便它首先查詢您的mytheme主題，其次查詢 Antimatter 主題。

它使用以下設定：

首先複製位於antimatter/scss/資料夾中的template.scss檔案，並將其貼上到mytheme/scss/資料夾中。此檔案將包含對各種檔案（如template/_custom.scss和子檔案）的所有@import呼叫。
load-path指向包含大量 SCSS 檔案的antimatter/scss/資料夾。要執行 SCSS 編譯器，您需要向其提供load-path，如下所示。

scss --load-path ../antimatter/scss --watch scss:css-compiled

現在，在mytheme/scss/template/下建立一個名為_custom.scss的檔案。此檔案將包含所有修改。

更改自定義 SCSS 檔案後，所有 SCSS 檔案都將自動重新編譯到位於mytheme/css-compiled/資料夾下的template.css中，然後 Grav 將準確地引用它。

列印頁面