时间：   |   分类：     |   阅读： 610 字 ~2分钟

本博客基于Ghost开源博客平台搭建,系统基于Node.js开发.

主要看中她的简洁和轻量,编辑器使用Markdown,资源占用比较低(性能比WordPress好很多).

说下安装完需要定制的部分,供参考:

代码高亮

由于经常使用代码片段,用PrismJS添加了代码高亮,主要使用了Code injection功能,可参考网上这篇文章.

开启评论

系统没有评论功能,集成了第三方的Disqus,整合方式参考这里.

使用HTTPS

最近关联域名后启用了HTTPS.

    ghost config url https://xulizhao.com
    ghost setup nginx ssl
    # 之后需要更新Ngxin的配置并reload
    # 使用Let's Encrypt的免费证书,这个自动获取证书acme.sh脚本太好用了

文章目录

折腾了多半天,添加了文章目录(TOC).

主要使用了jQuery-TOC插件,并仿照floating-header做了一个新图层

cd <GHOST_DIR>/content/themes/casper/assets/js
wget https://github.com/idiotWu/jQuery-TOC/raw/master/dist/jquery.toc.min.js
cd ../..
// 修改 default.hbs,在fitvids以下添加一行引入
    <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
    <script type="text/javascript" src="{{asset "js/jquery.toc.min.js"}}"></script>
// vi assets/css/screen.css
.sidebar {
    visibility: visible;
    position: fixed;
    right: 0;
    top: 300px;
    z-index: 1000;
    display: flex;
    align-items: center;
    width: 300px;
    border-bottom: rgba(0,0,0,0.06) 1px solid;
    background: rgba(255,255,255,0.95);

}
// 手机不显示文章目录
@media screen and (max-width: 600px) {
  #toc {
    visibility: hidden;
  }
}
// vi post.hbs
<div id="toc" class="sidebar"></div>
// 在结束标记前添加{{/post}}
// 在脚本部分的ready部分添加 $(document).ready(function () {
    $('#toc').initTOC({
        selector: 'h1, h2, h3, h4',
        scope: '.post-full-content',
        overwrite: false,
        prefix: 'toc'
    });

PS:

从博客开始流行时的第三方博客平台到后来自己搭建Wordpress,最近几年又流行的基于github静态建站都有所尝试, 可是似乎脱离了建站的初心: 记录成长历程,练习表达.

希望在这坚持下去.

0%