多Git账户以及Hexo搭建博客进阶

Posted yof3ng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多Git账户以及Hexo搭建博客进阶相关的知识，希望对你有一定的参考价值。



多Git账户以及Hexo搭建博客进阶


1.生成密钥


技术分享图片


可以看到已经生成的id_rsa是0LinkSec git账户的密钥


而yof3ng的则是我准备搭建的第二个hexo的密钥


2.配置ssh config文件(ssh目录下新建config文件)




#userName1
Host 0LinkSec
HostName github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_rsa
?
#userName2
Host yof3ng
HostName github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/yof3ng





　　



?


需要注意的是缩进问题，缩进异常可能会产生报错。


在github上添加完ssh密钥之后即可进行下一步


3.git连接测试


第一个账户[email protected]：


技术分享图片


第二个账户[email protected]：


技术分享图片


两个账户已经建立成功，接下来即可进行第二个hexo的搭建。


4.第二个hexo初始化后配置 config文件


技术分享图片


强调repository项：应该设置为前面设置的第二用户,若为[email protected]则会默认为第一用户，连接0LinkSec。


到此第二hexo搭建成功。


5.souce目录下CNAME文件建立，以及域名CNAME记录建立


对自己的域名，新建yof3ng二级域名CNAME记录，指向 yof3ng.github.io,以及在hexo根目录下的source文件夹建立CNAME文件，将yof3ng.0Link.top填入其中即可。


技术分享图片


 


6.开启强制https服务选项


在github对应的Repositories中进行设置,setting选项


技术分享图片


 


7.添加萌宠精灵


参考链接


切换到博客目录然后输入：




#安装live2d
npm install --save hexo-helper-live2d
#安装萌宠module
npm install live2d-widget-model-koharu 





　　


添加在config文件内：




live2d:
  enable: true
  scriptFrom: local
  model:
    use: live2d-widget-model-koharu
  display:
    position: right
    width: 140
    height: 260
  mobile:
    show: true





　　


技术分享图片


8.添加鼠标点击特效


添加鼠标点击爆炸效果：在主题的js目录下创建fireworks.js并写入如下代码




"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)};
?





　　


在/layout/layout.ejs中写入：


 




{% 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 %}





　　



?
?


然后，在相应主题的config文件加入




fireworks: true





　　


9.设置评论功能Gitment


技术分享图片


owner github用户名，repo存储评论的仓库，clientId和clientSecret需要自己注册github app


https://github.com/settings/applications


切记Authorization callback URL 要填写CNAME解析的域名（未解析则填默认github的域名），否则可能无法使用


技术分享图片


然后凄惨地发现作者服务停止了，参考https://www.jianshu.com/p/f2f4c802914b


10.添加评论服务 discus


无法注册，国内无法访问等问题。。



以上是关于多Git账户以及Hexo搭建博客进阶的主要内容，如果未能解决你的问题，请参考以下文章
 

 Git-Github-Hexo搭建博客


 hexo+github搭建个人博客


 搭建个人博客 github+hexo


 使用 Hexo，Material Theme 以及 Github Pages 搭建个人博客


 3min快速使用Hexo+GitHub搭建免费博客


 使用hexo和github搭建个人博客网站