Hexo 和 Butterfly 搭建博客

Hexo 是基于 Nodejs 开发的博客框架，简单，扩展性强。尽管性能不是很强，但对于轻量使用博客来说已经足够了

第一个 Hexo 博客

安装 Hexo：npm install -g hexo-cli

初始化项目名：hexo init 项目名

生成的项目结构如下：

文件夹名	说明
node_modules	依赖包
scaffolds	生成文章的模板
source	用来存放你的文章
themes	主题
.npmignore	发布时忽略的文件
_config.landscape.yml	主题的配置文件
_config.yml	博客的配置文件
package.json	项目名称、描述、版本、运行和开发等信息

启动项目：hexo s

在 http://localhost:4000/ 中可以看到页面

这里使用 GitHub Pages 部署博客，按照说明新建用户仓库

安装 hexo-deployer-git：npm install hexo-deployer-git

修改文件：

_config.yml

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: git@github.com:old-driver-zero/old-driver-zero.github.io.git
  branch: main

然后直接 hexo cl; hexo g; hexo d; 部署到 GitHub 上

过几分钟后打开 https://old-driver-zero.github.io/，即可看到效果

安装主题

这里使用的主题是 Butterfly

这里使用的 Git 安装：

git clone -b master 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

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去

这样以后只需要修改外面的 _config.butterfly.yml 即可，而不是在主题内部配置

主题基础用法说明

Front-matter

Front-matter 是 markdown 文件最上方以 --- 分隔的区域，用于指定个别档案的变数。

• Page Front-matter 用于页面配置
• Post Front-matter 用于文章页配置

Page 页面：

写法	解释
title	【必需】页面标题
date	【必需】页面创建日期
type	【必需】标签、分类和友情链接三个页面需要配置
aside	【可选】显示侧边栏 (默认 true)

Post 页面：

写法	解释
title	【必需】文章标题
date	【必需】文章创建日期
updated	【可选】文章更新日期
tags	【可选】文章标签
categories	【可选】文章分类
cover	【可选】文章缩略图
mathjax	【可选】显示 mathjax

标签页和分类页

标签页：输入 hexo new page tags，将 source/tags/index.md 中添加 type: "tags"

分类页同理：输入 hexo new categories tags，将 source/categories/index.md 中添加 type: "categories"

404 页面

可以开启 404 页面：

_config.butterfly.yml

# A simple 404 page
error_404:
  enable: true
  subtitle: "页面没有找到"
  background: 

主题配置

修改网站各种资料，例如标题、副标题和邮箱等个人资料：

_config.yml

# Site
title: old-driver-zeroの小屋
subtitle: '欢迎来到old-driver-zeroの小屋作客'
description: 'MyBlog'
keywords: ACG Computer Life
author: old_driver_zero
language: zh-CN
timezone: 'Asia/Shanghai'

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://old-driver-zero.github.io

菜单、目录的一个例子：

_config.butterfly.yml

menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  清单||fa fa-heartbeat:
    音乐: /music/ || fas fa-music
    照片: /Gallery/ || fas fa-images
    电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

代码框相关（支持自定义代码配色）：

_config.butterfly.yml

highlight_theme: light #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # 复制按钮
highlight_lang: true # 展示代码语言
highlight_shrink: false # 展开 / 关闭按钮
highlight_height_limit: false # 代码高度限制，单位: px
code_word_wrap: true # 自动换行

社交图标：

_config.butterfly.yml

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

头像：

_config.butterfly.yml

avatar:
  img: /img/avatar.png
  effect: true # 头像会一直转圈

页面 meta 显示：

_config.butterfly.yml

post_meta:
  page: # Home Page
    date_type: both # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
    date_format: relative # date/relative 顯示日期還是相對日期
    categories: true # true or false 主頁是否顯示分類
    tags: true # true or false 主頁是否顯示標籤
    label: true # true or false 顯示描述性文字
  post:
    date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
    date_format: date # date/relative 顯示日期還是相對日期
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤
    label: true # true or false 顯示描述性文字

开启图片描述：

photofigcaption: true

文章分页按钮：

# post_pagination (分页)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: 1

页脚设置：

# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2022
  custom_text:
  copyright: false # Copyright of theme and framework

网站运行时间：

# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
  enable: true
  publish_date: 2022/10/31 20:00

进阶配置

数学公式

这里使用 KaTeX 尽管相对于 MathJax 功能较少，但是速度快

修改配置文件并禁用 mathjax：

katex:
  enable: true
  # true 表示每一页都加载katex.js
  # false 需要时加载，须在使用的Markdown Front-matter 加上 katex: true
  per_page: false
  hide_scrollbar: true

安装 hexo-renderer-markdown-it：

npm un hexo-renderer-marked --save # 如果有安装这个的话，卸载
npm un hexo-renderer-kramed --save # 如果有安装这个的话，卸载

npm i hexo-renderer-markdown-it --save # 需要安装这个渲染插件
npm install katex @iktakahiro/markdown-it-katex #需要安装这个katex插件

配置：

_config.yml

markdown:
    plugins:
      - '@iktakahiro/markdown-it-katex'

搜索

使用 Algolia

安装 hexo-algoliasearch

按照其要求配置好密钥后修改主题配置：

# Algolia search
algolia_search:
  enable: true
  hits:
    per_page: 10
  labels:
    input_placeholder: Search for Posts
    hits_empty: '我们没有找到任何搜索结果: ${query}'
    hits_stats: '找到${hits}条结果（用时${time} ms）'

DocSearch 是同一家公司的，是免费的，也可以试一下

自定义字体

全局字体：

# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size:
  code-font-size:
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif
  code-font-family: consolas, Menlo, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif

加载动画

# 加载动画 Loading Animation
preloader:
  enable: false
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 1
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:

字数统计

安装 hexo-wordcount

# wordcount (字數統計)
# see https://butterfly.js.org/posts/ceeb73f/#字數統計
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

但是这种统计是以“千”为单位的，对中国人来说非常不友好，可以自行修改

图片大图查看模式

# fancybox http://fancyapps.com/fancybox/3/
fancybox: true

Pjax

可以开启 Pjax：

# Pjax [Beta]
# It may contain bugs and unstable, give feedback when you find the bugs.
# https://github.com/MoOx/pjax
pjax: 
  enable: true
  exclude:
    - /music/
    - /no-pjax/

Instantpage

当鼠标悬停到链接上超过 65 毫秒时，Instantpage 会对该链接进行预加载，可以提升访问速度

# https://instant.page/
# prefetch (预加载)
instantpage: true