迁移博客平台到 Blogger

最近尝试将自己的博客搬到了 Google 的 Blogger 平台,这里记录了心路历程以及自己如何调整 Blogger 的。

前言

虽然静态博客简单免费,但是自从去年新浪图床开始对外链进行封禁,感觉我有很大一部分时间是花费在了维护博客上。所以兜兜转转一圈下来,还是想要回到类似 WordPress、Blogger 这样的 CMS 上,把重心转移到内容的记录。
静态博客让人比较难受的,是内容的管理。在大多数情况下想要发布文章需要用到脚本、NodeJS、Git 等工具链,而且插入图片需要稳定的图床服务。此外,想要在多个电脑切换编辑非常的不方便。
所以最近尝试了 Google 家免费的 Blogger 平台,并把之前的文章转到了这里面。为了和之前的平台有一致的阅读体验,作了如下的一些调整和功能添加。

代码高亮

highlightjs 可以让博客文章显示代码块的高亮。我个人之前更多是会选择 Prismjs,因为许多官方文档用到了它,比如 React, VuePress
在 Blogger 中使用 highlightjs 也非常简单。Blogger 支持修改主题的 HTML 源码,添加一些自定义的样式和脚本自然不是问题。当然,还有更简单的方法。
选择 Sidebar 的 Layout,点击 Add a Gadget 按钮,选择 HTML/JavaScript。

之后按照 highlightjs 网站上所给的参考用法,添加如下的 HTML 代码将 highlightjs 引入。这里我个人选择了 dracula 配色的 CSS 样式。

1
2
3
4
<link rel="stylesheet" 
href="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/dracula.min.css" />
<script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

在文章的编辑页面,可以在 Compose 和 HTML 模式之间切换。

1
2
3
4
5
6
7
<pre><code class='language-cpp' lang='cpp'>#include <iostream>

int main()
{
std::cout << "Hello World!";
}
</code></pre>

显示为:

1
2
3
4
5
6
#include <iostream>

int main()
{
std::cout << "Hello World!";
}

像我一样嫌输 HTML 麻烦的可以在 Typora 中用 Markdown 写好代码块并注明语言后,选中后点击 Copy as HTML Code

显示数学公式

同样,在上面我们添加的 HTML/JavaScript 的 Gadget 中可以添加额外的 JS 脚本来让 Blogger 支持显示 LaTeX 公式。这里我使用的是 MathJax,此外 KaTeX 也被经常用来渲染网页中的数学公式。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-svg.js">
</script>

效果:

样式微调

此外,Blogger 默认主题的一些元素的样式也不是很好看,比如 Blockquote 。好在可以在主题的 Customize 中添加自己的 CSS 来覆盖默认的样式。我添加了下面的 CSS 来让代码块部分和引用部分更好看一些。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
code {
color: #476582;
padding: .25rem .25rem;
margin: 0;
font-size: .85em;
background-color: rgba(27,31,35,.05);
border-radius: 3px;
}

pre > code {
line-height: 1.4;
border-radius: 6px;
padding: 1.25rem 1.5rem;
}

code.hljs {
padding: 1.25rem 1.5rem;
}

blockquote {
border-left: 4px solid #dddddd;
padding: 0 15px;
color: #777777;
text-align: left;
font-size: medium;
font-style: normal;
margin: 1rem 0rem;
}

参考:github.css

写在后面

Blogger 可能也是暂时的选择,不过是目前比较好的选择。

优点

  • 免费,自带图床和基本的流量访问分析
  • 主题可定制性高
  • 爸爸是 Google,基本可以不用担心跑路的问题

缺点

  • 默认主题少,而且丑
  • 自带的编辑器不是非常好用
  • 被墙