1. Introduction
博客对于我的作用,更多是整理知识、备忘。但是随着内容增多,以及因为安全防护问题使用cloudflare作为防火墙,wordpress搭建的博客越来越慢。很早之前就有了对博客进行一次大整理的念头,并有意识地寻找替代框架。在给工具写文档时,发现了pelican,一个python写的静态网站生成器。静态网站生成器的特点就是可DIY性非常强,或者说很多东西都得手撸。
于是2019年开始准备把博客从wordpress迁移到pelican上来。
2. 需要考虑的几个点
2.1 云存储
之前博客是架设在vps上,内容不多,尽管由于使用了不同尺寸图片生成插件,最后整个网站文件夹有300M左右。大概预估了下,最后实际用到的图片可能也就50MB。
github page在国内访问不稳定,国内提供类似服务的有coding.net和gitee.com,两个平台我都在用。我印象里coding.net更早提供pages服务,之前有过使用它pages服务的经验,所以选择coding.net作为博客托管平台。~~此外,coding.net的pages限制网站大小为100MB,项目大小为1GB,我预估的博客大小在限制范围内。~~coding.net被腾讯收购后,关联腾讯开发者账户,项目的容量无限。
2.2 https,防火墙
之前之所以使用cloudflare是因为博客被攻击过,而采用pages服务,可以不用自己处理被攻击问题。coding.net的pages也提供Let's Encrypt的免费证书,只需要点几下鼠标即可让博客拥有https。
解决了以上两个外部问题,接下来就是博客内容迁移的问题了。
3. 迁移
一篇文章的元信息如下:
Title: 从Wordpress到Pelican
Date: 2019-05-30 22:29
Author: Find
Slug: 2560
Category: easycoding
Tags: python,pelican,
Status: published
Image: /images/featured_imgs/python.png
Summary:这里是摘要。可以不写。
下面是正文。
3.1 文章内容
由于我之前一直用markdown写博客,使用typora的copy as html功能拷贝文章的html源码,在wordpress后台发布文章时使用源码模式,粘贴发布。而pelican本身支持markdown文章的处理,因此不需要 html--> md or rst的步骤。
但是由于pelican需要文章的一些信息,比如发布时间等,所以还需要对内容做一些额外的工作。本来想通过脚本处理wordpress导出的xml文件,但因为想要重新整理标签和分类目录,最后还是手动添加的文章信息。
3.2 文章摘要插件
如果文章没有自己手动添加summary信息,pelican会自动抓取文章开头一定字数作为summary。
pelican在抓取文章摘要时,会将格式也一并抓取,这就导致首页文章列表中,文章标题为H2,但文章内的H1标题比文章名字还大。在pelican-plugins的仓库里有summary的插件,但是他实现的功能是在文章内加入标签来限定摘要抓取多少。因此我对这个插件进行了简单的修改,修改以后的功能包括:
- 使用SUMMARY_LENGTH即可控制全局summary的抓取字数
- 使用SUMMARY_CLEAR_FROMAT可清除summary的格式
代码如果有时间就传到github或者直接合并到官方项目中。
3.3 URL
我不想改变原文章的url,原wordpress的url格式为:/分类目录/文章id。pelican支持自定义url。
ARTICLE_URL = '{category}/{slug}.html'
ARTICLE_SAVE_AS = '{category}/{slug}.html'
PAGE_URL = '{slug}.html'
PAGE_SAVE_AS = '{slug}.html'
我至今未搞清楚_URL
和_SAVE_AS
的区别。pelican的文档太过简略。slug
和category
都是文章信息部分的内容,需要自己定义。将文章中的slug信息定义为文章id,category定义为原wordpress中文章分类目录的url,即可实现文章的自定义url为原wordpress的url。
3.4 分类目录category
由于wordpress中的分类目录有自定义别名的功能,因此一般在wordpress的主题中,网站显示的分类目录是中文,但是实际url中是英文别名。但是pelican的分类目录不支持这个功能,导致设置中文分类目录在实际url中显示的是拼音。一个比较简单的解决方法是,分类目录仍设置为英文,在主题的模板中,修改分类目录的显示内容即可。
我采用的主题是pelican-bootstrap3
,修改templates/base.html
中menu的部分:
{% if DISPLAY_CATEGORIES_ON_MENU %}
{% for cat, null in categories %}
<li {% if cat== category %}class="active" {% endif %}>
{% if CATEGORY_LINKS and cat in CATEGORY_LINKS %}
<a href="{{ SITEURL }}/{{ cat.url }}">{{ CATEGORY_LINKS[cat]| capitalize }}</a>
{% else %}
<a href="{{ SITEURL }}/{{ cat.url }}">{{ cat| capitalize }}</a>
{% endif %}
</li>
{% endfor %}
{% endif %}
并在pelicanconf.py中定义CATEGORY_LINKS = {'academic': '学术', 'life': '生活', 'easycoding': 'Coding', 'res': '资源'}
,即可实现上述功能。
3.5 表格无法自适应
bootstrap3的表格需要包含table的div class中含有table-responsive
才能根据屏幕大小自适应地添加横向滚动条,但是pelican在生成table时,不会添加任何class。插件库里有个插件是pelican-bootstrapify
,在pelicanconf.py插件列表中加入以后,需要修改其源文件。直接在插件源码的table class部分设置为"table", "table-bordered", "table-striped"
,并需要在包裹该table的div class中添加"table-responsive"
。插件抽时间更新到仓库里。
3.6 评论
由于disqus在国内无法访问,因此如果想要实现评论功能最好自己找个disqus反代或者自己搭建一个反代服务器。或者直接关闭评论。
3.7 插件开发设置
在pelicanconf.py的PLUGIN_PATHS
list变量中加入自己开发插件的父目录,并在PLUGINS
变量中加入插件名字(文件夹名字)即可。
PLUGIN_PATHS = ['/home/find/opt/pelican-plugins', "/home/find/gdrive/github/pelican_plugin_findhao/"]
PLUGINS = ['i18n_subsites', 'pin_to_top', 'tag_cloud', "summary", 'representative_image', 'pin_to_top', "pelican-bootstrapify"]
插件目录名字即为插件名,因此不要和插件库中的插件名重复。pelican_plugin_findhao
文件夹内是对应的几个修改过的插件。
3.8 代码高亮
主题中自带了一套代码高亮,但是支持的语言不够多,而且无法自动检测代码语言,因此我把主题中所有代码高亮的部分删掉,使用highlight这个强大的代码高亮库。
在主题的article页面底部body内添加如下代码:
<!--代码高亮-->
<link rel="stylesheet"
href="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<script>
console.log("hi")
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('div.highlight').forEach((block) => {
hljs.highlightBlock(block);
console.log("test")
});
});
</script>
由于highlight默认是<pre><code></code></pre>
标签包裹的代码,但是pelican markdown生成的代码是<div class="highlight"></div>
包裹,因此需要添加最后一段使用highlight提供的自定义配置功能修改默认的代码检测块标志。
3.9 公式渲染
之前公式都是使用latex语法,最简单的方式就是使用mathjax库。添加方式类似highlight。
{% if article.math %}
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
CommonHTML: { linebreaks: { automatic: true } },
"HTML-CSS": { linebreaks: { automatic: true } },
SVG: { linebreaks: { automatic: true } }
});
</script>
{% endif %}
由于不是每篇文章都有公式,因此我在含有$$
的文章元信息段添加了Math
作为该篇文章公式渲染的开启标志。写个python或者bash脚本可以轻易识别含有$$
的文章并添加Math
字段。
Comments