Hexo 博客使用 Next 主题及美化
安装 Next
安装
yarn add hexo-theme-next
设置使用 Next
打开博客文件夹
打开
_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
启用 local search
安装外部依赖:
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;
}
致谢
博客主题美化参考了诸多前辈的文章,感谢各位大神的无私分享~