分类:博客开发(60 篇)

周末想升级Nuxt到4.4.2版本,结果困难重重。
首先是 Nuxt 所依赖的 Nitro ,在 2.13.1 升级到 2.13.2 的时候,把依赖项 rollup-plugin-visualizer 从 v6 升级到了 v7 。这项更改直接导致了 Nuxt 的最低 Node.js 要求从 20.x 提升到了 22.x 。
于是我切换 Node.js 的版本到 22.x ,发现程序内因为连接被重置导致Mongodb无法连接。于是我又尝试升级到 24.x 发现仍然连接被重置。
上网一查,原来当前 Node.js 不管是 v22.22.2 还是 v24.14.1 ,在 Windows 下都无法正常连接。
相关 issues 地址:https://github.com/meteor/meteor/issues/14246
当我好不容易把 Node.js 切换到没有这个问题的版本之后, Nuxt 又出问题了。
Nuxt 的 @nuxt/vite-builder 依赖项,在 windows 开发模式中无法正确拼接 CSS 地址。
于是作罢,回退版本。
现在搞不懂到底是 windows 的问题还是 windows 不受待见的问题,难道未来真的要将开发和生活分 2 台电脑来完成了吗?
维基萌博客系统发布了1.0.0版本啦!
这是一个大版本更新,对环境变量做了大量破坏性修改,升级时需要注意。
1.0.0版本之后推荐使用Docker部署,详细的部署教程可以参考:
https://github.com/eeg1412/wikimoeNodeJSBlog?tab=readme-ov-file#docker-%E9%83%A8%E7%BD%B2
另外适配了MongoDB 8,正好对应这次MongoDB爆出严重性质的漏洞,请务必将MongoDB升级到最新版的8。
完整的更新内容详见:
https://github.com/eeg1412/wikimoeNodeJSBlog/releases/tag/v1.0.0
将博客端的Nuxt版本从3升级到了4。
按照官方的升级教程走非常顺利的就升到了4。唯一的问题就是会报弃用警告,不知道是Nuxt UI导致的还是本体导致。跑了跑,发现没什么问题就上到维基萌上了。
中途想把Nuxt UI也从2升级4。但是一直没成功,按照官方教程走,结果Tailwindcss虽然安装了但是一直没生效,就退回到2的最新版了。
但是2的最新版也有点问题,就是编译时间加倍,这个问题4也有。如果继续用老版本的UI吧,提示不兼容当前Nuxt,进退两难。
给全景照片加上了陀螺仪控制。
既然VR功能都上了,那么用陀螺仪控制全景的功能也顺带加上啦。
因为屏幕大,iPad上的效果似乎是最好的样子呢。
视频
你会用陀螺仪模式来看全景照片吗?
0票
不会 0票
我只是路过的 0票
以上数据仅供结果展示
尝试给博客的全景照片增加了VR设备的支持。
应群友的要求,现在可以通过各种VR头戴设备沉浸式欣赏全景照片啦!
没有VR设备也没关系,只要手机的浏览器支持(比如手机chrome),也可以通过在各大电商平台购买VR盒子实现用手机沉浸式欣赏哦。
不过话说回来,真的有人会用VR设备刷博客吗?
视频
你会使用VR设备浏览博客吗?
0票
不会 0票
我只是路过的 0票
以上数据仅供结果展示
给博客增加了一个分享功能。
看了一圈国内支持无门槛分享的平台也只有新浪微博和QQ空间了的样子了呢。
总之欢迎大佬们分享小破站的内容!
image-ews0enl8image-jbjrw069
支持全景照片功能的0.29.0版本的维基萌博客系统发布啦!
这个版本最大的亮点就是可以在管理后台标记照片为全景照片,并在博客端以全景模式查看照片。
详见:https://github.com/eeg1412/wikimoeNodeJSBlog/releases/tag/v0.29.0
给维基萌博客系统的0.29.0版本打个分吧!
0票
⭐⭐ 0票
⭐⭐⭐ 0票
⭐⭐⭐⭐ 0票
⭐⭐⭐⭐⭐ 0票
a² + b² = c² 0票
以上数据仅供结果展示
给360°全景模式增加了鱼眼模式和截图功能,在鱼眼模式下可以做到和insta360同款的地包天和小行星视角,并且通过截图功能直接保存当前视角的截图。
视频screenshot (2)screenshot (1)screenshotVID_20250405_113447_00_029_2025-04-05_15-57-35_スクリーンショット-1
你觉得博客的360°全景模式怎么样?
非常好的功能 0票
一般般 0票
没用的功能 0票
我只是路过的 0票
以上数据仅供结果展示
因为购买了一套全景相机的设备,于是尝试性的给博客开发了全景功能。
正好最近赏樱就试着拍了一些360度的全景照片,点击图片即可进入全景查看模式。
IMG_20250405_110634_00_017-1头顶盛开的樱花IMG_20250405_111718_00_024-1VID_20250405_113447_00_029_2025-04-05_15-57-35_スクリーンショット-1VID_20250405_112457_00_028_2025-04-05_16-09-49_スクリーンショット-1
支持投票功能的0.27.1版本的维基萌博客系统发布啦!
这次更新主要是增加了投票功能,并修复了深色模式缺失的一些样式。
详见:https://github.com/eeg1412/wikimoeNodeJSBlog/releases/tag/v0.27.1
给维基萌博客系统的0.27.1版本打个分吧!
0票
⭐⭐ 0票
⭐⭐⭐ 0票
⭐⭐⭐⭐ 0票
⭐⭐⭐⭐⭐ 0票
这题我会! 0票
以上数据仅供结果展示
想着增加博客的互动性,就给博客增加了一个投票功能👏
博客有必要增加投票功能吗?
有必要 0票
没必要 0票
以上数据仅供结果展示
最近电影看的比较多就想做一些记录和统计就给博客新增加了电影板块。
链接:https://eeg1412.github.io/wikimoe-blog-archive/page/movies
另外由于深色模式的呼声很高,就顺带把深色模式提前开发了。现在可以通过页面右下角的工具栏进行切换。由于这项改动比较突然,也不知道有没有漏配的地方,如果有大佬发现了的话请积极发评论报告哟!
以上两项改动应该会在这周末发布吧,敬请期待!
新增加的电影记录页面1000024747
页面切换更流畅的维基萌博客系统0.24.2版本发布啦!
为了减少路由跳转导致时的页面抖动,增加了一些过渡动画当作缓冲。
但是因为nuxt3自带的页面切换动画会导致接口被多次调用,于是只能自己手搓了一个,缺点就是动画的时间不能很长,不过目前看着效果还行。
另外有大佬希望能显示当前博客系统的版本,就增加了版本显示,可以在管理后台首页以及博客底部看到。同时为了照顾不想在博客端显示版本号的用户增加了博客端是否显示版本号的选项。

具体更新内容请见:https://github.com/eeg1412/wikimoeNodeJSBlog/releases/tag/v0.24.2
博客的评论可以撤回啦!在维基萌博客系统0.24.0版本中,如果遇到评论内容有不妥的情况,可以在5分钟内进行撤回操作(当然博主还是会知道你撤回了什么内容🤭),这样就不怕奇怪的评论被发到网上啦!
这评论系统做的越来越像是聊天系统了呢😅。
另外,既然可以撤回了,那么评论者自然也就可以看到自己还在审核中的评论了。对比之前的弹窗提示,这样用户能更直观的确认到自己刚才的评论是否发送成功了,从而防止出现重复发送评论的现象。
维基萌博客系统0.24.0版本现已发布,具体更新内容详见:https://github.com/eeg1412/wikimoeNodeJSBlog/releases/tag/v0.24.0
QQ20250125-151743
维基萌博客系统发布了0.23.0版本啦!
这次更新结合了一些大佬的意见对界面做了一些调整,并对一些陈年老BUG做了修复。
新增了【图片组】的元素,这个在文章《2025年的第一展——15周年纪念 妖狐×仆SS・藤原可可亚展》中第一次应用。
另外考虑到很多人不会正确设置JWT密钥,在0.23.0版本更新后由系统自动生成安全系数较高的密钥。
具体更新内容请见:https://github.com/eeg1412/wikimoeNodeJSBlog/releases/tag/v0.23.0
0.23.0以前的圆角效果0.23.0之后的圆角效果【图片组】的展示效果新的游戏/阅读的时间区间显示效果
维基萌博客系统发布了0.22.2版本啦!
这个版本的主要两点有:
1.重构了谷歌广告组件,不再依赖环境变量,在管理后台就可以对谷歌广告进行管理。
2.通过timochan 大佬(https://www.timochan.cn)的协助,维基萌博客系统现在可以在docker上一键部署lite版本了!日后会更新关于docker版的部署教程,敬请期待。
3.升级了nuxt的版本。
具体更新内容请见:https://github.com/eeg1412/wikimoeNodeJSBlog/releases/tag/v0.22.2
重构了博客的谷歌广告模块,现在可以看到更多广告了😇。
追记:两侧广告会档通知,还是不要了。
image-zigk8p4k
想着给博客增加一个页面跳转时的过渡动画,结果加上后发现页面时不时会报错。
于是经历了一番调查之后发现在Nuxt.js中给页面加上跳转动画pageTransition后,页面和组件的onMounted会被执行2次!?
相关的Issue在Github上也有人提出:https://github.com/nuxt/nuxt/issues/27442
大致需要满足3个条件才会触发:
1.设置了pageTransition
2.mode设置为out-in
3.页面上有await useAsyncData加载接口内容
感觉有点天坑,这个问题虽然最早是今年6月有人发现的,但是实际上我所用的Nuxt版本是去年年底的版本,也就是说这个bug存在了至少大半年...
给博客侧边栏增加了【随机标签】的功能。快看看有没有感兴趣的标签吧!
image-hvfm12t9
应大佬们的要求给博客加上了“自定义HTML”的功能,可以在侧边栏加上各种奇奇怪怪的HTML小组件了。
应我自己的要求给博客加上了“今日热门文章”的功能,可以直观的展现哪些是维基萌当前热门的内容。
image-wicxrz4k
综合大佬报告的一些问题,得出了苹果safari默认的视频进度条UI的一些特性(BUG?)。
1.在拖动进度条时,会受到各类Move事件影响,也就是说把视频放在幻灯片或者灯箱中后在safari上是很难操作进度条的。Chrome、Edge、Firefox都没有这个情况。
2.拖动进度条会触发onpause事件,这个在Firefox也有一样的情况,只不过可以通过video.seeking来判断这个暂停事件是由于拖动进度条导致的还是按了暂停按钮,但是safari这招并不行。
有点难搞,真要为了safari开发一套视频UI吗?😅
捣鼓了一圈视频播放器,试了video.js和DPlayer,感觉都不大适合,还是浏览器默认的最适合😂。
差点忘记了维基萌是一个分享代码的网站,于是给代码区补上了显示代码类型和复制的按钮。
image-tozf9pf4
猛然发现部分设备或者浏览器会把数字解析成emoji,原因是我把emoji的字体方太前面了,同时设定在前面的字体设备或者浏览器没有,所以只要修改字体顺序和补充字体即可。
不过话说回来,emoji字体为什么还会包含数字呀?
image-5plg46vw
给博客加上了【文章目录】和【类型筛选】2个新功能,可以在博客右下角找到按钮。
image-70owlbsoimage-d54bqmlx
博客增加了可以在后台自定义添加CSS样式的功能,这样一些小的自定义样式就可以不用编译实现,增加了拓展性。
于是就小改了博客样式,PC版左下角加了会动的砂糖❤,有谜之立体感🕶️。
动图是由AI生成的,感觉挺有意思的,也一起分享了吧。
https://www.leiapix.com/
视频
博客对最新评论展示做了一个字符裁切,没想到如果正好遇到裁切点是emoji的时候会报错。问题是由于 JavaScript 中的字符串是由 UTF-16 编码的字符组成的,而 emoji 通常由两个 UTF-16 字符组成。当尝试裁剪字符串时,如果裁剪位置恰好在一个 emoji 的中间,那么就会得到一个无效的字符,从而导致错误。
除夕夜更新了一下博客的代码,非常激进的增加了页面缓存功能,结果差点起不来博客程序了...😂
Element Plus 这次强行重构了Select 选择器还是有点太激进了,出现了太多和原先式样上的不同,升级后能发现问题还算好的,就怕哪些功能变了但是没注意到,导致无法使用。但是如果不升级吧,2.4.x的版本又存在卡死和内存泄漏等诸多问题(虽然这和vue版本的升级有关),升级了就又存在前面Select 选择器的问题🥲。