为了方便我们这里使用 "Visual Studio Code"打开文件
将博客改为中文
目录:E:\IsQiyaBlog
将 " _config.yml " 文件中代码段 language: en 改为 language: zh-CN
修改主题菜单栏
将它们填上内容
新建分类 categories 页:
hexo new page "categories"
目录:E:\IsQiyaBlog\source\categories
在 “index.md” 文件中配置下面相关配置
应用分类标签:
目录:E:\IsQiyaBlog\source\ _posts
在 “hello-world.md” 文件中修改,将这篇文章分类为说明
类似的配置还有:
配置选项 | 描述 | 代码 |
---|---|---|
tag | 标签 | hexo new page "tags" — title: tags date: 2018-09-30 18:23:38 type: "tags" layout: “tags” — |
about | 关于 | hexo new page "about" — title: about date: 2018-09-30 18:23:38 type: "about " layout: "about " — |
contact | 留言板 | hexo new page "contact " — title: tags date: 2018-09-30 18:23:38 type: "about " layout: "about " — |
friends | 友情链接 | hexo new page "friends " — title: tags date: 2018-09-30 18:23:38 type: "tags" layout: "about " — |
404 | 404页面 | hexo new page 404 — title: 404 date: 2018-09-30 18:23:38 type: "404" layout: "404" description: “Oops~,我崩溃了!找不到你想要的页面 😦” — |
修改主题站点运行时间
目录:E:\IsQiyaBlog\themes\matery
将 " _config.yml " 文件中代码段改为下图样式
样子:
修改主题站名
目录:E:\IsQiyaBlog
添加搜索查找插件
安装命令:
npm install hexo-generator-search --save
在目录:E:\IsQiyaBlog下, "_config.yml " 文件中新增代码:
search:path: search.xmlfield: post
文章字数统计插件
安装命令:
npm i --save hexo-wordcount
在目录:E:\IsQiyaBlog下, "_config.yml " 文件中新增代码:
postInfo:date: trueupdate: falsewordCount: false # 设置文章字数统计为 true.totalCount: false # 设置站点文章总字数统计为 true.min2read: false # 阅读时长.readCount: false # 阅读次数.
打开功能
修改社交链接
在目录:E:\IsQiyaBlog\themes\matery\layout_partial下, "social-link.ejs " 文件中新增代码:
<% if (theme.socialLink.github) { %><a href="<%= theme.socialLink.CSDN %>" class="tooltipped" target="_blank" data-tooltip="访问我的CSDN" data-position="top" data-delay="50"><i class="fab fa-CSDN">c</i></a>
<% } %>
添加到目录:E:\IsQiyaBlog\themes\matery, "_config.yml " 文件中
去掉右上角的猫
在目录:E:\IsQiyaBlog\themes\matery下, "_config.yml " 文件中修改代码:
去掉主页的第二个按钮
去掉它:
打赏图片
目录:E:\IsQiyaBlog\themes\matery\source\medias\reward中的图片换成自己的图片即可,注意名字也要换成一样的
安装代码高亮插件
安装代码:
npm i -S hexo-prism-plugin
在目录:E:\IsQiyaBlog下, "_config.yml " 文件中修改代码:
在目录:E:\IsQiyaBlog下, "_config.yml " 文件中新增代码:
#代码高亮
prism_plugin:mode: 'preprocess' # realtime/preprocesstheme: 'tomorrow'line_number: false # default falsecustom_css:
添加友情链接
在目录 E:\IsQiyaBlog\source 下创建 " _data"文件夹 ,并在文件夹中创建 " friends.json "文件
在" friends.json "文件中填写形式如下:
[{"avatar": "http://image.luokangyuan.com/4027734.jpeg","name": "闪烁之狐","introduction": "编程界大佬,技术牛,人还特别好,不懂的都可以请教大佬","url": "https://blinkfox.github.io/","title": "前去学习"
}, {"avatar": "https://qinng.now.sh/medias/avatar.jpg","name": "有风自南","introduction": "也无风雨也无晴","url": "https://qingwave.github.io/","title": "前去学习"
}]
修改页脚
目录:E:\IsQiyaBlog\themes\matery\layout_partial , footer.ejs文件下
天气插件
来自于:
文章链接: https://blog.nmslwsnd.com/matery-zhu-ti-she-zhi/
在 E:\IsQiyaBlog\themes\matery\layout_widget 新建文件 weather.ejs,把代码添加进入,可以设置只有桌面端显示,如下修改:
<!-- 天气接口-->
<script type="text/javascript">WIDGET = {FID: '1tFpFZ5Mtj'}</script>
<script type="text/javascript">//只在桌面版网页启用特效var windowWidth = $(window).width();if (windowWidth > 768) {document.write('<script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"><\/script>');}</script>
然后在 " E:\IsQiyaBlog\themes\matery\layout " layout.ejs 文件中添加 下面这串代码:
<!-- 天气接口 --><% if (theme.weather.enable) { %><%- partial('_widget/weather') %><% } %>
然后在 E:\IsQiyaBlog\themes\matery 文件中 _config.yml 中再添加一个下面这串代码:
# 是否激活天气接口
weather:enable: true
关闭首页蒙版效果
在 E:\IsQiyaBlog\themes\matery\source\css 中 matery.css 文件中修改(注释) :
动态标签栏
在目录:E:\IsQiyaBlog\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 = "φ(゜▽゜*)♪咦,又好了!", st = setTimeout(function () { document.title = OriginTitile }, 3e3)) }) </script>
效果:
标题栏透明效果
目录:E:\IsQiyaBlog\themes\matery\source\css 下 matery.css 文件中修改代码:
.bg-color {background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);opacity: 0.8 /* 透明效果 */
}
永久链接(暂时还没成功)
安装插件
npm install hexo-abbrlink --save
在目录 E:\IsQiyaBlog 下 _config.yml 文件中新增:
#静态链接
abbrlink:alg: crc16 #算法: crc16(default) and crc32rep: hex #进制: dec(default) and hex: dec #输出进制:十进制和十六进制,默认为10进制。丨dec为十进制,hex为十六进制
修改:
添加动态诗词
参考:https://blog.csdn.net/victoryxa/article/details/105841309
目录 : E:\IsQiyaBlog\themes\matery\layout_partial\bg-cover-content.ejs下修改代码” <!-- <%= config.description %> -->
”变为 ”<%- '<span id="jinrishici-sentence">正在加载今日诗词....</span>' %>
”
目录 : E:\IsQiyaBlog\themes\matery\layout_partial\head.ejs下新增代码”
<!-- 今日诗词特效 --><script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
最后要将目录:E:\IsQiyaBlog\themes\matery_config.yml 文件下主题的subtitle值改为false
鼠标点击特效
参考:https://blog.csdn.net/victoryxa/article/details/105841309
在目录:E:\IsQiyaBlog\themes\matery\source\js 下新建 click_show_text.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");
}
进入目录:E:\IsQiyaBlog\themes\matery\layout\layout.ejs中新增代码,引用特效
<!-- 鼠标点击特效 富强民主文明 --><script src="/js/click_show_text.js"></script>
自定义鼠标样式
参考:博主
下载鼠标样式 网址为:https://www.easyicon.net/
下载格式:16px ico
将下载的图片命名为cursor1.ico
放到目录:E:\IsQiyaBlog\themes\matery\source\medias下,并在目录:E:\IsQiyaBlog\themes\matery\source\css\my.css文件下新增代码
*{cursor: url("/medias/cursor1.ico"),auto!important;
}
:active{cursor: url("/medias/cursor1.ico"),auto!important;
}
持续更新……