Blog魔改记录

xiaoze2025-01-062025-03-17

Butterfly主题美化教程
 安知鱼主题官方文档
 hexo官方文档
 Butterfly主题官方文档

界面

`小空调`界面

[x] anzhiyu theme have done it

`音乐`界面

参考1
参考2

[x] (引入音乐去找单曲页面链接，如https://y.qq.com/n/ryqq/songDetail/001oPDRi2cBvkE 后面的这一串数字)(themes\anzhiyu\source\js\utils.js中修改默认播放列表)

终端输入hexo new page music
source/music/index.md文件中type: "music"
新建 source/_data/music.json，此 json 为切换歌单按钮的歌单数据。
hexo 配置文件_config.yml中添加配置aplayer
主题配置文件中开启menu中music的注释,路径修改为/music/?id=1708664797&server=tencent，支持id和server参数。
(anzhiyu原配置：netease （8152976493）)
(server（音乐平台）: netease, tencent（qq音乐）, kugou, xiami, baidu)
(歌单 id : 对应服务商的歌单页面路径最后面的数字，如我的 （2963512140）)

`闲言碎语`界面：即刻短文（瀑布流）部署方案

即刻短文相比发博客文章需要考虑选题、编写详细的内容，即刻短文可以提供一个快捷的短文字解决方案，避免博客短文章过多造成的整站文章质量下降。

参考1
参考2

终端输入hexo new page essay
source/essay/index.md文件中type: "essay"
新建 source/_data/essay.yml，此 yml 为essay的内容。(其中video对于bilibili进行的额外的支持，视频为player.bilibili.com的将显示为bilibili视频，并且可以在链接后面拼接&autoplay=0控制不自动播放)
主题配置文件中开启menu中essay的注释。

`关于`界面

参考1
参考2

终端输入hexo new page about
source/about/index.md文件中type: "about"
新建 source/_data/about.yml，此 yml 为about的内容。
主题配置文件中开启menu中about的注释。

`鱼塘朋友圈`界面

参考前端

终端输入hexo new page fcircle
source/fcircle/index.md文件中type: "fcircle"
主题配置文件中开启menu中fcircle的注释。
主题配置文件中开启friends_vue.enable，自行设置朋友圈后端地址和顶部模块背景

`友链页`界面

参考样式和后端

[ ] 新样式在anzhiyu主题修改失败？ and 全部友链是不是多余了

终端输入hexo new page link
source/link/index.md文件中type: "link"
新建 source/_data/link.yml，此 yml 为link的内容。
主题配置文件中开启menu中link的注释。
主题配置文件中开启linkPageTop:，与数百名博主无限进步

`我的装备`界面

[x] 参考

终端输入hexo new page equipment
source/equipment/index.md文件中type: "equipment"
新建 source/_data/equipment.yml，此 yml 为equipment的内容。
主题配置文件中开启menu中equipment的注释。

`留言板`界面

终端输入npm install hexo-butterfly-envelope --save
在站点配置文件_config.yml中添加envelope_comment:配置

`追番`界面

[x] github库
bangumi插件使用：
仅bili和bgmv0源支持在追番页面显示追番进度。
hexo bangumi -u命令更新追番数据
hexo cinema -u命令更新追剧数据
hexo bangumi -d/hexo cinema -d命令删除数据
使用bili源时，如果要在追番页面显示追番进度，需使用hexo bangumi -u ‘SESSDATA’, SESSDATA替换为哔哩哔哩cookie中的SESSDATA值。例hexo bangumi -u ‘df***EC’
因为某些番剧在哔哩哔哩上没有，但是又想在hexo中展示，怎么办呢？现在支持手动添加番剧数据了！在 sources/_data/ 目录下新建文件，命名为 extra_bangumis.json(追番数据)或extra_cinemas.json(追剧数据)
wantWatchExtra:想看
watchingExtra:在看
watchedExtra:看过

终端输入npm install hexo-bilibili-bangumi --save
在站点配置文件_config.yml中添加bangumi:配置

`相册`界面

[x] (显示each i in site.data.album问题：把album.yml修改成photo.yml之后，themes\anzhiyu\layout\includes\page\album_detail.pug 和 themes\anzhiyu\layout\includes\page\album.pug 中把两个each i in site.data.album 改成 each i in site.data.photo后成功了)

终端输入hexo new page album
source/album/index.md文件中type: "album"
新建 source/_data/album.yml，此 yml 为album的内容。
主题配置文件中开启menu中album的注释。
hexo new page dailyPhoto and hexo new page wordScenery
source/dailyPhoto(wordScenery)/index.md文件中type: "album_detail"
远程拉取详见butterfly文档

安知鱼主题官方文档

基础配置

[x] 语言
[x] 网站资料
[x] 导航配置menu:
[x] 导航栏设置nav:
[x] 代码块配置
[x] 图标配置icons:(内置)
[x] 社交图标social:
[x] 个人卡片author_status:
[x] 顶部图index_img
[x] 文章置顶(sticky: 1)
[x] 文章封面cover:(需要搞图片)
[x] 文章 meta 显示post_meta:
[x] 文章版权post_copyright:
[x] 文章打赏reward:
[x] TOCtoc:
[x] 相关文章related_post:
[x] 文章过期提醒noticeOutdate:
[ ] 文章编辑按钮post_edit:(不搞)
[x] 文章分页按钮post_pagination:
[x] 中控台centerConsole:
[ ] footer更多设置footerBar: list: socialBar:
[x] 404页面配置error_404:

额外配置

[x] Footer 设置footer:
[x] 侧边栏设置aside:
[ ] 访问人数busuanzi(不搞)
[x] 运行时间runtimeshow:
[x] 最新评论newest_comments:
[x] 右下角按钮translate: readmode: true darkmode:
[x] 按钮排序rightside_item_order:(不搞)
[x] 短标签 Tag Plugins
[x] 评论弹幕comment_barrage_config:（评论弹幕仅支持Twikoo）
[x] 分析统计baidu_analytics:
[ ] 广告google_adsense:(不搞)
[x] 页面加载动画preloader:
[x] 图片大图查看模式fancybox: true
[x] Pjaxpjax:
[x] Snackbar 弹窗snackbar:(只要选中内容直接出复制弹窗？好吧，好像其他blog也是这样)
[x] Pangupangu:
[x] PWA（用了之前的gulp实现了）
[x] Open GraphOpen_Graph_meta:
[x] CSS 前缀css_prefix: true
[x] Inject CDNinject: CDN:

进阶配置

[ ] 评论comments:（需要域名，不然vercal被墙）（目前使用valine评论系统）(部署到github上评论区显示模式不同)
[x] 在线聊天chat_btn: true(使用了chatra评论系统，参考)
[ ] ai 摘要post_head_ai_description:(需要购买)(使用TianliGPT自动生成文章的AI摘要:https://blog.zhheo.com/p/ec57d8b2.html and https://www.qcqx.cn/article/17d3383a.html) (使用local伪ai哈哈哈，在post信息配置ai：)
[x] 控制台信息console: footer:
[ ] 如何配置首页顶部右侧不使用轮播图home_top.swiper (部署后间距没了，后面换回banner)
[x] 标签卖萌diytitle:
[x] 配置关于页与文章页底部打赏二维码reward:
[x] 主题如何获取文章主色调mainTone:
[x] 双栏article_double_row: true
[x] 首页顶部 3 大分类配置（可以改home_top:）
[x] 左下角音乐球（aplayer音乐胶囊） nav_music:
[x] 评论匿名邮箱visitorMail:
[ ] 文章底部工具ptool:(运营模式与责任配置，以及想要实现之前butterfly下的打赏功能，得改代码)
[x] 首页技能点配置[blog]/source/_data/creativity.yml home_top
[x] 配置 nav 顶栏左侧应用列表nav:
[x] 字数统计wordcount:
[ ] 网站验证site_verification:(需要各自验证码)
[ ] 搜索系统local_search:(以后换成algolia,官网)
[ ] 数学公式(不足是markdown- [ ]符号渲染错误，anchor显示下划线，删除了原本的markdown渲染插件，改用了markdown-it-plus插件还有配置参考)
[x] 分享sharejs:
[x] 欢迎语配置greetingBox:
[x] 博客快捷键无障碍优化(部分无法生效，还是跳转问题)shortcutKey: accesskey:
[x] 友情链接顶部相关配置linkPageTop:
[x] 缩略图后缀pageThumbnailSuffix: "!page_thumbnail"
[x] 隐私协议弹窗agreementPopup:
[x] 定制化的右键菜单rightClickMenu:
[x] 动效控制dynamicEffect:(包括文章顶部波浪效果)
[x] 51A统计LA: 参考
[x] 页面卡片顶部气泡升起效果bubble:
[x] 深色模式粒子效果canvasuniverse:

butterfly重装日记

[x] live2d
[x] 配置文章链接转数字或字母
[x] sitemap Rss
[ ] 百度主动推送(插件会报错)
[x] 配置pwa 内容在manifest.json
[x] 添加外挂标签
[x] 添加wowjs特效
[ ] 电子钟(中间下方显示undefined？)
[ ] 给butterfly添加github贡献图(Gitcalendar)
[x] 引入阿里图标
[ ] 时间轴生肖(实现不了？)
[ ] 打赏按钮投币彩蛋效果(anzhiyu theme 需要改代码)
[ ] 菜单栏多色图标配置教程（暂时不用）
[x] random.js随机跳转一篇文章
[x] bilibili 视频适配
[ ] 文章页局部html代码不渲染(标签写法raw)
[ ] 文章页H1-H6图标风车样式效果(显示不出来)
[ ] 侧边栏个人卡片渐变色（暂时不用）

Fomalhaut魔改系列

博客魔改教程总结(一)

[ ] 黑夜霓虹灯2.0(一旦引入css就会卡掉subtitle的循环打字效果,最终通过引入cdntyped: https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js以及更改source源改回来了，所以这个功能不要实现了，css会卡掉)
[ ] GitCalendar(店长)(详)
[ ] 侧边栏个人卡片渐变色（暂时不用）

博客魔改教程总结(二)

[x] 鼠标魔改
[ ] 页面样式调节(各个页面透明度、模糊度（亚克力效果）、圆角、边框样式等,暂时不需要)
[ ] 侧边栏图标和文字自定义(暂时不搞)
[ ] 渐变色版权美化（店长+微调）(暂时不搞)
[ ] 挂绳小猫咪(tzy大佬)(点击click不生效，就是点击没法回到顶部，应该是.js的问题)

博客魔改教程总结(三)

[x] 右边按钮阅读进度（Leonus） (anzhiyu theme 在顶部有)
[ ] 评论表情包放大（Leonus）
[ ] 评论输入提醒（Leonus）
[x] 快速添加友链(anzhiyu theme 有申请友链，这个要创建js实现)
[ ] Vue+Element样式弹窗按键防抖
[ ] 分享链接按钮
[ ] 禁用f12（tzy大佬）(暂时不搞)
[ ] 节日弹窗与公祭日变灰(这个可以有，目前anzhiyu theme有主页变灰，这个之后再搞)
[x] 文章加密插件
[x] pdf插件

博客魔改教程总结(四)

[ ] 夜间模式切换动画2.0(暂时不搞)
[x] 欢迎信息显示地理位置
[ ] 樱花、落叶特效(用着会很卡，暂时不搞)
[ ] 自定义右键菜单（详）
[ ] Pjax适配
[x] 本站同款页脚(tzy大佬+微调) (这里实现了页脚runtime旅行者号的相关内容，采取的是新建runtime.js并引入，原theme有runtime配置，这里被覆盖了)
[ ] 侧边栏友链通讯录（店长）(暂时不搞)
[ ] 信息卡片鼠标悬浮彩带效果(暂时不搞)
[x] 信息卡片背景图(meihua.css)
[ ] 头像呼吸灯+会动的小车车(暂时不搞)
[x] 控制台样式自定义（安知鱼）
[x] 项目启动自定义字符画
[x] 添加fps显示(LYX)