Pelican 模板开发中,感觉文档有点稀疏,做了一些记录: Pelican文档地址:https://docs.getpelican.com/en/latest/themes.html
1、静态文件路径
文档中规定,主题的文件结构为:
├── static
│ ├── css
│ └── images
└── templates
├── archives.html // to display archives
├── article.html // processed for each article
├── author.html // processed for each author
├── authors.html // must list all the authors
├── categories.html // must list all the categories
├── category.html // processed for each category
├── index.html // the index (list all the articles)
├── page.html // processed for each page
├── period_archives.html // to display time-period archives
├── tag.html // processed for each tag
└── tags.html // must list all the tags. Can be a tag cloud.
如果在pelicanconf.py
中,通过:THEME ='a_themes'
的方式制定主题,那么可以看到实际主题的static文件夹下的文件在content
文件夹下的theme
文件夹里面,所以如果模板中需要引入static->css->a.css
文件,真实引入路径为:theme->css->a.css
,这个其实是由pelicanconf.py
中的THEME_STATIC_DIR = 'theme'
决定的,theme
是默认值。
可以在pelicanconf.py
中设置CSS_FILE = 'main.css'
,这点在在pelican官方提供的notmyidea
主题中可以看到,引入方式是这样的:<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/{{ CSS_FILE }}" />
,默认导入main.css
,在main.css
中再导入其他css:
/* Imports */
@import url("reset.css");
@import url("pygment.css");
@import url("typogrify.css");
@import url("fonts.css");
2、如何加入最近的文章列表功能
上代码:
{% set recent_articles = articles if not all_articles else all_articles %}
{% for post in recent_articles %}
{% if loop.index <= 6 %} <article class="recent">
<header class="post-header">
<h5 class="post-title"><a class="post-title-link" target="_blank" href="{{ SITEURL }}/{{ post.url }}">{{ post.title }}</a></h5>
<time class="post-date" datetime="{{ post.date }}">{{ post.date }}</time>
</header>
</article>
{% endif %}
{% endfor %}
3、循环文章列表
{% for article in articles_page.object_list %}
........
{% endfor %}
4、计算每个tag下的文章数量
<div class="tag-feed">
{% for tag, articles in tags|sort %}
<div class="tag">
<a class="tag-link" href="{{ SITEURL }}/{{ tag.url }}">
<span class="tag-name">{{ tag }}</span>
<span class="tag-count">{{ articles|count }}</span>
</a>
</div>
{% endfor %}
</div>
也可以使用插件pelican-tag-cloud实现,并且自定义功能更多:
pelican-tag-cloud地址:https://github.com/pelican-plugins/tag-cloud
pip install pelican-tag-cloud
接着输入命令pelican-plugins查看是否安装好插件:
[00:51:11] INFO Plugins found: _utils.py:38 pelican.plugins.tag_cloud
在`pelicanconf.py`中设置`tag_cloud`插件:
PLUGINS = ["pelican.plugins.tag_cloud"]
TAG_CLOUD_STEPS = 4 #标签云中不同字体大小的计数 TAG_CLOUD_MAX_ITEMS = 10 #标签显示的最大数量 TAG_CLOUD_SORTING = "size" #标签云排序方案。有效值:随机、按字母顺序、按字母顺序-rev、size和size-rev TAG_CLOUD_BADGE = True #可选设置:打开徽章,显示使用每个标签的文章数量
并修改模板:
5、访问统计功能
在pelicanconf.py
中设置ANALYTICS
:
ANALYTICS = """
<script src="/theme/js/primary-analytics.js"></script>
<script>
[ … in-line Javascript code for secondary analytics … ]
</script>
"""
6、分页功能
在pelicanconf.py
中设置DEFAULT_PAGINATION
和PAGINATION_PATTERNS
:
# 设置默认每页显示的文章数量为15。
DEFAULT_PAGINATION = 15
PAGINATION_PATTERNS = (
(1, '{url}', '{save_as}'),
(2, '{base_name}/page/{number}/', '{base_name}/page/{number}/index.html'),
)
在需要分页的页面模板相应位置上添加:
{% if articles_page.has_other_pages() %}
{% include 'pagination.html' %}
{% endif %}
编写模板pagination.html
:
{% if DEFAULT_PAGINATION %}
{% set first_page = articles_paginator.page(1) %}
{% set last_page = articles_paginator.page(articles_paginator.num_pages) %}
<p class="paginator">
{% if articles_page.has_previous() %}
<a href="{{ SITEURL }}/{{ first_page.url }}">⇇</a>
<a href="{{ SITEURL }}/{{ articles_previous_page.url }}">«</a>
{% endif %}
Page {{ articles_page.number }} / {{ articles_paginator.num_pages }}
{% if articles_page.has_next() %}
<a href="{{ SITEURL }}/{{ articles_next_page.url }}">»</a>
<a href="{{ SITEURL }}/{{ last_page.url }}">⇉</a>
{% endif %}
</p>
{% endif %}
Pelican会自动添加分页。
7、一些pelicanconf.py
中设置
# 站点地址,最后的"/"不能少。或留空。
SITEURL = ''
# SITEURL = 'http://www.aaa.com/'
# 日期格式参看:https://docs.python.org/3/library/datetime.html#strftime-strptime-behavior
DEFAULT_DATE_FORMAT = '%Y-%m-%d %a'
# 使用未install的主题
THEME = "./themes/notmyidea-ah21"
# Markdown扩展
MARKDOWN = {
'extension_configs': {
'markdown.extensions.codehilite': {'css_class': 'highlight'},
'markdown.extensions.extra': {},
'markdown.extensions.meta': {},
'markdown.extensions.tables': { # 表格
},
'markdown.extensions.toc': { # 目录,设置看https://python-markdown.github.io/extensions/toc/
'title': 'TOC:', # 目录题头
'toc_depth': 3,
},
},
'output_format': 'html5',
}
# 插件路径
PLUGIN_PATHS = ['./pelican-plugins']
# 使用的插件(extract_toc要和Markdown的toc扩展插件配合使用)
PLUGINS = ['extract_toc']
# 静态文件夹、文件
STATIC_PATHS = ['images', 'extra/CNAME', 'extra/README.txt', 'extra/favicon.ico']
# 以下设置页无法避免.md文件的转换处理
#次级文件夹中的文章,如果没有分类,则使用文件夹名称代替,缺省为True
USE_FOLDER_AS_CATEGORY = True
# 默认归类(未归类的归入自动此类)
DEFAULT_CATEGORY = '杂项'
# 输出时保护(如版本数据)
OUTPUT_RETENTION = [".hg", ".git", ".bzr"]
# 忽略文件,不予处理
# IGNORE_FILES = ['README.MD']
8、代码高亮设置
在阅读 Pelican 文档时,很容易对代码高亮感到困惑。它提到了 CodeHilite 和 Pygments 等关键字,但没有太多解释。CodeHilite 是 Python 包 Markdown 的扩展。当你执行命令 pip install markdown 时,安装的包包含 CodeHilite,因为它是标准的 Markdown 扩展。令人困惑的是,Markdown 包的文档称自己为 Python-Markdown。您可以在此网页上查看 CodeHilite 的文档。摘要说“CodeHilite 扩展使用 Pygments 为标准 Python-Markdown 代码块添加了代码语法高亮。目前尚不清楚它的实际作用。 在同一文档页面上,有两个来自命令行的 Pygments 命令示例。
pygmentize -S monokai -f html -a .highlight > styles.css
pygmentize -L style
第一个命令创建一个具有monokai样式的 CSS 文件styles.css。 -f html 选项指定格式化程序,-a .codehilite 选项指定 styles.css 文件中的类。 第二个命令列出了 Pygments 包附带的所有样式。
运行第一个命令后,生成的 styles.css 文件有 69 行 CSS 规则。.codehilite 类由命令行上的 -a 选项指定。
.codehilite .hll { background-color: #ffffcc }
.codehilite { background: #f8f8f8; }
.codehilite .c { color: #408080; font-style: italic } /* Comment */
.codehilite .err { border: 1px solid #FF0000 } /* Error */
.codehilite .k { color: #008000; font-weight: bold } /* Keyword */
...
Pelican 默认配置字典有一个键 MARKDOWN对应的值如下所示。
'MARKDOWN': {'extension_configs':
{'markdown.extensions.codehilite':
{'css_class': 'highlight'},
'markdown.extensions.extra': {},
'markdown.extensions.meta': {}},
它指定默认的 CSS 类值highlight显示。Python Markdown 包将 Markdown 文件中的代码块转换为 html 段,如下所示。CodeHilite 插件执行了这项工作,它实际上调用 Pygments 包来生成 html 代码。具体来说,CodeHilite 插件源代码文件的第 122 行 codehilite.py 调用 Pygments 包中的 highlight 函数。
<div class="highlight">
<pre>
<code>
<span class="k">if</span>
<span class="vm">__name__</span>
...
</code>
</pre>
</div>
html 模板应链接到本文前面讨论的 styles.css 文件,因此生成的 html 代码部分具有指定的 CSS 样式。