Ghost博客调优(v4版本)
之前试用过Wordpress、Emlog、Typecho等博客系统
包括我最喜欢的Notion + nextjs-notion-starter-kit或者nobelium
这些都有优缺点，我想要的是轻量、编辑器好用，Wordpress太笨重，Emlog和Typecho编辑器不是特别顺心，Notion+开源访问速度又不理想，不过搭建确实很方便，有兴趣的可以去试试，nobelium 有一键部署
最终还是选择了Ghost，不过也不是完美的方案，需要自己调优
优点：
- 美观
- 编辑器类似Notion
- 轻量
缺点：
- 评论、站内搜索、统计、图片上云这些啥都没有..
- 安装费劲，我花了很大功夫
- 导入导出功能一般，能用，但是不理想
所以想要跟我一样选择Ghost的同学，要慎重，产生的问题要有能自己修复的能力
下面记录一下我自己的调优，不定期更新，有好的想法也可以下面留言讨论
增加评论功能
我选用的是 Valine 的系统，也试过gitalk，效果太差，所以最终选择Valine，安装也简单，点击刚才的链接按照安装步骤去操作就行，下面是我装完之后针对功能和样式的一些修改，因为我用的是 Ruby 的主题，所以我对评论插件的样式也调整了下，让他适应我主题的风格，下面是配置文件，打开Settings - Code injection
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<style>
.v[data-class="v"] .vwrap {
border: none;
border-radius: 4px;
margin-bottom: 10px;
overflow: hidden;
position: relative;
padding: 0px;
}
.v[data-class="v"] .vwrap .vheader .vinput {
width: 33.33%;
border-bottom: 1px var(--light-gray-color) solid;
border-radius: initial;
}
</style><script type="text/javascript">
if ($('body').hasClass('post-template')) {
var valineDiv = document.createElement("div");
valineDiv.setAttribute("id", "vcomments");
valineDiv.setAttribute("class", "widget widget-recent u-shadow");
valineDiv.setAttribute("style", "margin-top:30px;padding-top:5px;");
document.querySelector('.content-column').appendChild(valineDiv)
new Valine({
el: '#vcomments',
appId: 'LeanCloud的AppID',
appKey: 'LeanCloud的AppKey',
placeholder: '欢迎留下你的想法',
meta: ['nick','mail']
})
}
</script>设置代码高亮
我用的Ruby 主题默认代码块是没有高亮的，和文字在一块会很难阅读，所以借助插件设置高亮，打开Settings - Code injection，把下面的内容加进去就好了
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.1/build/styles/rainbow.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.1/build/highlight.min.js"></script>
<script >hljs.initHighlightingOnLoad();</script>图片上传保存到阿里云oss
吃过几次图片存在本地的亏，一旦服务挂掉，图片恢复不出来，博客里的图就都裂开了，很难受，所以我增加了阿里云的插件，官方插件给的文档太老了，我fork了一份更新了支持最新版的文档，顺手修了几个bug，可以直接按照文档操作，具体移步 ghost-oss-store
