📆 网站变更日志

2025-05-03更新

Feature

现在可以使用<PDF src="" scale={} />组件来引用PDF文件并实时渲染了. 功能来自于react-pdf. 这个库实际上是pdf.js的一个React封装. 不是简单的插入<embed>或者<iframe>标签实现的PDF渲染, 而是直接用canvas渲染PDF文件. 原始的文件会被渲染为图片在canvas上显示, 通过文本和标注(Annotation)会单独放在两个不同的覆盖层上(Overlay). 这样可以直接在当前网页中实现PDF中各个标注的跳转(在论文里很多), 还有文本的复制, PDF中内部链接, 外部链接的跳转等等功能. 而且可以自定义样式. 但缺点是网页性能开销会比较大, 所以我做了选择性加载, 当用户按下按钮时才会加载PDF文件并渲染.

例如<PDF src="/linear-scan.pdf" scale={1.3} />会生成

2025-05-01更新

Feature

这次是一些小功能完善, 现在可以用<GitRepo href="" name="" />小组件来引用一个GitHub仓库并为它添加一点样式. 例如mdx.js/mdx. 顺带我把之前引用GitHub仓库的地方都替换为了新组件.

另外支持了Mermaid语法, 现在可以直接在MDX中画Mermaid流程图了.

2025-04-28更新

Major

界面大幅更新, 主要是觉得之前那个版本的界面太丑了, 所以重新设计了一下. 现在采用的是极简的设计风格, 更符合个人审美一点. (主要是因为极简风格的设计元素少, 写起来很轻松🤪). 另外还简化了很多组件, 重写了一部分. 不得不说第一次用JavaScript写网站的时候出现的问题真不少, 很多代码的作用都是Only God Knows.

2025-04-27更新

Major

MDX文件的渲染器从next-mdx-remote-client换为了mdx.js/mdx, 也就是Next.js官方的MDX渲染器.

简单来讲问题是这样的, next-mdx-remote-client是一个客户端组件, 它不支持在MDX文件中直接import一个JSX组件, 必须通过在<MDXContent components={}/>中传入components属性来指定要使用的组件. 但问题是, 如果我想在MDX中通过相对路径引入图片, 由于Webpack本身不会解析png,jpeg这些图片文件的路径, 导致Webpack不能自动打包这些静态资源. 一种解决方法是在配置文件里指定file-loader来处理这些图片文件, 但在新版Webpack中已经不推荐使用file-loader了, 取而代之的是asset/resource和asset/inline. 然后我又一直没折腾成功😡. 暂时的替代方法是用脚本把img元素中引用的相对位置图片复制到public下, 然后重写img的引用位置.

另一种方法就是直接换成mdx.js/mdx, 然后用rehype-mdx-import-media配合next/image组件将图片用import的形式打包进来. 这样Webpack就能自动打包这些静态资源了. 而且顺带支持了import语法, 这样就可以直接在MDX中引入JSX组件了. 总体来讲第二种方法用着还挺方便的.

但第二种方法有个小bug, 在next.config.ts中写mdx.js/mdx配置文件的时候, 如果添加了rehypePlugins或者remarkPlugins配置, 会导致Turbopack开发服务器起不来, 报错是配置文件无法序列化. 目前版本Next.js@15.3.1仍然有这个问题, 不使用Turbopack则一切正常.

2025-04-18更新

Feature

现在你可以在网页右下角看到梅琳娜了🥳, 这个Live2D模型来自B站一位Up主串烧小白干(感谢大佬). 我把Live2D Cubism官方的Demo移植到了这个网站上. 主要是网上教程本身不多, 而且基本都是基于Cubism 4.x的Demo. Cubism 5.x的Demo和4.x的变化不小, 基于4.x的改动很多都是不方便的. 因此我自己移植了一版上来. 关于移植的过程后续会以笔记发出来.