OctoberCMS-3-主題

Tianby發表於2019-02-16

主題

介紹

主題定義了October構建的網站或Web應用程式的外觀。主題完全基於檔案定義，可以使用任何版本控制軟體管理。

主題儲存在專案的themes目錄的對應子目錄中。主要包含以下部分：

名稱 Description
Pages 網站的頁面
Partials 可以重用的HTML標記塊
Layouts 定義頁面的結構
Content files 可以是文字，HTML程式碼和Markdown 程式碼塊，主要用於與Page和Layout進行分開編輯維護。
Asset files 資原始檔包含圖片、樣式表和JS指令碼檔案。

主題的目錄結構

每個主題都有一個獨立的目錄，只有啟用的主題才會顯示在網站上。基本結構的例子：

themes/
  website/           <=== 主題的目錄
    pages/           <=== Pages（頁面目錄）
      home.htm
    layouts/         <=== Layouts（佈局目錄）
      default.htm
    partials/        <=== Partials（部件目錄）
      sidebar.htm
    content/         <=== Content（內容目錄）
      intro.htm
    assets/          <=== Assets （資源目錄）
      css/
        my-styles.css
      js/
      images/

啟用主題的方式有後臺操作和修改配置檔案兩種方式，修改config/cms.php檔案中的activeTheme的設定值。或者，採取後臺設定，操作步驟為：設定——內容管理——前端主題——選擇一個主題啟用即可。

子目錄

October支援單層子目錄，有Pages、Partials、Layouts、Content和Assets目錄。這樣簡化了大型網站的目錄結構。

themes/
  website/
    pages/
      home.htm
      blog/                  <=== Subdirectory
        archive.htm
        category.htm
    partials/
      sidebar.htm
      blog/                  <=== Subdirectory
        category-list.htm
    content/
      footer-contacts.txt
      home/                  <=== Subdirectory
        intro.htm
    ...

要從子目錄引用Partial檔案或者Content檔案，格式為：{% 名稱 + 路徑 %}，比如：

{% partial "blog/category-list" %}

上述表示，引入一個Partial部件，部件的位置及檔案為：Partials/blog/category-list.htm。注意，模板路徑總是絕對的，在同一個Partial目錄中，引用同目錄中的另外一個Partial，也必須寫完整的子目錄名稱。

模板結構

對於Page、Partial和Layout他們所對應的模板結構，都是包含了三個部分：Configuration，PHP Code，Twig markup。各個部分之間通過 ” == ” 進行分割開來。

url = "/blog"
layout = "default"
==
function onStart()
{
    $this[`posts`] = ...;
}
==
<h3>Blog archive</h3>
{% for post in posts %}
    <h4>{{ post.title }}</h4>
    {{ post.content }}
{% endfor %}

COnfiguration Section 【配置部分】

配置部分用於設定模板引數，具體引數與不同的模板相關，因型別而不同。配置部分使用簡化的” ini “格式，字串引數值必須包含在雙引號中。

url = "/blog"
layout = "default"

[component]
parameter = "value"

PHP Code （PHP程式碼部分）

在模板每次渲染之前，PHP程式碼部分都是先執行。PHP程式碼是可選的部分，可以省略。PHP程式碼可以使用程式碼開始和結束標記”<? ?>”，這個標記僅僅是用於語法高亮。而且標記和==不在同一行。

url = "/blog"
layout = "default"
==
<?
function onStart()
{
    $this[`posts`] = ...;
}
?>
==
<h3>Blog archive</h3>
{% for post in posts %}
    <h4>{{ post.title }}</h4>
    {{ post.content }}
{% endfor %}

在PHP部分，只能定義函式，允許使用use引入名稱空間。但是除了這些不允許其他PHP程式碼。

url = "/blog"
layout = "default"
==
<?
use AcmeBlogClassesPost;

function onStart()
{
    $this[`posts`] = Post::get();
}
?>
==

訪問變數可以使用$this，通過資料方式可以設定或者讀取變數，使用物件方式則只能讀取變數的值。

// Write via array
$this[`foo`] = `bar`;

// Read via array
echo $this[`foo`];

// Read-only via object
echo $this->foo;

Twig Markup Section（Twig標記部分）

Twig是一個靈活,快速,安全的PHP模板語言。 Twig標記部分定義要由模板呈現的內容。在這個部分可以使用October提供的函式、標記或者過濾器。其內容取決於模板型別（page、layout、partial）。

主題日誌記錄

主題日誌記錄是一個非常有用的功能，預設情況下是禁用的。由於佈局和頁面的內容儲存在檔案中，可能會發生丟失內容的情況，主題日誌記錄可以將這些修改產生的變化都記錄下來。

啟用主題日誌記錄，可以進入設定——日誌——日誌設定——啟用主題更改。設定完成後，儲存設定，重新整理頁面則可以看見在日誌——主題日誌，點選可以檢視。

相關文章