Hexo下魔改NexT主题

• hexo版本：6.2.0
• NexT版本：8.12.2
• NodeJS版本：16.16

背景修改canvas-nest

step1

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

  {% 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）最后面，加入如下代码：

# 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)

效果如图所示：

在特定页面隐藏目录

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

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

修改为：

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

搞怪标题

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

{# 搞怪网页标题 #} 
{% 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') }}前面加入如下内容：

{% include 'custom.njk' %}

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

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

fancybox去掉图片标题

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

const imageTitle = $image.attr('title') || $image.attr('alt');

修改动画时间

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