为博客加一些有趣的功能
这个地方留白好久了,从创建到现在大概留的有二十天左右了,实在是因为最近沉迷于一款steam上的单机游戏,不可自拔。现在终于抽出来时间来补充这个地方的空白,实属不易。
主题
主题介绍
hexo可供选择的主题可太多了。用的最多的大概就是next主题了。但是我在hexo的可选主题中,浏览了好久。最终选择了fluid这款主题。不要问,问了就是一见钟情。
这个链接里有挂载到hexo上的所有主题。
fluid主题
但是由于我是使用的fluid主题。所以之后的所有介绍都围绕这个主题为例。并且fluid的相关文档都比较完善,小白使用起来也更方便一些。
下载命令:
git clone https://github.com/fluid-dev/hexo-theme-fluid.git
在你的博客文件夹下的theme文件夹内,新建fluid文件夹,并且在文件夹中使用git bash执行这句话就OK了。其他主题类似。
必要配置
必要配置也没有什么,主要是修改hexo博客目录下的_config.yml文件夹下,将默认的主题,修改为fluid即可。
theme: fluid # 指定主题
language: zh-CN # 指定语言,会影响主题显示的语言,按需修改
帮助文档
在之前已经说了,fluid的配置文档很完善,很详细。 不会吧不会吧,不会有人忘记了吧
评论
评论模块
怎么说呢,文档是很完善的,我也是根据文档来增加的评论。fluid支持的评论模块比较多。
用的最多的就是uttrances和valine两个模块了。
由于我使用的是valine评论模块,只介绍valine的配置。
valine评论模块
评论嘛,肯定是给文章进行评论。
首先在fluid下的_config.yml里,post下的comments改成这样就OK了
comments: # 评论
enable: true # 开启评论
type: valine # 指定使用的评论模块 available: disqus | valine | gitalk | utterances | changyan | livere | remark42
valine的颜值,怎么说呢,个人觉得还是比较好看的,评论支持发送表情,还可以留下姓名、邮箱等。具体使用就可以看本文章下面的评论功能。
valine依赖的是leanCloud的数据库。将所有的评论都存储在数据库中。而将你的博客文章和数据库连起来。则是通过appid和appkey两个来确定的。具体流程就是注册个leanCloud账号,账号里创建一个免费的数据库,然后将数据库生成的id和key填到主题下的 _config.yml即可。
valine前提
使用valine的话,就需要进行绑定域名和网站备案。没有的话,就是用上面的那个评论模块吧。
leancloud操作
注册leancloud账号
不会吧,你都要建博客了,竟然还不会在一个平台注册一个账号?我可是不信的。leancloud官网链接
创建应用
找到创建应用按钮,点进来是这样的页面
选择开发版就足够了,这样是免费的,而且满足需求。
appid和appkey
创建成功后,在应用右上角进入设置。在设置中寻找域名绑定进行绑定。在应用keys中,找到appid和appkey放入fluid的配置文件中即可。
运行时间
基于1.8.3版本
网站运行时间,怎么说呢, 当然是我抄的,我还是改了一点点嘛,可以在fluid的官方文档中找到。
需要修改footer.ejs文件,如果你不太懂的话可以去百度,当然不懂也不影响你去修改。该文件位于themes/fluid/layout/_partial ,你只需要在里面加一个div标签就可以了。里面原本是有两个div标签,你放的顺序影响着显示的顺序。直接将下列代码复制即可。
<div>
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
var now = new Date();
function createtime(){
var grt= new Date("10/01/2020 8:00:00");//此处修改你的建站时间或者网站上线时间
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24;
dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
hnum = Math.floor(hours);
if(String(hnum).length ==1 ){
hnum = "0" + hnum;
}
minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes);
if(String(mnum).length ==1 ){
mnum = "0" + mnum;
}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds);
if(String(snum).length ==1 ){
snum = "0" + snum;
}
document.getElementById("timeDate").innerHTML = "本站已经运行 "+dnum+" 天";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒啦~~";
}
setInterval("createtime()",250);
</script>
</div>
嗯,完啦,就是这么简单
基于1.8.5以后的版本
其实本质上没有太大区别,只是在此版之后fluid开发组将页脚在config.yml中可配置,所以可以通过配置文件进行修改,在官方配置文档中有详细介绍。
增加一言
怎么说呢,我也在这里做了好久的工作,最初的想法是首页打印扇贝的每日一句,但是奈何水平太次,试了n多方法却还是没有成功。
下面是大佬做的一言和一日诗词博客讲解
挺详细的,如果有部分代码看不懂的话也是直接复制就可以的,最要的就是需要自己yml文件中需要手动添加hitokoto这个键值。我最开始以为是直接有的,然后找了半天。
下面是我搜索到的每日一句的资料,如果你想使用的话,希望对你有所帮助。
帅一点
这个其实挺简单的。总的来说就三步
- 创建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": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
3000,
function() {
$i.remove();
});
});
setTimeout('delay()', 2000);
});
function delay() {
$(".buryit").removeAttr("onclick");
}
外部引用的话就是在fluid的config.yml中找到custom_js,然后在里面修改为你的存放路径,我是创建这个文件在js文件夹下,文件名为click.js
如下
# 指定自定义 .js 文件路径,支持列表;路径是相对 source 目录,如 /js/custom.js 对应存放目录 source/js/custom.js
# Specify the path of your custom js file, support list. The path is relative to the source directory, such as `/js/custom.js` corresponding to the directory `source/js/custom.js`
custom_js:
- /js/click.js
- /js/cursor.js
- /js/yinghua.js
该链接是博主click.js的源代码
小星星以及樱花特效
将下载好的js文件放入指定目录,然后像上一小结那样即可。
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!