本教程会随着博客升级、主题升级，实时更新，建议收藏
新手快速搭建Hexo博客Hexo博客-新手10分钟快速搭建
nexT主题配置篇Hexo安装NexT主题
终端控制台cd到博客主题（/themes）目录下，然后输入git clone https://github.com/next-theme/hexo-theme-next按下回车键
即可将nexT主题最新代码克隆到本地themes目录下。
如图：（我克隆过，这里就不回车了）
克隆成功后，将博客目录下的_config.yml配置文件的主题改为hexo-theme-next
成功安装后将 hexo 配置文件中的主题改为 next 就成功了。
# Extensions# Plugins: https://hexo.io/plugins/# Themes: https://hexo.io/themes/#theme: landscapetheme: hexo-theme-next
一键4连，刷新配置：
hexo clean && hexo g && hexo d && hexo s
访问：http://localhost:4000查看是否生效
代码高亮
先看效果：
博客下配置文件../blog/_config.yml设置为true
highlight: enable: true
主题下配置文件../blog/themes/hexo-theme-next/_config.yml 配置修改为：
codeblock: # Code Highlight theme # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic # See: https://github.com/chriskempson/tomorrow-theme highlight_theme: night eighties # Add copy button on codeblock copy_button: enable: true # Show text copy result. show_result: true # Available values: default | flat | mac style: default
字数统计
先看效果：
安装字数统计插件
npm install hexo-symbols-count-time
如图：
博客下配置文件../blog/_config.yml 最后一行新增内容：
symbols_count_time: symbols: true time: true total_symbols: true total_time: true exclude_codeblock: false awl: 4 wpm: 275 suffix: "mins."
主题下配置文件../blog/themes/hexo-theme-next/_config.yml 配置修改为：
# 字数统计symbols_count_time: separated_meta: false item_text_total: true
一键4连，刷新配置
hexo clean && hexo g && hexo d && hexo s
Valine评论系统+阅读数
先看效果：
去valine官网注册账号 -> 创建应用
进入创建的应用，打开设置 -> 应用Keys，获取AppID和AppKey
设置 -> 安全中心 打开数据存储
主题下配置文件../blog/themes/hexo-theme-next/_config.yml 配置修改为：
# Valine# For more information: https://valine.js.org, https://github.com/xCss/Valinevaline: enable: true # 设置为true，默认为false appid: 刚刚提到的appid appkey: 刚刚提到的appkey notify: true # 邮箱通知 , https://github.com/xCss/Valine/wiki，默认为false verify: false # 验证码 默认为false placeholder: 欢迎留言评论，批评指正 ^_^ # 初始化评论显示，根据自己修改，这里默认， avatar: wavatar # 头像风格，默认为mm，可进入网址：https://valine.js.org/visitor.html查看头像设置，这里有许多头像风格，进行设置 guest_info: nick,mail,link # 自定义评论标题 pageSize: 10 # 分页大小，10页就自动分页 language: # Language, available values: en, zh-cn visitor: true # 用于显示文章阅读量，具体见https://valine.js.org/visitor.html comment_count: true # If false, comment count will only be displayed in post page, not in home page recordIP: false # 是否记录评论者IP serverURLs: # 启用自定义域名时，在此处填写（默认会自动检测，无需填写 #post_meta_order: 0
文章标题评论显示英文Valine的问题
解决方案：在themes -> hexo-theme-next -> language -> zh-CN.yml文件中添加以下部分即可。
post: # 新添加 comments: valine: 评论 posted: 发表于 edited: 更新于
站内即时聊天功能主题下配置文件 ../blog/themes/hexo-theme-next/_config.yml配置修改为：
# next 主题支持在线聊天服务，支持两个插件 charta 和 tidioA,这一部分自认为没有必要，所以我也没有配置# Chatra Support# See: https://chatra.io# Dashboard: https://app.chatra.io/settings/generalchatra: # charta 插件设置 enable: false async: true id: # Visit Dashboard to get your ChatraID #embed: # Unfinished experimental feature for developers. See: https://chatra.io/help/api/#injectto# Tidio Support# See: https://www.tidiochat.com# Dashboard: https://www.tidiochat.com/panel/dashboardtidio: # tidio 插件设置 enable: false key: # Public Key, get it from dashboard. See: https://www.tidiochat.com/panel/settings/developer
全文搜索
先看效果:
安装插件：
npm install hexo-generator-searchdb --save
博客下配置文件 ../blog/_config.yml 最后一行新增内容：
search: path: search.xml field: post format: html limit: 10000
主题下配置文件 ../blog/themes/hexo-theme-next/_config.yml配置修改为：
# Local Search# Dependencies: https://github.com/theme-next/hexo-generator-searchdblocal_search: enable: true # 如果是自动，则通过更改输入触发搜索。 # 如果是手动，则通过按回车键或搜索按钮触发搜索。 trigger: auto # 显示每篇文章的前 n 个结果，设置为 -1 显示所有结果 top_n_per_article: 1 # 将 html 字符串转义为可读字符串。 unescape: false # 在页面加载时预加载搜索数据。 preload: false
一键4连，刷新配置
hexo clean && hexo g && hexo d && hexo s
博客主标题上方的logo主题下配置文件 ../blog/themes/hexo-theme-next/_config.yml配置修改为：
# Custom Logo (Do not support scheme Mist)custom_logo: /avatar.webp#custom_logo: /uploads/custom-logo.jpg
版权信息声明主题下配置文件 ../blog/themes/hexo-theme-next/_config.yml配置修改为：
# Creative Commons 4.0 International License.# See: https://creativecommons.org/about/cclicenses/# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.orgcreative_commons: license: by-nc-sa sidebar: true #侧边栏中的版权标识 post: true #每篇文章底部都显示版权信息 language:
开启打赏功能主题下配置文件 ../blog/themes/hexo-theme-next/_config.yml配置修改为：
# Reward (Donate)# Front-matter variable (unsupport animation).reward_settings: # 如果为true，奖励将默认显示在每篇文章中。 enable: true animation: true # 是否添加动画 comment: 今天我想吃5毛钱的辣条！！！reward: wechatpay: /images/wechatpay.webp alipay: /images/alipay.webp #paypal: /images/paypal.png #bitcoin: /images/bitcoin.png
nexT主题配置文件_config.yml解读Hexo优化篇新建博文时模版给网站添加本站运行天数统计网站与文章的浏览人数及次数修改文章永久链接为随机编号图片压缩、转webp加速jsDelivr加速（jsDeliver在国内已经失效了，PASS）Vercel托管加速cloudflare-Pages###cdn加速DNSPod-CDN加速七牛云-CDN加速又拍云CDN加速(域名需备案)备份技巧加速部署404页面定义vercel配置404如何免费申请js.cool二级域名docker运行hexo镜像丝带背景首页隐藏特定文章加速部署nexT优化篇增加小顶栏(工具栏)效果：
/Users/zhangxin/blog/themes/hexo-theme-next/layout/index.njk 首页文件新增如下内容：
{% block content %}hd
{%- for post in page.posts.toArray() %} {{ partial('_macro/post.njk', {post: post, is_index: true}) }} {%- endfor %}其他页面同理。
Next8.0以上去除valine了，安装waline官网教程：https://waline.js.org/guide/get-started.html 一系列操作拿到serverURL
然后安装next集成waline的插件即可
npm install @waline/hexo-next
主题配置文件新增：
# Waline 配置文件# 更多信息:# - https://waline.js.org# - https://waline.js.org/reference/component.htmlwaline: # 新的！是否启用此插件 enable: true # Waline服务器地址url，你应该设置为你自己的链接 serverURL: https://waline.vercel.app # Waline 库 CDN url，您可以将其设置为您的首选 CDN # libUrl: https://unpkg.com/@waline/client@v2/dist/waline.js # Waline CSS 样式 CDN url，您可以将其设置为您喜欢的 CDN cssUrl: https://unpkg.com/@waline/client@v2/dist/waline.css # 自定义语言环境 # locale: # placeholder: Welcome to comment # Comment box placeholder # 如果为 false，则评论数将仅显示在帖子页面中，而不显示在主页中 commentCount: true # 浏览量计数，注意：您不应同时启用 `waline.pageview` 和 `leancloud_visitors`。 pageview: false # 自定义表情符号 # emoji: # - https://unpkg.com/@waline/emojis@1.0.1/weibo # - https://unpkg.com/@waline/emojis@1.0.1/alus # - https://unpkg.com/@waline/emojis@1.0.1/bilibili # - https://unpkg.com/@waline/emojis@1.0.1/qq # - https://unpkg.com/@waline/emojis@1.0.1/tieba # - https://unpkg.com/@waline/emojis@1.0.1/tw-emoji # 评论信息，有效元是昵称，邮件和链接 # meta: # - nick # - mail # - link # 设置必需的元字段, e.g.: [nick] | [nick, mail] # requiredMeta: # - nick # 语言，可用值: en-US, zh-CN, zh-TW, pt-BR, ru-RU, jp-JP # lang: zh-CN # 字数限制，设置为0时无限制 # wordLimit: 0 # 是否启用登录, can choose from 'enable', 'disable' and 'force' # login: enable # 每页评论多少条 # pageSize: 10
评论管理 (管理端): /ui/register
Hexo的NexT8.8使用Gitalkhttps://blog.csdn.net/a171232886/article/details/121206824
[gitalk] 解决配置gitalk插件后初始化登录时跳转回首页
gitalk 未找到相关的Issues进行评论解决方法
NexT 主题内置标签https://blog.lihj.me/post/next-tag-plugin-instruction.html
{% tabs 选项卡 2 %}内容内容内容{% endtabs %}
暗黑主题可界面切换npm install hexo-next-darkmode --save
主题配置文件修改：
# Close NexT's darkmodedarkmode: false
主题配置文件新增：
# Darkmode JS# For more information: https://github.com/rqh656418510/hexo-next-darkmode, https://github.com/sandoche/Darkmode.jsdarkmode_js: enable: true bottom: '64px' # default: '32px' right: 'unset' # default: '32px' left: '32px' # default: 'unset' time: '0.5s' # default: '0.3s' mixColor: 'transparent' # default: '#fff' backgroundColor: 'transparent' # default: '#fff' buttonColorDark: '#100f2c' # default: '#100f2c' buttonColorLight: '#fff' # default: '#fff' isActivated: false # default false saveInCookies: true # default: true label: '🌓' # default: '' autoMatchOsTheme: true # default: true libUrl: # Set custom library cdn url for Darkmode.js
项目地址：https://github.com/rqh656418510/hexo-next-darkmode
参考：https://www.techgrow.cn/posts/abf4aee1.html
分类页将时间和文章名显示在同一行效果：
themes/hexo-theme-next/layout/_macro/post-collapse.swig 这两个div改成span
{%- if post.link %}{# Link posts #} {%- set postTitleIcon = '' %} {%- set postText = post.title or post.link %} {{ next_url(post.link, postText + postTitleIcon, {class: 'post-title-link post-title-link-external', itemprop: 'url'}) }} {% else %} {{ post.title or __('post.untitled') }} {%- endif %}
页面加载期间顶部的进度条cdfj theme/hexo-theme-next 目录下，然后
git clone https://github.com/theme-next/theme-next-pace source/lib/pace
主题配置文件修改：
#页面加载期间顶部的进度条。# Dependencies: # For more information: https://github.com/HubSpot/pace# 演示：https://www.jianshu.com/p/d08513d38786pace: enable: true # Themes list: # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal theme: flash
可修改进度条颜色：
themes/hexo-theme-next/source/lib/pace/pace-theme-flash.min.css
文件内容 background:#f81ce5 搜索替换为 background:#fc6423
Gemini调整页面宽度修改文件source/css/_variables/Pisces.styl，调整如下
$content-desktop = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'px');// $content-desktop-large = 1160px;// $content-desktop-largest = 73%;$content-desktop-large = 85em$content-desktop-largest = 85%
数值可以调整
其他主题:
NexT自带的4个主题的页面宽度调整方式不一样，其他模式可参考How to Change Content Width
站点地图npm install hexo-generator-baidu-sitemap --save
更改完成后，每次进行打包的时候，会自动在public文件夹下生成sitemap.xml和baidusitemap.xml分别用于Google和百度。
将页面提交到服务器后，通过域名/sitemap.xml或者域名/baidusitemap.xml可以进行访问sitemap。
参考：https://zhuanlan.zhihu.com/p/150999914
nexT友联单独开个页面nexT友联单独开个页面
about页优化（待更新。。。）about页优化（待更新。。。）
添加看板娘npm install --save hexo-helper-live2d
博客目录下配置文件 /Users/zhangxin/blog/_config.yml 添加：
# zhangxin 新增# Live2D# https://github.com/EYHN/hexo-helper-live2dlive2d: enable: true # enable: false pluginRootPath: live2dw/ # Root path of plugin to be on the site (Relative) pluginJsPath: lib/ # JavaScript path related to plugin's root (Relative) pluginModelPath: assets/ # Relative model path related to plugin's root (Relative) scriptFrom: local # Default # scriptFrom: jsdelivr # jsdelivr CDN # scriptFrom: unpkg # unpkg CDN # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # Your custom url tagMode: false # Whether only to replace live2d tag instead of inject to all pages log: false # Whether to show logs in console model: #use: live2d-widget-model-lwet # npm-module package name # use: wanko # folder name in (hexo base dir)/live2d_models/ # use: ./wives/wanko # folder path relative to hexo base dir # 模型：https://huaji8.top/post/live2d-plugin-2.0/ use: live2d-widget-model-nico# use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # Your custom url display: position: right width: 200 height: 250 hOffset: 50 vOffset: 10 mobile: show: false react: opacity: 0.7
相关资源：https://github.com/EYHN/hexo-helper-live2d
更换鼠标样式第一步：blog目录下新建 source/_data/styles.styl 文件，填入：
body { cursor: url("/curs/normal.cur"), default;}/*鼠标链接指针样式*/a:hover { cursor: url("/curs/link.cur"), pointer;}
如图：
第二步：下载curs,放在 themes/hexo-theme-next/source 目录下即可
参考：https://xlenco.eu.org/posts/bdfd/
点击随机彩带背景themes/hexo-theme-next/_config.yml 打开配置
canvas_ribbon: enable: true
cd themes/next 然后克隆即可
git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon
如果不想每次点击界面都切换
themes/hexo-theme-next/source/lib/canvas-ribbon/canvas-ribbon.js 注释这一行
// document.onclick = redraw;
只修改文章内链接颜色效果演示
themes/hexo-theme-next/source/css/_common/components/post/post-expand.styl .post-body {} 内加上：
a:not(.btn){color: #42b983;font-weight: 500;}
Bug收集篇解决live2d看板娘和busuanzi不蒜子计数冲突https://www.boyinthesun.cn/post/error-live2d-busuanzi/
HEXO博客使用LeanCloud报错“Counter not initialized! See more at console err msg.”https://blog.csdn.net/w573719227/article/details/100704952
其他杂记Hexo-资源
Hexo
繁星
91导航
12580code
咖啡吧导航
zzzmh
navigate.ednovas.xyz
API收集
gridea
使用Github Action实现全自动部署 | Akilarの糖果屋
使用github-action推送博客部署仓库至NPM | Akilarの糖果屋
把Hexo博客部署到服务器
https://console.leancloud.cn
主页demo.zip
butterfly主题
Butterfly
Akilarの糖果屋
MuJin’s Blog
小冰博客
小康博客
小嘉的部落格
Code皮皮虾
Wind
Hexo-Butterfly 主题参考手册
Butterfly 主题的所有美化
3-hexo主题
叶落阁
文章置顶功能: 直接加入 top: 1 即可
3-hexo 添加音乐插件
3-hexo主题时的快照
先fork原仓库，然后clone自己fork的仓库，这样后续改动可以提交到git仓库。
cd themes目录下git clone git@github.com:zx20219898/hexo-theme-3-hexo.git
Matery主题
闪烁之狐
夜法之书-博客
hexo-theme-matery使用说明
matery主题教程-夜法之书
添加博客看板娘
取消hexo的matery主题的背景图遮罩颜色
hexo（matery）背景、滚动条优化+增加点击跳评论
目录能否支持下滑动?现在目录过长就看不到下面，没法下滑
nexT主题
https://theme-next.js.org
https://github.com/next-theme/hexo-theme-next ：新仓库v8.12.3，推荐
hexo之主题优化篇-知乎
【Hexo】NexT 主题的配置使用记录
设置hexo首页只显示部分摘要（不显示全文）
Hexo Next 代码块复制功能
Hexo搭建博客NexT主题之无法对代码(Code)进行复制的问题
NexT | 修改内容区域的宽度
对于 Pisces Scheme，需要同时修改 header 的宽度、.main-inner 的宽度以及 .content-wrap 的宽度。例如，使用百分比（Pisces 的布局定义在 source/css/_schemes/Picses/_layout.styl 中）：
header{ width: 90%; }.container .main-inner { width: 90%; }.content-wrap { width: calc(100% - 260px); }
我并未对这个布局进行测试，自定义修改需要自己进行测试。另外，我觉得超过一定宽度后（一行内文字太多导致换行跨度太大），阅读体验都不怎么样。
缩小字体文件
NexT 主题行内代码背景颜色设置
【主题美化系列】NexT主题样式调色
Hexo nexT主题之文章置顶
给hexo next扩展图标
NEXT主题美化
【Hexo】nexT主题使用攻略基础——添加评论功能
Hexo NexT 评论系统 Valine 的使用
https://valine.js.org/
nexT主题博客欣赏
Hexo+next的侧边栏背景与字体颜色设置方法
next主题美化——背景图片、页面透明化、阴影、圆角、动画
hexo博客next主题添加夜间模式（Dark Mode）
为Hexo的Next主题首页文章添加阴影
Hexo NexT 添加友链页面