Ghost 2.x博客功能完善

一、前言

Ghost博客搭建起来以后,我们在写文章的时候喜欢插入一些高清图片,这样我们的文章看起来舒服,视野也比较靓丽,但是个人博客受限于带宽,越往后面网站花在加载这些图片的时间越来越久,所以考虑把图片添加到七牛云对象存储来加速图片加载以达到快速访问网站的目的,除此之外本文也简要说明了如何去给我们的博客添加一些小的功能,比如找回信息的邮件设置、Disqus评论添加和自动给订阅者发送博客更新邮件

二、添加七牛云对象存储

要给博客添加七牛云对象存储,需满足两条:

  • Ghost版本大于0.60
  • 有七牛云对象存储服务

2.1.创建对象存储

2.1.1.注册七牛云

七牛云,进行实名认证

2.1.2.创建存储空间

10xz3wq-c1y8k9r3h-oq5-sr

2.1.3.绑定加速域名

10qqtu-pian-20181019020044
这里的加速域名可以自定义,这个自定义的域名需要备案,我的博客使用多个是https进行访问,所以这里也选择https,同时我们需要使用SSL证书,这个证书可以自己上传,这里需要注意,加速域名必须和网站申请的证书所用的域名一样才可以在这里正常使用,比如我的博客是以example.com申请的是免费的证书,这里加速域名如果填写的是img.example.com,那么我们上传的证书也是无法使用的,所以我这里使用的是七牛云免费的证书。
10zheng-shu
证书申请后,使用DNS解析进行txt记录解析验证,我的域名在阿里云解析
10tvz4ba1-ld-kpfb8g-oqyl
10tvz4ba1-ld-kpfb8g-oqyl
绑定域名后可以看到七牛运为我们配置了一个CNAME,我们需要DNS解析加速域名到CNAME
10bi-t6r-sm-vx0oobd1k3-qm
10s-k-wt60w-9-lbr-m9dpe

2.1.4.设置镜像存储

选择空间下面的镜像存储
10ahk8-9k1-iu-puo2m-a9
到这里七牛云上的配置就已经完成,所有的配置信息可以点击融合CDN下面的域名管理查看

2.2.安装七牛云插件

qn-store

2.3.配置config.production.json

在ghost的配置文件中添加七牛云相关配置
cat config.production.json

"storage": {
    "active": "qn-store",
    "qn-store": {
      "accessKey": "XXXXXXXX", //七牛云密钥
      "secretKey": "XXXXXXXX", //七牛云密钥
      "bucket": "xxxxx", //七牛云空间名
      "origin": "XXXXXXXX", //加速域名,必须以http(s)开头,且不能以/结尾
      "fileKey": {
        "safeString": true,
        "prefix": "[images]/YYYY/MM", //文件远端保存地址
        "suffix": "",
        "extname": true
      }
    }
  },

docker-compose down && docker-compose up -d

三、邮箱设置

Ghost默认不带邮箱功能,需要自行设置,可以用于博客密码找回,该功能只需要在ghost相关配置文件添加即可
cat config.production.json

"mail": {
    "transport": "SMTP",
    "from": "'Custom Name' <xxxxxxx@qq.com>",
    "options": {
         "host": "smtp.qq.com",
         "secureConnection": true,
         "port": 465,
         "auth": {
              "user": "xxxxxxxx@qq.com",
              "pass": "xxxxxxxx"  //这里是授权码
          }
     }
  },

四、添加disqus评论

4.1.disqus注册

Disqus

4.2.添加过程

  1. 10w8i-ob9w71ay-i6nmvxxdaf

2.100dhir-fuynq-de-en-6-4-a

3.创建好相关信息后进入下图
10dgyyqb-f-dj6fmx30y4697s

4.获取代码
102o-yj-79weofrrr4-2-8-qt
我的代码是放在路径 /data/blog/ghost/content/themes/yasuko/partials/comment.hbs里,不同的主题可能位置不同

五、添加邮件订阅

本身Ghost自带有一个subscrible的功能,但是仅仅限于收集订阅者信息,无法在博文有更新的时候给订阅者自动发送更新邮件,下面使用mailchimp来提供该功能

5.1.注册mailchimp

mailchimp

5.2.添加过程

  1. 10m-xheei-x0tkcop6je-at6

  2. 10hojqujch-oj6avzi-6-4c

  3. 10l-n-vvf_u-b1p5us4jqjv

  4. 10r2wvp-u-f86-h-l5dhwf-5h

  5. 10k-9h6-nun-lt2fzee-b79qu

六、添加音乐外链

以前一直有个梦想,打开自己的网站可以有一首动听的音乐响起,就像迎接自己回家的感觉,由于不懂前端开发,只能去google各种搜索,使用下面的代码实现了网易云音乐的外接,目前使用的这个主题我是把音乐代码放在下面这个文件中
cat content/themes/yasuko/partials/sidebar.hbs

<section class="widget widget-text">
         <h2 class="widget-title">Music</h2>
         <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" allow="autoplay"  width=330 height=110 src="//music.163.com/outchain/player?type=0&id=2774951563&auto=1&height=90"></iframe>
</section>

自2018年后chrome禁止了音频的自动播放,该链接在网易云外链代码的基础上加了allow="autoplay"使chrome浏览器可以自动播放

七、注意

该文章中主题方面的优化都是基于主题中的ghost-2.x进行的优化