Django CMS 教學-整合 CMS 至專案中

部落格

Django CMS 教學-整合 CMS 至專案中

Django CMS (Content Management System)

使用時機：

如果想做一個成績系統，大家應該都可以想像到，把學校常見的紙本成績登記單改成可以在網頁操作登記，把成績存到資料庫中，提供新增、刪除、修改的功能。
假設全部功能都做好了~ 一登入系統還有配上學校大門口的照片，結果三年後校門口進行修整，學校要求更新成新的照片，怎麼辦呢?
這時候，就要通知所有使用者，系統進入維修更新，關掉伺服器，把圖片改掉，查看三年前的程式碼，搞清楚是抽換哪一張圖，把新的換上去，再重啟伺服器。
這樣聽起來好像也沒有太複雜啦~畢竟校門口不常換嘛，可是，對於推銷農產品的網站，每次的當季農產品都不一樣，甚至，星座運勢的網站內容需要每日進行更新。

當我的網站內容需要更動的時候

聯絡工程師來修改嗎?

Django CMS 就可以讓管理者相對輕鬆的在前端更動原本被寫死的內容

不用查看程式碼，直接在網頁的介面上操作。

怎麼辦到的呢? 就像把成績存進資料庫一樣，把網頁中顯示的內容存進資料庫，原本一些在前端 html 中寫死的內容，我們可以把預先知道可能會更動的內容 (例如: 連絡電話、地址等)，視為像成績一樣可以修改的物件，在前端的顯示中提供管理者直接編輯進行資料庫的更新。

接下來，如何在已有的專案另外提供 CMS 功能呢? 首先要進行安裝跟設定。

執行

pip install django-cms

在 settings.py 中補上

INSTALLED_APPS=[
	……
'django.contrib.sites',
'cms',
'menus',
'treebeard', 
]

在 django.contrib.admin 前面加 'djangocms_admin_style'
在 Settings.py 內加上

SITE_ID = 1
LANGUAGES = [
    ('en', 'English'),
    ('zh', u'中文'),
]

執行:

python manage.py makemigrations
python manage.py migrate

在 INSTALLED_APPS 加上

'sekizai', 'sekizai.context_processors.sekizai'

在 settings.py 內補上

TEMPLATES = [
	{
		...
		'OPTIONS': {
			'context_processors':[
				...
				'sekizai.context_processors.sekizai',
			],
		},
	},
]

在 MIDDLEWARE_CLASSES 中加

'django.middleware.locale.LocaleMiddleware', 
'cms.middleware.utils.ApphookReloadMiddleware'
'cms.middleware.user.CurrentUserMiddleware',
'cms.middleware.page.CurrentPageMiddleware',
'cms.middleware.toolbar.ToolbarMiddleware',
'cms.middleware.language.LanguageCookieMiddleware',

在 TEMPLATES 的 OPTIONS 中的 context_processors 裡面加上'cms.context_processors.cms_settings'
執行:

python manage.py cms check   #可以檢查安裝有沒有成功

參考 http://docs.django-cms.org/en/latest/how_to/install.html 這樣基本的 CMS 就安裝完成了可以開始建立一個有 CMS 的頁面，以及安裝需要其他功能在 urls.py 中，再加上要由 cms 代管的 url

urlpatterns = [
	url(r'^accounts/', include('accounts.url')), # 這是我本身帳戶管理的部分
	url(r'^admin/', admin.site.urls), # 一般 admin 的網址管理
	
	url(r'^cms/', include('cms.urls')), # 此行才將 /cms 的 url 交由 CMS 代管 
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

urlpatterns += staticfiles_patterns()

這樣在 cms 底下的 url 就有 cms 的功能接下來要建立給 CMS用的 template Settings.py 中

CMS_TEMPLATES = [
    ('home.html', 'Home page template'),
]

templates 資料夾內新增 home.html 的模板

{% load cms_tags sekizai_tags %}
{% load static from staticfiles %}
<html>
    <head>

{% render_block "css" %} </head> <body> {% cms_toolbar %} {% placeholder "content" %} {% render_block "js" %} </body> </html>

在 Settings.py 內，指定之後透過 CMS 在前端上傳的媒體檔案存放的位置

MEDIA_URL = "/media/"   
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

在 urls.py 內

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
	...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

執行:

pip install django-filer

在 INSTALLED_APPS 加入

'filer','easy_thumbnails','mptt',

在 settings.py 新增

THUMBNAIL_HIGH_RESOLUTION = True

THUMBNAIL_PROCESSORS = (
    'easy_thumbnails.processors.colorspace',
    'easy_thumbnails.processors.autocrop',
    'filer.thumbnail_processors.scale_and_crop_with_subject_location',
    'easy_thumbnails.processors.filters'
)

執行:

 
pip install djangocms-text-ckeditor
pip install djangocms-link djangocms-file djangocms-picture djangocms-video djangocms-googlemap djangocms-snippet djangocms-style djangocms-column

在 INSTALLED_APPS：加

'djangocms_text_ckeditor',
'djangocms_link',
'djangocms_file',
'djangocms_picture',
'djangocms_video',
'djangocms_googlemap',
'djangocms_snippet',
'djangocms_style',
'djangocms_column',

在執行一次:

python manage.py makemigrations
python manage.py migrate

這樣就可以開始進行 CMS 頁面的設置了我們到 /cms 看看可以看到是空白的

有上方 CMS 的功能列表，點擊右方的按鍵就可以看到列表，按下 Add plugin 的按鍵，可以選擇文字或圖片等其他型態的 plugin ，加到 Content 之中也可以隨時更改但是這個樣板不符合我原本的專案，所以需要對我們的 template 進行修正在 home.html 進行調整你可以先選一個這一頁想要的模板，然後再加上CMS 的 tag 在最前面加上：

{% load cms_tags sekizai_tags %}
{% load static from staticfiles %}  # 這可能你原本就有了，沒有再補上

在 </head> 前面加上 {% render_block "css" %}
在 <body> 後加上 {% cms_toolbar %}
在 </body> 前加上{% render_block "js" %} 就可以保有原本的 banner 等原專案的樣式接下來就是在你覺得內容可能會更動的部分，放上 placeholder Ex :

<h3>phone: 0911223344</h3>

改成

<h3>{% placeholder 'cellphonenumber' %}</h3>

Cellphone 可以改成自己想要的命名，在頁面中就會看到，這個命名的 placeholder 再到頁面上把 0911223344 加到 cellphone 中就可以在頁面上做修改了如此就完成在原有專案下，新增可以 CMS 調整內容的頁面

這裡有範例專案

部落格