anzhiyu主题文档：https://anzhiy.cn/posts/220c.html
anzhiyu主题插件地址：https://github.com/anzhiyu-c/hexo-theme-anzhiyu
anzhiyu 主题安装
-
在博客根目录里执行命令，安装 anzhiyu 主题：
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu
-
复制
/themes/anzhiyu/_config.yml此文件到 hexo 根目录，并重命名为_config.anzhiyu.yml
注：每次更新主题时，会覆盖主题文件下的所有文件，为了方便主题更新，将主题配置文件移动到根目录，更新时不会覆盖，根目录下的主题配置文件优先级更高
-
修改
_config.yml文件，选择anzhiyu主题theme: anzhiyu -
执行命令推送github
hexo cl & hexo g & hexo d -
浏览器访问：https://shijiecloud.github.io/（需等待一会儿）
安装 pug 和 stylus 渲染插件
npm install hexo-renderer-pug hexo-renderer-stylus --save
生成文章唯一链接
-
安装 hexo-abbrlink 插件，在
MyBlog文件夹下打开git命令行，运行以下指令：npm install hexo-abbrlink --save -
插件安装成功后，在
MyBlog文件夹下的配置文件 _config.yml 找到 permalink：permalink: posts/:abbrlink.html
社交图标修改
在 _config.anzhiyu.yml 主题配置文件中修改：
# 社交图标设置
# 格式:
# 图标名：url || 描述性文字 || hover 动画名
social:
Github: https://github.com/ShiJieCloud || anzhiyu-icon-github
Email: https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1500492856@qq.com || anzhiyu-icon-envelope
RSS: atom.xml || anzhiyu-icon-rss
BiliBili: https://space.bilibili.com/328120068 || anzhiyu-icon-bilibili
QQ: tencent://Message/?Uin=1500492856&websiteName=local.edu.com:8888=&Menu=yes || anzhiyu-icon-qq
若要更换为阿里图标或fontawesome图标，则需要在文件中添加对应的配置之后再使用图标代码即可。
icons:
ali_iconfont_js: # 阿里图标symbol 引用链接，主题会进行加载 symbol 引用
fontawesome: false #是否启用fontawesome6图标
fontawesome_animation_css: #如需 hover 动画生效需配置fontawesome_animation_css
网站信息
需要在配置文件中进行修改
# Site
title: HelloWorld
subtitle: 你好世界
description: HelloWorld
keywords:
author: 赵士杰
language: zh-CN
timezone: Asia/Shanghai
导航配置
需要在配置文件中进行修改
menu:
文章:
隧道: /archives/ || icon-archive
分类: /categories/ || icon-shapes
标签: /tags/ || icon-tags
友链:
友人帐: /link/ || icon-link
朋友圈: /fcircle/ || icon-artstation
留言板: /comments/ || icon-message
我的:
音乐馆: /music/ || icon-music
追番页: /bangumis/ || icon-bilibili_1
相册集: /album/ || icon-images
小空调: /air-conditioner/ || icon-fan
关于:
关于本人: /about/ || icon-zhifeiji
闲言碎语: /essay/ || icon-lightbulb
随便逛逛: javascript:toRandomPost() || icon-jiaoyinzujifangke
必须是 /xxx/，后面||分开，然后写图标名。如果不希望显示图标，图标名可不写。
左下角歌单
歌单配置很简单，只需要修改主题配置文件中 nav_music 即可.
# 左下角音乐配置项
nav_music:
enable: true
id: 8152976493 # 网易云音乐歌单id
server: netease
首页技能点配置
创建 [blog]/source/_data/creativity.yml，输入以下内容：
- class_name: 开启创造力
creativity_list:
- name: Java
color: "#fff"
icon: https://cdn.jsdelivr.net/gh/ShiJieCloud/hexo-blog-resource@master/img/logo/logo_java_320x412.jpg
- name: Docker
color: "#57b6e6"
icon: https://cdn.jsdelivr.net/gh/ShiJieCloud/hexo-blog-resource@master/img/logo/logo_docker_160x128.png
- name: Photoshop
color: "#4082c3"
icon: https://cdn.jsdelivr.net/gh/ShiJieCloud/hexo-blog-resource@master/img/logo/ps.png
- name: Node
color: "#333"
icon: https://cdn.jsdelivr.net/gh/ShiJieCloud/hexo-blog-resource@master/img/logo/node.svg
- name: Webpack
color: "#2e3a41"
icon: https://cdn.jsdelivr.net/gh/ShiJieCloud/hexo-blog-resource@master/img/logo/logo_webpack_300x300.png
- name: Python
color: "#fff"
icon: https://cdn.jsdelivr.net/gh/ShiJieCloud/hexo-blog-resource@master/img/logo/python.png
- name: Vite
color: "#937df7"
icon: https://cdn.jsdelivr.net/gh/ShiJieCloud/hexo-blog-resource@master/img/logo/vite-logo.svg
- name: Flutter
color: "#4499e4"
icon: https://cdn.jsdelivr.net/gh/ShiJieCloud/hexo-blog-resource@master/img/logo/logo_flutter_100x100.png
- name: Vue
color: "#b8f0ae"
icon: https://cdn.jsdelivr.net/gh/ShiJieCloud/hexo-blog-resource@master/img/logo/logo_vue_400x400.png
- name: React
color: "#222"
icon: https://cdn.jsdelivr.net/gh/ShiJieCloud/hexo-blog-resource@master/img/logo/react.svg
- name: CSS3
color: "#2c51db"
icon: https://cdn.jsdelivr.net/gh/ShiJieCloud/hexo-blog-resource@master/img/logo/logo_css3_128x128.png
- name: JS
color: "#f7cb4f"
icon: https://cdn.jsdelivr.net/gh/ShiJieCloud/hexo-blog-resource@master/img/logo/logo_js_128x128.png
- name: HTML
color: "#e9572b"
icon: https://cdn.jsdelivr.net/gh/ShiJieCloud/hexo-blog-resource@master/img/logo/logo_html5_200x200.png
- name: Git
color: "#df5b40"
icon: https://cdn.jsdelivr.net/gh/ShiJieCloud/hexo-blog-resource@master/img/logo/logo_git_200x200.webp
- name: Apifox
color: "#e65164"
icon: https://cdn.jsdelivr.net/gh/ShiJieCloud/hexo-blog-resource@master/img/logo/logo_apifox_194x180.png
文字部分在主题配置文件中 home_top 配置项修改
字体统计
在 hexo 博客根目录下打开 git 终端，执行命令安装插件：
npm install hexo-wordcount --save or yarn add hexo-wordcount
修改 _config.anzhiyu.yml 主题配置文件:
wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true
搜索功能
记得运行 hexo clean
需要安装 hexo-algolia 或 hexo-algoliasearch，并配置 fields 参数的
title,permalink和content。根据它们的说明文档去做相应的配置。
-
注册账号，前往 Algolia 官网注册一个账号，新建应用和 index
-
安装hexo-algolia 或 hexo-algoliasearch插件
npm install --save hexo-algolia npm install hexo-algoliasearch --save -
修改配置文件
_config.yml# algolia 搜索 algolia: appId: "appId" apiKey: "apiKey" adminApiKey: "adminApiKey" chunkSize: 5000 indexName: "hexo" fields: - content:strip:truncate,0,500 - permalink - tags - title plugins: - hexo-algoliasearch
-
修改主题配置文件
_config.anzhiyu.ymlalgolia_search: enable: true hits: per_page: 6 -
在git bash里面输入以下命令：切记切记要用git bash，因为Windows下无论powershell还是cmd都无法执行export命令。
export HEXO_ALGOLIA_INDEXING_KEY=你的API Key hexo cl && hexo g && hexo algolia -
使用搜索
gulp压缩静态资源
gulp 能够帮助用户自动压缩静态资源，配合各类下属插件，能够压缩包括css、js、html乃至各类格式的图片文件。（图片文件的压缩往往只能节省几十KB，效果远远不如imagine、tinypng等压缩方式，所以此处不再写使用gulp压缩图片的内容）。
-
安装Gulp插件：在博客根目录
[Blogroot]打开终端，输入：npm install --global gulp-cli #全局安装gulp指令集 npm install gulp --save #安装gulp插件 -
安装各个下属插件以实现对各类静态资源的压缩。
-
压缩HTML：
npm install gulp-htmlclean --save-dev npm install gulp-html-minifier-terser --save-dev # 用gulp-html-minifier-terser可以压缩HTML中的ES6语法 -
压缩CSS：
npm install gulp-clean-css --save-dev -
压缩JS
使用terser来压缩js。gulp-terser只会直接压缩js代码，所以不存在因为语法变动导致的错误 。事实上，当我们使用
jsdelivr的CDN服务时，只需要在css或者js的后缀前添加.min,例如example.js->example.min.js，JsDelivr就会自动使用terser帮我们压缩好代码。npm install gulp-terser --save-dev -
压缩字体包
fontmin可以遍历博客内用到的字符，并将字体包内这些字符的字体样式提取出来输出为新的字体包。fontmin仅支持压缩ttf格式的字体包
npm install gulp-fontmin --save-dev
-
-
为Gulp创建
gulpfile.js任务脚本。在博客根目录[Blogroot]下新建gulpfile.js,打开[Blogroot]\gulpfile.js,输入以下内容：//用到的各个插件 var gulp = require('gulp'); var cleanCSS = require('gulp-clean-css'); var htmlmin = require('gulp-html-minifier-terser'); var htmlclean = require('gulp-htmlclean'); var fontmin = require('gulp-fontmin'); // gulp-tester var terser = require('gulp-terser'); // 压缩js gulp.task('compress', async() =>{ gulp.src(['./public/**/*.js', '!./public/**/*.min.js']) .pipe(terser()) .pipe(gulp.dest('./public')) }); //压缩css gulp.task('minify-css', () => { return gulp.src(['./public/**/*.css']) .pipe(cleanCSS({ compatibility: 'ie11' })) .pipe(gulp.dest('./public')); }); //压缩html gulp.task('minify-html', () => { return gulp.src('./public/**/*.html') .pipe(htmlclean()) .pipe(htmlmin({ removeComments: true, //清除html注释 collapseWhitespace: true, //压缩html collapseBooleanAttributes: true, //省略布尔属性的值，例如：<input checked="true"/> ==> <input /> removeEmptyAttributes: true, //删除所有空格作属性值，例如：<input id="" /> ==> <input /> removeScriptTypeAttributes: true, //删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true, //删除<style>和<link>的 type="text/css" minifyJS: true, //压缩页面 JS minifyCSS: true, //压缩页面 CSS minifyURLs: true //压缩页面URL })) .pipe(gulp.dest('./public')) }); //压缩字体 function minifyFont(text, cb) { gulp .src('./public/fonts/*.ttf') //原字体所在目录 .pipe(fontmin({ text: text })) .pipe(gulp.dest('./public/fontsdest/')) //压缩后的输出目录 .on('end', cb); } gulp.task('mini-font', (cb) => { var buffers = []; gulp .src(['./public/**/*.html']) //HTML文件所在目录请根据自身情况修改 .on('data', function(file) { buffers.push(file.contents); }) .on('end', function() { var text = Buffer.concat(buffers).toString('utf-8'); minifyFont(text, cb); }); }); // 运行gulp命令时依次执行以下任务 gulp.task('default', gulp.parallel( 'compress', 'minify-css', 'minify-html','mini-font' )) -
在每次运行完
hexo generate生成静态页面后，运行gulp对其进行压缩。指令流程如下：hexo clean hexo generate gulp hexo server 或 hexo deploy -
关于 font-min 的补充说明，在本文中，是通过读取所有编译好的html文件（
./public/**/*.html）中的字符，然后匹配原有字体包内./public/fonts/*.ttf字体样式，输出压缩后的字体包到./public/fontsdest/目录。所以最终引用字体的相对路径应该是/fontsdest/*.ttf。而本地测试时，如果没有运行gulp，自然也就不会输出压缩字体包到public目录，也就看不到字体样式。
