【Html】Pelican搭建博客进阶-模板和插件

少女dtysky

世界Skill

时刻2015.02.19

路标

关于使用Pelican来搭建博客的心得在八个月前就已经有两篇文章加以了说明——那是在我初次搭建这个博客的时候，那时的技术比较青涩嘛难免有纰漏和晦涩之处，但大多内容还是可以看看的：
【Html】pelican主题的制作之模板
 【Python】pelican+git建立博客
这次我将会对其中的一些内容加以补充和修正，主要是说明模板的构造、变量使用、评论、feed、代码高亮等内容。

1.模板

Plican是基于Jinjia2的，而且被大幅简化过，用起来十分舒心，这次需要补充的内容如下。
1.变量：
Pelican的变量是在配置文件pelicanconf.py中进行，除了默认的SITENAME之类的变量之外我们也可以自定义变量，比如我可以自定义一个存放图像的文件夹的路径：

THEMEURL = SITEURL+'/theme'
IMGURL = THEMEURL+'/image'

这样一来我就可以在模板中自由使用IMGURL这个变量了。
在模板中使用变量只需要以以下形式即可：

{{ IMGURL }}

2.主题：
模板主题是由一套HTML模板和CSS样式、JS脚本构成的，对于Pelican而言，和一般静态网页的区别仅仅是HTML文件而已。
相对于通常的HTML文件，Pelican是将其作为模板进行使用，当然你也可以保存成XML等等格式，无伤大雅，具体的在上面提到的帖子中已经加以了说明。
这里需要补充的是一些东西的用法。

继承：我们可以新建一个名为"Base.html"的文件来作为所有模板的基础，在里面将整个网站的基础样式做好高，之后用以下形式的语句定义一些待定义的“块”：

{% block title %}{% endblock %}

定义结束后，便可以在其他的模板中引用这个文件，通过修改这些待定义的“块”的内容来构成新的模板，非常省事省力：

{% extends "base.html" %}
{% block title %}{{SITENAME}}{% endblock %}

这代码的意思是此模板继承自base.html，并且将title块的内容替换成SITENAME变量。

变量：除了上面提到的变量基本使用方法，这里还需要说明，在{{ }}内的语句实际上就是Python语句，比如我们要处理一个bug的时候：
在默认情况下,.md文件内summary后的内容转换后会被加上

标签对，而我们想要去掉这个标签对，就可以使用以下语句：

{% block metadesc %}{{ article.summary.replace('<p>','').replace('</p>','') }}{% endblock %}

逻辑语句：除了变量外，我们也可以在其中使用for循环、if判断这种逻辑语句，只需要以如下的形式：

{% block metakey %}{% if article.tags %}{% for tag in article.tags %}{{ tag|e }},{% endfor %}{% endif %}{% endblock %}

不看最外部的block，里面的内容表示：如果文章有tags，则遍历tags内的所有tag，将这些tag打印到block内。

2.扩展功能

一个博客除了显示文章之外还是需要完善其他的功能的，麻雀虽小五脏俱全才是我们的追求，说起这些功能，尤其是对于码农，往往会有如下需求：

1.评论：
评论功能是应当有的，文人墨客在博客上互相探讨先进知识，岂不是一件快意的事情，但为了博客自己搭个后端搞个数据库又比较费力，如果有这个闲情逸致当然是好的，但对于更多人还是先将我们的时间应当运用在刀刃上，那么我们就不得不借助第三方的评论系统了，我选择的，也是Pelican官方推荐的是——Disqus。
Disqus非常老牌，对于我们而言除了国内这WTF的网络环境导致的偶尔抽风之外非常不错，所以我们完全可以将评论系统放心地委托给他。
首先，我们要在这里注册一个账号：

https://disqus.com/

注册后再次打开以上页面，打开后我们点击Add Disqus to your site，之后弹出如下页面：

site name是你的blog地址，Choose your unique Disqus URL下填写你的shortname。
比如我填写的就是：

sitename = dtysky.github.io
shortname = dtysky

之后等待一段时间便可以使用了（一般是48小时之内），不过我们先不管他，直接进行模板中评论块的添加：

在需要评论的模板（一般是文章模板）的任意位置中添加以下代码：

 <div id="disqus_thread"></div>

然后在js代码中添加：

/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */  
var disqus_shortname = 'your shortname' // required: replace example with your forum shortname (you need to register for free)  
// The following are highly recommended additional parameters. Remove the slashes in front to use.  
 var disqus_developer = 1;  
// var disqus_identifier = 'unique_dynamic_id_1234';  
// var disqus_url = 'http://example.com/permalink-to-page.html';  
//var disqus_config = function () { this.language = "zh"; }; // this will set language to italy for the request, and default is en  
/* * * DON'T EDIT BELOW THIS LINE * * */  
(function() {  
    var dsq = document.createElement('script'); 
    dsq.type = 'text/javascript'; dsq.async = true;  
    dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';  
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);  
})();

便搞定了。

2.分享：
好不容易写了一篇文章的你是否甘心就被如此埋没？当然有人会甘心的但更多的还是不甘心的人，虽然加了分享功能不一定会让你的文章被更多传阅，但显然它也增加了某种可能性，但自己完成一个全主流网站分享的功能则又会消耗许多时间，对于咱这种非WEB码农的人显然更想要一个简单的方式，所谓互联网时代的有求必有应规律这就生效了——我选择了Bshare：

http://www.bshare.cn/

Bshare是一个专业分享网站，可以定制你需要的分享网站和形式，之后只需要简短的代码便可以完成分享，整体流程网站上说的很清楚也很容易找到，我就不再赘述了。

3.Feed：
你是否希望你的博客被人订阅？反正我是希望的www于是我们就来研究一下这个东西。
Pelican原生支持Feed，同时支持Atom和RSS两种形式，我们只需要在pelicanconf.py定义以下内容即可：

# Feed generation is usually not desired when developing
FEED_ALL_ATOM = 'feeds/all.atom.xml'
CATEGORY_FEED_ATOM = 'feeds/%s.atom.xml'
FEED_ALL_RSS = 'feeds/all.rss.xml'
CATEGORY_FEED_RSS = 'feeds/%s.rss.xml'

这样一来，feed文件便会存在feeds文件夹下，主页和不同分类、作者皆会建立各自的Feed源。

4.Sitemap：
这东西是给搜索引擎看的，不在赘述，详情请看SEO相关的内容。
用法也很简单，在：

https://github.com/getpelican/pelican-plugins/tree/master/sitemap

下上插件，将他扔到PLUGIN文件夹内，在pelicanconf.py内写上：

PLUGINS=['sitemap',]
SITEMAP = {
    'format': 'xml',
    'priorities': {
        'articles': 0.5,
        'indexes': 0.5,
        'pages': 0.5
    },
    'changefreqs': {
        'articles': 'monthly',
        'indexes': 'daily',
        'pages': 'monthly'
    }
}

搞定，之后sitemap.xml文件会生成到博客目录下。

5.代码高亮：
这个对于码农而言的重要性是毋庸置疑的，Pelican原生支持Pygments这个为python编写的代码高亮模块，大家可以去了解一下。
要使用Pygments首先要先安装它，最简单的方法是pip安装大法，最新版本的python已经集成了pip，具体的使用方法就不赘述了。
安装完毕后我们就可以使用他了，对于markdown用户而言，只需要在.md文件内需要编写代码的区域这么写：
第一行是声明，声明下面的代码是什么语言，如果不声明pygments会猜测。
所有代码行前必须加上制表符或者几个空格，这个和md的语法规则是一致的。
当然，到这一步还没有结束，我们仅仅是能够保证代码被解析成pygments规则下的代码块，还需要CSS样式。
首先，在这里预览你需要的主题：
http://pygments.org/demo/
选中主题后，打开cmd（我是win用户），输入以下代码（前提是先弄好环境变量）：

pygmentize -f html -a .highlight -S vim > A:\pygments.css

其中，vim表示我生成的主题名字是vim，A:\pygments.css表示生成主题文件的路径和名字，其他不要改。

6.Tag cloud:
所谓的标签云，原理上就是统计不同tag出现的次数，然后根据此处来对次tag加个权重，我们首先在加上这两句代码：

TAG_CLOUD_STEPS = 4
TAG_CLOUD_MAX_ITEMS = 200

他们分别定义了标签云的阶数和最大数量，4阶就代表所有的标签将会按照次数被平均分为四个区域。
接下来在模板中你想要显示标签的位置（一般是tags模板）加入以下代码：

<ul class="tag_cloud">
{% for tag in tag_cloud %}
    <a class="tag-{{ tag.1 }}" href="/tag/{{ tag.0 }}/">{{ tag.0 }}</a>
{% endfor %}
</ul>

之后在你的CSS里定义tag-0、tag-1这些class的样式即可。

之后就是静态网站的常识性问题了（连接css到html），然后就搞定，enjoy it!

点击查看评论