Next 主题设置
站点配置文件_config.yml在Hexo文件夹下。在站点配置里注意以下几点:
url:添加自己的博客网址https://satparamita.github.io/paramita/。如果买了域名并且能使用,则改成新域名url: https://satparamita.top。language:,选择对应的语言,在theme\next\language里查看。有的主题是zh-CN,有的是zh-Hans。description:主要用于告诉搜索引擎一个关于站点的简单描述,建议在其中包含您网站的关键词。order_by: -date文章排序默认是按照日期,也可以改成按照更新日期排序,即order_by: -updated。
next主题安装
- 下载地址,在Hexo文件夹里右键
Git Bash Here,输入命令:git clone https://github.com/next-theme/hexo-theme-next themes/next
主题会下载到themes目录下的next文件夹。
如果下载失败就多试几次,实在下载不了就进入Next官网,找到压缩包Source code(zip),下载后解压,更名为next,粘贴到themes目录下。 - 打开站点配置文件
_config.yml,找到关键字theme,修改参数为:theme:next,注意冒号后面有一个空格!
建议将主题配置文件_config.yml重命名为_config.next.yml,然后剪切到Hexo文件夹下,方便以后更新主题。 - 当前使用的是最新版本
next8.8.1。每个月都会发布新版本,请在更新前阅读更新说明。可以通过如下命令更新:npm install hexo-theme-next@latest
Emoji表情
在编辑器中输入:smile:可能没有:smile:表情出现。Hexo默认是采用hexo-renderer-marked渲染器,不支持插件扩展。支持插件扩展的是hexo-renderer-markdown-it,可以使用markwon-it-emoji插件来支持emoji。
- 卸载默认的marked渲染器,安装markdown-it渲染器:
npm un hexo-renderer-marked --savenpm i hexo-renderer-markdown-it --save - 安装markdown-it-emoji插件:
npm install markdown-it-emoji --save
PS: 安装时可能会显示一堆信息,fsevent是mac osx系统的,在win或者Linux下使用会有警告,直接忽略,其实已经安装成功了。其它插件安装时也一样。
全站搜索
- 参考插件searchdb,安装:
npm install hexo-generator-searchdb - 在站点设置里添加以下设置项:
1
2
3
4
5search:
path: search.xml
field: post
format: html
limit: 10000 - 在主题设置里找到
local_search,修改成如下:1
2
3
4
5
6
7local_search:
enable: true
#auto, trigger search by changing input. manual, by pressing enter key or search button.
trigger: auto
top_n_per_article: -1 # Show top n results per article, show all results by -1
unescape: false
preload: false
邮件功能
- 在侧栏
social添加给我发邮件,在主题配置里修改:1
2social:
邮件: https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=XXXXX@qq.com || fa fa-envelope - 在友情链接或文章中加入给我发邮件:
[jingming215@139.com](https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=jingming215@139.com)
效果是jingming215@139.com
PS: social里的fa fa-envelope会显示表示邮件的小图标,更多小图标请查看icon。
安装烟花特效
点击鼠标时显示烟花特效,安装:npm install next-theme/hexo-next-fireworks
持久化连接
文章默认的链接是http://url/2020/02/10/hello-world这种类型,由年/月/日/标题组成。如果文章里调整过日期,链接名也会变化。而且如果标题是中文或存在特殊符号,链接可能就有问题。因此建议使用永久链接,即使更改了日期也能打开原来的链接。
- 安装:
npm install hexo-abbrlink --save。 - 在站点配置里修改:
1
2
3
4permalink: p/:abbrlink.html
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex
显示日期、阅读次数
- 参考hexo-word-counter,已经集成到Next里,无需安装。
- 在主题配置
_config.yml里添加修改:1
2
3
4
5
6
7
8
9
10
11
12
13# 标题下显示发表于、更新于、阅读次数
post_meta:
item_text: true # 显示汉字:发表于、更新于、阅读次数
created_at: false # 发表于
updated_at: # 更新于
enable: true
another_day: true # 隔天开始计算
categories: true
symbols_count_time:
separated_meta: false # 是否另起一行
item_text_total: true # 是否在网站最下方显示所需阅读时间、字数//无效
item_text_post: true # 无效
文章封面
安装:npm install --save hexo-less
1 | 在文章中添加<!-- less -->, |
文章置顶
先卸载后安装:
npm uninstall hexo-generator-index --savenpm install hexo-generator-index-pin-top --save在文章开头添加
top: true,或者top: 2,数字越大,置顶越靠前。1
2
3
4
5
6---
title:
tags:
comments: true
top: 100
---
文末添加相关文章
- 安装:
npm install hexo-related-popular-posts --save - 在主题设置里添加:
1
2
3
4
5
6
7
8
9
10
11# Related popular posts# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
enable: true
title: # Custom header, leave empty to use the default one
display_in_home: true
params:
maxCount: 5
#PPMixingRate: 0.0
#isDate: false
#isImage: false
#isExcerpt: false
数学公式编辑
- 先卸载后安装:
npm un hexo-renderer-marked --savenpm i hexo-renderer-markdown-it-plus --save - 启用katex:在github里不支持katex的某些功能,所以同时启用mathjax。在有数学公式的文章开头添加:
1
2
3
4
5
6
7
8math:
every_page: false
mathjax:
enable: false
tags: none # Available values: none | ams | all
katex:
enable: true
copy_tex: true1
2
3
4
5
6
7
8
9
10
11<head>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
inlineMath: [['$','$']]
}
});
</script>
</head>
添加流程图支持
- 安装:
npm i hexo-filter-mermaid-diagramsnpm i --save hexo-filter-sequence - 在站点设置里添加:
1
2
3
4mermaid: #流程图
enable: true
# Available themes: default | dark | forest | neutral
theme: default
在文章中浏览pdf
参考pdf,安装:
git clone https://github.com/next-theme/theme-next-pdf source/lib/pdf。文件会下载至hexo/source/lib文件夹里。修改主题配置:
1
2
3
4pdf:
enable: true
# Default height
height: 500px在站点配置里添加:
1
2skip_render:
- lib/**/*使用方法:
{% pdf /path/to/your/file.pdf %}
例如:{% pdf ./test/1.pdf %}。
pdf文件存放在与test.md文件同名的test文件夹里。也可以添加外部pdf链接。更新方法:
cd hexo/source/lib/pdfgit pull
在新标签页打开
1 | <a onclick="window.open('https://satparamita.top/about/%E9%9F%B3%E4%B9%90.html', '_blank');"></a> |
插入本地文件
- 安装:
npm install hexo-asset-image --save - 打开站点配置文件,设置:
post_asset_folder: true - 在
hexo/source/_posts目录下右键新建test.md文件,并新建名为test的文件夹,用于存放文章里需要插入的图片和其它文件。 - 使用
添加本地图片。同理,可插入其它格式的文件,比如txt、pdf、py、md、zip等,txt、pdf文件可以在网页中直接打开查看,其它格式的文件会在点击后下载到本地。
注意事项(供自己看)
- 防止报错又找不到错,使用hexo s,写一步,看一步。预览有效,而hexo g && hexo d之后无效,先hexo clean,再重试。
- 插入本地文件时需注意,不要在_posts文件夹下新建文件夹用来引用
.md格式的文件,会直接在首页打开。新建的文件夹是用来放其它格式的文件。 - 同一文件内使用tab时,注意选项卡的名字,可以命名为选项卡1,2,3。不然会相互影响。
{% tabs 选项卡4, 1 %} - 封面图片显示:
不显示,不能调用本地图片,因为和正文里需要的路径不一致。{% asset_img pic-22.jpg %}可以显示,但是只能在同名文档里使用,而且不能在markdown预览,不建议使用。封面图片可以使用网络图片的链接:、<img src="https://.jpg" width=" " height=" " title=" "> - 调用本地文件,图片、文档必须放在00file里。但是图片显示速度慢,而且占用本地空间,不建议使用。
[txt](./00file/1.txt '文本')、<img src="./00file/pic-22.jpg" width=" " height=" " title=" " /> - \SatParamita\Hexo\source下面的两个文件非常重要,不然网站就404.