定制博客

发表于 | 分类于
字数统计 881

虽然默认的 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 --> 观察效果

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