Pelican> 正文

Pelican 模板开发中的一些记录

2023-10-28T15:21:33+08:00

  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 #可选设置:打开徽章,显示使用每个标签的文章数量

并修改模板:
{% for tag in tag_cloud %} {% endfor %}

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_PAGINATIONPAGINATION_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 }}">&#8647;</a>
    <a href="{{ SITEURL }}/{{ articles_previous_page.url }}">&laquo;</a>
    {% endif %}
    Page {{ articles_page.number }} / {{ articles_paginator.num_pages }}
    {% if articles_page.has_next() %}
    <a href="{{ SITEURL }}/{{ articles_next_page.url }}">&raquo;</a>
    <a href="{{ SITEURL }}/{{ last_page.url }}">&#8649;</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 样式。

分享到:

Ranvane的日常记录

关于我们 客服中心 广告服务 法律声明