前言
在django CMS安裝完成之后，本文會介紹一種快速的建立自己博客的方法。
本文環境：
Python 2.7.10
安裝django CMS
具體參考django CMS安裝一文，本文項目名為csblog
Django CMS 簡單博客創建
該章節會介紹如何去創建頁、子頁面，設置及頁面的發布。
新建首頁菜單
Django CMS安裝完成之后，進入主頁http://127.0.0.1:8000/ ，默認會彈出下面窗口。
點擊『下一步』進入新建頁面窗口，簡單解釋一下創建表單這幾個字段。
『標題』為新建頁面標題，它默認會顯示為菜單和頁面的標題。
『縮略名』往往用於url的訪問，如果英文標題，比如Home Page, 那么縮略名自動生成為home-page，它對中文的支持還不夠好，
所以輸入中文名不能自動生成，可手動輸入縮略名。對於自動生成的縮略名也能修改覆蓋。
下面例子創建的是主頁（第一頁面默認為主頁），后面創建的其他頁面，比如博客，縮略名設為blog，那么訪問的url則為http://127.0.0.1:8000/blog/
『內容』在編輯器里面可以編輯顯示在頁面的內容。
下面為創建提交后的效果圖。
同樣的方法創建其他頁面 『博客』和『聯系人』
下面博客頁面的相對路徑為/contact/
頁面設置
頁面創建完成之后，可以在頁面設置里繼續更新頁面。
如果『菜單標題』『頁面標題』已設置，那么在相應位置顯示時會用這個值代替『標題』的值
創建頁面我們有多個入口，從菜單『頁』進入的創建能夠創建完整的配置信息。
發布頁面
添加了以上三個頁面之后，在編輯模式我們能看到下面三個菜單，但是點擊上方的『瀏覽已發布內容』后，『博客』和『聯系人』兩個菜單消失了。原因是這兩個頁面沒有發布，
還處於草稿狀態，而首頁是默認發布的。
點擊工具欄的『發布對頁面的修改』可以發布頁面，或者可以通過admin的頁面管理進行發布,如下圖打開『頁』。
下面可以看到三個已創建的頁面，『博客』和『聯系人』狀態為未發布，圖標為灰色。點擊發布按鈕，發布頁面，圖標顏色也會變為綠色。現在查看『已發布內容』時，所有頁面都能看到了。
插入內容
上面頁面創建完成之后，內容都是空的。下面簡單的通過plugin插入內容，復雜的操作不在本文介紹。
首先進入編輯模式，點擊右上角按鈕打開編輯工具欄，點擊『內容』處加號，打開插件列表，選擇『文本』插入文字。
下圖即為插入后的內容顯示頁面。在內容文本plugin的文字"This is plug in content"顯示在正文里。
同樣的方法可以創建圖片，地圖等等內容。
新建子頁面
有的時候我們需要在某些頁面下面創建子頁面或者子菜單，django CMS也提供了這種便捷的操作。
下面給blog創建子頁面，首先進入blog頁面，點擊創建按鈕，可以看到創建了頁面之后，自動增加一個選擇『新建子頁面』
選中『新建子頁面』，點擊『下一個』，開始創建子頁面。按照同樣的方法，完成子頁面內容。
下圖是子頁面顯示內容，可以看到，url里面在blog頁面路徑后面增加了一級，同時頁面上也增加了一個新的菜單。
默認的django CMS提供了一種通用快速的方法幫忙我們迅速建立自己的內容，但是頁面的顯示終究不夠美觀，接來下本來會介紹一種應用廣泛的博客主題Clean Blog來美化我們的博客系統。
Clean Blog
創建模板
下載clean blog模板
自帶的頁面效果比較簡單並不能滿足我們的要求，接下來會會采用clean blog主題模板來美化界面。
從https://startbootstrap.com/template-overviews/clean-blog/ 下載模板
將static文件拷貝到工作目錄static下，包括img, css, js 及vendor目錄，該路徑在setting文件已配置
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'csblog', 'static'),
)
配置文件詳情如下
├─css
├─img
├─js
└─vendor
├─bootstrap
│ ├─css
│ └─js
├─font-awesome
│ ├─css
│ ├─fonts
│ ├─less
│ └─scss
├─googleapi
│ └─css
└─jquery
修改base.html
拷貝about.html到項目的base.html文件里
引用css和javascript文件，包括bootstrap，font-awesome，clean-blog及jquery，並在文件頭部添加tags
googleapi直接拷貝過來了，不確定后面是否能用到
{% load cms_tags menu_tags sekizai_tags staticfiles %}
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'vendor/googleapi/css/fonts_lora_css.css' %}" rel='stylesheet' type='text/css'>
<link href="{% static 'vendor/googleapi/css/fonts_opensans_css.css' %}" rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="{% static 'css/clean-blog.min.css' %}" rel="stylesheet">
<!-- Bootstrap core JavaScript -->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- Custom scripts for this template -->
<script src="{% static 'js/clean-blog.min.js' %}"></script>
這個時候已經能看到如下圖所示的效果。但是仍然缺少django CMS的工具欄和創建的頁面菜單。
添加cms工具欄
插入下面語句引入toolbar，但這兒只是插入html代碼
<body>
{% cms_toolbar %}
所以，還需要調用aldryn的庫去render css和js
{% render_block "css" %}
{{ALDRYN_SNAME.render_head}}
</head>
{% render_block "js" %}
{{ALDRYN_SNAME.render_tail}}
</body>
頁面和工具欄都能正常顯示了，但是工具欄開啟時，菜單被工具欄擋住了，所以添加下面css來解決這個問題
<!-- django CMS toolbar adjustment -->
{% if request.toolbar %}
<style type="text/css">
#mainNav{
margin-top: 45px;
}
</style>
{% endif %}
添加cms菜單
渲染菜單 {% show_menu 0 1 100 100 %}
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-custom" id="mainNav">
<div class="container">
<a class="navbar-brand" href="index.html">Start {{request.site.name}}</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
{% show_menu 0 1 100 100 %}
{% comment %}
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="post.html">Sample Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
{% endcomment %}
</ul>
</div>
</div>
</nav>
菜單渲染之后，一些class也變了，跟clean blog原來定義的不一致，所以重新添加css
<!-- django CMS toolbar adjustment -->
{% if request.toolbar %}
<style type="text/css">
@media only screen and (min-width: 992px){
#mainNav .navbar-nav>li.child>a {
padding: 10px 20px;
color: #fff;
}
}
@media only screen and (min-width: 992px){
#mainNav .navbar-nav>li.child>a:focus, #mainNav .navbar-nav>li.child>a:hover {
color: rgba(255,255,255,.8);
}
}
#mainNav .navbar-nav>li.child>a {
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
a {
text-decoration: none;
background-color: transparent;
}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:active {text-decoration: none;}
a:hover {text-decoration: none;}
</style>
{% endif %}
其他一些內容修改
將一些頁面內容改為動態，meta_description即為前面添加的頁面原標簽。
<html lang="{{LANGUAGE_CODE}}">
<meta name="description" content="{% page_attribute 'meta_description' %}">
<title>{% block title %}{% page_attribute 'page_title' %} - {{request.site.name}}{% endblock %}</title>
小插曲，如果想在前段獲取site信息，需加入下面的middleware https://docs.djangoproject.com/en/2.0/ref/contrib/sites/#site-middleware
'django.contrib.sites.middleware.CurrentSiteMiddleware',
這個時候我們能看到下面的博客系統效果了
覆蓋頁首占位符
下面是占位符的高級使用，or %}的意思是如果占位符沒有內容，那么會使用占位符html tag的內容；反正，使用顯示占位符插件內容。就下面例子，如果沒有在Feature占位符添加內容，那么會顯示about-bg.jpg圖片。
<!-- Page Header -->
{% block feature %}
{% placeholder feature or %}
<header class="masthead" style="background-image: url('{% static 'img/about-bg.jpg' %}')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="page-heading">
<h1>{% page_attribute 'page_title' %}</h1>
<span class="subheading">Bin's Blog</span>
</div>
</div>
</div>
</div>
</header>
{% endplaceholder %}
{% endblock %}
例如在Feature Placehold添加內容Hello，那么頁面會呈現下面效果
接下來我們利用django CMS插件手動實現原來的效果, Feature Placeholder的格式如下
header(background iamge)
container
row
column
page-heading
text
我們用插件djangocms_style編輯相同的格式
效果 |
CLASS NAME |
TAG TYPE |
ADDITIONAL CLASSED |
div.container |
container |
div |
|
div.row |
div |
row |
|
div. col-lg-8 col-md-10 mx-auto |
div |
col-lg-8, col-md-10, mx-auto |
|
div. page-heading |
div |
page-heading |
要支持背景圖，我們需要安裝插件aldryn_background_image，並添加到INSTALLED_APPS
最終效果圖如下
修改內容占位符Placeholder
修改內容，為內容添加placeholder
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
{% block content %}
{% placeholder content or %}
<p>This page has no content yet.</p>
{% endplaceholder%}
{% endblock content %}
</div>
</div>
</div>
如果沒有添加內容，那么顯示"This page has no content yet"，通過插件添加之后，會顯示相應的內容。
其他庫介紹
aldryn_style
這個庫名字和djangocms_style一樣，不能同時使用。
如果想同時使用，需修改源代碼。
aldryn_style\cms_plugin.py
class StylePlugin(CMSPluginBase):
model = Style
name = _("Aldryn Style")
render_template = "aldryn_style/plugin.html"
allow_children = True
plugin_pool.register_plugin(StylePlugin)
djangocms StylePlugin
class StylePlugin(CMSPluginBase):
model = Style
name = _('Style')
render_template = 'djangocms_style/style.html'
allow_children = True
plugin_pool.register_plugin(StylePlugin)
aldryn_bootstrap3
pip install aldryn_bootstrap3
該插件提供豐富的元素及一些快速創建的方法，比如row-column，利用其row，可快速靈活創建
下一篇介紹如果使用aldryn-newsblog創建文章
關注下方公眾號獲取更多文章
參考文檔
django CMS and Aldryn Cloud Guided Tour with Angelo Dini
https://blackrockdigital.github.io/startbootstrap-clean-blog/index.html