Hexo 博客使用 Next 主题及美化

安装 Next

安装

yarn add hexo-theme-next

设置使用 Next

  1. 打开博客文件夹

  2. 打开 _config.yml 文件

    theme: next

删除默认主题(可选)

删除 themes 文件夹

配置 Next

本配置文件基于 hexo-theme-next@^8.0.0

未经特殊注明,均为修改主题配置文件 _config.next.yml

创建配置文件

touch _config.next.yml

设置主题为 Gemini

scheme: Gemini

返回顶部显示在侧边栏

back2top:
  sidebar: true

显示阅读进度条

reading_progress:
  enable: true
  # 显示在底部
  position: bottom

显示加载进度条

pace:
  enable: true

侧边栏菜单展开所有

toc:
  expand_all: true

安装外部依赖:

yarn add hexo-generator-searchdb

编辑 _config.yml

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑 _config.next.yml

# Local search
local_search:
  enable: true

设置代码高亮

codeblock:
  copy_button:
    enable: true
  prism:
    light: prism-tomorrow
    dark: prism-tomorrow

添加版权声明

creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true

修改建站时间

footer:
  since: 2020

开启彩色缎带

canvas_ribbon:
  enable: true

开启文章字数统计

安装外部依赖:

yarn add hexo-word-counter

编辑 _config.yml

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  # 平均字长,默认为 4,中文为 2
  awl: 2
  wpm: 275
  suffix: "mins."

开启文章阅读量统计

busuanzi_count:
  enable: true

添加 GitHub Banner

github_banner:
  enable: enable
  permalink: https://github.com/jiz4oh
  title: Follow me on GitHub

删除不必要文件

minify: true

添加标签页面

命令行执行:

hexo new page tags

修改 source/tags/index.md

---
title: tags
date: 2020-09-26 12:51:57
# 添加下面两行
type: tags
comments: false
---

编辑 _config.next.yml

menu:
  tags: /tags/ || fa fa-tags

添加分类页面

命令行执行:

hexo new page categories

修改 source/tags/categories.md

---
title: categories
date: 2020-09-26 13:07:13
# 添加下面两行
type: categories
comments: false
---

编辑 _config.next.yml

menu:
  categories: /categories/ || fa fa-categories

设置字体

样式

font:
  enable: true
  global:
    external: true
    family: Arial
  # 以下设置只能修改 `` 注释的 md 代码块,不能修改 ```code block``` 字体大小
  # ```code block``` 字体大小修改见下
  # codes:
  #   external: true
  #   family: Arial
  #   size: 0.8

大小

编辑 _config.next.yml

custom_file_path:
  style: source/_data/styles.styl

新建 source/_data/styles.styl

// 修改文章字体大小,强制保持 1em
div.post-body {
  font-size: 1em;
}

// 修改 code block 中的字体,需要写入以下样式
code[class*=language-] {
  font-size: 14px;
}

致谢

博客主题美化参考了诸多前辈的文章,感谢各位大神的无私分享~

参考文章

hexo的next主题个性化教程:打造炫酷网站

Next 原作者 iissnan 大神教程,v6 版本以上部分配置不适用

Next 社区教程