本文所有教程都可以在大佬过客~励む博客中学习

过客~励む:https://yafine66.gitee.io/
进阶博客: https://yafine66.gitee.io/posts/8c84.html

本文主要魔改鼠标样式

鼠标点击文字特效

实现方法,引入js文件,在主题文件下的/source/js/下新建click_show_text.js,其代码如下:

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
var a_idx = 0;
jQuery(document).ready(function ($) {
$("body").click(function (e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 5,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#FF0000"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
3000,
function () {
$i.remove();
});
});
setTimeout('delay()', 2000);
});

function delay() {
$(".buryit").removeAttr("onclick");
}

自定义鼠标样式

建议大家下载鼠标指针样式的格式为ico格式,大小为1616,或者2424的。

首先将鼠标样式下载到本地,推荐大家一个网站,可以免费下载,需要登录一下:网址为:https://www.easyicon.net/

以我的为例,我将鼠标指针样式放在了主题文件夹下的medias目录下,然后打开主题文件夹下的my.css文件,添加内容如下:

1
2
3
4
5
6
*{
cursor: url("/medias/cursor1.ico"),auto!important;
}
:active{
cursor: url("/medias/cursor2.ico"),auto!important;
}

然后在本地运行查看效果即可

添加鼠标彩虹星星掉落跟随效果

先来瞅瞅效果

themes/matery/source/js目录下粘贴下载的cursor.js文件。下载地址:cursor.js

然后再themes/matery/layout/layout.ejs文件内添加下面的内容:

1
<script src="/js/cursor.js"></script>

附加的主题设置

去掉右上角的github图标

打开你的主题配置文件,找到下面的配置:

1
2
3
4
5
6
# Whether to display fork me on github icon and link, default true, You can change it to your repo address
# 配置是否在 header 中显示 fork me on github 的图标,默认为true,你可以修改为你的仓库地址.
githubLink:
enable: true
url: https://github.com/blinkfox/hexo-theme-matery
title: Fork Me

enable的属性值由true改为false即可。

去掉主页的Github按钮

打开主题配置文件,找到下面的配置:

1
2
3
4
5
6
# 首页 banner 中的第二个按钮的配置,包括按钮的显示名称、font awesome图标和按钮的超链接.
indexbtn:
enable: true
name: Github
icon: fab fa-github-alt
url: https://github.com/blinkfox/hexo-theme-matery

enable属性值由true改为false即可。