Django-CMS系列 (1)

前言

在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 %}

这个时候已经能看到如下图所示的效果。但是仍然缺少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来解决这个问题

{% if request.toolbar %}

#mainNav{

margin-top: 45px;

}

</style>

{% endif %}

添加cms菜单

渲染菜单 {% show_menu 0 1 100 100 %}

<a class="navbar-brand" href="index.html">Start {{request.site.name}}</a>

Menu

</button>

{% show_menu 0 1 100 100 %}

{% comment %}

</li>

<a class="nav-link" href="about.html">About</a>

</li>

<a class="nav-link" href="post.html">Sample Post</a>

</li>

<a class="nav-link" href="contact.html">Contact</a>

</li>

{% endcomment %}

</ul>

</div>

</nav>

菜单渲染之后，一些class也变了，跟clean blog原来定义的不一致，所以重新添加css

{% if request.toolbar %}

@media only screen and (min- 992px){

#mainNav .navbar-nav>li.child>a {

padding: 10px 20px;

color: #fff;

}

@media only screen and (min- 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即为前面添加的页面原标签。

<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图片。

{% block feature %}

{% placeholder feature or %}

<h1>{% page_attribute 'page_title' %}</h1>

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

{% block content %}

{% placeholder content or %}

<p>This page has no content yet.</p>

{% endplaceholder%}

{% endblock content %}

</div>

如果没有添加内容，那么显示"This page has no content yet"，通过插件添加之后，会显示相应的内容。

其他库介绍

aldryn_style

这个库名字和djangocms_style一样，不能同时使用。

如果想同时使用，需修改源代码。

aldryn_stylecms_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