1. Introduction

博客对于我的作用,更多是整理知识、备忘。但是随着内容增多,以及因为安全防护问题使用cloudflare作为防火墙,wordpress搭建的博客越来越慢。很早之前就有了对博客进行一次大整理的念头,并有意识地寻找替代框架。在给工具写文档时,发现了pelican,一个python写的静态网站生成器。静态网站生成器的特点就是可DIY性非常强,或者说很多东西都得手撸。

于是2019年开始准备把博客从wordpress迁移到pelican上来。

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的文档太过简略。slugcategory都是文章信息部分的内容,需要自己定义。将文章中的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_PATHSlist变量中加入自己开发插件的父目录,并在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字段。


文章版权归 FindHao 所有丨本站默认采用CC-BY-NC-SA 4.0协议进行授权|
转载必须包含本声明,并以超链接形式注明作者 FindHao 和本文原始地址:
https://findhao.net/easycoding/2560.html

Comments