Hexo 个性化配置(三)
本片博客是在上一篇博客Hexo个性化配置(二)的基础上在写的一篇博客,主要不在一起写的原因是,这是自己配置自己搭建的博客时候变学习边记录的文章,记录的比较详细.放置在一篇上面文章比较长,所以截取一次十中个性化的配置.这是第三篇.涉及到如下的个性化配置:
1. jiathis的配置实现博文的分享
2. 文章的置顶功能
3. 打赏功能的实现
4. 点击爆炸效果(有一篇是实现的是红心的效果)
5. github来实现域名的绑定
6. 插入音乐
7. 实现站内搜索
8. 关于404公益页面的实现
9. DaoVoice在线联系
10. 为博客添加萌萌的宠物
11. 修改评论系统之来比力修改为有言
12. 顺便了解Docker
13. Hexo NexT主题中添加网页标题崩溃欺骗搞怪特效
1.jiathis的分享的实现
在主题配置文件下面搜索 jiathis 我们看到在主题的配置文件中已经给我们配置好了,我们需要的是uid;
官网的链接地址: http://www.jiathis.com/
配置主要的设置:
说明一下子: 我们直接在主题的配置文件中搜索jiathis 直接打开jiathis的开关,配置为true uid丢不需要设置.
最后的结果展示:
2.文章的置顶功能的实现
修改插件的内容: 这个插件名称: hexo-generator-index
插件内需要修改文件的名称: generator.js
路劲: /root/blog/node_modules/hexo-generator-index/lib
图片展示:
修改替换的代码:
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 两篇文章top都有定义
if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
}
else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};
我们还需要在咋子hexo的Front-matter也就是我们创建的Hexo的使用 —分割开的部分区域里面设置top属性值 注意属性设置的时候的空格.数值越大越靠前.
我们在我们的模板中添加top属性,不在我们自己添加了.
路劲: /root/blog/scaffolds
修改的文件就是 post.md文件.
添加top属性.
最后设置完毕的展示效果:
3.打赏功能的实现
打赏功能一个是微信的我二维码一个支付宝的二维码,我们分别来获取这个两个二维码.
获取微信的打赏二维码,设置金额
这个自己设置: 先贴个码.
设置支付宝的打赏二维码和金额
上传图片source/image中
在主题配置文件中设置
去掉注释,设置图片就OK了!
最后是结果的展示:
4.实现爆炸效果
新建js 命名: fireworks.js 放置的路劲: themes/next/source/js/src
代码的内容如下:
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
之后在themes/next/layout/_layout.swig 添加下面代码:
{% if theme.fireworks %}
<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/src/fireworks.js"></script>
{% endif %}
添加的位置: 在前面添加 最后没有实现还是小桃心效果(只是在hexo配置三哪一篇文章的上部实现了这个效果).
最后在主题配置文件中配置:
fireworks: true
展示一下:
5.github pages+Hexo搭建
具体的总结
这个在搭配的时候稍微出现了点问题主要是DNS解析这一块, 上一个搭建完成的 http://kunkun5love.club
至于获取github page 在下面有博文有具体的说明. 主要总结的是 申请域名后将申请的域名通过dns跳转到我们的github page 页面上.
例如: 我的域名是 kunkun5love.club 我获取的github page 的 NYK1024212458.github.io; 实质实现就是浏览器输入 kunkunlove.club 后跳转到 NYK1024212458.github.io,我们将hexo生成的 根目录下面的public目录下的文件上传到我们的仓库中,静态的网址.
第一步将hexo的public 目录上传到NYK1024212458.github.io仓库
创建NYK1024212458.github.io仓库(详细在下面)
安装 git(安装Hexo框架的时候初始化了,没有的自己安装),配置秘钥等下面的文章中有详细的步骤
上传public文件到 github 的仓库 操作图片如下:
使用的hexo的命令是 hexo d
hexo g 是生成静态的文件
上传上去,此时要是我们访问 NYK1024212458.github.io 已经可以访问,这个访问的域名比较难记,我们使用跳转.
注意 在仓库创建文件 CNAME 内容 : kunkun5love.club
也可以在hexo的 source 目录下创建CNAME 文件 内容就是 kunkun5love.club 每一次hexo d 部署到github上的时候会覆盖仓库创建的文件.
kunkun5love.club的跳转
首先是我们获取我们要跳转的域名的IP地址: 比如我们要跳转 NYK1024212458.github.io,我们ping一下子
操作如下: 打开win+r 输入: cmd 回车 输入 ping NYK1024212458.github.io 回车 (注意NYK1024212458替换这是我的)
接下来就是 域名的dns配置
添加的第一个记录就是 A标记 记录值就是 我们的ip地址 之后添加一个 CNAME 标记 记录值就是 NYK1024212458.github.io
如果出现问题在下面展示的标志位置不会显示连接:
git的安装和email和name的配置
这个操作有自己的详细的博客地址:
http://blog.csdn.net/kunkun5love/article/details/71915498
注册github来创建 repositories
注册github,根据提醒注册一个github,操作失败的请移步下面的连接地址:https://baijiahao.baidu.com/s?id=1573372372409235&wfr=spider&for=pc,
进入自己的页面;图片展示如下
进入创建的页面,展示如下:
点击new repositories 创建来获取github page
说明一下子: 新建的名字必须和你github上面的名称一致,将上面NYK1024212458修改为你的github账户就行,结尾.github.io结尾,我已经创建过一次,这一次只是为了展示说明,注意要初始化一个Readme的文件,也就是最后一个要勾选.
创建完毕就是获取我们创建仓库的github page ,进入我们刚刚创建的仓库,点击setting
获取githubpage:
首先是自己的创建的gitpage https://nyk1024212458.github.io/
访问的结果如此:
获取ssh,后面在hexo的主题配置中会使用到
ssh: [email protected]:NYK1024212458/NYK1024212458.github.io.git
将我们申请的其他域名与github申请的空间绑定
首先是在github上面的 刚获取的githubpage里面新建一个文件名称是 CNAME 没有后缀,内容就是我们在阿里云或者是其他地方申请的域名,至于域名现在都要实名制,要备案,这些有官方的说明,按着操作就可以了.
例如我的域名在腾讯云上申请的 kunkun5love.tk ,我们CNAME 里面的内容就是 kunkun5love.club
这个CNAME需要上传到我们的初始化的Hexo的博客文件中去,位置就是 初始化的文件夹(执行 hexo init 文件夹的名称) /source 下面
展示如下:
设置自己域名的DNS设置
推荐的是DNSpod:
连接地址: https://www.dnspod.cn/
首先是添加你申请的域名,之后是添加解析:
Hexo中的配置
安装的扩展插件:
npm install hexo-deployer-git --save
展示图片:
在站点配置文件的设置:
6.插入音乐
进入网页版的歌曲页面获取外部播放连接
我们首先是登录网易云:
点击自己要插入音乐的首页: 目的是获取播放的外链 展示如下:
直接复制歌曲的播放代码到博客中
复制代码,直接到博客中: 我复制的代码如下
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=34383004&auto=1&height=66"></iframe>
下面的是flash代码:
<embed src="//music.163.com/style/swf/widget.swf?sid=34383004&type=2&auto=1&width=320&height=66" width="340" height="86" allowNetworking="all"></embed>
我们上传到hexo试试:
说明一下子,win10自带的浏览器是两种都支持的,火狐flash插件的问题,不能播放.
抽时间写一篇关于火狐flash的处理.
7.增加一个站内搜索
站内的搜索功能是一直在处于可以出现搜索,但是输入搜索的内容没有反应,今天重新开始写搜索的功能.
参考的博客的地址:
http://theme-next.iissnan.com/third-party-services.html#algolia-search
使用的还是 algolia 注册和新建获取全部相同.
申请第三方的账号
使用的邮箱是自己的qq邮箱 aaa@qq.com
获取秘钥:
我们需要的只是仅仅用来搜索的页面 ip: ,,,,,,(不展示了)
新建搜索的index文件
输入新建的index的名称,后面会在主题的配置文件中配置.
设置权限
点击API KEY页面,点击 ALL API KEYS 设置权限
点击编辑之后的权限设置:
图片展示如下:
按照上面的设置就行可!
上传数据到algolia
执行命令:
npm install hexo-algolia --save
安装展示图片:
站点配置
站点配置的数据就是我们在algolia注册在 apikey的数据
展示如下:
站点配置文件的配置:
执行命令 hexo algolia
hexo algolia
刚开始的直接执行下面的这个命令报下面的错误:
错误展示如下:
解决的办法:
linux系统使用export windowns系统使用gitbash
配置主题文件
最后成功的展示图片:
8.关于404公益页面的实现
我们在前面实现了域名跳转到github page页面 我们实现的是腾讯的404页面
连接地址: http://www.qq.com/404/
主要的操作就是复制里面的js代码到我们的404页面中.
在hexo的source 里面新建404.html 编写html文件:
代码复制:
< !DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>404页面</title>
</head>
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8"></script>
</body>
</html>
我们上传后,配置我们主页的404显示界面,直接指定到404.html文件,配置如下:
最后博客的展示页面:
最后来一个参考博客: http://www.foreverpx.cn/2014/09/23/hexo404/
9.DaoVoice实现在线联系
绝佳的用户沟通工具
注册登录填写邀请码
注册登录地址如下:
官网进行注册,需要邀请码: 0f81ff2f 复制粘贴就可以了~!
展示的图片如下:
复制粘贴代码
修改的hexo的文件路劲如下: themes/next/layout/_partials/head.swig 添加下面的代码:
{% if theme.daovoice %}
<script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0eeeae6f.js","daovoice")
daovoice('init', {
app_id: "你获取的appid"
});
daovoice('update');
</script>
{% endif %}
展示如下:
修改主题的配置文件 ##
在主题的配置文件中添加:
daovoice: true
daovoice_app_id: 我们注册获取的id
结果没有显示出来
展示如下:
其他的没有什么改变,要是你也是和我一样出现这样的情况,第一我是检查我的主题配置文件: 将daovoice不要出现书写错误
第二点就是,我将上面的代码,直接放在最前面,最后hexo clean 重新部署就OK了!
聊天对话款和欢迎词的设置
登录到Dao voice 的官网在应用设置中设置:
展示如下:
10.为博客添加萌萌的宠物 #\
添加的是宠物信息.
第一步切换终端输入下面命令 安装live2d
npm install -save hexo-helper-live2d
安装展示的图片如下:
修改_layout.swig文件
修改文件的路劲如下: themes/next/layout/-layout.swig文件
路劲展示如下:
修改的代码如下:
{{ live2d() }}
主题配置文件中进行配置
注释掉是在底部挡住了在线聊天的那个图标.
最后是图片的展示页面:
11.修改评论系统之来比力修改为有言
来比力的配置在上面的Hexo的个性化配置中有说明,现在是修改为有言的操作记录(Hexp的配置文件中都集成了,需要配置uid).
官网地址:
展示图片:
在主题配置文件中配置:
youyan_uid : 自己设置的uid
这样设置来比力是没有问题的,有言设置之后没有显示出来.
12.DaoCloud的了解
首先就是在官网注册:
DaoVoice的官网的连接地址如下: https://account.daocloud.io/signin
展示图片如下:
我直接使用的是github的账户来登录的:
Talk is cheap,show me the code: 空谈误国,实干兴邦
Eat your own dogfood : 做好自己
DaoKer Day: 日复一日
顺便学习了Docker
http://guide.daocloud.io/dcs/docker-daocloud-9153164.html
上面的连接说的很是直接明白,这里自己摘取一些作为自己 的笔记.
- Docker image 和Dockerfile
Docker image 相当于就是我们安转系统时候说的镜像(image),系统的Ghost是对系统一些设置和安装软件后的设置进行clone的备份,在Docker中 是对Docker image 的修改写在了 Dockerfile中然后 构建为一个新的Docker image ,这些对软件或者系统等的修改或者是安转软件的操作此时还是没有运行生效的,只不过在 构建完成的Docker image在 容器中运行的时候才会生效 ,而Docker node就是提过容器的. Docker image就是镜像 Dockerfile里面记录的就是对镜像的操作, Docker node提供的就是容器. 源Docker Image 在Dockerfiler里面的命令 构建一个新的Docker image 就是一个构建的过程. 让Docker image 运行 在container中, 将 Docker image 调入容器运行的动作叫做 是 部署 .
Docker 软件就是 下载 安装 配置的 Dockere server 是一个虚拟化的软件.Docker node
Docker node 就是安装了Docker软件的硬件机器,从而成为Docker虚拟机母平台.
13.Hexo NexT主题中添加网页标题崩溃欺骗搞怪特效
是一个js特效:
创建js
在next\source\js\src文件夹下创建crash_cheat.js，添加代码：
<!--崩溃欺骗-->
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/img/TEP.ico");
document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitile;
titleTime = setTimeout(function () {
document.title = OriginTitile;
}, 2000);
}
});
在_layout.swig中的使用
<!--崩溃欺骗-->
<script type="text/javascript" src="/js/src/crash_cheat.js"></script>
最后实现:
展示效果:
kunkun5love.club