魔改NexT主题

发表于 更新于 分类于 阅读次数：
  • hexo版本：6.2.0
  • NexT版本：8.12.2
  • NodeJS版本：16.16

背景修改canvas-nest

step1

在next主题文件夹根目录下的layout/_layout.njk中加入如下代码到footer标签后面即可：

1
2
3
4
5
6
7
8
9
10
{% if theme.canvas_nest.enable %}

<script color="{{ theme.canvas_nest.color }}" 
        opacity="{{ theme.canvas_nest.opacity }}" 
        zIndex="{{ theme.canvas_nest.zIndex }}" 
        count="{{ theme.canvas_nest.count }}" 
        src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js">
</script>

{% endif %}

step2

在next主题的配置文件（_config.yml）最后面，加入如下代码：

1
2
3
4
5
6
7
8
9
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  color: "0, 0, 0" # RGB values, use `,` to separate
  opacity: 0.7 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 120 # The number of lines

参数可以根据个人需求修改，color代表线条颜色，opacity为线条透明度，zIndex为层级，一般不需要修改，count为线条数量，数字越大线条越多。

step3（可忽略）

为了满足个人审美需求，还将页面主体部分透明度设为100%，侧边栏badge字体颜色透明度不与主体部分保持一致，修改如下：

主体透明度修改

修改主题根目录下的\source\css\_variables\base.styl文件，将$body-bg-color和$content-bg-color值修改为#fff0

修改侧边栏badge字体颜色

修改主题根目录下的source\css\_schemes\Pisces\_menu.styl文件，将 .badge中的color修改为rgb(255, 255, 255)

效果如图所示：

image-20220728113746502

支持mermaid流程图显示

安装插件

1
npm install hexo-filter-mermaid-diagrams

修改NeXt主题下的_config.yml文件将mermaid选项下的enable设置为true即可。

在特定页面隐藏目录

修改themes\next\layout\_macro\sidebar.文件，将

1
{%- set display_toc = page.toc.enable and display_toc %}

修改为：

1
{%- set display_toc = page.toc.enable and display_toc and page.path.indexOf('关键词') == -1 %}

搞怪标题

在主题根目录layout文件夹下新建一个custom.njk，加入如下内容：

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
{# 搞怪网页标题 #} 
{% if theme.title_trick.enable %}
<script>
  var OriginTitile = document.title;
  var titleTime;
  //换网站的logo
  function selfSetIcon(url){
		var links = document.getElementsByTagName('link') 
		for (var i = 0; i < links.length; i++) { 
			var link = links[i]
			var rel = link.rel; 
            var count = 0;
			rel = rel.toLowerCase(); 
			if (rel.indexOf('icon') == 0) { 
                count++;
				link.href = url;
                if(count == 2)
				    break;
			}
		}
	}
  
  document.addEventListener("visibilitychange", function() {
    if (document.hidden) {
      document.title = "{{ theme.title_trick.leave }}" + OriginTitile;
      selfSetIcon("{{ theme.title_trick.logo }}");
      clearTimeout(titleTime);
    } else {
      selfSetIcon("{{ theme.favicon.medium }}");
      document.title = "{{ theme.title_trick.enter }}" + OriginTitile;
      titleTime = setTimeout(function() {
        document.title = OriginTitile;
        
      }, 2000);
    }
  });
  
</script>
{% endif %}

修改同级目录_layout.njk，在{{- next_inject('bodyEnd') }}前面加入如下内容：

1
{% include 'custom.njk' %}

在主题配置文件末尾加入如下内容：

1
2
3
4
5
title_trick:
  enable: true
  leave: "(●—●)喔噢，崩溃了~|"
  enter: "φ(>ω<*) 咦！又好了！|"
  logo: "https://muggletan.github.io/images/failure.ico"

fancybox去掉图片标题

修改主题文件夹下的themes\next\source\js\third-party\fancybox.js文件，注释掉如下代码

1
2
3
4
5
6
7
8
9
const imageTitle = $image.attr('title') || $image.attr('alt');
if (imageTitle) {
// Do not append image-caption if pandoc has already created a figcaption
if (!$imageWrapLink.next('figcaption').length) {
$imageWrapLink.append(`<p class="image-caption">${imageTitle}</p>`);
}
// Make sure img title tag will show correctly in fancybox
$imageWrapLink.attr('title', imageTitle).attr('data-caption', imageTitle);
}

修改动画时间

修改主题文件夹下的themes\next\source\js\motion.js文件，修改第一个duration变量的值。