Dako's Blog 大可的博客

Hello Ghost

Dako -

都说博客最重要的是内容。用Wordpress虽然各种网站都可以搞出来，但是确实功能太复杂，很难专注在内容上面，总是改改这个改改那个。

Hugo以及Hexo这类的静态页面生成器也是很流行的选择，但是个人感觉用起来可能还是不够傻瓜。虽然是个码农，但是在博客这件事情上，还是希望能够用现成的方案，而不是自己再搭一套Pipeline。

于是决定尝试使用一下Ghost。把原先的Wordpress博客的内容迁移过来，Ghost的体验，就此开始。

遇到的第一个拦路虎就是博客“主题“和代码片段的问题。Ghost官方提供的免费主题真的不多。而收费的主题自然不是一个穷鬼考虑的对象。虽然Google一下也可以看到不少Ghost的主题，但是大多数都已经年久失修，无人维护，并且可能跟现在的Ghost版本有各种兼容性的问题。毕竟有一批早期的Ghost用户是在Ghost 1.0版本之前就开始开发主题的。而现在的版本已经是Ghost 5.0了。最早的那批更Geek的用户不知道是不是都已经转投Hexo，Hugo或者其他更硬核的比如 Gasby + Ghost Headless CMS的方案了。

然而本人对于主题风格是没有一个强烈偏好的，所以本以为找一个合适的主题不会太难。可是万万没想到还是花了一天多的时间。其中花时间最多的，居然是代码高亮。Ghost很多免费主题是没有原生支持代码片段的。这个部分的格式需要自己通过以下几种方法搞定：

  • 使用支持代码高亮的主题
    • 比如 Attila主题。
    • 可是如果不太喜欢这个主题就没有什么好办法了。
  • 自己改当前Ghost主题的CSS
    • 其实这样跟Fork一个别人的主题没有什么区别
  • 使用Code Injection
    • 最常用的就是这个方法

我这里采用的就是在经过各种调试之后，最后留用的Code Injection。

在 Settings 下面的 Code Injection 里面，我们可以往 Site Header 和 Site Footer 里面Inject 一些 CSS 和 JS 的代码

必须要承认，对于前端大神来讲，这就是最好的安排。但是对于我这个从来不碰前端的小白，搞定这几行代码真是费了老大劲了。

<!-- prism.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-coy.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/match-braces/prism-match-braces.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
Site Header
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        document.querySelectorAll('pre[class*=language-]').forEach(function (node) {
            node.classList.add('line-numbers');
            node.classList.add('match-braces');
        });
        Prism.highlightAll();
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/match-braces/prism-match-braces.min.js" integrity="sha512-1V2DjbHHHr8KzGoafg/R5GoT/+5A5WJBvno03LEL1unbfCLy4PLTQ2Trcrp+qfvTEtyI9Uj825deuInXoRkOyA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js" integrity="sha512-/kVH1uXuObC0iYgxxCKY41JdWOkKOxorFVmip+YVifKsJ4Au/87EisD1wty7vxN2kAhnWh6Yc8o/dSAXj6Oz7A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Site Footer

尝试一下代码片段看看效果：

Go

func printHello() string {
	var str string
    fmt.Sprint(str, "hello)
    return str
}

Shell

echo "hello"

Plain

Hello

Cpp

#include <iostream>
int main() {
    std::cout << "Hello World!";
    return 0;
}

至此这个Ghost Blog勉强算是可以用了。之后还需要搞定 TOC 以及 Member Sign Up的问题。且听下回分解。