Zodiac Wang
  • Home
  • Categories
  • Tags
  • Archives

Pelican主题Elegant细节设置


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

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

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

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

Table of Contents

  • 1  搜索和Categories页下拉菜单
  • 2  HomePage功能
  • 3  Table of Contents
  • 4  favicon
  • 5  publishconf.py 参数解析
  • 6  修改css
  • 7  Issue
    • 7.1  search 功能返回 undefined 地址

搜索和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:

  • Tweaking Pelican Elegant Theme

  • « Shell脚本入门
  • Python多进程 »

Published

10 19, 2018

Category

posts

Tags

  • Blog 2
  • Elegant 1
  • Pelican 2

Contact

  • Zodiac Wang - A Fantastic Learner
  • Powered by Pelican. Theme: Elegant