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

基本界面

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

clipboard.png
內容管理系統:這裏可以設置頁面、部件、佈局、內容塊、資源和組件。

clipboard.png
媒體:是用於管理系統中的各種媒體資源,包括圖片、音頻、視頻、文檔等。默認是存儲在服務器本地的。我們可以上傳這些內容到服務器,也可以建立更多的目錄對這些資源進行分別存儲。

clipboard.png

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

clipboard.png
點擊右上角的用戶圖標,我們可以查看用戶的配置文件。並且,我們可以從這裏退出當前用戶。

基本概念

clipboard.png
這個網站的首頁是如何生成的呢,如何進行管理這些頁面呢?

clipboard.png
這部分就是October的核心,頁面裏面包含了404頁面、ajax頁面、500錯誤頁面,首頁和演示插件。從其顯示的URL可以知道,我們的首頁內容是Demonstration這個頁面。
我們點擊這個條目,就可以看到如下的界面:

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

clipboard.png

通過查看這裏的home.htm文件,我們就可以很簡單的知道,我們的主頁其實就是一個靜態頁面。如果我們自定義這些頁面、部件、佈局、內容等,就可以自己定義自己的前端頁面了。

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

home.htm中的頂部這些代碼就是定義頁面的一些屬性。我們通過修改這些屬性,他們會同時體現在後臺系統中。

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

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

clipboard.png

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

clipboard.png

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

clipboard.png

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

clipboard.png
選擇佈局爲default,並在代碼編輯部分寫上些什麼,然後保存並刷新頁面。

clipboard.png

然後我們打開編輯器,可以看見,系統新建了一個文件

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

clipboard.png
通過上面的頁面信息,我們可以看到這個頁面包含了頭部信息和尾部信息。那麼這個about信息就是對應的layout中的{% page %}

clipboard.png

我們進一步研究home.html,可以看見

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

clipboard.png
其代碼則是:

clipboard.png

因此,我們可以知道,調用/content/welcome.html的方法就是:{% content "welcome.htm" %}
同樣道理,我們調用header和footer則是調用部件site/header site/footer
{% partial 'site/header' %}
{% partial 'site/footer' %}

clipboard.png

clipboard.png

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

組件的使用

clipboard.png
打開設置——更新——可以看到檢查更新、安裝插件、管理插件;點擊安裝插件,並在搜索框中輸入“Blog”,並安裝插件。

clipboard.png

安裝完成後,系統將出現一個新的菜單“博客”。點擊菜單:

clipboard.png

在這個界面中,可以創建帖子、查看已有的帖子,管理分類等。

創建新的分類:
clipboard.png

創建新的帖子:
clipboard.png

爲這個帖子設置分類:
clipboard.png

設置這個帖子的其他信息:諸如發佈時間、摘要或者圖片。
clipboard.png

如何顯示這些博客信息:
進入內容管理系統,爲博客建立一個頁面:這裏顯示博客的列表,並使用默認佈局。
點擊左側的組件,
clipboard.png
可以看見“帖子列表”,鼠標點住帖子列表,拖動到編輯器內,釋放鼠標,你可以看見如下圖所示的界面。在代碼中出現了:{% component 'blogPosts' %} 。在上部出現了一個懸浮框,名稱爲帖子列表。
clipboard.png

點擊“保存”。
然後在瀏覽器中輸入 http://octobermovie.dev.raise...
clipboard.png
然後你就可以看見剛纔後臺中的兩個帖子的列表。

如果我們想自定義這個帖子顯示的內容和格式怎麼辦?
回到 內容管理系統 選擇Blog頁面,然後把鼠標點擊編輯器中的 component 這個單詞。其編輯器右邊會出現一個叉號圖標:
clipboard.png

點擊這個叉號圖標,通過下面顯示的代碼,我們可以很容易的找到顯示帖子的標題、發佈時間、分類及正文的相關內容:
clipboard.png

比如,我們在標題上面顯示發佈時間,則將下面的代調換一個位置就可以了

<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>

保存並刷新頁面:
clipboard.png

當我們點擊帖子的標題鏈接時,你會發現,它始終是顯示當前的界面。並沒有引導我們展示帖子的內容。因此,我們需要創建一個顯示帖子內容的頁面:
進入“內容管理系統”——“頁面”——“新建頁面”
根據上面的學習內容,分別設置頁面標題爲“Blog post”;URL:“/blog/:slug”;添加插件“帖子”。
clipboard.png

然後,我們打開頁面,找到Blog頁面,設置帖子頁面爲我們剛剛創建的blog-post
clipboard.png
刷新前端頁面,點擊帖子的標題:
clipboard.png
可以看見可以顯示帖子的內容信息了。只是沒有了頁眉和頁腳了,這是因爲,blog-post的頁面沒有設置佈局。
設置佈局
clipboard.png
刷新頁面:
clipboard.png

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章