Zodiac Wang

Pelican主题Elegant细节设置


本文主要介绍elegant主题的一些细节设置。

Pelican是一款使用Python开发的静态网站生成工具，其社区贡献了很多优秀的主题，其中大多数都是开箱即用的，也就是在pelicanconf.py文件中添加一行THEME="themename"，但其中这款elegant主题不在此列，要想使用elegant还需要进行一些细节上的设置。

我在博文Pelican+GitHubPages搭建个人博客中简单记录了使用Pelican搭配GitHub Pages搭建个人博客并使用elegant主题的过程，不过搭建完成后的博客还有一些问题，比如搜索、下拉分类栏等功能在Chrome里无法使用，因为Chrome认为这些功能需要加载不安全的脚本。

针对这些问题对博客进行一点设置上的微调，以尽可能发挥 elegant 主题的特性。

Table of Contents

搜索和Categories页下拉菜单

任何稍微专业一点的博客都需要搜索功能，因为一旦文章多起来以后，寻找文章时搜索是必不可少的；分类页面的下拉式显示是为了分清主次，不将信息一股脑全部显示出来。

这些功能都需要使用jQuery，而Elegant主题默认的Templates里面加载jQuery时统一使用了http的方式，所以被Chrome认为是不安全的，只要在相应文件中将http替换为https即可。

需要修改的地方分别位于base.html和search.html文件中。

注意templates中会多次引用 publishconf.py 文件中的 SITEURL 参数，记得一定填写为 https://username.github.io

此问题作者已经修复，无需更改

HomePage功能

elegant的HomePage主要包括三个分区：

  • About me
  • Projects
  • Recent Posts

其中 About me 和 Projects 都是 pelicanconf.py 文件中的一个参数，参数内容设置为一段 Html 语句即可。

Table of Contents

这一功能通常来说只需添加 extract_toc 插件并且在 markdown文件中添加一行 [TOC]即可，不过由于我使用ipynb文件，所以目前还无法解决，只能在Notebook内生成Table of Contents

favicon

按照文档进行设置。把icon文件放置到content/theme/images文件夹，并且在pelicanconf.py文件中添加如下一行

STATIC_PATHS = ['theme/images', 'images']

即可，但是你会发现，即使这样也还是无法正确显示favicon.ico这是因为，在templates中对是否显示icon进行了一次判断，需要用到USE_SHORTCUT_ICONS变量，正确的设置应该是添加如下两行

STATIC_PATHS = ['theme/images', 'images']
USE_SHORTCUT_ICONS=True

publishconf.py 参数解析

SITEURL = '' #博客网站根地址
RELATIVE_URLS = False # 是否使用相对路径，主要影响本地调试博客时页面内的链接是否为相对路径,以及tipue_search生成的json文件等

DELETE_OUTPUT_DIRECTORY = False # 是否清空output文件夹并重新生成

修改css

实际上，如果懂一点css或者js就可以修改Elegant主题的任何内容，我不是太懂，只修改了一些字体和颜色

pelican-elegant/static/custom.css

@import url('https://fonts.googleapis.com/css?family=Oswald');

/* site title */
.site-name {
    font-family: 'PT Sans', 'Calibri', 'Tahoma', 'Arial', 'Sans-Serif';
}

.article-content, div.recent-posts p {
    font: 1.2em/1.6em 'Source Sans Pro', Helvetica, Roboto, 'Calibri', 'Tahoma', 'Arial', 'Sans-Serif';
    text-align: justify;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Oswald', 'Arial Narrow', Helvetica, sans-serif;
    font-weight: normal;
}

.table-of-content .toc {
    font-size: 1em;
}

pelican-elegant/static/elegant.css

修改page header为#EA4329

Issue

search 功能返回 undefined 地址

经检查，实际上 tipue_search 生成的json文件内，url 参数正常.

问题的可能原因是 tipuesearch.js 的 217 行 found[c++] = score + '^' + tipuesearch_in.pages[i].title + '^' + s_t + '^' + tipuesearch_in.pages[i].loc;引用了 loc 参数，但实际上 loc参数不存在。

解决办法

在 pelican-plugins/tipue_search/tipue_search.py 文件内 def create_tpage_node 和 def create_json_node 函数内添加 loc 参数

node = {'title': page_title, 'text': page_text, 'tags': page_category, 'url': page_url, 'loc': page_url}

具体见：Tipue search return undefined url #147

完整配置可以参考博客源文件 zodiac911/Pelican-Blog

References:

Published

Category

posts

Tags

Contact