Next 主题设置

更新于 阅读次数： Valine：

站点配置文件_config.yml在Hexo文件夹下。在站点配置里注意以下几点：

  1. url: 添加自己的博客网址https://satparamita.github.io/paramita/。如果买了域名并且能使用，则改成新域名url: https://satparamita.top。
  2. language: ，选择对应的语言，在theme\next\language里查看。有的主题是zh-CN，有的是zh-Hans。
  3. description: 主要用于告诉搜索引擎一个关于站点的简单描述，建议在其中包含您网站的关键词。
  4. order_by: -date文章排序默认是按照日期，也可以改成按照更新日期排序，即order_by: -updated。

next主题安装

  1. 下载地址，在Hexo文件夹里右键Git Bash Here，输入命令：
    git clone https://github.com/next-theme/hexo-theme-next themes/next
    主题会下载到themes目录下的next文件夹。
    如果下载失败就多试几次，实在下载不了就进入Next官网，找到压缩包Source code(zip)，下载后解压，更名为next，粘贴到themes目录下。
  2. 打开站点配置文件_config.yml ，找到关键字 theme，修改参数为：theme：next，注意冒号后面有一个空格！
    建议将主题配置文件_config.yml重命名为_config.next.yml，然后剪切到Hexo文件夹下，方便以后更新主题。
  3. 当前使用的是最新版本next8.8.1。每个月都会发布新版本，请在更新前阅读更新说明。可以通过如下命令更新：
    npm install hexo-theme-next@latest

Emoji表情

在编辑器中输入:smile:可能没有😄表情出现。Hexo默认是采用hexo-renderer-marked渲染器，不支持插件扩展。支持插件扩展的是hexo-renderer-markdown-it，可以使用markwon-it-emoji插件来支持emoji。

  1. 卸载默认的marked渲染器，安装markdown-it渲染器：
    npm un hexo-renderer-marked --save
    npm i hexo-renderer-markdown-it --save
  2. 安装markdown-it-emoji插件：npm install markdown-it-emoji --save

PS: 安装时可能会显示一堆信息，fsevent是mac osx系统的，在win或者Linux下使用会有警告，直接忽略，其实已经安装成功了。其它插件安装时也一样。

全站搜索

  1. 参考插件searchdb，安装：npm install hexo-generator-searchdb
  2. 在站点设置里添加以下设置项：
1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  1. 在主题设置里找到local_search，修改成如下：
1
2
3
4
5
6
7
local_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

邮件功能

  1. 在侧栏social添加给我发邮件，在主题配置里修改：
1
2
social:
  邮件: https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1610202621@qq.com || fa fa-envelope
  1. 在友情链接或文章中加入给我发邮件：
    [1610202621@qq.com](https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1610202621@qq.com)
    效果是1610202621@qq.com

PS: social里的fa fa-envelope会显示表示邮件的小图标，更多小图标请查看icon。

安装烟花特效

点击鼠标时显示烟花特效，安装：
npm install next-theme/hexo-next-fireworks

持久化连接

文章默认的链接是http://url/2020/02/10/hello-world这种类型，由年/月/日/标题组成。如果文章里调整过日期，链接名也会变化。而且如果标题是中文或存在特殊符号，链接可能就有问题。因此建议使用永久链接，即使更改了日期也能打开原来的链接。

  1. 安装：npm install hexo-abbrlink --save。
  2. 在站点配置里修改：
1
2
3
4
permalink: p/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

文章封面

  1. 安装：npm install --save hexo-less
  2. 在文章中添加<!-- less -->，<!-- less -->前面的内容会显示在封面，打开文章后不会再显示，直接显示<!-- less -->后面的内容。
    区别于<!-- more -->，<!-- more -->前后的内容全部会显示在文章里。

显示日期、阅读次数

  1. 参考hexo-word-counter，已经集成到Next里，无需安装。
  2. 在主题配置_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  # 无效

文章置顶

  1. 先卸载后安装：
    npm uninstall hexo-generator-index --save
    npm install hexo-generator-index-pin-top --save

  2. 在文章开头添加top: true，或者top: 2，数字越大，置顶越靠前。

1
2
3
4
5
6
---
title: 
tags: 
comments: true
top: 100
---

文末添加相关文章

  1. 安装：npm install hexo-related-popular-posts --save
  2. 在主题设置里添加：
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

数学公式编辑

  1. 先卸载后安装：
    npm un hexo-renderer-marked --save
    npm i hexo-renderer-markdown-it-plus --save
  2. 启用katex:
1
2
3
4
5
6
7
8
math:
  every_page: false
  mathjax:
    enable: false
    tags: none # Available values: none | ams | all
  katex:
    enable: true
    copy_tex: true

在github里不支持katex的某些功能，所以同时启用mathjax。在有数学公式的文章开头添加：

1
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>

添加流程图支持

  1. 安装：npm i hexo-filter-mermaid-diagrams
    npm i --save hexo-filter-sequence
  2. 在站点设置里添加：
1
2
3
4
mermaid: #流程图
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: default

在文章中浏览pdf

  1. 参考pdf，安装：git clone https://github.com/next-theme/theme-next-pdf source/lib/pdf。文件会下载至hexo/source/lib文件夹里。
  2. 修改主题配置:
1
2
3
4
pdf:
  enable: true
  # Default height
  height: 500px
  1. 在站点配置里添加：
1
2
skip_render:
  - lib/**/*

  1. 使用方法：{% pdf /path/to/your/file.pdf %}
    例如：{% pdf ./test/1.pdf %} 。
    pdf文件存放在与test.md文件同名的test文件夹里。也可以添加外部pdf链接。

  2. 更新方法：
    cd hexo/source/lib/pdf
    git pull

在新标签页打开

1
<a onclick="window.open('https://satparamita.top/about/%E9%9F%B3%E4%B9%90.html', '_blank');"></a>

插入本地文件

  1. 安装：npm install hexo-asset-image --save
  2. 打开站点配置文件，设置：post_asset_folder: true
  3. 在hexo/source/_posts目录下右键新建test.md文件，并新建名为test的文件夹，用于存放文章里需要插入的图片和其它文件。
  4. 使用![title](./test/图片名.jpg "描述")添加本地图片。同理，可插入其它格式的文件，比如txt、pdf、py、md、zip等，txt、pdf文件可以在网页中直接打开查看，其它格式的文件会在点击后下载到本地。

注意事项（供自己看）

  1. 防止报错又找不到错，使用hexo s，写一步，看一步。预览有效，而hexo g && hexo d之后无效，先hexo clean，再重试。
  2. 插入本地文件时需注意，不要在_posts文件夹下新建文件夹用来引用.md格式的文件，会直接在首页打开。新建的文件夹是用来放其它格式的文件。
  3. 同一文件内使用tab时，注意选项卡的名字，可以命名为选项卡1，2，3。不然会相互影响。{% tabs 选项卡4, 1 %}
  4. 封面图片显示：![](./00file/pic-22.jpg ' ') 不显示，不能调用本地图片，因为和正文里需要的路径不一致。{% asset_img pic-22.jpg %} 可以显示，但是只能在同名文档里使用，而且不能在markdown预览，不建议使用。封面图片可以使用网络图片的链接：![hxz](.jpg ' ')、<img src="https://.jpg" width=" " height=" " title=" ">
  5. 调用本地文件，图片、文档必须放在00file里。但是图片显示速度慢，而且占用本地空间，不建议使用。[txt](./00file/1.txt '文本')、<img src="./00file/pic-22.jpg" width=" " height=" " title=" " />
  6. \SatParamita\Hexo\source下面的两个文件非常重要，不然网站就404.