橦言无忌

一个不想改变世界的程序媛

hexo上的next主题优化项

发表于 更新于 分类于 Valine：
本文字数： 7k 阅读时长 ≈ 6 分钟

前言

hexo上next的主题优化项，选择了一些个人的偏爱项，基本就是当前博客的展示效果了~

安心码文了~

1，下载主题文件

1
2
3
4
cd hexo #本文blog的主目录的名称为hexo

git clone https://github.com/theme-next/hexo-theme-next themes/next

2，主题优化

2.1 显示本地图片

  • 安装依赖

    1
    npm install hexo-renderer-marked

  • 修改站点文件_config.yml

    1
    2
    3
    4
    5
    6
    # 文章资源文件夹
    post_asset_folder: true
    # 以下内容需要添加
    marked:
      prependRoot: true
      postAsset: true

  • 引用图片的方式
    在文章的同级目录放置与文章同名的文件夹来存放需要在本文中展示的图片

    1
    2
    # 使用这种方式引用图片
    ![](image.jpg)

2.2 图片放大预览功能

  • 修改next.yml文件
    1
    fancybox: true #添加图片放大预览功能

2.3 添加关于、标签、分类页面

  • 修改主题配置文件next.yml

    1
    2
    3
    4
    5
    6
    7
    # 去除下面的注释
    menu:
      home: / || fa fa-home
      about: /about/ || fa fa-user
      tags: /tags/ || fa fa-tags
      categories: /categories/ || fa fa-th
      archives: /archives/ || fa fa-archive

  • 新建文件

    1
    2
    3
    hexo new page "about"
    hexo new page "tags"
    hexo new page "categories"

  • 修改文件和配置

    1
    2
    3
    source\about\index.md
    source\tags\index.md
    source\categories\index.md

    相应文件内修改

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    ---
    title: 关于
    type: "about"
    ---

    ---
    title: 标签
    type: "tags"
    ---

    ---
    title: 分类
    type: "categories"
    ---

2.4 添加搜索功能

  • 安装依赖

    1
    npm install hexo-generator-searchdb --save

  • 站点文件_config.yml添加搜索

    1
    2
    3
    4
    5
    6
    7
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000
    local_search:
      enable: true

2.5 回到顶部按钮

修改配置文件next.yml

1
2
3
4
5
6
back2top:
  enable: true
  # 将返回按钮设置在侧边栏
  sidebar: false
  # 按钮上显示进度百分比
  scrollpercent: true

2.6 字数统计和预计阅读时间

  • 安装依赖

    1
    npm install hexo-symbols-count-time --save

  • 修改站点配置文件_config.yml

    1
    2
    3
    4
    5
    symbols_count_time:
      symbols: true  # 文章字数
      time: true  # 阅读时长
      total_symbols: true  # 所有文章总字数
      total_time: true  # 所有文章阅读中时长

  • 修改主题配置文件next.yml

    1
    2
    3
    4
    5
    6
    symbols_count_time:
      separated_meta: true # 是否换行显示 字数统计 及 阅读时长
      item_text_post: true  # 文章 字数统计 阅读时长 使用图标 还是 文本表示
      item_text_total: true # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示
      awl: 4
      wpm: 275

2.7 代码块复制和代码高亮

修改主题配置文件next.yml

1
2
3
4
5
6
7
8
9
10
codeblock:
  # 代码高亮
  highlight_theme: night bright
  # 复制
  copy_button:
    enable: true
    # 显示文本复制结果
    show_result: true
    # 可以选择的样式: default | flat | mac
    style: mac

2.8 文章内链接文本样式

  • 在hexo/source/_data中新增样式文件styles.styl
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 修改链接样式
    .post-body p a{
      color: #0593d3;
      border-bottom: none;
      &:hover {
        color: #ff106c;
      }
    }

    a, span.exturl {
      border-bottom: none;
      &:hover {
        color: #ff106c;
      }
    }
  • 修改主题配置文件next.yml，去掉styles.styl的注释
    1
    style: source/_data/styles.styl

2.9 文章底部增加版权信息

修改主题配置文件next.yml

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: false # 不显示在侧边栏
  post: true
  language:

2.10 文章底部tag图标

修改主题配置文件next.yml

1
tag_icon: true

2.11 侧边栏文章目录设置

修改主题配置文件next.yml

1
2
3
4
5
6
7
8
9
10
toc:
  enable: true
  # 自动编号
  number: false
  # 超出宽度跨行
  wrap: true
  # 展开所有
  expand_all: true
  # 最大标题深度
  max_depth: 6

2.12 侧边社交链接

修改主题配置文件next.yml

1
2
3
4
social:
  GitHub: https://github.com/sophia-hxw || fab fa-github
  CSDN: https://blog.csdn.net/sophia_xw || crosshairs
  E-Mail: mailto:xinwen618@gmail.com || fa fa-envelope

2.13 文章置顶

  • 安装依赖

    1
    2
    npm uninstall hexo-generator-index --save
    npm install hexo-generator-index-pin-top --save

    其中，hexo-generator-index是hexo默认的文章排序插件，hexo-generator-index-pin-top是替换掉默认的排序插件，且有置顶功能。

  • 需要置顶的文章中添加置顶项

    1
    2
    3
    4
    5
    6
    7
    8
    9
    ---
    title: hexo上文章怎么置顶？
    date: 2022-06-22 23:28:09
    tags: 
    - hexo
    categories:
    - ubuntuOS
    top: true
    ---

  • 添加文章置顶标志
    打开/blog/themes/next/layout/_macro目录下的post.swig文件，在<div class="post-meta">标签下添加下面内容

    1
    2
    3
    4
    5
    {% if post.top %}
      <i class="fa fa-thumb-tack"></i>
      <font color=7D26CD>置顶</font>
      <span class="post-meta-divider">|</span>
    {% endif %}

2.14 专业数学公式引擎

Hexo默认使用”hexo-renderer-marked”引擎渲染网页，该引擎会把一些特殊的markdown符号转换为相应的html标签，比如在markdown语法中，下划线_代表斜体，会被渲染引擎处理为<em>标签。

类似的语义冲突的符号还包括'*', '{', '}', '\'等。

  • 安装依赖
    更换Hexo的markdown渲染引擎，hexo-renderer-kramed引擎是在默认的渲染引擎hexo-renderer-marked的基础上修改了一些bug，两者比较接近，也比较轻量级。
1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
  • 修改新渲染引擎的歧义
    然后，跟换引擎后行间公式可以正确渲染了，但是这样还没有完全解决问题，行内公式的渲染还是有问题，因为hexo-renderer-kramed引擎也有语义冲突的问题。

接下来到博客根目录下，找到node_modules\kramed\lib\rules\inline.js，把第11行的escape变量的值做相应的修改：

1
2
//  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/

这一步是在原基础上取消了对\,{,}的转义(escape)。
同时把第20行的em变量也要做相应的修改。

1
2
//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

再重新启动hexo，若没有解决问题就需要打开主题中mathjax的支持了

  • 修改主题配置文件next.yml
    进入到主题目录，找到_config.yml配置问题，把mathjax默认的false修改为true，具体如下：

    1
    2
    3
    4
    # MathJax Support
    mathjax:
      enable: true
      per_page: true

  • 文章使用渲染工具
    在文章的Front-matter里打开mathjax开关，如下：

    1
    2
    3
    4
    5
    6
    ---
    title: index.html
    date: 2016-12-28 21:01:30
    tags:
    mathjax: true
    --

2.15 主题布局改为圆角

  • 在 hexo/source/_data 目录下新建 variables.styl 文件

    1
    2
    3
    // 圆角设置
    $border-radius-inner     = 20px 20px 20px 20px;
    $border-radius           = 20px;

  • 修改主题配置文件next.yml

    1
    2
    # 去掉注释
    variable: source/_data/variables.styl

2.16 设置博客背景图片

  • 背景图片位置

    1
    hexo/source/images

  • 修改hexo/source/_data/styles.styl样式代码
    // 设置背景图片
    body {
    background:url(/images/background.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed; //不重复
    background-size: cover; //填充
    background-position:50% 50%;
    }

2.17 设置博客文章透明度

修改hexo/source/_data/styles.styl样式代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//博客内容透明化
//文章内容的透明度设置
.content-wrap {
  opacity: 0.9;
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.9;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.9;
}

2.18 顶部阅读进度条

修改主题配置文件next.yml

1
2
3
4
5
6
reading_progress:
  enable: true
  # 显示在顶部
  position: top
  color: "#06d633"
  height: 3px

2.19 文章阴影

在hexo/source/_data/styles.styl中添加样式代码

1
2
3
4
5
6
7
8
// 文章阴影
.post {
   margin-top: 50px;
   margin-bottom: 50px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

2.20 修改分类页面样式

添加hexo/source/_data/styles.styl样式代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// 分类&&标签 页面样式
// 分类&&标签 页面样式
.post-block.page {
    margin-top: 40px;
}
// 分类页面page
.category-all-page {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
    background-color: #797D7F;
    padding: 20px 30px 60px 30px;
    border-radius: 25px 25px 25px 25px;
}
.category-all-title {
    font-family: Impact;
    font-size: 24px;
    color: aqua;
}
.category-list {
    overflow: auto;
}
.category-list li {
    height: 100%;
    float: left;
    border-right: 3px solid #222;
    padding: 0 20px;
}
.category-all ul li {
    list-style: none!important;
}
.category-list li:last-child {
    border-right: none;
}
.category-list li a {
    font-size: 16px;
    text-decoration: none;
    color: aqua;
    font-family: Helvetica, Verdana, sans-serif;
    text-transform: uppercase;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.category-list li a:hover {
    color: black;
}
.category-list li.active a {
    font-weight: bold;
    color: black;
}

3，总结

以上是本博客中已经部署的样式，可以按需选用~

// 代码折叠