hexo默认的主题实在是不好看，好在有大量的开发者和爱好者开发了很多的主题，非常感谢他们😁，这样我们就可以选择自己喜欢的主题进行部署配置了。官方教程请参考主题开发者博客。

本配置基于butterfly主题3.7.1版本。

主题配置

安装主题

  • 在hexo的根目录下，右键git bash here，直接克隆主题
git clone https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

更换主题

  • 在_config.yml文件中修改主题名称
theme: butterfly

安装插件

  • 如果系统没有pug和stylus渲染器，需要安装
npm install hexo-renderer-pug hexo-renderer-stylus --save

配置升级

  • butterfly 主题需要将该主题目录下的butterfly.yml复制到hexo安装的根目录，改名为_config.butterfly.yml

主题的配置全部都在_config.butterfly.yml配置文件中修改，hexo 会自动合并config.yml和_config.butterfly.yml里的配置，如果存在同名的配置，会优先使用_config.butterfly.yml里的配置。

分页设置

标签页

  • 在hexo根目录打开git，输入hexo new page tags，会在source目录下生成tags/index.md文件，修改文件
title: 标签
date: 2020-11-23 21:56:15
type: "tags"

分类页

  • 在hexo根目录打开git，输入hexo new page categories，会在source目录下生成categories/index.md`文件，修改文件
title: 分类
date: 2020-11-23 21:58:54
type: "categories"

说说页

创建说说页面

  • 在hexo根目录打开git，输入hexo new page talking，会在source目录下生成talking/index.md文件，修改文件
title: 说说
date: 2020-11-29 14:35:28
type: artitalk
top_img: http://pic1.win4000.com/wallpaper/2020-11-10/5faa3d45a8aba.jpg

配置说说插件

🍁 后续补充

图库页

创建图库页面

  • 在hexo根目录打开git，输入hexo new page photo，会在source目录下生成photo/index.md文件，修改文件
title: 图片
date: 2020-12-05 15:56:12
type: "photo"
top_img: http://pic1.win4000.com/m00/9a/b2/5dc1a89ef0addc329fd8872dc2abf988.jpg

配置页面

  • 使用外挂标签在index.md文件中配置图库页面，外挂标签需要在主题中配置
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>
名称 描述
name 图库名称
description 图库描述
link 链接到对应的子相册地址
url 图库封面图片地址

比如我的图库

Group Image Gallery
壁纸

收藏的一些壁纸

Group Image Gallery
动漫

卡哇伊

#### 子页面配置
  1. 在hexo根目录打开git，输入hexo new page xxx，会在source目录下生成xxx/index.md文件
  2. 把生成的 xxx 目录放入到 photo 目录下，修改 xxx 目录下的 index.md 文件
title: wallpaper
date: 2020-12-05 19:16:07
type: "photo"
top_img: http://pic1.win4000.com/m00/ef/f1/60aacd27946d77ac607da4e9916daf89.jpg
  1. 使用外挂标签，放入你想放入的图片地址
{% gallery %}
![图片描述](图片地址)
{% endgallery %}

音乐页

开启音乐插件

在主题的配置文件中，enable设为true和per_page设为true。

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

插入Aplayer html

把aplayer代码插入到主题配置文件的inject.bottom去。

inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="5436134451" data-server="netease" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div>

安装插件

npm install --save hexo-tag-aplayer

依赖要求

如果无法正常显示播放器，可能是js文件版本过低

  1. APlayer.js > 1.8.0
  2. Meting.js > 1.1.1

配置文件

  • 在_config.yml文件中配置 aplayer
aplayer:
  meting: true

创建音乐页面

  • 在hexo根目录打开git，输入hexo new page music，会在source目录下生成music/index.md文件，修改文件
title: 音乐
date: 2020-12-10 22:02:49
type: "music"

添加歌单

  • 以外挂标签的方式在music/index.md文件中添加歌单
{% meting "84718802" "netease" "playlist" "volume:0.5" "theme:#49A6F9" "mutex:true" %}
  • 歌单参数列表
选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease, tencent,kugou,xiami,baidu
type 必须值 song, playlist, album, search, artist
fixed false 开启固定模式
mini false 开启迷你模式
loop all 列表循环模式：all, one,none
order list 列表播放模式： list, random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放，移动端浏览器暂时不支持此功能
mutex true 该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight 340px 播放列表的最大长度
preload auto 音乐文件预载入模式，可选项： none, metadata, auto
theme #ad7a86 播放器风格色彩设置

豆瓣页

豆瓣页面，主要展示个人豆瓣读书，观影和游戏清单，详细参考hexo-douban 官网

安装插件

npm install hexo-douban --save

配置文件

  • 在_config.yml中配置以下内容
douban:
  user: mythsman
  builtin: false
  book:
    title: 'This is my book title'
    quote: 'This is my book quote'
  movie:
    title: 'This is my movie title'
    quote: 'This is my movie quote'
  game:
    title: 'This is my game title'
    quote: 'This is my game quote'
  timeout: 10000
  1. user: 你的豆瓣ID.打开豆瓣，登入账户，然后在右上角点击 “个人主页” ，这时候地址栏的URL大概是这样：”https://www.douban.com/people/xxxxxx/“ ，其中的”xxxxxx”就是你的个人ID了
  2. builtin: 是否将生成页面的功能嵌入hexo s和hexo g中，默认是false,另一可选项为true
  3. title: 该页面的标题
  4. quote: 写在页面开头的一段话,支持html语法
  5. timeout: 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点

生成页面

  • 使用hexo douban命令即可生成指定页面，如果不加参数，那么默认参数为-bgm
hexo douban -h
Usage: hexo douban

Description:
Generate pages from douban

Options:
  -b, --books   Generate douban books only
  -g, --games   Generate douban games only
  -m, --movies  Generate douban movies only

安装了hexo douban之后，就不能用hexo d发布推送了，因为hexo douban跟hexo deploy的前缀都是hexo d

菜单配置

  • _config.butterfly.yml文件中配置菜单
menu:
    书单: /book/ || fas fa-book
    电影: /movie/ || fas fa-video

友情链接页

创建友情链接页

  • 在hexo根目录打开git，输入hexo new page link，会在source目录下生成link/index.md文件，修改文件
title: 友情链接
date: 2020-11-23 21:59:47
type: "link"

友情链接添加

  • 在 hexo 的source/_data目录中，创建一个文件link.yml
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: laughing
      link: https://ximingze.gitee.io
      avatar: https://jerryc.me/image/avatar.png
      descr: 今日事,今日毕
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网誌框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

友情链接页面设置

  1. class_name和class_desc支持html格式书写，如不需要，也可以留空。
  2. 友情链接界面可以由用户自己自定义，只需要在友情链接的 md 文档设置就行，以普通的 Markdown 格式书写。

404 页面

  • 主题中内置了 404 页面，直接开启即可
# A simple 404 page
error_404:
  enable: true
  subtitle: "页面没有找到"
  background:

搜索页

安装本地搜索插件

npm install hexo-generator-search --save

修改搜索配置

  • 在_config.butterfly.yml文件中开放搜索配置
local_search:
  enable: true
  labels:
  input_placeholder: Search for Posts
  hits_empty: "We didn't find any results for the search: ${query}" # 如果没有查到内容相关内容显示

主题美化

语言

修改站点配置文件 _config.yml，默认是英语。本主题支持 en，zh-CN，zh-TW。

网站资料

网站各种资料信息，例如标题、副标题和邮箱等个人资料，在博客根目录的_config.yml文件中修改。

# Site
title: 恰似你的温柔
subtitle: '往事已成空，还如一梦中'
description: '千山暮雪，只影向谁去'
keywords: '互联网，开发，java，linux'
author: laughing
language: zh-CN
timezone: ''

导航菜单

修改主题配置文件_config.butterfly.yml，必须是 /xxx/，后面||分开，然后写图标名。

menu:
  主页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  说说: /talking/ || fas fa-comments
  图片: /photo/ || fas fa-images
  娱乐||fas fa-list:
    音乐: /music/ || fas fa-music
    视频: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

代码

代码高亮

Butterfly 支持6种代码高亮样式：

  • darker
  • pale night
  • light
  • ocean
  • mac
  • mac light

主题从3.0开始，支持使用自定义的代码顔色。

如何自定义主题，请查看下面这篇文章。

自定義代碼配色 | Butterfly

修改主题配置文件_config.butterfly.yml。

highlight_theme: mac

代码复制

修改主题配置文件_config.butterfly.yml。

highlight_copy: true

代码块开闭

在默认情况下，代码框自动展开，可设置是否所有代码框都关闭状态，点击>可展开代码。

  • true 全部代码框不展开，需点击>打开
  • false 代码狂展开，有>点击按钮
  • none 不显示>按钮

修改主题配置文件_config.butterfly.yml。

highlight_shrink: true #代码框不展开，需点击 '>' 打开

你也可以在post/page页对应的markdown文件front-matter添加highlight_shrink来独立配置。

当主题配置文件中的 highlight_shrink 设为true时，可在front-matter添加highlight_shrink: false来单独配置文章展开代码框。

当主题配置文件中的 highlight_shrink 设为false时，可在front-matter添加highlight_shrink: true来单独配置文章收缩代码框。

代码换行

在默认情况下，Hexo 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。

修改主题配置文件_config.butterfly.yml。

code_word_wrap: true

如果你是使用 highlight 渲染，需要找到你站点的 Hexo 配置文件_config.yml，将line_number改成false:

highlight:
  enable: true
  line_number: false # <- 改这里
  auto_detect: false
  tab_replace:

如果你是使用 prismjs 渲染，需要找到你站点的 Hexo 配置文件_config.yml，将line_number改成false:

prismjs:
  enable: false
  preprocess: true
  line_number: false # <- 改这里
  tab_replace: ''

代码高度限制

可配置代码高度限制，超出的部分会隐藏，并显示展开按钮。

highlight_height_limit: false # unit: px
  1. 单位是 px，直接添加数字，如 200
  2. 实际限制高度为 highlight_height_limit + 30 px ，多增加 30px 限制，目的是避免代码高度只超出highlight_height_limit 一点时，出现展开按钮，展开没内容。
  3. 不适用于隐藏后的代码块（ css 设置 display: none）

社交图片

书写格式 图标名：url || 描述性文字

social:
  fab fa-github: https://github.com/xxxxx || Github
  fas fa-envelope: mailto:xxxxxx@gmail.com || Email

🍁 后续补充

编写博客

如何新建博客，在 码云gitee部署hexo个人博客 这篇博客中已经说明…

参数设置

博客除了有正文之外，还有其他的一些设置，需要在博客的md文件的头部以---分割的区域进行配置，有两种设置可以选择：Page Front-matter和Post Front-matter。根据参数自己配置即可。

  • Page Front-matter
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
参数 说明
title 【必需】页面标题
date 【必需】页面创建日期
type 【必需】标签、分类和友情链接三个页面需要配置
updated 【可选】页面更新日期
description 【可选】页面描述
keywords 【可选】页面关键字
comments 【可选】显示页面评论模块(默认 true)
top_img 【可选】页面顶部图片
mathjax 【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex 【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aside 【可选】显示侧边栏 (默认 true)
aplayer 【可选】在需要的页面加载aplayer的js和cs
highlight_shrink 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)
  • Post Front-matter
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
参数 说明
title 【必需】文章标题
date 【必需】文章创建日期
updated 【可选】文章更新日期
tags 【可选】文章标签
categories 【可选】文章分类
keywords 【可选】文章关键字
description 【可选】文章描述
top_img 【可选】文章顶部图片
comments 【可选】显示文章评论模块(默认 true)
cover 【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)
toc 【可选】显示文章TOC(默认为设置中toc的enable配置)
toc_number 【可选】显示toc_number(默认为设置中toc的number配置)
copyright 【可选】显示文章版权模块(默认为设置中post_copyright的enable配置)
copyright_author 【可选】文章版权模块的文章作者
copyright_author_href 【可选】文章版权模块的文章作者链接
copyright_url 【可选】文章版权模块的文章连结链接
copyright_info 【可选】文章版权模块的版权声明文字
mathjax 【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex 【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aplayer 【可选】在需要的页面加载aplayer的js和css
highlight_shrink 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)
aside 【可选】显示侧边栏 (默认 true)

博客加密

安装插件

npm install --save hexo-blog-encrypt

配置文件

  • 在_config.yml文件中配置加密配置
# 安全
encrypt: # hexo-blog-encrypt
  abstract: 这里有东西被加密了，需要输入密码查看哦。
  message: 抱歉, 这里需要输入密码才能阅读哦~
  tags:
  - {name: tagName, password: 密码A}
  - {name: tagName, password: 密码B}
  template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
  wrong_pass_message: 哦豁, 这个密码看着不太对呢, 请联系博主再试试吧~
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
  • 在要加密的博客头部区域配置加密选项
tags:
  - 加密文章tag
password: xxx
abstract: 这里有东西被加密了，需要输入密码查看哦。
message: 抱歉, 这里需要输入密码才能阅读哦~
wrong_pass_message: 哦豁, 这个密码看着不太对呢, 请联系博主再试试吧~
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

插入图片

插件方式
  • 插入网络图片直接按照markdown语法格式插入即可，插入本地图片需要安装插件
npm install https://github.com/7ym0n/hexo-asset-image --save
  • 修改_config.yml文件post_asset_folder值为true
post_asset_folder:true

修改为true之后，用命令创建博客文件时，会在同目录下生成一个跟博客同名的文件夹，博客中要插入的本地问题都存放在该文件夹中。详细说明参考hexo官方说明文档 。

  • 插入图片使用的格式不是插入在线图片的格式
{% asset_img 图片名称 图片描述 %}
本地方式

在主题的 source 目录下新建一个文件夹，专门用来放写博客的图片。部署之后，在 public 目录下会生成之前放的图片，博客中的图片地址写 public 中图片路径（/postimg/hello/xxx.jpg），在外网中就可以直接看到图片，public 路径下的文件会传到 gitee。

🚀 未完，有空补充…😂