NexT in Hexo Customized

操作对象：blog/theme/next/文件夹下

在主题配置文件_config.yml中menu栏下添加新的标签页，并在blog/source文件夹下添加同样的文件夹，||右侧是图标，采用的是Font Awesome中的图标位置，不过推荐用fa-solid类型的icon，因为其他的好像显示失败。注意在如/source/pwn中的index.md中不需要写type和layout

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
  pwn: /pwn/ || fas fa-flag-checkered
  system: /system/ || fas fa-laptop-code

在/theme/next/scripts下新建一个pwn.js文件来控制新的pwn菜单栏的内容

var pagination = require('hexo-pagination');

const filteredCategory = 'pwn';

hexo.extend.generator.register('pwn', function(locals){
  var pwnPosts = locals.posts.filter(function(x) {
    return x.categories.data[0].name == filteredCategory;
  });

  return pagination('pwn', pwnPosts, {
    perPage: 12,
    layout: ['archive']
  })
});

注意最后一个layout可以用'archive'来呈现时间轴的效果，不必再自定义了（报错麻烦）
这段代码的功能就是把所有文章按照category过滤，属于pwn的显示出来

执行生效即可

pace实现加载特效

由于网页不可能一直都秒进，总会等待一段时间的，所以可以设置顶部加载条。Next 已经集成了很多加载特效，可以在下面选项中在线调试测试一下。

搜索pace，找到如下代码：

# 页面顶部加载条
# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal  # 默认设置，可以修改为上述任何一个

加载图片

装插件
1
npm install hexo-renderer-marked
在全局配置文件_config.yml中
1. 修改是否生成资源文件夹
  1
  post_asset_folder: true
2. 添加标记
  1
  2
  3
  marked:
  prependRoot: true
  postAsset: true
此时通过hexo new 'title'可以在_posts中生成title.md和同名资源文件夹title

都是可移动的，但资源文件夹和原文件要同时移动
修改typora图片偏好为相对路径优先
进入相对路径后注意只有一个图片名（在对应的资源文件夹下）
1
![name](name.png)

当缩放时src也只能有图片名

1	<img src="brop_stop_gadgets.png" alt="brop_stop_gadgets" style="zoom:38%;" />

圆角&背景&行内代码块

Link : https://zhuanlan.zhihu.com/p/280784973

在根目录下的source folder中（即存放blogs的markdown文档的地方）创建文件夹_data，在该文件夹下创建文件style.styl和variables.style

在next主题配置文件中找到custom_file_path并添加/取消注释以下两个选项

1
2
3

custom_file_path:
	variable: source/_data/variables.styl
	style: source/_data/styles.styl

In file style.styl

//背景图片设置
body {
    background-image: url(/images/wallhaven-dpr2mo.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

//文章内容的透明度设置
.content-wrap {
  opacity: 0.95;
}

//侧边框的透明度设置
.sidebar {
  background-color: transparent;
  opacity: 0.85;
}

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

// Custom styles.
// 行内代码块的模式: 变为红色字体
code {
    color: #F71735;
    background: #fbf7f8;
    margin: 2px;
}

圆角设置在variables.styl

1 2	$border-radius-inner = 20px 20px 20px 20px; $border-radius = 20px;

代码块风格

在nexT主题配置文件搜索codeblock，修改copy_button下的style为mac

copy_button:
   enable: true
   # Show text copy result.
   show_result: true # 是否显示复制成功信息
   # Available values: default | flat | mac
   style: mac # 代码块mac风格

增加对mermaid的支持

Official : https://github.com/webappdevelp/hexo-filter-mermaid-diagrams

进入blog目录，安装插件hexo-filter-mermaid-diagrams
1
npm install hexo-filter-mermaid-diagrams --save

修改根目录下的主配置文件

# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "9.1.4" # latest
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true

进入主题文件夹next下，打开layout

Ganliber's Home

Customize NexT