静态哔哔
哔哔页面数据源于 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 本月免费配额消耗完了,想继续微调只能等下个月配额恢复后再进行了。 ❤
以上内容来自博客订阅源,版权归原作者。关注作者后可以在 关注列表 第一时间查看作者文章。
登录后,加入这场讨论。
登录参与