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: truecolor: "0, 0, 0" # RGB values, use `,` to separateopacity: 0.7 # The opacity of line: 0~1zIndex: -1 # z-index property of the backgroundcount: 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;//换网站的logofunction 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: trueleave: "(●—●)喔噢，崩溃了~|"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变量的值。

Hexo下魔改NexT主题相关推荐

实用 | 宝藏男孩教你如何魔改 Grafana 主题！
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 米开朗基杨来源 | 公众号「云原生实验室」 ...
魔改 Typora 主题
:root {/* 这是右边内容区的背景色 */--bg-color: #EEE9E9;/* 这是所有文字的颜色 */--text-color: #000000;/* 改变元内容的颜色,例如 mark ...
Hexo 魔改主题 butterfly
到原文查看最新更新: https://yunist.cn/hexo/hexo_modify_theme_butterfly/ 所有魔改均可取消! 配置默认不开启, 因此可以平滑换到魔改 butterf ...
Hexo主题Aurora的魔改（一）
Hexo主题Aurora的魔改(一) 刚接触Hexo,就碰到了这么好的主题,如图是Aurora作者的博客展示: 你可以从去Github了解Hexo和Aurora主题. 虽然主题很好看,但是对于刚接触H ...
Hexo博客之butterfly主题优雅魔改系列（持续更新）
为了便于各位博主了解到是否新增了魔改方案,请查看更新记录页前置说明魔改亮点
【hexo】butterfly主题魔改之天气插件
前言最近我使用hexo博客框架搭建了我的个人框架萌新源的小窝主题使用的是butterfly 今天给大家带来的是导航栏天气插件效果如下: 放大一点看看面板展开开始 1.准备 hexo博客框架 ...
关于Typecho的主题魔改记录
本站使用handsome主题魔改的折腾过程本文记录博主在使用该款主题时进行的一系列魔改,也就是你现在看到的一系列效果本站[http://www.cyz4531.top]使用的是handsome主题 ...
hexo下yilia主题博客个性化自定义
我的博客采用的hexo下的yilia主题,这篇文章记录一下自己折腾配置博客的方法和经过. 首先是创建博客的基本的几个命令 hexo g # 生成博客网页文件 hexo s # 本地预览博客,打开本地网 ...
handsome对应php文件,handsome主题魔改教程
!> 魔改效果详见本站,CSS由神代綺凜原创编写,已获得作者转载授权. 魔改效果有没有觉得很酷炫? 那么我们快搞起! 魔改教程第一步下载CSS [button icon="g ...

Hexo下魔改NexT主题