静态哔哔
哔哔页面数据源于 Memos,源站搭建于家里的 NAS 上,通过公网 IP 访问。因为是实时读取,导致每次点进或刷新哔哔页面都要转半天,数据加载极慢。
早前有过一个设想,能否将源站 Memos 定时抓取存为json文件,然后通过读取解析这个json文件,进而展示成哔哔页面呢,这样做是不是加载速度会快很多?但奈何小白,没有任何动手能力,对着大模型一顿输出,不是报错就是效果不满意,于是搁置。
不甘心,前两天打开 VS Code,发现 Copilot 可以使用 GPT-4.1模型了,这次会不会不一样呢?直接开问。
- 通过该 bb.html 将 memos 每个条目渲染展示在了 hugo 博客中,但因为是实时加载,每次打开 hugo 页面都要等待,有时时间还比较长,有什么办法提高 hugo 展示页面的加载速度吗?例如是否可以先将 memos 定时存为 json 文件,然后通过读取 json 文件进行渲染展示?
- 你的思路完全正确!实时请求 Memos API 会导致页面加载慢,尤其是 API 响应慢或网络不稳定时。最佳实践是定时将 memos 数据拉取下来,保存为本地 JSON 文件,然后 Hugo 直接读取这个 JSON 文件进行渲染,这样页面加载速度会非常快。
- 这些文件(我将用掉的文件全部丢给 Copilot)是目前直接从原网页实时获取 memos 条目并展示在 hugo 博客中用到的 JS 代码和样式文件,请基于这些代码,分析需要的所有字段,完整输出通过 github action 存为 json 的完整代码,并且基于这个 json 文件,如何复现当前 hugo 页面展示样式,保持相同的样式。
- 你的需求分为两部分:1、用 GitHub Action 定时拉取 Memos API,生成 memos.json 文件,字段要能满足你当前页面展示。2、前端 Hugo 页面如何只用本地 memos.json,复现原有样式和功能。
- 有些 memos 条目可能有多张图片,你写的这个 json 代码或者展示能像现有一样完整输出多张图片吗?
- 可以,完全支持多张图片。你的 memos API 返回的 resourceList 字段本身就是数组,包含所有图片(或其它资源)。我的 json 生成脚本会完整保留 resourceList ,前端渲染代码会循环输出所有图片,和你现在的效果一致。
- 我按照你说的修改应用了,并且也成功生成了该memos.json文件,但刷新博客页面是空白的,请帮我再检查一下,是哪里不对呢?修改应用后,vercel部署报错,如何解决?
- 成功了,但样式好像跟之前的不一样,我需要应用原来直接获取相同的样式展示。
- 成功了,谢谢。有一个样式注意一下,之前直接获取原页面的时候,渲染的标签是绿色的,并且放置在条目最前方,如何继续保持这种样式呢?
- 标签没有变成绿色,并且没有在最前面呀,另外,twikoo 评论和 emaction 表情也没有了。
- 原来的 emaction 表情图标好像在每个条目的第一行,现在在条目的下方了,帮我改回位置到条目的原来样式位置;排在后面的条目,点击评论图标后,页面会自动跳到页面顶部,我想点击的时候还是维持在当前条目所在的页面位置不动,如何修改。请结合上述两项修改,输出最新的修改后的 bb.js 代码。
- 可以分页展示吗,初始只加载最新20条,下方增加一个加载更多按钮,点击后继续加载后续20条,如此循环。
- …………
经过反复拉锯,好消息是静态哔哔页面复现成功,秒加载。坏消息是 Copilot 本月免费配额消耗完了,想继续微调只能等下个月配额恢复后再进行了。
❤