导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

侧边栏
最新评论
广树管理员
2025-05-07 21:00
@ZeroCounter:哈哈哈,被发现啦
ZeroCounter
2025-05-07 14:06
原来博主是可爱的二次元女孩子(→游船上那张全景
广树管理员
2025-05-06 14:31
@ZeroCounter:这样啊,逐渐听不懂现在的网络热梗了😅
ZeroCounter
2025-05-06 13:41
@广树:一个梗啦,表示很无语( 因为国内的阅读理解题经常写表达了作者的思乡之情(
广树管理员
2025-05-06 11:13
@ModerRAS:云台拍摄全景需要固定不动,时间也长,有一定场景限制。
攻略中
星空列车与白的旅行
暂无评分
Steam星空列车与白的旅行
2025年2月22日 22时 ~ 攻略中
已累计游玩2个月15天
乘坐的列车,划破夜空,飞驰在星空之下,令人心旷神怡——这可真是场超值之旅。舒爽夜风吹拂下的随心独旅中,我邂逅了随性的乘客,可人怜爱的乘务员。以及……猫耳少女?这场旅行,究竟会在她身上,留下了些什么呢?
PSN奖杯卡

PSN奖杯卡

归档
赞助商广告

现在可以公开的维基萌博客重构记录其①

作者:广树时间:2023-11-18 12:18:21分类:博客开发

就如上个月发布的谈谈维基萌最近遇到的破事和将来的打算中提到的一样,维基萌博客的重构正在进行。

从发布到现在也经历了一个多月,多少有些东西可以拿出来分享一下了。


新博客的LOGO

依托于AI技术的成熟,现如今设计这档事也可以交给AI完成了。

于是这次的LOGO就交给了AI,以下是AI生成的LOGO中感觉比较中意的一个。

没记错的话,当时用的关键词是wikimoe logo kawaii。

嗯,很可爱就用这个了!


新博客的架构

wikimoeblog框架 .png

新的系统完全抛弃了旧时代PHP+MySQL的架构。

数据库沿用维基萌抽卡的mongodb。

后台管理的API用了express框架进行了快速搭建,后台管理的前端页面则有vue3来完成。

博客页面考虑seo,准备用同为vue生态的nuxt3。

其实一开始有想过后台管理和博客全部都整合到nuxt3,但是研究了半天对于资源文件的动态调用这一块一直没有好的解决办法,思索了很久还是决定用使用起来更加灵活的express作为管理后台的框架,博客端则使用nuxt3,这样的方案一定程度上是对SPA和SSR的一种平衡吧。

缺点嘛,也很明显,要启动两个nodejs服务。

博客端需要用反向代理去调用管理后台上传的照片等文件


新的媒体管理系统

在新的媒体管理中,新增了相册管理对照片进行分类。

还对照片类的文件增加了图片处理模块。

QQ截图20231118133546 .png

因为并没有购买类似对象储存类的服务,图片的储存空间可以说非常宝贵。

所以在每次博客编写之前,都会针对博客所用到的图片进行大小的缩放和质量的压缩。

这在以前分享图片较少的文章时还没什么感觉,但是随着最近照片类的文章增多明显感受到了有些繁琐,于是就针对这个需求增加了自动化的图片压缩功能。


新的图片压缩格式

在新的维基萌博客中,会让webp作为图片的主要压缩格式。

因为一番比较之下,webp作为现代的压缩格式确实有着出色的性能。

比如同一张照片压缩至统一的最长边1920px,图片质量为60后:

jpg格式的大小为262KB

webp格式的大小为194KB

压缩比还是非常可观的,同时图片质量上也有压倒性的优势,如下图:

点击查看原图

同样的60质量下,jpg在一些边缘处出现了大量噪点,而webp依然能保持非常良好的画质。

现代浏览器中也几乎都支持webp格式了,所以现在尝试大面积使用webp的图片或许是一个很好的选择。


目前的完成进度

对于管理后台的进度目前如下:

□首页面板

□管理员/站长管理

■博客分类管理

■博客标签管理

媒体库管理

□文章管理

□评论管理

□友链管理

□网站设置


光是管理后台的完成度都还是相当低的一个情况,可以说路还很长。


donate.png

1210 x 50(蓝底).png

cloudcone

相似内容:
推文
维基萌博客系统发布了0.28.0版本啦! 在这个版本中可以随意在推文列表中引用相关内容并对其进行排序。 详见:https://github.com/eeg1412/wikimoeNodeJSBlog/releases/tag/v0.28.0
发表于:2025-03-29 13:38
推文
最近电影看的比较多就想做一些记录和统计就给博客新增加了电影板块。 链接:https://www.wikimoe.com/page/movies 另外由于深色模式的呼声很高,就顺带把深色模式提前开发了。现在可以通过页面右下角的工具栏进行切换。由于这项改动比较突然,也不知道有没有漏配的地方,如果有大佬发现了的话请积极发评论报告哟! 以上两项改动应该会在这周末发布吧,敬请期待!
发表于:2025-03-07 07:10
推文
想着给博客增加一个页面跳转时的过渡动画,结果加上后发现页面时不时会报错。 于是经历了一番调查之后发现在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存在了至少大半年...
发表于:2024-07-27 14:17
推文
综合大佬报告的一些问题,得出了苹果safari默认的视频进度条UI的一些特性(BUG?)。 1.在拖动进度条时,会受到各类Move事件影响,也就是说把视频放在幻灯片或者灯箱中后在safari上是很难操作进度条的。Chrome、Edge、Firefox都没有这个情况。 2.拖动进度条会触发onpause事件,这个在Firefox也有一样的情况,只不过可以通过video.seeking来判断这个暂停事件是由于拖动进度条导致的还是按了暂停按钮,但是safari这招并不行。 有点难搞,真要为了safari开发一套视频UI吗?😅
发表于:2024-06-30 22:06
推文
博客系统积攒了一波更新,推了一个新版本,具体更新内容可以在github上查看:https://github.com/eeg1412/wikimoeNodeJSBlog/releases/tag/v0.18.1 话说我最近才知道原来loli.net这个用来镜像的域名已经不大好使了,反而谷歌的fonts.googleapis.com域名好使了?
发表于:2024-06-30 11:27
推文
博客新增了阅读记录的功能,至此ACGN的记录和活动记录功能全部完成啦! 同时,增加了文章底部插入相关作品的功能和在博文中查看活动详情的功能,算是功能闭环了👏。 新增的阅读页面地址:https://www.wikimoe.com/page/books
发表于:2024-04-04 20:42
推文
博客新功能,游戏记录页面公开! https://www.wikimoe.com/page/games
发表于:2024-03-14 18:11
推文
博客对最新评论展示做了一个字符裁切,没想到如果正好遇到裁切点是emoji的时候会报错。问题是由于 JavaScript 中的字符串是由 UTF-16 编码的字符组成的,而 emoji 通常由两个 UTF-16 字符组成。当尝试裁剪字符串时,如果裁剪位置恰好在一个 emoji 的中间,那么就会得到一个无效的字符,从而导致错误。
发表于:2024-03-11 21:18