最近尝试将自己的博客搬到了 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/mathjax@3/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，基本可以不用担心跑路的问题
缺点：