October CMS - 快速入門 2 基本概念

項目源碼地址：https://gitee.com/494901823/O...

文章視頻：http://www.365yg.com/i6567357...

基本界面

October CMS 的後臺管理很簡單，沒有多餘的功能。
首頁部分是【儀表盤】顯示了系統的基本信息。

內容管理系統：這裏能夠設置頁面、部件、佈局、內容塊、資源和組件。

媒體：是用於管理系統中的各類媒體資源，包括圖片、音頻、視頻、文檔等。默認是存儲在服務器本地的。咱們能夠上傳這些內容到服務器，也能夠創建更多的目錄對這些資源進行分別存儲。

設置：默認狀況下設置裏面沒有太多的設置，默認包含郵件、日誌以及系統和內容功能。咱們能夠在系統中進行管理員的管理，用於控制用戶具備的權限。後面，咱們將學習插件是如何工做的。

點擊右上角的用戶圖標，咱們能夠查看用戶的配置文件。而且，咱們能夠從這裏退出當前用戶。

基本概念

這個網站的首頁是如何生成的呢，如何進行管理這些頁面呢？

這部分就是October的核心，頁面裏面包含了404頁面、ajax頁面、500錯誤頁面，首頁和演示插件。從其顯示的URL能夠知道，咱們的首頁內容是Demonstration這個頁面。
咱們點擊這個條目，就能夠看到以下的界面：

咱們也能夠看到【標題】和【URL】分別就是設置頁面名稱和訪問URL的。咱們能夠很是方便的進行修改。在【設置】選項卡，咱們能夠看見，URL爲 / 的對應的文件名爲home.htm，使用的佈局是 default 。再下面黑色部分就是代碼編輯器。
home.htm是一個真實存在的頁面。它就存在於文件系統中。以下圖所示。

經過查看這裏的home.htm文件，咱們就能夠很簡單的知道，咱們的主頁其實就是一個靜態頁面。若是咱們自定義這些頁面、部件、佈局、內容等，就能夠本身定義本身的前端頁面了。

title = "Demonstration"
url = "/"
layout = "default"
==

home.htm中的頂部這些代碼就是定義頁面的一些屬性。咱們經過修改這些屬性，他們會同時體如今後臺系統中。

title = "Homepage"
url = "/"
layout = "default"

修改完成後，在編輯器裏面保存此文件。而後在後臺刷新頁面，而後再次打開【頁面】菜單，咱們將看到咱們的修改生效了。

能夠很簡單的體會到，咱們經過後臺管理系統能夠很方便的設置這個Home.htm文件的內容了。另外，咱們經過下面的【元素】選項卡，能夠設置有關SEO的內容，如meta標題和描述信息。

下面咱們將創建一個about頁面對象。看看操做具體怎麼作。

在上圖中，點擊增長，則會出如今右側一個新的選項卡【新頁面】
填寫標題爲About,則

選擇佈局爲default，並在代碼編輯部分寫上些什麼，而後保存並刷新頁面。

而後咱們打開編輯器，能夠看見，系統新建了一個文件

如何訪問這個頁面呢？
http://octobermovie.dev.raise...

經過上面的頁面信息，咱們能夠看到這個頁面包含了頭部信息和尾部信息。那麼這個about信息就是對應的layout中的{% page %}

咱們進一步研究home.html,能夠看見

{% content "welcome.htm" %}
對應的就是

其代碼則是：

所以，咱們能夠知道，調用/content/welcome.html的方法就是：{% content "welcome.htm" %}
一樣道理，咱們調用header和footer則是調用部件site/header site/footer
{% partial 'site/header' %}
{% partial 'site/footer' %}

經過上面的介紹，咱們知道了如何使用頁面、部件、佈局和內容塊。下面是組件
咱們演示一個關於組件的管理和使用：

組件的使用

打開設置——更新——能夠看到檢查更新、安裝插件、管理插件；點擊安裝插件，並在搜索框中輸入「Blog」，並安裝插件。

安裝完成後，系統將出現一個新的菜單「博客」。點擊菜單：

在這個界面中，能夠建立帖子、查看已有的帖子，管理分類等。

建立新的分類：

建立新的帖子：

爲這個帖子設置分類：

設置這個帖子的其餘信息：諸如發佈時間、摘要或者圖片。

如何顯示這些博客信息：
進入內容管理系統，爲博客創建一個頁面：這裏顯示博客的列表，並使用默認佈局。
點擊左側的組件，

能夠看見「帖子列表」，鼠標點住帖子列表，拖動到編輯器內，釋放鼠標，你能夠看見以下圖所示的界面。在代碼中出現了：{% component 'blogPosts' %} 。在上部出現了一個懸浮框，名稱爲帖子列表。

點擊「保存」。
而後在瀏覽器中輸入 http://octobermovie.dev.raise...

而後你就能夠看見剛纔後臺中的兩個帖子的列表。

若是咱們想自定義這個帖子顯示的內容和格式怎麼辦？
回到 內容管理系統 選擇Blog頁面，而後把鼠標點擊編輯器中的 component 這個單詞。其編輯器右邊會出現一個叉號圖標：

點擊這個叉號圖標，經過下面顯示的代碼，咱們能夠很容易的找到顯示帖子的標題、發佈時間、分類及正文的相關內容：

好比，咱們在標題上面顯示發佈時間，則將下面的代調換一個位置就能夠了

<p class="info">
    Posted
    {% if post.categories.count %} in {% endif %}
    {% for category in post.categories %}
        <a href="{{ category.url }}">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
    {% endfor %}
    on {{ post.published_at|date('M d, Y') }}
</p>

保存並刷新頁面：

當咱們點擊帖子的標題連接時，你會發現，它始終是顯示當前的界面。並無引導咱們展現帖子的內容。所以，咱們須要建立一個顯示帖子內容的頁面：
進入「內容管理系統」——「頁面」——「新建頁面」
根據上面的學習內容，分別設置頁面標題爲「Blog post」；URL：「/blog/:slug」；添加插件「帖子」。

而後，咱們打開頁面，找到Blog頁面，設置帖子頁面爲咱們剛剛建立的blog-post

刷新前端頁面，點擊帖子的標題：

能夠看見能夠顯示帖子的內容信息了。只是沒有了頁眉和頁腳了，這是由於，blog-post的頁面沒有設置佈局。
設置佈局

刷新頁面：

以上就是October中如何使用【頁面】【部件】【佈局】【內容】【組件】的方法。