首先声明一下,一定要分清什么是站点配置文件,什么是主题文件,比如我在F盘新建我的博客文件夹,名称为blog,那么站点配置文件的路径为F:/blog/_config.yml,而你的主题配置文件路径为F:/blog/themes/matery/_config.yml。
修改主题的基本信息
#这是根目录下的配置文件信息
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路径即可:
# 配置网站favicon和网站LOGO
favicon: /favicon.png
logo: /favicon.png
去掉右上角的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即可。
修改社交链接
主页banner图中显示的社交链接与底部的社交链接是同步修改的,打开主题配置文件,将社交链接信息修改为你的信息。修改如下:
# 首页 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,掘金,博客园等等,需要在主题配置文件添加相关配置,如下是我个人的配置:
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
,添加相关的配置,我个人添加的配置如下:
<% 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图的动态滤镜颜色并修改导航栏颜色
- 去掉动态滤镜颜色
打开themes/matery/source/css/matery.css
文件,查找rainbow属性,然后将其注释即可。如下:
/*如果想去掉banner图的颜色渐变效果,请将以下的css属性注释掉或者删除掉即可*/
@-webkit-keyframes rainbow {
/* 动态切换背景颜色. */
}
@keyframes rainbow {
/* 动态切换背景颜色. */
}
- 修改导航栏颜色及透明效果
打开themes/matery/source/css/matery.css
文件,大约在250行,有一个.bg-color
属性,修改其属性值即可,代码如下:
.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>
代码中:
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
在 /source/medias/featureimages
文件夹中默认有 24 张特色图片,你可以再增加或者减少,并需要在 _config.yml
做同步修改。
如果想改为每小时或者每分钟切换banner图的话,需要将getDay()
改为getHours()
或者getMinutes()
即可。
添加首页动态打字效果副标题
在主题配置文件中,找到下面的配置:
# 网站副标题,打字效果
# 如果有符号 ‘ ,请在 ’ 前面加上 \
subtitle:
enable: true
loop: true # 是否循环
showCursor: true # 是否显示光标
startDelay: 300 # 开始延迟
typeSpeed: 100 # 打字速度
backSpeed: 50 # 删除速度
sub1: 志之所向,金石为开,谁能御之?
sub2: 花开不是为了花落,而是为了开的更加灿烂。
sub3: 没有伞的孩子必须努力奔跑!
sub4: 欲望以提升热忱,毅力以磨平高山。
sub5: 如果放弃太早,你永远都不知道自己会错过什么。
sub6: 没有礁石,就没有美丽的浪花;没有挫折,就没有壮丽的人生。
注意:
网站打字效果副标题默认有两个,即sub1
和sub2
,如果想写多个,则需要修改两处地方,首先修改配置文件,如上面所示,在sub1
和sub2
后面继续添加即可,然后在去主题目录下的layout
文件夹下的_partial
文件夹,修改bg-cover-content.ejs
文件,大约在12行左右,如下面所示:
<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
,其代码如下:
<!--浏览器搞笑标题-->
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.2.5/source/js/FunnyTitle.js(理论上一直有效)
或者直接在themes/matery/layout/layout.ejs
文件中添加如下代码:
<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
属性,修改其属性值即可,代码如下:
.bg-color {
background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); //修改成自己喜欢的颜色值
opacity: 0.8; //透明效果 值范围 0~1,看情况自己修改
}
添加动态诗词
采用的是今日诗词,每次返回一句诗词,根据时间、地点、天气、事件智能推荐。官网有API文档,可以去看一下,有多种安装方式,最简单的方式就是从官网获取代码,在/themes/matery/layout/_partial/head.ejs
添加下面的一行代码:
<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
,其代码如下:
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.2.5/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文件,添加内容如下:
*{
cursor: url("/medias/cursor1.ico"),auto!important;
}
:active{
cursor: url("/medias/cursor2.ico"),auto!important;
}
然后在本地运行查看效果即可
添加鼠标彩虹星星掉落跟随效果
先看看效果,再决定要不要用。
![](https://cdn.jsdelivr.net/gh/Yafine/Yafine-imgs/images/01.gif)
在themes/matery/source/js
目录下新建cursor.js
文件,打开这个网址传送门,将内容复制粘贴到cursor.js即可。
然后再themes/matery/layout/layout.ejs
文件内添加下面的内容:
<script src="/js/cursor.js"></script>