创建love.js文件
博客中调用
复制如下代码,copy到love.js文件中,然后保存;代码来源
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
Jekyll驱动的博客调用 将love.js文件移动到如下目录: /js/src/love.js 然后打开_layouts/default.html,找到最后一行,有</body>的前面,添加调用
<!--鼠标点击爱心动画--> <script type="text/javascript" src="/js/src/love.js"></script>
#gitalk评论系统的添加 我在建立oneindex之后,有朋友向我反馈,说缺少一个留言/评论的板块,自己魔改程序的话比较麻烦,也没必要。于是想到了添加静态评论系统,这里我使用了gitalk。 Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。
##特性 使用 GitHub 登录 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru] 支持个人或组织 无干扰模式(设置 distractionFreeMode 为 true 开启) 快捷键提交评论 (cmd|ctrl + enter) ##安装准备 先进入你选择的主题文件夹,位于网站根目录/view/下,classic为默认主题,我选用的是nexmoe主题 编辑layout.php文件,在</head>前添加
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css"> <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script> 在倒数第一个</div>前添加 <div id="gitalk-container"></div> 在倒数第一个</div>后添加 <script type="text/javascript"> var gitalk = new Gitalk({ clientID: 'GitHub Application Client ID', clientSecret: 'GitHub Application Client Secret', repo: 'gitalk', owner: 'owner', admin: ['owner'], id: 'oneindex', distractionFreeMode: true, createIssueManually: true }); gitalk.render('gitalk-container'); </script>
##获取clientID和clientSecret 首先,需要申请一个 Github APP ,填写要求如下:
Application name : myoneindex # 随意填写 Homepage URL : https://pan.fingerit.cn #你的oneindex主页 Application description : # 说明(可以不填) Authorization callback URL : https://pan.fingerit.cn # 你的oneindex主页
最后点击 Registered application 得到clientID和clientSecret 然后新建一个名为gitalk的仓库。
##完成安装 返回准备工作总最后一步添加的js代码,将上面获取的clientID和clientSecret填入其中,owner和admin设置为你的用户名即可。 最后打开你的oneindex首页,等待最下方gitalk评论加载完毕,点击初始化issue,再刷新页面即可。
倒水……插插头没反应,没有听到滴的自检音,算了时间来不及了上班去吧。 第二天下班洗脸热水,用电磁炉快啊!昨天电磁炉罢工难道是插座坏了,还是接触不良?换个插座不行再换还是不行.老爸进来说了:昨天早上电磁炉坏了,还听到啪的一声,家里灯泡💡还闪了一下。难怪呢早说我也不乱找插座了。 啪的一声,嘿😁应该是保险吧,找工具卸开面板,万用表测量保险阻值无限大,就是它了,换保险没有,铜丝替代嘿嘿😁换好上电,啪的一声保险断了,懵逼了……难道是传说的功率管坏了?卸开一个三脚的,一个四角的๑_๑哪个是啊? 手机百度😄哈哈简单看了一下测量教程,如何测量而后上烙铁,吸锡器一阵忙乎,呵呵三条腿的坏了,正好家里有以前一个坏电磁炉,拆下以前的功率管测量好的👌并且型号也一样,“功率管是怎么坏的呢?查教程说是什么电容啊,滤波啊整流不净啊”算了不一一测了,换上再说,弯脚烫锡,又是一阵忙乎. 换好不敢上电啊.听说串接电灯泡方法,那就试试吧,找灯泡💡接到保险的位置,上电吧,小心翼翼的插插头,“滴”电源指示红灯亮了嘿嘿!心里美的,去掉灯泡换上保险试试吧,弯脚烫锡,插插头“滴”红灯亮,开开关滴正常算是鼓捣好了。热点水试试还行。就这吧看看表用了两个小时天哪! 想起前几天搭建的微博,那就写个小日记吧,传到微博上…… 语言组织能力有限,见笑 到此结束