hexo人气主题next的使用和一些个性化设置

Posted on Edited on In

前言

Hexo有着众多的主题,其中Next就较为出名,目标极简,宗旨设置简单

项目主页

hexo-theme-next
在配置文件中设置使用哪一种风格的Next主题

下载主题

next主题的维护人一直在变

NexT5版本由iissnan发起

1
username:/path/to/hexo_progjext/themes$ git pull https://github.com/iissnan/hexo-theme-next.git next

NexT6,7版本由theme-next维护

1
username:/path/to/hexo_progjext/themes$ git pull https://github.com/theme-next/hexo-theme-next.git next-reload

目前next8.2发布了

1
https://github.com/next-theme/hexo-theme-next

启用主题

站点设置文件中使用

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

常用配置

更多菜单

默认的菜单只有一个总入口,缺少category,tag,about等选项.
以如下方式添加
首先配置项目的 _config.yml 文件

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

然后多做几个空白页面(之后会被渲染成html的,现在还是markdown)
source/categories/index.md

1
2
3
4
5
---
title: All categories
date:
type: "categories"
---

source/tags/index.md

1
2
3
4
5
---
title: All tags
date:
type: "tags"
---

source/about/index.md

1
2
3
4
5
6
---
title: about
date: 
layout: about
---
自定义内容

local search 支持

要实现站内搜索,需要先安装库文件

1
npm install hexo-generator-searchdb --save

然后在根配置文件中写

1
2
3
4
5
6
7
# search
search:
  path: search.xml
  field: post
  content: true
  format: html
  limit: 100

主题配置文件中可以写

1
2
3
4
5
6
7
8
9
10
11
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # unescape html strings to the readable one
  unescape: false

自动断页

需要使用的插件: hexo-excerpt, npm安装即可
然后在根配置文件中写

1
2
3
4
5
6
# Exceprt
excerpt:
  depth: 4
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: false

数学公式支持

next主题的维护者们目前主要采用两种数学公式渲染引擎

  • MathJax
  • KaTeX

其中 KaTeX 渲染更快,且最近还在更新,官网还给出了详细的支持列表.

数学公式的渲染牵扯到渲染引擎的体系

  1. hexo-renderer-marked (原生,较慢,不符合标准)
  2. hexo-renderer-markdown-it (支持katex渲染)
    1. markdown-it-katex (作为插件存在,用于调用 KaTex,已经不再维护)
    2. @iktakahiro/markdown-it-katex
  3. hexo-renderer-markdown-it-plus (集成了katex渲染功能,不过已经不再维护)
  4. hexo-renderer-markdown-it-katex (集成了katex渲染功能,已经不再维护)
  5. hexo-renderer-pandoc (支持MathJax渲染)

说明:
KaTeX 并不专门为hexo所写,需要使用 markdown-it-katex 来调用.
而 markdown-it-katex 目前有两个问题

  • 已经不再维护,不能兼容最新的 KaTeX,需要使用 @iktakahiro/markdown-it-katex 代替
  • 以可选插件形式使用,需要在配置里声明为 hexo-renderer-markdown-it 的插件

而 hexo-renderer-markdown-it 与原生渲染引擎冲突,需要替换之.

1
2
3
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-markdown-it --save
npm install @iktakahiro/markdown-it-katex --save

在根配置中声明插件扩展

1
2
3
4
5
6
7
8
9
10
11
# config of hexo-renderer-markdown-it
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - '@iktakahiro/markdown-it-katex'

在主题配置中启用katex

1
2
3
4
5
6
7
math:
  every_page: true # 一定要打开不然还得手动编辑markdown插入配置

  katex:
    enable: true
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: true

OLD 自定义页面宽度等

hexo有两个文件留给用户自定义,分别是

  • /theme/next/source/css/_custom/custom.styl
  • theme/next/source/css/_variables/custom.styl

在后者中使用

1
2
$main-desktop                     = 75%  // 页面整个内容区的大小
$content-desktop                  = calc(100% - 252px)  //影响content与sidebar的间距

以调整页面宽度

OLD 置顶

NexT 在2015年曾经推出过置顶功能,但因种种bug最后取消
喜欢的人可以借助插件自己动手实现

1
2
npm uninstall hexo-generator-index --save       ;; 移除默认插件
npm install hexo-generator-index-pin-top --save ;; 安装新的插件

此时在 Front-matter 中使用

1
2
3
top: true
# top: 10
# top: 1

等就能设置指定或者设置指定的优先级,数越大越优先

  1. 通知读者置顶

    原有置顶功能的样式还在,使用 Front-matter 中的 sticky 标签即可
    将 top 替换为 sticky 标签:

    • 将 ~/blog/node_modules/hexo-generator-index-pin-top/lib/generator.js
      文件中所有 top 换成 sticky

OLD 封面图片

此功能建议关闭自动断页功能,手动添加 <!-- more --> 标签决定断页位置
自动断页导致首页置顶的图片无法被显示.
通过修改 blog/themes/next/layout/_macro/post.swig 文件达到目的

1
2
3
4
5
6
7
      {% if is_index %}
+        {% if post.image %}
+          <div class="out-img-topic">
+            <img src={{ post.image }} class="img-topic">
+          </div>
+       {% endif %}
        {% if post.description and theme.excerpt_description %}

而系统并没有定义两个class: out-img-topic,=img-topic=.需要自行定义
在 ~/blog/themes/next/source/css/_custom/custom.styl 中加入：

1
2
3
4
5
6
7
8
9
10
11
// 摘要图片外框
.out-img-topic {
  display: block;
  max-height: 300px;
  margin-bottom: 24px;
  overflow: hidden;
}
// 自定义的文章摘要图片样式
img.img-topic {
    width: 70%;
}

最后编辑有这需求的相关文章时，在 Front-matter 加上：

1
image: url
  • url 即图片的链接地址

即可

使用图片

引用的本地图片可以放在 /source/images,然后在markdown中引用

OLD 侧边栏中使用音乐插件

侧边栏样式主要由 /hexo/themes/next/layout/_macro/sidebar.swig 文件定义,因此修改这里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{% if theme.custom_file_path.sidebar %}
{% set custom_sidebar = '../../../../' + theme.custom_file_path.sidebar %}
{% else %}
{% set custom_sidebar = '../_custom/sidebar.swig' %}
{% endif %}
{% include custom_sidebar %}
</div>
</section>
<div id="multimedia">
  <!--
      <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=440239249&auto=0&height=66">
      </iframe>
      -->
      <iframe width="320" height="160" src="https://www.youtube.com/embed/rZzlX3d9dcg?rel=0&amp;controls=0&amp;start=14" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
      </iframe>
</div>
{% if display_toc and toc(page.content).length > 1 %}
<!--noindex-->
<section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
  <div class="post-toc">

在中间加入从网站生成的外链 <iframe></iframe>,即可使用

参考

  1. 官方对于数学公式支持的说明