前言
前一文介绍了如何用Clean Blog来美化自己的博客，本文开始介绍用Aldryn News来创建自己的博客内容。
本文环境：
Python 2.7.10
Djangocms 3.5
aldryn-newsblog
安装
查看 https://github.com/aldryn/aldryn-newsblog/blob/master/setup.py ，可以看到它的依赖库如下。
REQUIREMENTS = [
'Django>=1.8,<1.11',
'python-dateutil',
'aldryn-apphooks-config>=0.2.4',
'aldryn-boilerplates>=0.7.2',
'aldryn-categories>=1.1.0',
'aldryn-common>=0.1.3',
'aldryn-people>=1.1.0',
'aldryn-translation-tools>=0.2.0',
'backport_collections==0.1',
'django-appdata>=0.1.4',
'django-cms>=3.2',
'djangocms-text-ckeditor',
'django-filer>=0.9.9',
'django-parler>=1.4',
'django-sortedm2m>=1.2.2,!=1.3.0,!=1.3.1',
'django-taggit',
'lxml',
'pytz',
'six',
'python-dateutil',
]
执行pip安装
pip install aldryn-newsblog
最新版本的aldryn-newblog (aldryn-newsblog-2.0.0)不支持django-1.11.11，安装时django版本会退回到django-1.10.8
安装djangocms-comments，后面在博客页面添加评论时会用到
pip install djangocms-comments
安装其他的一些aldryn的库，能实现博客的增强效果
pip install aldryn_background_image
pip install aldryn_bootstrap3
配置
在settings里面填加INSTALLED_APPS，放在'cms'之后
添加下列APPS
INSTALLED_APPS = (
# you will probably need to add these
'aldryn_apphooks_config',
'aldryn_categories',
'aldryn_common',
'aldryn_newsblog',
'aldryn_people',
'aldryn_translation_tools',
'parler',
'sortedm2m',
'taggit',
)
确认下面APPS已安装
INSTALLED_APPS = (
# you'll almost certainly have these installed already
'djangocms_text_ckeditor',
'easy_thumbnails',
'filer',
)
下面是为了增强效果添加的APPS
INSTALLED_APPS = (
'djangocms_comments',
'aldryn_background_image',
'aldryn_bootstrap3',
'bootstrap3',
)
添加boilerplates支持 (可选)
INSTALLED_APPS = (
'aldryn_boilerplates',
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'aldryn_boilerplates.staticfile_finders.AppDirectoriesFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'OPTIONS': {
'context_processors': [
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
'django.template.context_processors.i18n',
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.template.context_processors.media',
'django.template.context_processors.csrf',
'django.template.context_processors.tz',
'sekizai.context_processors.sekizai',
'django.template.context_processors.static',
'cms.context_processors.cms_settings',
'aldryn_boilerplates.context_processors.boilerplate',
],
'loaders': [
'django.template.loaders.filesystem.Loader',
'aldryn_boilerplates.template_loaders.AppDirectoriesLoader',
'django.template.loaders.app_directories.Loader',
],
},
},
]
Django Filer
aldryn News&Blog处理Easy Thumb会用到Django Filer，所以需要添加THUMBNAIL_PROCESSORS元组到setting里
注: 这些在django CMS安装时其实已完成。在aldryn里又强调了一次，再次检查确认一下。
THUMBNAIL_PROCESSORS = (
'easy_thumbnails.processors.colorspace',
'easy_thumbnails.processors.autocrop',
'filer.thumbnail_processors.scale_and_crop_with_subject_location',
'easy_thumbnails.processors.filters',
'easy_thumbnails.processors.background',
)
安装完成后需执行python manage.py migrate进行数据库同步
查看效果
进入菜单『页』-『高级设置』，点击应用下拉菜单，如果能看到NewsBlog，说明安装成功。
添加文章
添加应用
进入blog页面，进入菜单『页』-『高级设置』，在『应用』菜单里选择『Newsblog』保存，那么在工具栏会添加『News & Blog』菜单
添加文章
从『News & Blog』下拉菜单里选择『add new articles』开始添加文章
具体安装页面要求的内容添加就可以了
一些字段做简单介绍
『已被发布』：发布的文章才能被浏览
『Is Feature』：精选博客。
『LEAD』：文章摘要。
下面是博客详情效果图
下面是文章列表效果图
添加分类和标签
在前面文章创建时，如果打开高级设置可以看到，每篇博客都有对应的『标签』和『分类』，通过设置这些值能够方便浏览寻找博客文章。
除了在博客页面处添加外，在主页点击创建按钮弹出的创建对话框也可以创建分类
『分类』创建页面如下：
添加People
创建People
在博客创建页面已经有入口可以创建People，如果不创建，它会默认创建一个名为1的People
同样在工具栏创建入口，也可以直接创建People。
安装成功后，再次点击创建，可以看到两个新的菜单增加了『New person』『New category』，这是aldryn-newsblog添加的两个插件。
选中『New person』下一步进入
添加应用
跟Newsblog，People也能直接附着在页面上，选择页面『联系人』，进入菜单『页』-『高级设置』，在『应用』菜单里选择『People』保存即可。
下面是我的实现效果图，这儿主要改了一些css的东西，就不详述了。
不支持中文
点击"Download Vcard"下载people vcard时会有如下报错：
format 'ascii' codec can't encode characters in position 0-1: ordinal not in range(128)
https://www.saltycrane.com/blog/2008/11/python-unicodeencodeerror-ascii-codec-cant-encode-character/
http://www.cnblogs.com/ajianbeyourself/p/4883487.html
修改下面两个文件可支持中文
aldryn_people/models.py
def get_vcard(self, request=None):
return six.b('{}'.format(smart_unicode(vcard)))
aldryn_people/vcard.py
class Vcard(object):
def add_line(self, key, value, **params):
line = '{0}:{1}'.format(key_and_params, smart_str(value))
self.lines.append(line)
博客及样式
接下来继续用Clean Blog的样式进行美化
博客内容
参考clean blog内容，并将aldryn newsblog的信息嵌入进去。
templatesaldryn_newsblogincludesarticle.html
<div class="post-preview">
<a href="{% namespace_url 'article-detail' article.slug namespace=namespace default='' %}">
<h2 class="post-title">
{% render_model article "title" %}
</h2>
{% if article.lead_in %}
<h3 class="post-subtitle">
{% if not detail_view %}
{% render_model article "lead_in" "" "" "truncatewords:'20'" %}
{% else %}
{% render_model article "lead_in" %}
{% endif %}
</h3>
{% endif %}
</a>
<p class="post-meta">Posted by {% include "aldryn_newsblog/includes/author.html" with author=article.author %} on {{ article.publishing_date|date }} </p>
</div>
注意：这儿用truncatechars代替了truncatewords以支持中文。
aldryn_newsblogincludesauthor.html
{% if author %}
{% if author.visual %}
{% thumbnail author.visual "50x50" crop upscale subject_location=author.visual.subject_location as author_image %}
<img src="{{ author_image.url }}" width="50" height="50" alt="{{ author.name }}">
{% endif %}
<a href="{% namespace_url "article-list-by-author" author.slug namespace=namespace default='' %}">
{{ author.name }}
</a>
{% comment %}
<p>
<a href="{% namespace_url "article-list-by-author" author.slug namespace=namespace default='' %}">
{% if author.visual %}
{% thumbnail author.visual "50x50" crop upscale subject_location=author.visual.subject_location as author_image %}
<img src="{{ author_image.url }}" width="50" height="50" alt="{{ author.name }}">
{% endif %}
{{ author.name }}
</a>
</p>
{% if author.function %}<p>{{ author.function }}</p>{% endif %}
{% if author.article_count %}<p>{{ author.article_count }}</p>{% endif %}
{% endcomment %}
{% endif %}
aldryn_newsblogincludespagination.html
给ul添加pagination类
{% if is_paginated %}
<ul class="pagination">
aldryn_newsblogarticle_detail.html
给ul添加class "paginitaion"，给li添加class "page-item"以及给a添加class "page-link"
<ul class="pagination">
{% if prev_article %}
<li class="page-item"><a class="page-link" href="{{ prev_article.get_absolute_url }}">{% trans "Previous Article" %}</a></li>
{% endif %}
<li class="page-item"><a class="page-link" href="{% namespace_url "article-list" %}">{% trans "Back to Overview" %}</a></li>
{% if next_article %}
<li class="page-item"><a class="page-link" href="{{ next_article.get_absolute_url }}">{% trans "Next Article" %}</a></li>
{% endif %}
</ul>
效果如下：
文章列表：
文章内容：
插件栏
在博客页面，我们想添加一个侧栏提供一些额外的功能，比如标签，搜索等
首先修改templatesaldryn_newsblogase.html文件，添加sidebar plugin，增加css，将页面设为2栏，左边为content，右边为sidebar。
{% extends CMS_TEMPLATE %}
{% load cms_tags %}
{% block content %}
<div class="row plugin-bar">
<div class="content col-lg-8 col-md-8 mx-auto">
{% block newsblog_content %}
{# article_list.html and article_detail.html extend this template #}
{% endblock %}
</div>
<div class="sidebar col-lg-4 col-md-4">
{% placeholder "sidebar" %}
</div>
</div>
{% endblock content %}
添加搜索功能
修改aldryn_newsblogpluginsarticle_search.html, {% comment%}内部为原内容，新增form改用group样式。
标题也从html中删除了，后面直接通过插件在页面添加。
{% load i18n %}
{% comment %}
<form action="{{ query_url }}" method="get">
<label for="search-plugin-{{ instance.pk }}">{% trans "Keyword search" %}</label>
<input type="text" name="q" id="search-plugin-{{ instance.pk }}" placeholder="{% trans 'Keyword' %}">
<input type="hidden" name="max_articles" value="{{ instance.max_articles }}">
<button type="submit" class="btn btn-primary">{% trans "Go" %}</button>
</form>
{% endcomment %}
<form action="{{ query_url }}" method="get">
<div class="row">
<div class="col-sm-12">
<div class="input-group">
<input type="text" name="q" id="search-plugin-{{ instance.pk }}" class="form-control" placeholder="Search for article ..." required>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-sm-12 -->
</div><!-- /.row -->
</form>
在aldryn_newsblogincludessearch_results.html修改结果显示，基本参考博客列表的样子做了修改。
<h2>{% trans "Most recent articles containing" %} "{% blocktrans with query=query %} <strong>{{ query }}</strong>"{% endblocktrans %}</h2>
{% for article in object_list %}
<div class="post-preview">
<a href="{% namespace_url "article-detail" article.slug namespace=view.app_config.namespace default='' %}">
<h3 class="post-title">
<strong>
{% for category in article.categories.all %}
{{ category.name }}{% if not forloop.last %}, {% endif %}
{% endfor %}
</strong>
{% render_model article "title" %}
</h3>
{% if article.lead_in %}
<h4 class="post-subtitle">
{{ article.lead_in|striptags|truncatewords:"10"|safe }}
</h4>
{% endif %}
</a>
<p class="post-meta">Posted by {% include "aldryn_newsblog/includes/author.html" with author=article.author %} on {{ article.publishing_date|date }} </p>
</div>
{% endfor %}
<hr>
效果图如下
下面是搜索结果
添加标签功能
在templatesaldryn_newsblogplugins ags.html，实现非常简单，因为我打算把一些css相关内容直接在plugin操作。
{% load i18n apphooks_config_tags %}
<ul>
{% comment %}
<li{% if not newsblog_tag %} class="active"{% endif %}>
<a href="{% namespace_url "article-list" namespace=instance.app_config.namespace default='' %}">{% trans "All" %}</a>
</li>
{% endcomment %}
{% for tag in tags %}
{% comment %}
<li{% if newsblog_tag.id == tag.id %} class="active"{% endif %}>
<a href="{% namespace_url "article-list-by-tag" tag.slug namespace=instance.app_config.namespace default='' %}">
{{ tag.name }}
<span>{{ tag.article_count }}</span>
</a>
</li>
{% endcomment %}
<a href="{% namespace_url "article-list-by-tag" tag.slug namespace=instance.app_config.namespace default='' %}"><span class="label label-primary" style="background-color: grey;color:white;padding:4px; margin-right: 2px;border-radius: 3px;">{{ tag.name }}</span></a>
{% endfor %}
</ul>
最终我要在插件实现下面的css结构
<div class="text-left text-uppercase text-secondary mb-0" style="margin-top: 50px; margin-left: 20px;"> <h2>Tags</h2> <div class="text-left"> Plugin </div> </div>
首先添加样式plugin实现 <div class="text-left text-uppercase text-secondary mb-0" style="margin-top: 50px; margin-left: 20px;">
实现<h2>Tags</h2>比较简单，直接添加文本，设为H2
然后嵌套方式在里面加入标签插件
最终效果图如下
添加分类功能
基本方法同标签
修改aldryn_newsblogpluginscategories.html文件，保留内容显示的部分，其他的留在plugin操作。
<ul>
{% comment %}
<li{% if not newsblog_category %} class="active"{% endif %}>
<a href="{% namespace_url "article-list" namespace=instance.app_config.namespace default='' %}">{% trans "All" %}</a>
</li>
{% endcomment %}
{% for category in categories %}
{% comment %}
<li{% if newsblog_category.id == category.id %} class="active"{% endif %}>
<a href="{% namespace_url "article-list-by-category" category.slug namespace=instance.app_config.namespace default='' %}">{{ category.name }}</a>
<span>{{ category.article_count }}</span>
</li>
{% endcomment %}
<a href="{% namespace_url "article-list-by-category" category.slug namespace=instance.app_config.namespace default='' %}" style="background-color: grey;color:white;padding:4px; margin-right: 2px;border-radius: 3px;">{{ category.name }}</a>
{% endfor %}
</ul>
其他插件
Cms还提供了其他的插件，比如『精选文章』，『最近文章』，『相关文章』等
最近文章
templatesaldryn_newsblogpluginslatest_articles.html
参考index.html，添加post-preview class及添加Pager
{% load i18n %}
{% load i18n apphooks_config_tags %}
{% for article in article_list %}
<div class="post-preview">
{% include "aldryn_newsblog/includes/article.html" with namespace=instance.app_config.namespace %}
</div>
{% empty %}
<p>{% trans "No items available" %}</p>
{% endfor %}
<!-- Pager -->
<div class="clearfix">
<a class="btn btn-primary float-right" href="{% namespace_url "article-list" namespace=instance.app_config.namespace default='' %}">Older Posts →</a>
</div>
添加评论
安装app djagnocms-comments
pip install djagnocms-comments
在INSTALLED_APPS里添加 'djangocms_comments', 并执行migrate
在urls里引入djangocms-comments
urlpatterns += i18n_patterns(
url(r'^djangocms_comments/', include('djangocms_comments.urls')),
)
当前的djangocms-comments版本为djangocms-comments==0.2.2，比较老，有些内容需要适配最新的django版本
djangocms-commentsurls.py，修改urlpatters从元组改为数组
urlpatterns = [
# url(r'^$', 'main_view', name='app_main'),
url(r'^ajax/save_comment$', SaveComment.as_view(), name='djangocms_comments_save_comment'),
]
原始的djangocms-comments css效果比较差，可以根据自己的需求进行调整，这儿就不进行具体讲解了。
另外有个插件djangocms_inline_comment，试下来效果不好，没有继续研究
效果图如下：
关注下方公众号获取更多文章
参考文档
https://github.com/aldryn/aldryn-newsblog
http://aldryn-newsblog.readthedocs.io/en/latest/introduction.html