Next 主题设置

站点配置文件_config.ymlHexo文件夹下。在站点配置里注意以下几点:

  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:可能没有: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
  3. 在主题设置里找到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=XXXXX@qq.com || fa fa-envelope
  2. 在友情链接或文章中加入给我发邮件
    [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这种类型,由年/月/日/标题组成。如果文章里调整过日期,链接名也会变化。而且如果标题是中文或存在特殊符号,链接可能就有问题。因此建议使用永久链接,即使更改了日期也能打开原来的链接。

  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. 参考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 # 无效

文章封面

安装:npm install --save hexo-less

1
2
3
4
在文章中添加<!-- less -->,
<!-- less -->前面的内容会显示在封面,打开文章后不会再显示,
直接显示<!-- less -->后面的内容。
使用<!-- more -->,前后的内容全部会显示在文章里。

文章置顶

  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
  3. 在站点配置里添加:

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

  5. 更新方法:
    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 "描述")添加本地图片。同理,可插入其它格式的文件,比如txtpdfpymdzip等,txtpdf文件可以在网页中直接打开查看,其它格式的文件会在点击后下载到本地。

注意事项(供自己看)

  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.