hexo之Matery主题个性化进阶篇


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

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

本文主要魔改鼠标样式

鼠标点击文字特效

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

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格式,大小为16*16,或者24*24的。

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

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

*{
    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文件内添加下面的内容:

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

附加的主题设置

去掉右上角的github图标

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

# 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按钮

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

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

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


文章作者: Young
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Young !
评论
 本篇
hexo之Matery主题个性化进阶篇 hexo之Matery主题个性化进阶篇
本文所有教程都可以在大佬过客~励む博客中学习 过客~励む:https://yafine66.gitee.io/进阶博客: https://yafine66.gitee.io/posts/8c84.html 本文主要魔改鼠标样式
2020-04-30
下一篇 
hexo中Valine评论头衔设置 hexo中Valine评论头衔设置
本文章引用于会飞的小弋的一篇博客 会飞的小弋: https://lovelijunyi.gitee.io/引用的博客: https://lovelijunyi.gitee.io/posts/e52c. 效果图 下载代码 这里建议不
2020-04-28
  目录