新建 CMS 專案

部落格

新建 CMS 專案

本文主要是介紹何謂CMS以及透過Django CMS修改一個樣板，提供給剛開始了解Django的使用者作參考，當我們使用Django做樣板時，往往十分費時又較為困難，所以提供了另一種方法 Django CMS，以快速簡單的方法建構網站，又可以增加彈性，方便使用者日後的修改。
何謂CMS: CMS 為內容管理系統 Content Management System 的縮寫，白話來說就是一套可以協助使用者快速開發網站的系統，常見的CMS 像是 Wordpress、Joomla!而Django也有提供自己的一套CMS系統 – Django CMS。
CMS 由來: 當完成一個網頁交給顧客之後，日後往往會面臨很多問題，像是網頁上的資訊ex.電話、地址需要更改，這些客戶往往不會寫程式，所以就會連絡我們手動更改code(html)，但是這樣對網站的開發者來說是非常沒有效率的，於是為了節省時間，改而架設一個後台讓客戶可以自己修改，CMS 的目標是將每一個 tag 或 template 都視為可變動的欄位，讓使用者可以直接進行修改，也就是說使用者要新增文章、修改文字圖片、排版變更等，都可以直接透過後台操作。

1. Install Django CMS

: 首先先創建一個虛擬環境

conda create –n “DjangoCMSTutorial” python=3.5

-n是自己創建虛擬環境的名字可以自行更改 Python 環境則是使用python3.5 之後進入該虛擬環境

activate DjangoCMSTutorial

2. 下載 djangocms-installer

pip install djangocms-installer

3. 開始第一個project 先切換路徑到一個新的資料夾，之後輸入

djangocms –f –p .mysite

可能需要稍微等待一下，會創建一個名稱為mysite的新專案完成後在cmd輸入

python manage.py runserver

再到瀏覽器輸入 localhost:8000

輸入admin/admin之後，進入到此頁面就代表安裝成功啦

下載template: 網路上有些地方提供了已經做好的templates(模板)，這裡推薦大家可以到 w3layout 下載自己喜歡的 template。
選好了自己喜歡的模板後，點選下方download template即可下載

下載完之後，可以看到下方檔案，其中index.html就是主要的html存放的地方啦，而其他的files存放的是包括網頁的排版、字體、影像檔的存放

將下載後的 template放入原本創建好的CMS專案中
首先，先將下載下來的html檔(這裡是index.html)放入創建好的CMS專案中，放入的位置是: /你的專案名稱/templates(這裡是/mysite/templates)並把複製的template重新命名為 base.html。

這個時候在cmd 執行

python manage.py runserver

並在browser執行127.0.0.1:8000，登入後會看到創建的頁面，這個時候我們會需要先創建我們的第一個頁面

在輸入完標題之後，就可以看到剛剛放入的 base.html檔啦，但是現在因為還沒有放入css、images等資料夾，所以網頁的排版看起來是十分簡陋的，所以在下一步，我們就需要把這些資料夾放入。

將下載下來的files(這裡是css, fonts, images)放入創建好的CMS專案中，放入的位置是: /你的專案名稱/static(這裡是/mysite/ static)

接著我們需要編輯html code

首先在檔案的一開頭我們需要load相關的tags進來

{% load cms_tags menu_tags seikizai_tags staticfiles %}

接著分別在head的結尾與body的一開始分別加入以下程式碼

            {% render_block “css” %}
		</head>
		<body>
			{% cms_toolbar %}

最後在body結尾的上端加入以下程式碼

	       {% render_block “js” %}
		</body>
		</html>

但是現在回到頁面重整後卻還是和之前相同，因為我們需要更改檔案抓取的路徑

<head>
<link rel="”stylesheet”" href="”css/bootstrap.css”">
</head>

{% static "css/bootstrap.css" %} 是Django提供的tag，目的就是要匯入剛剛我們複製去的files，css/bootstrap.css則是路徑，圖檔也是使用相同的方式。

<head>
<link type="”stylesheet”" href="”{%" static="" “css="" bootstrap.css”="" %}”="">
</head>

或是一些圖檔，也要調整 (ex: src="{% static 'image/ab.png' %}")

這個時候我們回到browser重新整理後，就可以看到漂漂亮亮的頁面啦

使用 CMS structure mode 編輯樣板

新增 placeholder，在可能日後會需要修改的地方新增 placeholder，舉例來說，電話號碼可能日後會更改，所以新增一個名稱為 telephone (名稱可以自己取)的 placeholder

ex: <h4>{% placehoder 'telephone' %}</h4>

回到 browser 上，點選右上角的按鈕進入structure mode，可以看到已經有個 telephone的欄位

點選 + 的圖案，可以看到Django CMS 提供多種不同的插件，這裡我們因為是單純電話號碼的緣故，所以我們點選文本(text)

可以看到樣板馬上就做更改了

透過以上功能，我們就可以實作出可以隨時修改，新增不同資料的網站，日後對於網站的維護會更為輕鬆方便。

最後一步，點選發布對頁面的修改之後，就大功告成了!

透過以上的教學，我們可以將從網站下載一個樣板，快速地透過Django CMS達到網頁的修改，讓之後的使用者能夠直接在後台操作，既簡單又方便。

參考來源: https://www.design-hu.com/web-news/cms.html
https://www.rocknovels.com/blog-concept.html

部落格