梦境汇编

文章需要密码访问
Semesse avatar
Semesselast year

--UPDATE--

可以发布评论

Semesse avatar
Semesselast year

當然是使用了 CF Workers+KV(

Semesse avatar
Semesselast year

支持 i18n 了,但内容必须在浏览器渲染,会有 Layout Shift 🥲 后面有时间了再折腾一下用 CF Workers 做一个分流

Semesse avatar
Semesselast year

把评论做成接近可视区域才 lazy load 的形状了,fork 了一份 rehype-pretty-code 掺了点魔法去掉了对 crypto 的依赖(不然我们的小聪明 Next.js 会把 polyfill 塞进 first chunk 😅),fork 了一份 next-contentlayer 稍微改了一下让整个文章内容都 SSR 渲染,这样就不需要客户端再水合了

另外弄了一个 remark 插件和一个 rehype 插件处理 markdown 里面的图片添加元数据让 Next.js 可以用一个模糊底图当 placeholder(credit to圖片效能最佳化,使用 Next.js Image、plaiceholder、客製 MDX 元件 - Modern Next.js Blog 系列 #22

今天的优化就到这里,睡觉(

Neruthes avatar
Nerutheslast year

评论系统做得挺有意思的,我最近新增的评论区实践是查idarticleiddiscussionid_{article} \leftarrow id_{discussion}表后从 GitHub API 拉 repo discussions 区内对应该文章的 post 下的评论区,效果参考https://neruthes.xyz/articles-comments/?id=2022-12-12.0。不过因为我不打算为单独文章做 HTML 版本,所以无法将文章内容与评论区放在同一页面内。

Semesse avatar
Semesselast year

给评论加上了 KaTeX 支持,以及 inline critical css, 制作了一个小的 GA 代理

但是样式又烂掉了)

Semesse avatar
Semesselast year

UPDATE:支持了 RSS 和 tag,调整了一下样式

Semesse avatar
Semesselast year

以及自建了 OSS 放图片(

Semesse avatar
Semesse12 months ago

總算找到了一個比較搭的英文字體,把主色調修改到了 REC2020 色域的藍/綠色,在支持廣色域的設備和瀏覽器上會看到更鮮艷的顏色(?

以及略微調整了一下樣式

Semesse avatar
Semesse10 months ago

从 Next.js 迁移到了 Astro,并且框架从 React 换成了 Preact,再也不用忍受优化不掉的 100+KB (gzipped) 的 React+Next 大礼包了 😇 现在文章页面不包含评论区只需要 27.1 KB,而原先需要 274 KB

调整了一下样式以及给每篇文章加上了自动生成的 OG Image,支持了发送邮件通知(

刚迁移完还有好多 Bug

Semesse avatar
Semesse10 months ago

test

Semesse avatar
Semesse10 months ago

折腾了一下 GeoDNS 和分区 CDN,用旧域名搭建了一个境内加速站点

当然备案是不可能有备案的,只能用 CloudFront 的东亚节点这样子

Semesse avatar
Semesse10 months ago

用 thumbhash 复刻了 Next.js 的 image placeholder,现在文章图片也有加载动效啦

Semesse avatar
Semesse10 months ago

把 Next.js 的 link prefetch 也复刻了一下,配合 CloudFront 就可以秒开了

Semesse avatar
Semesse9 months ago

对评论做了一下服务端预渲染,不过因为 astro 的类 RSC 特性再加上用了异步 remark/rehype 插件没有办法同步渲染所以实现得有点 tricky。

并且滚动到评论区触发 hydration 第一次渲染的时候会因为 markdown 是异步渲染的(渲染完再setState),不管返回了什么都会替换掉服务端渲染好的 markdown DOM,这一小段 loading 时间只能展示点别的东西(比如现在是恢复成未渲染的 markdown),这下学艺不精了

Semesse avatar
Semesse9 months ago

最后还是没有忍住,略施小计做了个延迟水合,现在评论水合不会造成 Layout Shift 了。就是代码有点丑 🤡

Loading New Comments...