Hexo+Next主题的一些实用插件和美化升级
- 添加右上角图标folk github
- 添加站内搜索
- 主页显示项目
- moon-cake 进度显示和上下滑动
- 代码颜色
- 首页只显示文章摘要
- NexT8动画背景Canvas Nest
- 修改链接样式
- LaTeX公式编辑问题
- 使用mermaid绘制流程图
- mermaid的flowchart基础语法
- 访客统计
- 文章目录默认展开
- 网站运行天数
- 网页底部去掉“强力驱动”
- 友情链接的设置
- 社交链接添加图标
- 添加社交连接
- 添加图标
- 头像设置
- 致谢
添加右上角图标folk github
-
找到自己喜欢的样式：http://tholman.com/github-corners/, 并复制代码
-
打开： E:\Blog\themes\next\layout\_layout.njk，添加
<div class="headband"></div>
<!--下面一行插入复制代码，注意换成自己的github地址：href="https://a171232886.github.io/"-->添加站内搜索
一个实用的NexT指导网站
- 安装
npm install hexo-generator-searchdb --save
- 编辑E:\Blog\ _config.yml，任意位置新增
search:path: search.xmlfield: postformat: htmllimit: 10000
- 编辑E:\Blog\themes\next\_config.yml，修改
# Local search
local_search:enable: true
主页显示项目
- 编辑E:\Blog\themes\next\_config.yml，修改
menu:home: / || fa fa-home#tags: /tags/ || fa fa-tagscategories: /categories/ || fa fa-tharchives: /archives/ || fa fa-archiveabout: /about/ || fa fa-user#schedule: /schedule/ || fa fa-calendar#sitemap: /sitemap.xml || fa fa-sitemap#commonweal: /404/ || fa fa-heartbeat
- 新建相应文件，比如categories
hexo new page categories
- 修改categories\index.md
---
title: 分类
date: 2021-11-08 20:06:58
type: 'categories'
---
moon-cake 进度显示和上下滑动
- 下载，官方链接
npm install hexo-cake-moon-menu
- 编辑E:\Blog\themes\next\_config.yml，添加
moon_menu:back2top:enable: trueicon: fas fa-chevron-uporder: -1back2bottom:enable: trueicon: fas fa-chevron-downorder: -2
代码颜色
官方的代码颜色的可用方案
包括了种类，预览效果和使用方式。
- 首先修改 Hexo的 _config.yml
- 再修改 NexT的 _config.yml
- 执行
hexo clean，再hexo g
首页只显示文章摘要
以前那种每页显示固定字数的选项没了，现在手动设置：
- 整体设置 NexT的 _config.yml
将excerpt_description: true设为true - 在每个文章中插入
<!--more-->,然后首页只显示该行以上的部分。
NexT8动画背景Canvas Nest
添加图片作为背景，但找不到合适的图片。NexT8自带的Canvas ribbon，每次点击背景变化过大，不太好。找来找去，就Nest挺合适，但NexT8已经不在集成Nest效果。
这部分完全转载自blog - hexo NexT主题下配置和美化，实测有效。
- 首先在hexo目录下安装动画库：
cd themes/next
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
- 在next主题下的_config.yml找到canvas_ribbon，在下面添加Canvas-nest动画的配置
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:enable: trueonmobile: true # display on mobile or notcolor: "0,0,255" # RGB values, use ',' to separateopacity: 0.5 # the opacity of line: 0~1zIndex: -1 # z-index property of the backgroundcount: 99 # the number of lines
- 在博客根目录下的source文件夹，创建_data文件夹
cd source
mkdir _data
- 创建footer.swig文件，添加内容
<script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>
- 在next主题下的_config.yml找到_config.yml中找到custom_file_path添加一行配置
footer: source/_data/footer.swig
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:#head: source/_data/head.njk#header: source/_data/header.njk#sidebar: source/_data/sidebar.njk#postMeta: source/_data/post-meta.njk#postBodyEnd: source/_data/post-body-end.njk#footer: source/_data/footer.njkfooter: source/_data/footer.swig#bodyEnd: source/_data/body-end.njk#variable: source/_data/variables.styl#mixin: source/_data/mixins.styl#style: source/_data/styles.styl
- 重启hexo
hexo clean
hexo g
hexo s
修改链接样式
对./themes/next/source/css/_common/components/post/post-body.styl最后添加内容：
.post-body a {color: #428BCA;font-weight: bold;
}
LaTeX公式编辑问题
研究了好久，决定还是使用mathjax，其实KaTeX也挺好的。
- 卸载默认的marked，安装新的pandoc
npm un hexo-renderer-markednpm i hexo-renderer-pandoc
-
设置next下的_config.yml，将
mathjax启用mathjax:enable: true# Available values: none | ams | alltags: none -
注意：Hexo下的Mathjax没有那么智能，整体公式写法尽量简单，能少加括号的就少加。否则会出现Mathjax官方可以识别出来，但是Hexo编译不出来的情况。
-
mathjax官方demo，可以在上面试试公式
-
尽管mathjax遵循LaTeX语法，但有可能还会出现一些不同的地方。这有两个参考：
- MathJax basic tutorial and quick reference
- 在Hexo中渲染MathJax数学公式
使用mermaid绘制流程图
npm install --save hexo-filter-mermaid-diagrams
修改NexT的_config.yml
# Mermaid tag
mermaid:enable: true# Available themes: default | dark | forest | neutraltheme:light: defaultdark: dark
mermaid的flowchart基础语法
```mermaidflowchart LRsubgraph TOPdirection TBsubgraph B1direction RLi1 -->f1endsubgraph B2direction BTi2 -->f2endendA --> TOP --> BB1 --> B2
flowchart LRsubgraph TOPdirection TBsubgraph B1direction RLi1 -->f1endsubgraph B2direction BTi2 -->f2endendA --> TOP --> BB1 --> B2
访客统计
next的_config.yml中busuanzi_count的enable设为true即可。
# Show Views / Visitors of the website / page with busuanzi.
# For more information: http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:enable: truetotal_visitors: truetotal_visitors_icon: fa fa-usertotal_views: truetotal_views_icon: fa fa-eyepost_views: truepost_views_icon: far fa-eye
文章目录默认展开
如果文章内容是多级目录，默认二级目录是合并的。这样给阅读带来不便，可设置为默认展开。
next的_config.yml中toc的expand_all设为true
toc:enable: true# Automatically add list number to toc.number: true# If true, all words will placed on next lines if header width longer then sidebar width.wrap: false# If true, all level of TOC in a post will be displayed, rather than the activated part of it.expand_all: true# Maximum heading depth of generated toc.max_depth: 6
网站运行天数
在.\themes\next\layout\_partials\footer.njk最后添加，注意修改var grt= new Date("12/1/2021 00:00:00");中的时间。
<div>
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>var now = new Date();function createtime() {var grt= new Date("12/1/2021 00:00:00");now.setTime(now.getTime()+250);days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";}
setInterval("createtime()",250);
</script>
</div>
网页底部去掉“强力驱动”
比如想去掉“由 Hexo & NexT.Gemini 强力驱动”，在.\themes\next\layout\_partials\footer.njk中将以下代码注释掉。
{%- if theme.footer.powered %}<div class="powered-by">{%- set next_site = 'https://theme-next.js.org' if theme.scheme === 'Gemini' else 'https://theme-next.js.org/' + theme.scheme | lower + '/' %}{{- __('footer.powered', next_url('https://hexo.io', 'Hexo') + ' & ' + next_url(next_site, 'NexT.' + theme.scheme)) }}</div>
{%- endif %}
但我认为Hexo和NexT应该在我的网页上留有名字，毕竟帮了我很大忙，于是将其放在了友情链接中。
友情链接的设置
next的_config.yml中Blog rolls进行设置
# Blog rolls
links_settings:icon: fa fa-globetitle: 友情链接# Available values: block | inlinelayout: inlinelinks:Hexo: https://hexo.ioNexT: https://theme-next.js.org/
社交链接添加图标
添加社交连接
在next的_config.yml中social中进行设置。
social:GitHub: https://github.com/a171232886 || fab fa-githubCSDN: https://blog.csdn.net/a171232886 || fa fa-book-opensocial_icons:enable: trueicons_only: falsetransition: false
添加图标
添加的图标应该是Font Awesome这里面已经有的图标。找到合适的图标，复制代码在上面||后直接时候即可。注意不要删掉原有的fa或者fab。
头像设置
在next的_config.yml中avatar设置。将头像图片放在./source/images/中，修改url地址。
# Sidebar Avatar
avatar:# Replace the default image and set the url here.url: /images/header.jpg# If true, the avatar will be displayed in circle.rounded: true# If true, the avatar will be rotated with the cursor.rotated: true
致谢
- 馨客栈分享
- next6、7博客主题美化 2020-04-10
- blog - hexo NexT主题下配置和美化
- 让 Hexo Next (v8.0.0) 支持 LaTeX 数学公式
- Hexo+next主题配置踩的坑
- Hexo博客优化之Next主题美化
