Hexo博客搭建之主题构建(melody)

柔情只为你懂 2023-05-30 09:25 10阅读 0赞

### 前言 ###

上一章主要记录和说明`Hexo`的基础搭建和使用技巧. 本章, 我们主要记录下`Hexo`博客中关于主题的使用.

主题的选用后, 其实就是大量的配置. 以及第三方的集成, 是一件苦工, 但不难. 但是实在过于繁杂, 正好将信息记录于此.

--------------------

### 主题选型 ###

看了下推荐, 主要选择还是`NexT`和`Melody`. 当前大多数`Hexo`博客为`NexT`主题, 或`NexT`主题的变种. `Melody`是新开发的小清新主题. 权衡再三, 选择`Melody`.

*  `NexT`主题  
    官方: [http://theme-next.iissnan.com/getting-started.html][http_theme-next.iissnan.com_getting-started.html]  
    代表: [http://saili.science/][http_saili.science]  
    [https://uchuhimo.me/][https_uchuhimo.me]  
    [https://enfangzhong.github.io/][https_enfangzhong.github.io]  
    [https://raincal.com/][https_raincal.com]  
    [http://www.aomanhao.top/][http_www.aomanhao.top]  
    特性: 内容简洁, 明了. 使用群体多, 教程和自定义化较为方便. 提供了3种布局方案. 官方文档较为正式, 后期可维护性较高.

个人比较喜欢这种布局, 但是左边和`CSDN`重合度较高, 有点审美疲劳.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]

*  Melody

Ref. [几个好用的hexo主题][hexo]

官方: [https://molunerfinn.com/hexo-theme-melody-doc/zh-Hans/][https_molunerfinn.com_hexo-theme-melody-doc_zh-Hans]  
代表: [https://molunerfinn.com/][https_molunerfinn.com]  
[https://elody-07.github.io/][https_elody-07.github.io]  
特性: 内容小清新. 背景可更换. 使用者较少, 小众, 重合度较低. 文档也较为全面. 后期可维护性未知. 作者国人, 可以方便交流和吸取经验.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]

考量再三, 选择`Melody`. 其实, 个人对于`NexT`也挺喜欢, 但是有点使用率过多. 此外, 还考虑之后自己写一套主题. 所以, 先试用一下能够找到开发者开发过程的主题. 喜欢`NexT`的可以自己选择.

--------------------

### 前置条件 ###

*  环境: Mac
 *  NodeJS & NPM
 *  Hexo

--------------------

### 主题配置 - 快速开始 ###

选择好主题后, 跟随作者一步一步进行下去即可. `Melody`官方文档:[https://molunerfinn.com/hexo-theme-melody-doc/zh-Hans/][https_molunerfinn.com_hexo-theme-melody-doc_zh-Hans] . 官方文档非常详尽, 这边列举几个比较容易疑惑的点进行简单说明.

*  下载主题  
    可以下载发布包, 也可以使用`git`命令进行下载.

# 前往hexo安装目录
    # cd <hexo-home>/themes
    SeandeMacBook-Pro:themes sean$ pwd
    /Users/sean/Software/Hexo/application/themes
    
    # 下载
    git clone -b master https://github.com/Molunerfinn/hexo-theme-melody themes/melody

*  更改主题  
    更改`<hexo-home>/_config.yml`内的`theme`.

# 原来 - 默认主题
    #theme: landscape
    # 更改为 melody
    theme: melody

*  安装需要使用的工具

npm install hexo-renderer-jade hexo-renderer-stylus --save

*  清理 / 生成 / 启动

# 清理
    hexo clean
    # 生成
    hexo g
    # 开启
    hexo start

访问 localhost:4000 即可访问到初始页面.

--------------------

### 主题配置 - 布局 ###

整个网页到布局非常简单. 主要是上中下布局. 主要分为如下4个部分:

*  页头
    
     *  导航栏
     *  搜索按钮
     *  背景图片
     *  网站主标题(title) / 网站副标题(subtitle) / 链接图标
 *  页尾
    
     *  背景图片
     *  作者
     *  PV / UV 统计
     *  自定义部分 (主要用来放网站到审批号)
 *  网站主体 - 总览
    
     *  一页多少篇文章
     *  是否截断
 *  网站主体 - 详细文章
    
     *  标题
     *  标题 - 字数统计
     *  标题 - 类别/标签
     *  正文
     *  文末 - 版权声明
     *  文末 - 分享
     *  文末 - 广告
     *  文末 - 二维码
     *  文末 - 评论
 *  可隐藏侧栏
    
     *  头像
     *  Follow Me
     *  文章统计(篇数 / 类别数 / 标签数)
     *  友情链接(自定义部分)
 *  主题美工
    
     *  配色
     *  代码风格

其中, 除了`搜索` / `作者` / `标题` / `副标题`的配置外. 其他都在作者定义的`melody.yml`中进行配置即可. 配置内容过多, 详情可见文末给出的官方链接. 这边不再详叙, 只给出一份配置文件.

*  `搜索`(\_config.yml )  
    关于搜索, 我使用了文章中的`hexo-generator-search`. (但是, 其实目前为止, 我还不知道它的布局是如何生效的.)  
    配置流程如下:
    
     *  使用`NPM`安装包: `npm install hexo-generator-search --save`
     *  在`_config.yml`内加入如下配置即可:

search:
     path: search.xml
     field: post
     content: true

More: [https://github.com/wzpan/hexo-generator-search][https_github.com_wzpan_hexo-generator-search]

*  `作者` / `标题` / `副标题`(\_config.yml)

title:Hello's blog
    subtitle: 'HelloWorld.'
    author: Hello Kitty
    language: zh-Hans

*  melody.yml

主题配置文件, 目录在`<hexo-path>/source/_data/melody.yml`. 没有目录创建即可. 作者建议拷贝`theme/melody/_config.yml`到`source/_date/`目录下, 并且重命名为`melody.yml`.

*  新的页面链接
    
     *  hexo 创建

hexo new page <page-name>

*  配置`melody.yml`新链接

menu:
    #  Home: /
     #<页面展示名称> / <page-name> 
      主页: /
      归档: /archives
      分类: /categories
      标签: /tags
      运营历史: /history
      关于作者: /about

*  自定义新页面内容  
    新创建的新内容在`<hexo-path>/source/<链接名>/index.md`. Ex. `<hexo-path>/source/About/index.md`

---
    title: 关于作者
    date: 2019-11-08 10:59:17
    ---
    
    ## 基本信息

其余相关配置信息, 见官方文档[https://molunerfinn.com/hexo-theme-melody-doc/zh-Hans/][https_molunerfinn.com_hexo-theme-melody-doc_zh-Hans].

--------------------

### 第三方配置 ###

*  头像  
    头像可以指定地址, 为了所有头像的统一. 我选择了[https://secure.gravatar.com/][https_secure.gravatar.com]的头像服务. 这可以使得你所有应用的头像都是一个, 如果使用同一个用户名的话.  
    头像的地址可以在 https://en.gravatar.com/<用户名> 下找到, 最后一位是你的用户名.(Ex. https://en.gravatar.com/hello)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 2]  
    你可以通过下方的`xml`按钮获取真实地址:  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 3]  
    也可以通过开发者工具来获取.  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 4]  
    随后, 将头像配置在`melody.yml`中即可. `avatar: https://secure.gravatar.com/avatar/dcc38a5a0d37cb7348d4f72d8f6a2de0`
 *  分享 - addThis  
    访问 [https://www.addthis.com/][https_www.addthis.com], 注册新用户.  
    选择你需要的分享布局和分享按钮:  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 5]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 6]  
    最后会生成一个链接, 将链接的ID配置在`melody.yml`文件内即可.  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 7]

addThis:
      enable: true
      pubid: ra-<your-generat-id>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 8]

*  评论-Gitalk  
    `melody`提供多种评论, 我选择`Github`托管的`Gitalk`. 安装流程如下所示:
    
     *  NPM安装

npm i --save gitalk

*  注册应用  
    前往[https://github.com/settings/applications/new][https_github.com_settings_applications_new]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 9]
    
     *  获得ClinetID和ClientSecret![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 10]
     *  配置`melody.yml`文件

# 注意这个注释不能关闭
    disqus:
      enable: false
    # gitalk  
    gitalk:
      enable: true
      client_id: <your_id>
      client_secret: <your_secret>
      repo: <github-username>.github.io
      owner: <github-username>
      admin: <github-username>

Ref  
[https://github.com/gitalk/gitalk][https_github.com_gitalk_gitalk]  
[https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/][https_developer.github.com_apps_building-oauth-apps_authorizing-oauth-apps]  
值得注意的是, 第一次需要进行初始化. 并且, 需要发布到配置的地址才能使用. 开发本地不可使用.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 11]

*  Live2D
    
     *  安装Live2D插件
     *  配置`_config.yml`/`melody.yml`文件

# Live2D
    live2d:
      enable: true
      # enable: false
      scriptFrom: local # 默认
      pluginRootPath: live2dw/ # 插件在站点上的根目录
      pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
      pluginModelPath: assets/ # 模型文件相对与插件根目录路径
      model:   
        use: live2d-widget-model-nico
        #use: live2d-widget-model-tororo # 下载的动画模型名称
      display:
        superSample: 2
        width: 210
        height: 420
        position: left # 模型显示在网页上的位置
        hOffset: 0
        vOffset: -20

Ref: [https://github.com/xiazeyu/live2d-widget-models][https_github.com_xiazeyu_live2d-widget-models]  
![在这里插入图片描述][20191110130742618.png]  
Ref [http://www.aomanhao.top/][http_www.aomanhao.top]  
[在Hexo博客上添加可爱的Live 2D模型][Hexo_Live 2D]  
感觉插件可用性一般, 有时影响阅读, 没有关闭按钮. 暂时删除了.

*  wordcount  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 12]
    
     *  安装 `npm i --save hexo-wordcount`
     *  配置`melody.yml`

wordcount:
      enable: true

在使用过程中, 遇到`wordcount is not a function`. 后来莫名好了, 可能是因为`npm`没有安装好导致的.

Ref [Hexo文章计数插件WordCount][Hexo_WordCount]  
[Hexo添加字数统计、阅读时长][Hexo]

--------------------

### 附件 ###

最后, 贴上一份使用的`melody.yml`配置文件.

--------------------

### Others ###

个人认为博客需要改进的部分:

1.  主题配色的蓝色明显有些突兀, 但是还不知道配置什么颜色.
2.  Live2D 小人加上隐藏功能.
3.  左侧的隐藏栏下, 可以加入更多内容. 友情链接的图标不太适合.
4.  壁纸添加切换功能.
5.  PV, UV. 后台统计, 显示访问地址.
6.  每日访问量柱状图. 每日博客内容统计, 柱状图.
7.  音乐, 邮件插件.

这些等`fork`仓库后, 学习下前端的知识再做更改吧.

搭建博客告一段落. 后续, 准备将CSDN博客的内容整理. 造就个人的私有仓库.

--------------------

### Reference ###

\[1\]. [几个好用的hexo主题][hexo]  
\[2\]. [hexo-theme-melody][https_molunerfinn.com_hexo-theme-melody-doc_zh-Hans]  
\[3\]. [zol-壁纸][zol-]  
\[4\]. [wall-壁纸][wall-]

[http_theme-next.iissnan.com_getting-started.html]: http://theme-next.iissnan.com/getting-started.html
[http_saili.science]: http://saili.science/
[https_uchuhimo.me]: https://uchuhimo.me/
[https_enfangzhong.github.io]: https://enfangzhong.github.io/
[https_raincal.com]: https://raincal.com/
[http_www.aomanhao.top]: http://www.aomanhao.top/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191110105207146.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[hexo]: https://blog.csdn.net/fail_perfectly/article/details/83791781
[https_molunerfinn.com_hexo-theme-melody-doc_zh-Hans]: https://molunerfinn.com/hexo-theme-melody-doc/zh-Hans/
[https_molunerfinn.com]: https://molunerfinn.com/
[https_elody-07.github.io]: https://elody-07.github.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191110105738699.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[https_github.com_wzpan_hexo-generator-search]: https://github.com/wzpan/hexo-generator-search
[https_secure.gravatar.com]: https://secure.gravatar.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191110113644224.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191110113850841.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191110113928367.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[https_www.addthis.com]: https://www.addthis.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191110114417308.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191110114535549.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191110114325878.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191110125233389.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[https_github.com_settings_applications_new]: https://github.com/settings/applications/new
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191110124519499.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191110124708659.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[https_github.com_gitalk_gitalk]: https://github.com/gitalk/gitalk
[https_developer.github.com_apps_building-oauth-apps_authorizing-oauth-apps]: https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20191110125152683.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[https_github.com_xiazeyu_live2d-widget-models]: https://github.com/xiazeyu/live2d-widget-models
[20191110130742618.png]: https://img-blog.csdnimg.cn/20191110130742618.png
[Hexo_Live 2D]: https://www.jianshu.com/p/4b61d8702cfa
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20191110130702202.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[Hexo_WordCount]: https://www.jianshu.com/p/e122fc6f5946
[Hexo]: https://www.cnblogs.com/php-linux/p/8418518.html
[zol-]: http://desk.zol.com.cn/dongman/
[wall-]: https://wall.alphacoders.com/big.php?i=752095&lang=Chinese