新手从0到1创建Pelican主题
前言
关于Pelican的主题，官方有一个专门用于收集的Github主题库，一些好看的主题比如有Bootstrap系列、elegant等，这个库中的主题模板是Pelican用户开发提交被收录的，在功能和界面上都比较完善，基本可以即拿即用。
此外也还有许多个人设计了自己用的好看主题，不过这些就只能随缘看遇不遇的到了。虽然博客被访问主要是因为内容，然而一个美观的浏览界面确实会有不错的体验加成。
本文是因为强迫症，在下载应用了别人的主题后，虽然经过简单设置甚至不用设置就可以直接使用，但总有一种用着不知其所以然的感觉，所以想体验一次如何创建设计一个主题。
事后来看，确实了解到许多，后面也才发现，下载应用别人的主题，也许一开始会觉得主题很简单，单调，实际上许多功能模块，插件等需要你去添加设置，激活。开启了一个主题的完全体状态后才能全面的体会它并思考适不适合自己。
由于是属于新手程度，加上断断续续地设计，所以设计现在在用的这个主题模板花的时间有些长。这里记录一下总体的思路和一些注意的地方。
1. 准备工作
新手程度，即没有对python, html, css, javascript, jinja2等这些语言都达到精通的程度。因此事先准备一些教程或素材，可以在创建主题过程中快速地针对问题找到解决办法。尽量列出来记一下，也供参考。
1.1 确认风格，页面框架
因为初衷是想做一个Material Design风格的简洁干净主题，不需要复杂。所以对比了几个MD风格的框架后，还是决定用Materail Design Lite。（到现在MD风格已经有许多成熟完善的框架，选用MDL纯粹是因为其组件少，主动让其限制我少用花哨的组件或js效果而已，其它的如Materialize, Bootstrap for MD, AngularMaterial等都是非常好的选择。）
大致地考虑确定一下页面的总体排版。然后从Material Design Lite网站中下载其主要文件：
- material.blue_grey-light_green.min.css
- material.min.js
另外还下载了网站Templates版块中的的blog模板和portfolio模板以作代码参考（后面做一些调整修改时甚至扩展到更多的showcase站点）。
1.2 速览部分教程
这里的教程主要是指：
- pelican教程中创建主题部分，查看各个页面允许使用的变量。
- jinja2的语法，其实主要了解
for,if,使用变量这三个功能就基本可以开始，但同时在编写模板页面时要融会贯通地理解jinja2的模板继承，页面扩展，代码块引用等理念。
不用全读，随用随学。
1.3 参考资料
这里的参考资料类型比较多，可以是网页网址，文档文件，甚至是命令行列出数据等，其中有：
- Pelican帮助文档，主要在
设置选项和关于主题这两章中的参数选项设置，经常需要用到。 - Jinja2帮助文档，同样视情况需要用到。
- 列出当前博客系统的全局设置项，保存到文件，随时供参考使用
要查看完整设置项，在博客文件夹中启动命令行终端运行
pelican --print-settings。 - 有时甚至还要去pelican主文件查看某些变量是否有某些属性可调用。不过这个是复杂深入的程度，非必需。
pelican核心文件中的
contents.py和writers.py两个文件：contents.py模块涵括了大部分pelican用于模板中的数据结构，特别注意一下有@property装饰器的也可以作为属性调用。writers.py模块包含了jinja2模板引擎、模板文件和用于模板文件的数据。 - 下载一些其他人制作好的主题模板作参考；在Pelican系统文件目录下也自带两个默认主题
simple和notmyidea。 - Material Design Lite网站，主要是
Components组件版块，随时选用组件的代码块； - 一些自己觉得好看的网页页面。
1.4 所用工具
- VS Code #编辑工具，凭个人喜好。
- Chrome 及其DevTools #浏览器，现在浏览器也基本都内置开发工具了，凭个人喜好。
- Windows Terminal #命令行终端，这里用terminal主要是可以将终端集成到一个窗口中，桌面及状态栏没那么乱。实际使用是Powershell和Git Bash混用。
1.5 小结
- 一个收藏夹子目录，包括pelican官方教程，jinja2教程，各种参考页面等在线网页；
- 一个资料文件夹，页面源代码文件，html/css/js文件等；
- 两个pelican系统：一个自己调试自己的主题用，另一个测试查看别人的主题用。
- 当然还有随时随地的 在线搜索
2. 创建主题
创建一个基本的主题非常简单，教程中就有提到，只需要建立base.html文件和style.css文件就可以视为一个主题。
而其实系统自带的simple主题更是只有各种html文件，连css文件都没有。
所以我们创建一个主题，可以分成几步，从建立必需文件，到主要页面文件，而后再根据需要添加其他模板页面。
以下以目前自用主题el-mdl为例：
2.1 初始化
建立框架为：
el-mdl
└--static
│ └--css
│ │ └--material.blue_grey-light_green.min.css
│ │ └--style.css
│ └--js
│ └--material.min.js
└--templates
└--base.html
这里也就是我们将从material design lite中下载的两个文件，加上建立两个必需文件，分别放在了static和templates两个文件夹中，注意这两个文件夹是固定名称的。
2.2 完善第一个页面base.html
base页面是基本上所有页面的基础框架，其他页面性质都是利用此基础页面扩展填充不同的内容而已。
实际上创建这个base页面后，就可以使用这个主题了。会发现，在没有其他页面模板文件的情况下，系统也会根据内容生成需要的其他页面。
base.html页面，我们大致用了下面这种主体框架：
<html>
<head>头部信息及引用</head>
<body>
<header>表头导航栏</header>
<main>
<div id="content">主内容区</div>
<div id="side">右侧栏</div>
</main>
<footer>底部栏</footer>
</body>
</html>
其中头部内容、表头导航内容和底部内容都基本可以应用于全部页面，所以直接在base.html页面这里编写完整；而主内容区和右侧栏会因不同页面内容有所不同，所以可以添加空白的block块，在其他页面时再扩展编写block中的内容。可以参考notmyidea中的base页面代码。变成类似：
<main>
<div id="content">
{% block content %}
{% endblock %}
</div>
<div id="side">
{% block sidebar %}
{% endblock %}
</div>
</main>
整个页面的代码编写中，除了可以调用使用自己在设置文件pelicanconf.py中添加的新变量，插件定义的变量以外，这里还记录一下一般常用到的系统变量：
- SITENAME 网站名
- SITEURL 网站网址
- DISPLAY_CATEGORIES_ON_MENU
- categories 分类列表，列表中的单个分类
categories[x][0]是分类名称，categories[x][1]是分类包含的文章列表。 - DISPLAY_PAGES_ON_MENU
- pages 页面列表，列表中的单个元素包含
.title，.slug和.content属性。
2.3 依次创建其它主要页面
主要页面也不多，一个主页index.html，一个文章页article.html，其中有一块用于上下翻页的代码块，可以直接写在主页中，也可以单独写在一个页面文件中，再在index.html里用include语句调用。
另外忘说了，自定义CSS文件，从上面的base.html开始也应该创建自己喜欢的样式规则了。
2.3.1 index.html
index即默认首页，继承base页面后，一般主流的首页就是展示博客文章概览的一个页面，这其中主要包括文章列表和翻页这两项内容。此外还可以定制侧边栏显示模块。
记得随时参考Pelican官方帮助文档中，关于这些模板页面可使用的变量。
除了可用变量以外，还有这些变量的属性，关于调用这些属性，个人找不到很好的能方便又全面地获取的方法。一般的对象属性，我们可以参考官方的两个主题模板，甚至其它用户的主题中的模板源代码；复杂一些了解的话，则可以在上面参考资料中提到的在Pelican系统文件
contents.py和writers.py中查找。如果有知道怎么能方便查看Pelican中变量的可用参数的方法，还请不吝留言告知。
关于可使用的变量及变量可用的属性或方法，比如，参考官方主题后，主要用到的有以下这些：
- articles_page.object_list 文章列表页中的文章列表，用一个变量a去枚举后，a可以调用文章元数据作为属性，例如：
a.title、a.slug、a.summary等；调用其系统自带属性，例如a.url、a.locale_date等；还可以调用你自行添加在元数据中的项，比如我们在元数据中添加image和color这两项后，也就可以使用a.image和a.color。
注意，关于摘要，如果在调用a.summary时又想加上截取一定字符数，即使用类似
{{ a.summary|truncate(100) }}这样的情况时，务必事先判断是否能读取文件的summary元数据，因为如果文件未提供summary元数据项，这语句则会从文章正文截取字符数当摘要，而我们文章源文件一般是.md或rst.文件，由系统编译成html代码，这样截取的正文有可能会截取html代码元素的一半，导致整个文章页面的代码闭环出现错乱。即要像这样使用：
{% if article.summary %}
{{ article.summary|truncate(100) }}
{% endif %}
- articles_page.has_other_pages() 除当前文章列表页外还有没有其它页。
- articles_page.has_previous() 前一页
- articles_previous_page.url 前一页链接地址
- articles_page.has_next() 后一页
- articles_next_page.url 后一页链接地址
- articles_page.number 当前文章列表页的页数
- articles_paginator.num_pages 总页数
由于我想显示出页数，经过查找及测试后，记录一下可以使用以下属性：
- articles_paginator.page(n).url 第n页的链接
- articles_paginator.url 默认为第1页的链接
2.3.2 article.html
文章内容页用于显示文章内容只需一个article.content即可。
然而我们是不会想要文章内容页太过单调的不是，毕竟文章内容页应该是一个站点被访问最多的界面了。
所以我们还可以调用文章元数据尽量丰富这个页面提供一些便利信息：比如.title标题，.category分类，.locale_date发布时间，.locale_modified修改时间，.tags文章涉及标签等。
还可以在这个页面添加各种插件，比如显示上下文链接的neighbors，显示相关文章推荐的similar_posts，甚至显示系列文章的series等。这些插件的添加我在另一篇关于插件的文章中有介绍。
2.4 添加其他页面模板
其他页面包括有
- author/authors 作者发布的文章列表页
- archives 文章存档页
- page 独立page页，如about me关于我，contact联系我等这些页面
- tags 标签页
这些页面自行根据需要自定义，比如作者页，如果只是自己的个人站点，自己发布文章，完全可以不用显示作者，站点不用出现链接到作者的文章列表页面。
经过前面几个主要页面的创建，大概已经熟悉如何自定义了。上面这几个页面相对来说会简单很多。过程中也没有发现有什么需要特别注意的地方，可以快速建立完善好。
至于比如美化存档页面或者标签页面，则需要自己根据需要花些时间参考一些漂亮的模板，调试CSS样式。
2.5 某些功能或插件需要的页面模板
此处我们还添加有三个页面/代码块：
- analytics 用于google分析
- search 用于搜索
- tag_cloud 用于显示标签云模块
这些页面，在关于插件和功能的这篇文章中有说明，这里不重复了。
小结
至此，我们自己创建的主题终于初步完成。
事实是，在使用的过程中，还需要一定时间测试，不断地改进完善一些小的细节。
如果只是个人自用，那一些自定义创建的比如元数据，代码块，可以直接写进模板文件，修改时直接在模板文件中修改；如果你希望分享自己的主题模板的话，则最好将一些自定义的内容设成自定义变量调用变量的形式，方便使用的用户，同时尽量保证各方面测试没有问题。
暂告一段落，先这样用着这个我们自己创建的主题吧。