hexo-butterfly-footer-marcus给博客添加仿Heo页脚适用于hexo-theme-butterfly本地版请见(页脚美化)[https://blog.shineyu.cn/beautify-footer.html] 参考HeoLeonus 安装安装插件,在博客根目录[Blogroot]下打开终端，运行以下指令： 1npm install hexo-butterfly-footer-marcus --save 如果需要随机友联的话,再运行以下指令： 1npm i yamljs --save

给博客添加首页轮播图该项目为店长轮播图三次魔改修改了随机逛逛适用于hexo-theme-butterfly blue, 点击查看参考教程Heo安知鱼hexo-butterfly-swiper-anzhiyu-pro blue, 点击查看实际效果 安装在博客根目录[Blogroot]打开终端输入 1npm install hexo-butterfly-swiper-marcus --save 添加配置信息以下为写法示例 在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加 1234567891011121314151617181920212223242526272829303132333435swiper: enable: true # 开关 randomenable: true # 创造力开关 priority: 5 #过滤器优先权 enable_page: / # 应用页面 timemode: date #date/updated layout: # 挂载容器类型 type: id name: home_top index: 1 category: - name: 前端 path: /categories/前端/ shadow: var(--marcus-shadow-blue) class: blue icon: fas fa-dove - name: 中学 path: /categories/中学/ shadow: var(--marcus-shadow-red) class: red icon: fas fa-burn - name: 生活 path: /categories/生活/ shadow: var(--marcus-shadow-green) class: green icon: fas fa-book above_title: 人间值得 below_title: 未来可期 subtitle: BLOG.MARCUS233.TOP default_descr: 再怎么看我也不知道怎么描述它的啦！ swiper_css: https://cdn1.tianli0.top/npm/hexo-butterfly-swiper-marcus/lib/swiper.min.css #swiper css依赖 swiper_js: https://cdn1.tianli0.top/npm/hexo-butterfly-swiper-marcus/lib/swiper.min.js #swiper js依赖 #swiper js依赖 custom_css: https://cdn1.tianli0.top/npm/hexo-butterfly-swiper-marcus/lib/swiperstyle.min.css # 适配主题样式补丁 custom_js: https://cdn1.tianli0.top/npm/hexo-butterfly-swiper-marcus/lib/swiper_init.min.js # swiper初始化方法 categorygroup_css: https://cdn1.tianli0.top/npm/hexo-butterfly-swiper-marcus/lib/categoryGroup.min.css 参数释义

本教程已推出插件版,但该版本仍适用 blue, 点击查看参考教程Heo安知鱼hexo-butterfly-swiper-anzhiyu-pro blue, 点击查看实际效果 目前暂不是最终效果,急需的同学可以用一下,可在下方留言,更新后提醒你 添加 hometop新建 themes\butterfly\layout\includes\top\top.pug 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162#home_top .swiper_container_card(style='height: auto;width: 100%') #bannerGroup #random #random-banner .banners-title .banners-title-big 人间值得 .banners-title-big 未来可期 .banners-title-small BLOG.MARCUS233.TOP #skills-style-group-all .tags-group-wrapper each i in site.data.creativity - const evenNum = i.creativity_list.filter((x, index) => index % 2 === 0); - const oddNum = i.creativity_list.filter((x, index) => index % 2 === 1); each item, index in i.creativity_list if ((index+1 <= evenNum.length) && (index+1 <= oddNum.length)) .tags-group-icon-pair .tags-group-icon(style=`background: ${evenNum[index].color}`) img.no-lightbox(title=evenNum[index].name, src=evenNum[index].icon) .tags-group-icon(style=`background: ${oddNum[index].color}`) img.no-lightbox(title=oddNum[index].name, src=oddNum[index].icon) a#random-hover(style='width:100%;height:auto;', href='javascript:toRandomPost()', rel='external nofollow noreferrer', one-link-mark='yes') i.fa.fa-paper-plane(style='margin-left:10px') div(style='margin-left:10px') 随便逛逛 i.fa-solid.fa-arrow-right(style='margin-left:10px') .categoryGroup each i in site.data.hometop each item, index in i.category .categoryItem(style=`box-shadow:${item.shadow}`) a.categoryButton(onclick=`pjax.loadUrl("${item.path}");` href='javascript:void(0);' class=`${item.class}`) span.categoryButtonText=item.name i(class=`${item.icon}`) #swiper_container_blog #swiper_container.blog-slider.swiper-container-fade.swiper-container-horizontal .blog-slider__wrp.swiper-wrapper(style='transition-duration: 0ms;') //- 文章卡片 each i in site.data.hometop each item, index in i.post_list .blog-slider__item.swiper-slide(style='width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;') a.blog-slider__img(onclick=`pjax.loadUrl("` + item.link + `");` href='javascript:void(0);' title=item.title) img(width='48' height='48' src=item.cover alt='图片' onerror=`this.src=` + error_img + `; this.onerror = null;`) .blog-slider__content span.blog-slider__code= item.date a.blog-slider__title(onclick=`pjax.loadUrl("` + item.link+ `");` href='javascript:void(0);' alt='')= item.title .blog-slider__text= item.description ? item.description : default_descr a.blog-slider__button(onclick=`pjax.loadUrl("` + item.link + `");` href='javascript:void(0);' alt='') 详情 //- 轮播图组件 .blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets .topGroup each i in site.data.hometop each item, index in i.post_list if index < 4 .top-group-list-item .post_cover.left_radius a(onclick=`pjax.loadUrl("` + item.link + `");` href='javascript:void(0);' alt='', title=item.title, data-pjax-state=true) span.top-group-text 荐 img.post_bg(alt=item.title, src=item.cover, onerror=`this.src=` + error_img + `; this.onerror = null;`) .top-group-info a.article-title(onclick=`pjax.loadUrl("` + item.link + `");` href='javascript:void(0);' alt='', title=item.title, data-pjax-state)=item.title .top-group-list-none .top-group-list-none .top-group-list-none 添加创造力数据创造力数据通过静态数据读出来, 新建source/_data/creativity.yml(用了安知鱼的butterfly魔改关于页面可不用) 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950- class_name: 开启创造力 creativity_list: - name: Vue color: "#b8f0ae" icon: https://img02.anheyu.com/adminuploads/1/2022/09/25/633001374747b.png - name: React color: "#222" icon: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K - name: Docker color: "#57b6e6" icon: https://img02.anheyu.com/adminuploads/1/2022/09/25/63300647df7fa.png - name: Photoshop color: "#4082c3" icon: https://img02.anheyu.com/adminuploads/1/2022/09/25/63300647e1f10.png - name: Node color: "#333" icon: https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/svg/node-logo.svg - name: Webpack color: "#2e3a41" icon: https://img02.anheyu.com/adminuploads/1/2022/09/26/6330ff27e5c9b.png - name: Pinia color: "#fff" icon: https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/pinia-logo.svg - name: Python color: "#fff" icon: https://img02.anheyu.com/adminuploads/1/2022/09/25/63300647dea51.png - name: Vite color: "#937df7" icon: https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/vite-logo.svg - name: Flutter color: "#4499e4" icon: https://img02.anheyu.com/adminuploads/1/2022/09/25/633004063ff15.png - name: Java color: "#fff" icon: https://img02.anheyu.com/adminuploads/1/2022/09/25/633005bf0fd1e.jpg - name: CSS3 color: "#2c51db" icon: https://img02.anheyu.com/adminuploads/1/2022/09/25/633006cc55e07.png - name: JS color: "#f7cb4f" icon: https://img02.anheyu.com/adminuploads/1/2022/09/25/633006eee047b.png - name: HTML color: "#e9572b" icon: https://img02.anheyu.com/adminuploads/1/2022/09/25/633006f9ab27d.png - name: Git color: "#df5b40" icon: https://img02.anheyu.com/adminuploads/1/2022/09/25/633006e37c7fd.webp - name: Apifox color: "#e65164" icon: https://img02.anheyu.com/adminuploads/1/2022/09/25/633007087a4dc.webp

blue, 点击查看更新记录更新valine更新twikoo魔改更新twikoo创建文章 blue, 点击查看参考教程参考方向教程原贴魔改方向twikootwikoo官方文档Twikoo魔改样式分享-博客评论系统的定制皮肤 张洪Heo (blog.zhheo.com)valinevaline官方文档walinewaline官方文档 评论区别 评论 数据库 媒介 适用人群 twikoo MongoDB vercel(需要自己的域名) 有域名,第一次用MongoDB valine LeanCloud(建议用国际版(.app域名)) 无 无域名 waline LeanCloud(建议用国际版(.app域名)) vercel(需要自己的域名) 有域名不是,第一次用MongoDB 评论 介绍 有无后端 Markdown 语法支持 Emoji 图片支持 twikoo 一个简洁、安全、免费的静态网站评论系统 有 有 有 有 valine 一款快速、简洁且高效的无后端评论系统 无 有 有 无 waline 一款从 Valine 衍生的带后端评论系统 有 有 有 有 blue, 点击查twikoo特点一. 简单 1. 免费搭建（使用云开发 / Vercel / 私有服务器作为评论后台） 2. 简单部署（支持云开发 / Vercel 一键部署） 二. 易用 1. 支持回复、点赞 2. 无需额外适配，支持搭配浅色主题与深色主题使用 3. 支持 API 调用，批量获取文章评论数、最新评论 4. 访客在昵称栏输入 QQ 号，会自动补全 QQ 昵称和 QQ 邮箱 5. 访客填写数字 QQ 邮箱，会使用 QQ 头像作为评论头像 6. 支持评论框粘贴图片（可禁用） 7. 支持插入图片（可禁用） 8. 支持去不图床、云开发图床 9. 支持插入表情（可禁用） 10. 支持 Ctrl + Enter 快捷回复 11. 评论框内容实时保存草稿，刷新不会丢失 12. 支持 Katex 公式 13. 支持按语言的代码高亮 三. 安全 1. 隐私信息安全（通过云函数控制敏感字段（邮箱、IP、环境配置等）不会泄露） 2. 支持 Akismet 垃圾评论检测（需自行注册 akismet.com） 3. 支持腾讯云内容安全垃圾评论检测（需自行注册 腾讯云内容安全） 4. 支持人工审核模式 5. 防 XSS 注入 6. 支持限制每个 IP 每 10 分钟最多发表多少条评论 四. 即时 1. 支持邮件提醒（访客和博主） 2. 支持微信提醒（仅针对博主，基于 Server酱，需自行注册） 3. 支持 QQ 提醒（仅针对博主，基于 Qmsg酱，需自行注册） 4. 支持 QQ 提醒（针对博主QQ或者群，基于 go-cqhttp，需自己有服务器） 五. 个性 1. 支持自定义评论框背景图片 2. 支持自定义“博主”标识文字 3. 支持自定义通知邮件模板 4. 支持自定义评论框提示信息（placeholder） 5. 支持自定义表情列表（兼容 OwO 的数据格式） 6. 支持自定义【昵称】【邮箱】【网址】必填 / 选填 7. 支持自定义代码高亮主题 六. 便捷管理 1. 内嵌式管理面板，通过密码登录，可方便地查看评论、隐藏评论、删除评论、修改配置 2. 支持隐藏管理入口，通过输入暗号显示 3. 支持从 Valine、Artalk、Disqus 导入评论 七. 缺点 1. 不支持 IE blue, 点击查valine特点快速安全Emoji 😉无后端实现MarkDown 全语法支持轻量易用文章阅读量统计 v1.2.0+ blue, 点击查valine特点邮件通知微信通知QQ 通知Telegram 通知Akismet文章统计多语言同步自定义语言支持登录支持评论管理评论删除其它数据库支持 (已支持 LeanCloud, MySQL, MongoDB, SQLite, PostgreSQL, CloudBase, Deta, 轻服务, GitHub)基于 IP 的发布评论频率限制基于关键词的评论过滤限制IP 黑名单重复内容检测CloudBase 腾讯云开发部署支持社交登录置顶评论评论赞踩 Twikooblue, 点击查twikoo教程数据库设置1.申请 MongoDB 账号 blue, 点击查看图片教程填入信息小调查填写选择FREE2.创建免费 MongoDB 数据库，区域选择 AWS / N. Virginia (us-east-1) 3.设置username和password并记牢 4.IP Address填入0.0.0.0然后add,最后完成关闭,返回控制台 5.在 Clusters 页面点击 CONNECT,选择Connect your application 6.DRIVER选择Node.js,VERSION选择4.1 or later 7.记住mongodb+srv://<user>:<password>这段文字,并将<user>和<password>换成自己的vercel配置1.申请 Vercel 账号2.一键部署进vercel 3.有什么用什么 4.选择账号和设置仓库名称 5.等待部署完成 6.前往控制台 7.点击Setting-environment-variables新建一个name为MONGODB_URI,值为上面第七步的数据库连接字符串 8.重新部署一下 11.等待部署ing12.13.完成14.绑定域名TypeNameValueCNAMEtwikoocname.vercel-dns.com2021年5月初，Vercel因为一些原因被GFW屏蔽，导致无法访问。各位可以通过更改相应的域名解析记录来恢复访问。A记录就从76.76.21.21 改成 52.76.85.65，CNAME记录则是从cname-vercel-dns.com.改成 cname-china.vercel-dns.com.；关于A记录，可用的IP值也可以从这个里面找：Vercel可用解析记录IP,因为是gist，大概要翻墙才能看。15.访问! 我的twikoo主题文件配置打开themes\butterfly\_config.yml填入1234567# Twikoo# https://github.com/imaegoo/twikootwikoo: envId: # https://twikoo.marcus233.top/ region: ap-shanghai visitor: true option:hexo三联魔改来自[Twikoo魔改样式分享-博客评论系统的定制皮肤| 张洪Heo (zhheo.com)](https://blog.zhheo.com/p/8b1dde4c.html)魔改内容先输入评论再输入个人信息信息整合，让结构更有条理将工具放入输入框，更符合直觉删除了我个人不需要的按钮装配1https://cdn.jsdelivr.net/gh/zhheo/twikoo@dev/dist/twikoo.all.min.js或者1https://cdn1.tianli0.top/gh/zhheo/twikoo@dev/dist/twikoo.all.min.js由免费JSD镜像使用手册 – Tianli’s blog (tianli-blog.club)提供查看样式查看样式