【个人博客网站】博客美化：twikoo评论系统以及双评论
具体文档地址：https://twikoo.js.org/quick-start.html#vercel-部署 数据库搭建(MongoDB) 创建数据库 打开MongoDB，注册账号 注册完成，登录MongoDB 创建好Organizations(组织)后，点击Projects、New Project创建项目 点击Database、Build a Database创建数据库 选择free、aws、Hong Kong 创建用户，选择My Local Environment，IP Adddress填写0.0.0.0/0 完成创建 Vercel部署 MongoDB控制台Database界面，点击Connect 选择Connect your application，DRIVER选择Node.js，复制字符串 点击以下按钮将 Twikoo 一键部署到 Vercel twikoo部署完成后，进入项目Settings - Environment Variables，添加环境变量MONGODB_URI，值为复制的字符串，替换<password>为数据库用户密码 进入 Deploymen ...
【个人博客网站】博客美化：添加侧边栏电子钟
参考了安知鱼的方案进行修改 原教程给butterfly添加侧边栏电子钟 安装 1npm install hexo-butterfly-clock-mnxiaoyao --save 配置 在hexo配置文件或主题配置文件中添加 123456789101112131415161718electric_clock: enable: true # 开关 priority: 8 #过滤器优先权 enable_page: all # 应用页面 exclude: # - /posts/ # - /about/ layout: # 挂载容器类型 type: class name: sticky_layout index: 0 loading: https://unpkg.com/hexo-butterfly-clock-mnxiaoyao/lib/loading.gif clock_js: https://unpkg.com/hexo-butterfly-clock-mnxiaoyao/lib/clock.min.js ip_api: https://w ...
【个人博客网站】博客美化：随机文章显示
参考了安知鱼的方案进行修改 原教程butterfly 重装日记 闲聊 在【个人博客网站】博客美化：制作右键菜单中，有一个功能一直有问题，那就是随便逛逛 这个功能实现的是随机文章显示，但因为我忽略了某些东西，导致该功能异常 安装 1npm install hexo-generator-sitemap --save 这个插件是生成站点地图，用于随机访问文章 js 创建themes/butterfly/scripts/helpers/random.js文件 1234567891011hexo.extend.generator.register('random', function (locals) { const config = hexo.config.random || {} const posts = [] for (const post of locals.posts.data) { if (post.random !== false) posts.push(post.path) & ...
【个人博客网站】博客美化：评论系统以及通知邮件
本篇以Valine为例 推荐使用LeanCloud国际版 具体文档地址：https://github.com/HCLonely/Valine 使用第三方js 在主题配置文件中，修改以下内容 12345678910CDN: option: ··· # gitalk: # gitalk_css: # blueimp_md5: valine: https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js # disqusjs: # disqusjs_css: # twikoo: 配置修改 在主题配置文件中，修改以下内容 1234567891011121314151617181920# valine# https://valine.js.orgvaline: appId: appKey: avatar: # gravatar style https://valine.js.org/#/avatar serverURLs: # This configura ...
【个人博客网站】博客美化——总篇集
本篇为美化教程的合集 自定义CSS 参考了安知鱼的方案进行修改 原教程butterfly 重装日记 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851 ...
【个人博客网站】博客美化：加入看板娘
具体操作请参考以下文档： https://github.com/EYHN/hexo-helper-live2d/blob/master/README.zh-CN.md 安装插件 输入以下命令安装 1npm install --save hexo-helper-live2d 安装模型 npm安装本地安装输入以下命令安装模型 1npm install --save {packagename} 查看模型 packagname： live2d-widget-model-chitose live2d-widget-model-epsilon2_1 live2d-widget-model-gf live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru) ...
【个人博客网站】博客美化：关于Butterfly的导航栏的一些教程
参考了安知鱼的方案进行修改 原教程butterfly导航栏修改方案(自用方案) 回到顶部按钮使用的方法引用右键菜单中定义的方法，没有定义的请查看相应位置的注释进行修改 自定义CSS 添加自定义cssnav_menu.css 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416 ...
【个人博客网站】博客美化：制作右键菜单
参考了LYX的方案进行修改 原教程butterfly博客自定义右键菜单升级版 2022.09.20 加入F12弹窗提示 2022.09.22 修复百度搜索和转到链接功能点击后页面刷新的问题 PUG部分 新建[blogRoot]\themes\butterfly\layout\includes\dorakika\rightmenu.pug，编写以下内容： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172#rightMenu .rightMenu-group.rightMenu-small a.rightMenu-item(href="javascript:window.history.back();") i.fa.fa-arrow-left a.rightMenu-item(href="javascript:window.hist ...
【个人博客网站】博客美化：制作欢迎弹窗
参考了店长的方案进行修改 原教程SAO-UI-PLAN-Notify 原教程SAO-UI-PLAN-LINK-START 修改正文 引入SweetAlert的jsCDN 修改[Blogroot]\_config.butterfly.yml的inject配置项 1234inject: head: - <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> bottom: 修改加载文件 修改[Blogroot]\themes\butterfly\layout\includes\loading\loading-js.pug 123456789101112131415161718192021222324252627282930313233343536373839.pjax-reload script(async). var preloader = { endLoading: () => { ...
