哔哔更换记录
23-02-03本站已弃用此方法,最新Memos部署方式请查看:基于Memos实现说说和清单功能
前言
在开始之前,先感谢小康大佬栽树,好让我们乘凉。
- 为什么要更换?
因为腾讯云开发要收费了,我想白嫖 - 为什么不换其他的?
因为用习惯了,感觉很好用。 - 为什么…
给爷打住
先部署
部署的话就跟着官方文档走就可以了,基本不会出什么问题。
这里说一下我遇见的一些小问题:
- 弄后台填写环境变量时直接复制粘贴,结果多了一个斜杠,后台会登陆不上,要注意一下
例如让填:https://kkapi-open.vercel.app
然后我填成了:https://kkapi-open.vercel.app/
- 填写变量时,mongoDB的账号密码不需要填写
mongodb的url里面已经有账号和密码了,所以变量只需要填url和那个加密的即可,加密的内容是随便填的。
前端
小康大佬是写了前端方案的,在这查看
但是功能太多,例如有评论功能等。我并不需要这些,而且直接引用的话就多多少少会出一些莫名其妙的Bug,所以我就自己写了js,样式直接照抄。
我的js和css仅适合我自己,不一定适合你,我后期可能会根据我的需求再进行修改等等,所以在这主要是给你提供简单的思路,可以让你根据自己需求写代码。
js和css文件创建和引入问题看这篇文章:Hexo博客添加自定义css和js文件
首页轮播
首页轮播样式是混合抄的,会css和js的自己进行更改就可以,很简单。我是直接复制的我的css,你粘贴之后有的地方可能会不一样,自行修改即可,不会的话也可以留言,我帮你看看
修改源码
为了方便,我们直接修改源码使固定页面引用css和js文件
修改butterfly\layout\index.pug
1 | extends includes/layout.pug |
bbtalk.css
在source/css目录下创建bbtalk.css(没有目录直接新建),然后粘贴如下代码:
1 | /* 首页轮播 */ |
bbtalk.js
在source/js目录下创建bbtalk.js(没有目录直接新建),然后粘贴如下代码:
1 | let jsonUrl = 'https://kkapi-open-xi.vercel.app/api/ispeak?author=62cfe22a3a91f6ac8ea6803f' // 在这修改api |
timeago.min.js
在source/js目录下创建timeago.js,这个直接创建文件粘贴就行,是一个工具文件。
1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).timeago={})}(this,function(e){"use strict";var r=["second","minute","hour","day","week","month","year"];var a=["秒","分钟","小时","天","周","个月","年"];function t(e,t){n[e]=t}function i(e){return n[e]||n.en_US}var n={},f=[60,60,24,7,365/7/12,12];function o(e){return e instanceof Date?e:!isNaN(e)||/^\d+$/.test(e)?new Date(parseInt(e)):(e=(e||"").trim().replace(/\.\d+/,"").replace(/-/,"/").replace(/-/,"/").replace(/(\d)T(\d)/,"$1 $2").replace(/Z/," UTC").replace(/([+-]\d\d):?(\d\d)/," $1$2"),new Date(e))}function d(e,t){for(var n=e<0?1:0,r=e=Math.abs(e),a=0;e>=f[a]&&a<f.length;a++)e/=f[a];return(0===(a*=2)?9:1)<(e=Math.floor(e))&&(a+=1),t(e,a,r)[n].replace("%s",e.toString())}function l(e,t){return((t?o(t):new Date)-o(e))/1e3}var s="timeago-id";function h(e){return parseInt(e.getAttribute(s))}var p={},v=function(e){clearTimeout(e),delete p[e]};function m(e,t,n,r){v(h(e));var a=r.relativeDate,i=r.minInterval,o=l(t,a);e.innerText=d(o,n);var u,c=setTimeout(function(){m(e,t,n,r)},Math.min(1e3*Math.max(function(e){for(var t=1,n=0,r=Math.abs(e);e>=f[n]&&n<f.length;n++)e/=f[n],t*=f[n];return r=(r%=t)?t-r:t,Math.ceil(r)}(o),i||1),2147483647));p[c]=0,u=c,e.setAttribute(s,u)}t("en_US",function(e,t){if(0===t)return["just now","right now"];var n=r[Math.floor(t/2)];return 1<e&&(n+="s"),[e+" "+n+" ago","in "+e+" "+n]}),t("zh_CN",function(e,t){if(0===t)return["刚刚","片刻后"];var n=a[~~(t/2)];return[e+" "+n+"前",e+" "+n+"后"]}),e.cancel=function(e){e?v(h(e)):Object.keys(p).forEach(v)},e.format=function(e,t,n){return d(l(e,n&&n.relativeDate),i(t))},e.register=t,e.render=function(e,t,n){var r=e.length?e:[e];return r.forEach(function(e){m(e,e.getAttribute("datetime"),i(t),n||{})}),r},Object.defineProperty(e,"__esModule",{value:!0})}); |
哔哔页面
新建哔哔页面
使用 hexo n page 'bb'
创建页面,然后引入js和css
1 | --- |
bbtalk.css
在刚才创建的bbtalk.css里,增加如下代码:
1 |
|
bibi.js
在source/js目录下创建bibi.js(没有目录直接新建),然后粘贴如下代码:
没和首页哔哔合并是因为管理方便,想合并的话自己改改就可以,不算很难。
1 | let svg = '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="is-badge"><path d="m512 268c0 17.9-4.3 34.5-12.9 49.7s-20.1 27.1-34.6 35.4c.4 2.7.6 6.9.6 12.6 0 27.1-9.1 50.1-27.1 69.1-18.1 19.1-39.9 28.6-65.4 28.6-11.4 0-22.3-2.1-32.6-6.3-8 16.4-19.5 29.6-34.6 39.7-15 10.2-31.5 15.2-49.4 15.2-18.3 0-34.9-4.9-49.7-14.9-14.9-9.9-26.3-23.2-34.3-40-10.3 4.2-21.1 6.3-32.6 6.3-25.5 0-47.4-9.5-65.7-28.6-18.3-19-27.4-42.1-27.4-69.1 0-3 .4-7.2 1.1-12.6-14.5-8.4-26-20.2-34.6-35.4-8.5-15.2-12.8-31.8-12.8-49.7 0-19 4.8-36.5 14.3-52.3s22.3-27.5 38.3-35.1c-4.2-11.4-6.3-22.9-6.3-34.3 0-27 9.1-50.1 27.4-69.1s40.2-28.6 65.7-28.6c11.4 0 22.3 2.1 32.6 6.3 8-16.4 19.5-29.6 34.6-39.7 15-10.1 31.5-15.2 49.4-15.2s34.4 5.1 49.4 15.1c15 10.1 26.6 23.3 34.6 39.7 10.3-4.2 21.1-6.3 32.6-6.3 25.5 0 47.3 9.5 65.4 28.6s27.1 42.1 27.1 69.1c0 12.6-1.9 24-5.7 34.3 16 7.6 28.8 19.3 38.3 35.1 9.5 15.9 14.3 33.4 14.3 52.4zm-266.9 77.1 105.7-158.3c2.7-4.2 3.5-8.8 2.6-13.7-1-4.9-3.5-8.8-7.7-11.4-4.2-2.7-8.8-3.6-13.7-2.9-5 .8-9 3.2-12 7.4l-93.1 140-42.9-42.8c-3.8-3.8-8.2-5.6-13.1-5.4-5 .2-9.3 2-13.1 5.4-3.4 3.4-5.1 7.7-5.1 12.9 0 5.1 1.7 9.4 5.1 12.9l58.9 58.9 2.9 2.3c3.4 2.3 6.9 3.4 10.3 3.4 6.7-.1 11.8-2.9 15.2-8.7z" fill="#1da1f2"></path></svg>' |
后记
如果你想使用更多的功能,建议使用小康大佬写的前端方案。
如果你和我一样只是想实现简单的纯粹的哔哔功能,那么你可以参考我的再进行修改优化等等。
注意,只是进行参考,不建议直接使用,我写的代码仅仅只是在我网站上面能跑,在你的网站上不一定适用。