定制博客

虽然默认的 next 主题已经很美了,但是网上有一堆对 next 进行定制的教程,本着优雅不炫技的原则,我对博客作了以下简单的优化:

添加 hexo-admin 插件

hexo-admin 为一套hexo 博客管理工具,我准备将博客的开发环境也部署到服务器上,这样就不用开本地环境,有了它就可以在线编辑博客了,非常方便。

  1. 安装依赖库

    1
    $ npm install --save hexo-admin
  2. 启动本地博客,并在浏览器打开

    1
    2
    $ hexo s 
    $ open http://localhost:4000/admin
  3. 如果不出错的话 admin 界面就已经展现在眼前,但是很多时候想配置账户密码去登录到这个管理后台,就需要接着配置

  4. 在 admin 的界面 ,前往Settings >Setup authentification 可以看到Username,Password,Secret ,输入自己心仪的账户密码以及秘钥,拷贝 hexo-admin authentification 下的内容

  5. 在博客根目录下的 _config.yml 最底下粘贴如下配置

    1
    2
    3
    4
    admin:
    username: admin
    password_hash: $2a$10$L.XAIqIWgTc5S1zpvV3MEu7/rH34p4Is/nq824smv8EZ3lIPCp1su
    secret: wobuhuigaosunide
  6. 重新执行第 2 步,发现这时候已经需要登录,输入配置中的账号和密码即可

添加 分类标签

每篇文章可以有一个分类和多个标签,这也是分类和标签的最大的区别。

创建 分类 选项

  1. 生成 分类 页并添加属性type

    1
    $ hexo new page categories
  2. 找到上面提示的 index.md 文件路径 ,打开发现是这样

    1
    2
    3
    4
    ---
    title: categories
    date: 2018-10-17 00:33:17
    ---

    将其修改为

    1
    2
    3
    4
    5
    ---
    title: 分类
    date: 2018-10-17 00:33:17
    type: "categories"
    ---
  3. 博客根目录下依次打开 source >_post 找一篇博客打开,顶部有一些文章的配置信息,为 categories 字段添加属性

    1
    2
    3
    4
    5
    6
    title: Hello World
    abbrlink: 3eeb
    tags: []
    categories: 随笔
    date: 2018-10-15 16:27:00
    ---
  4. 一篇文章只有一个分类,如果需要二级分类的话可以如下修改,可以参考hexo 分类和标签

    1
    2
    3
    4
    5
    6
    7
    8
    title: Hello World
    abbrlink: 3eeb
    tags: []
    categories:
    - web开发
    - ruby
    date: 2018-10-15 16:27:00
    ---

创建 标签 选项

  1. 生成 标签 页并添加属性type

    1
    $ hexo new page tags
  2. 找到上面提示的 index.md 文件路径 ,打开发现是这样

    1
    2
    3
    4
    ---
    title: tags
    date: 2018-10-20 14:33:17
    ---

    将其修改为

    1
    2
    3
    4
    5
    ---
    title: 标签
    date: 2018-10-20 14:33:17
    type: "tags"
    ---
  3. 博客根目录下依次打开 source >_post 找一篇博客打开,顶部有一些文章的配置信息,为 tags 字段添加属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    title: Hello World
    abbrlink: 3eeb
    tags:
    - hexo
    - hexo-admin
    categories:
    - 随笔
    date: 2018-10-15 16:27:00
    ---
  4. 打开上面的文章底部,就可以看到标签

    标签

添加加载进度条

修改 pace: true 并设置自己喜欢的 pace_theme,可以每个都测试一下

1
2
pace: true
pace_theme: pace-theme-flash

添加赞赏

  1. 修改自己的微信或者支付宝的图片

    1
    2
    3
    4
    5
    # Reward
    reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
    #wechatpay: /images/wechatpay.jpg
    alipay: /images/alipay.png
    #bitcoin: /images/bitcoin.png
  2. 但是打开发现赞赏的按钮上面的文字是 Donate,看着很奇怪,编辑 themes/next/layout/_macro/reward.swig 文件中第 4 行,将 Donate 修改为

首页文章添加阅读全文

阅读原文有两种方法可以实现,一种是自动,根据文字长度自动切割,另一种是手动的,添加 more 标签,则此标签以下就会被隐藏掉

  1. 自动,编辑 _config.yml,指定文字长度,默认是150

    1
    2
    3
    auto_excerpt:
    enable: true
    length: 150
  2. 手动,打开任意文章,在文章的任意行插入 <!-- more --> 观察效果

坚持原创技术分享,您的支持将鼓励我继续创作!