avatar

Hexo+Github博客搭建之Matery主题个性化修改篇(一)

首先声明一下,一定要分清什么是站点配置文件,什么是主题文件,比如我在F盘新建我的博客文件夹,名称为blog,那么站点配置文件的路径为F:/blog/_config.yml,而你的主题配置文件路径为F:/blog/themes/matery/_config.yml。

修改主题的基本信息

1
2
3
4
5
6
7
8
9
#这是根目录下的配置文件信息
title: 过客~励む #这是网站标题
subtitle: 励む #这是网站副标题subtitle
# 下面两个description,keywords,需要填上,如果想让搜索引擎收录,这个做SEO优化必不可忽视的两个属性
description: 专注于Web,分享生活,分享知识 #网站描述
keywords: [HTML, CSS, JavaScript, JQuery, React, Vue.js等] #网站的关键词
author: YangAir #作者,文章版权所显示的
language: zh-CN #网站语言,不填写,默认为英文
timezone: #时区,可以不填写

修改主题的logo图和favicon图标

打开你的主题配置文件,找到如下的配置,将其更改为你的logo和favicon路径即可:

1
2
3
# 配置网站favicon和网站LOGO
favicon: /favicon.png
logo: /favicon.png

去掉右上角的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即可。

修改社交链接

主页banner图中显示的社交链接与底部的社交链接是同步修改的,打开主题配置文件,将社交链接信息修改为你的信息。修改如下:

1
2
3
4
5
6
7
8
9
10
# 首页 banner 中的第二行个人信息配置,留空即不启用
socialLink:
github: https://github.com/blinkfox
email: 1181062873@qq.com
facebook: # https://www.facebook.com/xxx
twitter: # https://twitter.com/xxx
qq: 1181062873
weibo: # https://weibo.com/xxx
zhihu: # https://www.zhihu.com/xxx
rss: true # true、false

如果想添加简书,CSDN,掘金,博客园等等,需要在主题配置文件添加相关配置,如下是我个人的配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
socialLink:
qq: 1035800145
weixin: https://cdn.jsdelivr.net/gh/Yafine/Yafine-imgs/images/wechat.png
github: https://github.com/Yafine
email: mailto:1035800145@qq.com
facebook: # https://www.facebook.com/xxx
twitter: # https://twitter.com/xxx
weibo: # https://weibo.com/xxx
zhihu: https://www.zhihu.com/people/xuan-tian-40-64/activities
juejin: https://juejin.im/user/5a902053f265da4e7527ae71/activities
csdn: https://blog.csdn.net/victoryxa
jianshu: https://www.jianshu.com/u/3b3856869772
cnblogs: https://www.cnblogs.com/yafine/
rss: true # true、false

其中的weixin我是用的图片链接,会跳转到一个新的标签页,之后还需要修改ejs文件,文件在主题目录下的layout文件夹下的_partial文件夹,修改social-link.ejs,添加相关的配置,我个人添加的配置如下:

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
<% if (theme.socialLink.jianshu) { %>
<a href="<%= theme.socialLink.jianshu %>" class="tooltipped" target="_blank" data-tooltip="关注我的简书: <%= theme.socialLink.jianshu %>" data-position="top" data-delay="50">
<i class="fab fa-jianshu">简</i>
</a>
<% } %>

<% if (theme.socialLink.csdn) { %>
<a href="<%= theme.socialLink.csdn %>" class="tooltipped" target="_blank" data-tooltip="关注我的CSDN: <%= theme.socialLink.csdn %>" data-position="top" data-delay="50">
<i class="fab fa-csdn">C</i>
</a>
<% } %>
<% if (theme.socialLink.juejin) { %>
<a href="<%= theme.socialLink.juejin %>" class="tooltipped" target="_blank" data-tooltip="关注我的掘金: <%= theme.socialLink.juejin %>" data-position="top" data-delay="50">
<i class="fab fa-juejin">掘</i>
</a>
<% } %>

<% if (theme.socialLink.cnblogs) { %>
<a href="<%= theme.socialLink.cnblogs %>" class="tooltipped" target="_blank" data-tooltip="关注我的博客园: <%= theme.socialLink.cnblogs %>" data-position="top" data-delay="50">
<i class="fab fa-juejin">博</i>
</a>
<% } %>
<% if (theme.socialLink.weixin) { %>
<a href="<%= theme.socialLink.weixin %>" class="tooltipped" target="_blank" data-tooltip="微信联系我: <%= theme.socialLink.weixin %>" data-position="top" data-delay="50">
<i class="fab fa-weixin"></i>
</a>
<% } %>

去掉banner图的动态滤镜颜色并修改导航栏颜色

  1. 去掉动态滤镜颜色

打开themes/matery/source/css/matery.css文件,查找rainbow属性,然后将其注释即可。如下:

1
2
3
4
5
6
7
/*如果想去掉banner图的颜色渐变效果,请将以下的css属性注释掉或者删除掉即可*/
@-webkit-keyframes rainbow {
/* 动态切换背景颜色. */
}
@keyframes rainbow {
/* 动态切换背景颜色. */
}
  1. 修改导航栏颜色及透明效果

打开themes/matery/source/css/matery.css文件,大约在250行,有一个.bg-color属性,修改其属性值即可,代码如下:

1
2
3
4
.bg-color {
background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); //修改成自己喜欢的颜色值
opacity: 0.8; //透明效果 值范围 0~1,看情况自己修改
}

修改banner图和文章特色图

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片,主题代码中是每天动态切换一张,只需 7 张即可。如果你会 JavaScript 代码,可以修改成你自己喜欢切换逻辑,如:随机切换等,banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中:

1
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

/source/medias/featureimages 文件夹中默认有 24 张特色图片,你可以再增加或者减少,并需要在 _config.yml 做同步修改。

如果想改为每小时或者每分钟切换banner图的话,需要将getDay()改为getHours()或者getMinutes()即可。

注意:这个不会自动切换banner图,需要刷新页面才可以,更换为每分钟或每小时可能会出现问题,如图片显示不出来,具体的解决办法,自己研究吧😂,可能是图片数量不足,或者是图片命名规范的问题。

添加首页动态打字效果副标题

在主题配置文件中,找到下面的配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 网站副标题,打字效果
# 如果有符号 ‘ ,请在 ’ 前面加上 \
subtitle:
enable: true
loop: true # 是否循环
showCursor: true # 是否显示光标
startDelay: 300 # 开始延迟
typeSpeed: 100 # 打字速度
backSpeed: 50 # 删除速度
sub1: 志之所向,金石为开,谁能御之?
sub2: 花开不是为了花落,而是为了开的更加灿烂。
sub3: 没有伞的孩子必须努力奔跑!
sub4: 欲望以提升热忱,毅力以磨平高山。
sub5: 如果放弃太早,你永远都不知道自己会错过什么。
sub6: 没有礁石,就没有美丽的浪花;没有挫折,就没有壮丽的人生。

注意:

网站打字效果副标题默认有两个,即sub1sub2,如果想写多个,则需要修改两处地方,首先修改配置文件,如上面所示,在sub1sub2后面继续添加即可,然后在去主题目录下的layout文件夹下的_partial文件夹,修改bg-cover-content.ejs文件,大约在12行左右,如下面所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 <div class="description center-align">
<% if (theme.subtitle.enable) { %>
<span id="subtitle"></span>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
<script>
var typed = new Typed("#subtitle", {
strings: ['<%= theme.subtitle.sub1 %>',
'<%= theme.subtitle.sub2 %>',
'<%= theme.subtitle.sub3 %>',
'<%= theme.subtitle.sub4 %>',
'<%= theme.subtitle.sub5 %>',
'<%= theme.subtitle.sub6 %>'],
startDelay: <%= theme.subtitle.startDelay %>,
typeSpeed: <%= theme.subtitle.typeSpeed %>,
loop: <%= theme.subtitle.loop %>,
backSpeed: <%= theme.subtitle.backSpeed %>,
showCursor: <%= theme.subtitle.showCursor %>
});
</script>
<% } else { %>
<%= config.description %>
<% } %>
</div>

动态标题

先放上效果图再说:

离开当前页面时 返回当前页面时

实现方法,引入js文件,在主题文件下的/source/js/下新建FunnyTitle.js,然后在添加到themes/matery/layout/layout.ejs或者添加到themes/matery/layout/_partial/head.ejs,其代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--浏览器搞笑标题-->
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/favicon.png");
document.title = 'ヽ(●-`Д´-)ノ你要玩捉迷藏嘛';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/favicon.png");
document.title = 'ヾ(Ő∀Ő3)ノ好哦!' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});

我的链接:https://cdn.jsdelivr.net/gh/Yafine/cdn@3.3.1/source/js/FunnyTitle.js(理论上一直有效)

或者直接在themes/matery/layout/layout.ejs文件中添加如下代码:

1
2
3
4
5
6
<script type="text/javascript">
var OriginTitile=document.title,st;
document.addEventListener("visibilitychange",function(){
document.hidden?(document.title="ヽ(●-`Д´-)ノ你要玩捉迷藏嘛",clearTimeout(st)):(document.title="(Ő∀Ő3)ノ好哦!",st=setTimeout(function(){document.title=OriginTitile},3e3))
})
</script>

修改导航栏颜色以及透明效果

打开themes/matery/source/css/matery.css文件,大约在250行,有一个.bg-color属性,修改其属性值即可,代码如下:

1
2
3
4
.bg-color {
background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); //修改成自己喜欢的颜色值
opacity: 0.8; //透明效果 值范围 0~1,看情况自己修改
}

添加动态诗词

采用的是今日诗词,每次返回一句诗词,根据时间、地点、天气、事件智能推荐。官网有API文档,可以去看一下,有多种安装方式,最简单的方式就是从官网获取代码,在/themes/matery/layout/_partial/head.ejs添加下面的一行代码:

1
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

然后再将/themes/matery/layout/_partial/bg-cover-content.ejs中的<%= config.description %>修改为把<%= config.description %>改为<%- '<span id="jinrishici-sentence">正在加载今日诗词....</span>' %>,这个使用前提是将主题配置文件的subtitle的值改为false

鼠标点击文字特效

实现方法,引入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");
}

或者使用我的cdn链接,理论上一直有效https://cdn.jsdelivr.net/gh/Yafine/cdn@3.3.1/source/js/click_show_text.js,然后在添加到themes/matery/layout/layout.ejs

鼠标点击礼花特效

先看效果:

文件地址:传送门

matery/source/js/目录下新建lihua.js,然后打开上面的传送门网址,将代码复制粘贴进js文件里,然后在layout.ejs文件里引用,最后本地运行查看效果即可。

自定义鼠标样式

建议大家下载鼠标指针样式的格式为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>
文章作者: Yafine
文章链接: https://yafine-blog.cn/posts/8c84.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 过客~励む
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论