一、Hexo自定义 —Kalbim—
1. 动态标题
打开博客主题文件夹,路径: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
2. 修改导航栏颜色以及透明效果
打开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,看情况自己修改
}
3. 添加动态诗词
采用的是今日诗词,每次返回一句诗词,根据时间、地点、天气、事件智能推荐。官网有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 %>
改为<%- '正在加载今日诗词....' %>
,这个使用前提是将主题配置文件的subtitle
的值改为false
。
4. 鼠标点击文字特效
实现方法,引入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");
}
5. 修改原有相册
6. 添加天气小插件
首先去中国天气官网:https://cj.weather.com.cn/plugin/pc,配置自己的插件,选择自定义插件—>自定义样式——>生成代码,然后会生成一段代码,复制粘贴到 themes/matery/layout/layout.ejs
即可。
7. 关于我页面添加个人简历
打开theme/matery/layout/about.ejs
文件,大约在13行。有一个``标签,找出其对应结尾的标签,大约在61行左右,然后在新增如下代码:
<div class="card">
<div class="card-content">
<div class="card-content article-card-content">
<div class="title center-align" data-aos="zoom-in-up">
<i class="fa fa-address-book"></i> <%- __('个人简历') %>
</div>
<div id="articleContent" data-aos="fade-up">
<%- page.content %>
</div>
</div>
</div>
</div>
注意粘贴的位置和空格要正确,这里的位置随你自己设置,你也可以把简历作为第一个card,然后/source/about/index.md
下面写上你的简历了(就像写博客一样)。
8. 豆瓣书单电影页面
首先在博客站点目录执行下面的命令安装豆瓣插件:
npm install hexo-douban --save
紧接着在博客站点目录的配置文件
_config.yml
下,添加如下配置:douban: user: 252345665 #这个需要修改为你个人的id builtin: false #如果想生成豆瓣页面,这个需要设置为true book: title: 'This is my book title' quote: 'This is my book quote' movie: title: 'This is my movie title' quote: 'This is my movie quote' game: title: 'This is my game title' quote: 'This is my game quote' timeout: 10000
user::你的豆瓣ID。打开豆瓣,登入账户,然后在右上角点击 ”个人主页“,这时候地址栏的URL大概是这样:https://www.douban.com/people/xxxxxx/ ,其中的”xxxxxx”就是你的个人ID了。
- builtin:是否将生成页面的功能嵌入
hexo s
和hexo g
中,默认是false
,另一可选项为true
。 - title: 该页面的标题。
- quote: 写在页面开头的一段话,支持html语法。
- timeout: 爬取数据的超时时间,默认是 10000ms,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。
如果只想显示某一个页面(比如movie),那就把其他的配置项注释掉即可
- builtin:是否将生成页面的功能嵌入
- 然后再主题配置文件
_config.yml
中添加关于此页面的菜单:(下面是我的配置)
menu:
媒体:
url: /
icon: fas fa-list
children:
- name: 电影
url: /movies
icon: fas fa-film
- name: 书单
url: /books
icon: fas fa-book
- name: 游戏
url: /games
icon: fas fa-gamepad
适配Matery主题:在
/themes/hexo-theme-matery/layout
文件夹下面创建一个名为douban.ejs
的文件,并将下面的内容复制进去:<%- partial('_partial/post-cover') %> <style> .hexo-douban-picture img { width: 100%; } </style> <main class="content"> <div id="contact" class="container chip-container"> <div class="card"> <div class="card-content" style="padding: 30px"> <h1 style="margin: 10px 0 10px 0px;"><%= page.title %></h1> <%- page.content %> </div> </div> <div class="card"> <div class="card-content" style="text-align: center"> <h3 style="margin: 5px 0 5px 5px;">如果你有好的内容推荐,欢迎在下面留言!</h3> </div> </div> <div class="card"> <% if (theme.gitalk && theme.gitalk.enable) { %> <%- partial('_partial/gitalk') %> <% } %> <% if (theme.gitment.enable) { %> <%- partial('_partial/gitment') %> <% } %> <% if (theme.disqus.enable) { %> <%- partial('_partial/disqus') %> <% } %> <% if (theme.livere && theme.livere.enable) { %> <%- partial('_partial/livere') %> <% } %> <% if (theme.valine && theme.valine.enable) { %> <%- partial('_partial/valine') %> <% } %> </div> </div> </main>
然后在博客站点目录下的
node_modules
文件夹下找到hexo-douban/lib
,文件夹下有三个js文件,分别为:books-generator.js
、games-generator.js
、movies-generator.js
,用文本编辑器打开这三个文件,并将其文件内容末尾的代码修改为一下内容:
/* 原文件内容为 layout: [`page`, `post`] ,将其修改为下面的内容*/
layout: [`page`, `douban`]
- 最后就是使用并生成相应的页面,执行命令如下:
hexo douban
需要注意的是,通常大家都喜欢用 hexo d
来作为 hexo deploy
命令的简化,但是当安装了 hexo douban
之后,就不能用 hexo d
了,因为 hexo douban
跟 hexo deploy
的前缀都是 hexo d
,你以后执行的 hexo d
将不再是 Hexo 页面的生成,而是豆瓣页面的生成。
以下是可选的命令参数:
-h, --help # 帮助页面
-b, --books # 只生成书单页面
-g, --games # 只生成游戏页面
-m, --movies # 只生成电影页面
当站点配置文件的builtin的值为true时,生成页面的功能会嵌入到hexo g
和hexo s
中,在进行部署生成操作,会自动生成相应的页面。
9. 外链跳转插件
hexo-external-link是一个跳转外链相关插件。自动为所有html文件中外链的a标签生成对应的属性。 比如 设置target=’_blank’, rel=’external nofollow noopener noreferrer’
告诉搜索引擎这是外部链接,不要将该链接计入权重。 同时自动生成外链跳转页面,默认在根目录下 go.html;
使用 npm 或者 yarn 安装
## npm 安装
npm install hexo-external-link --save
## yarn 安装
yarn add hexo-external-link
之后再hexo博客站点根目录下添加如下配置:
hexo_external_link:
enable: true
enable_base64_encode: true
url_param_name: 'u'
html_file_name: 'go.html'
target_blank: true
link_rel: 'external nofollow noopener noreferrer'
domain: 'your_domain' # 如果开启了防盗链,填写你的域名
safety_chain: true
- enable - 是否开启
hexo_external_link
插件 - 默认 false - enable_base64_encode - 是否对跳转
url
使用base64编码
- 默认 fasle - url_param_name - url参数名,在跳转到外链传递给
html_file_name
的参数名 - 默认 ‘u’ - html_file_name - 跳转到外链的页面文件路径 - 默认 ‘go.html’
- target_blank - 是否为外链的
a
标签添加target='_blank'
- 默认 true - link_rel - 设置外链的
a
标签的rel属性 - 默认 ‘external nofollow noopener noreferrer’ - domain - 如果开启了防盗链,除了 localhost 和 domain(你的域名) 之外调用会跳到主页,同时也是判断链接是否为外链的依据 - 默认 window.location.host
- safety_chain - go.html 为了防止外链盗用 对域名进行的判断 - 默认 false
10. 添加动态科技线条背景
在themes/matery/layout/layout.ejs
文件中添加如下代码:
<!--动态线条背景-->
<script type="text/javascript"
color="122 103 238" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>
其中:
- color:表示线条颜色,三个数字分别为(R,G,B),默认:(0,0,0)
- opacity:表示线条透明度(0~1),默认:0.5
- count:表示线条的总数量,默认:150
- zIndex:表示背景的z-index属性,css属性用于控制所在层的位置,默认:-1
11. 添加鼠标点击烟花爆炸效果
首先在themes/matery/source/js
目录下新建fireworks.js
文件,打开这个网址传送门,将内容复制粘贴到fireworks.js
即可。
然后再themes/matery/layout/layout.ejs
文件内添加下面的内容:
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/fireworks.js"></script>
然后hexo clean && hexo g && hexo s
即可,就可以看到效果了。
12. 添加樱花飘落效果
在themes/matery/source/js
目录下新建sakura.js
文件,打开这个网址传送门,将内容复制粘贴到sakura.js即可。
然后再themes/matery/layout/layout.ejs
文件内添加下面的内容:
<script type="text/javascript">
//只在桌面版网页启用特效
var windowWidth = $(window).width();
if (windowWidth > 768) {
document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
}
</script>
13. 添加鼠标彩虹星星掉落跟随效果
在themes/matery/source/js
目录下新建cursor.js
文件,打开这个网址传送门,将内容复制粘贴到cursor.js即可。
然后再themes/matery/layout/layout.ejs
文件内添加下面的内容:
<script src="/js/cursor.js"></script>
14. 添加雪花飘落效果
在themes/matery/source/js
目录下新建snow.js
文件,打开这个网址传送门,将内容复制粘贴到cursor.js即可。
然后再themes/matery/layout/layout.ejs
文件内添加下面的内容:
<script src="/js/snow.js"></script>
15. 文章生成永久链接
主题默认的文章链接配置是
permalink: :year/:month/:day/:title
这种生成的链接地址很长,文章版权的链接地址会出现一大串字符编码,一点也不好看。因此需要修改文章生成链接的格式。
首先再根目录下执行下面的命令:
npm install hexo-abbrlink --save
然后再站点配置文件下添加如下配置:
abbrlink:
alg: crc16 #算法: crc16(default) and crc32
rep: hex #进制: dec(default) and hex: dec #输出进制:十进制和十六进制,默认为10进制。丨dec为十进制,hex为十六进制
再将站点配置文件的permalink
的值修改为:
permalink: posts/:abbrlink.html # 此处可以自己设置,也可以直接使用 :/abbrlink
生成完后,原md文件的Front-matter 内会增加abbrlink
字段,值为生成的ID 。这个字段确保了在我们修改了Front-matter
内的博客标题title或创建日期date字段之后而不会改变链接地址。