如何将抓取到的JSON格式推文通过HTML/CSS渲染展示

我目前正在尝试将我scrape（抓取）得到的、object-models（JSON）格式的推文通过HTML/CSS渲染，当前使用的是这类端点获取数据：https://cdn.syndication.twimg.com/tweet?id=1455800444505178112
出于存储方面的明确考量，我仅保留了该JSON中的核心必要字段，所有渲染所需信息均已包含在内！
我无法使用基于Twitter官方源的embedded tweets（嵌入式推文）功能，因为我的核心需求是能够展示已被删除的推文。
请问大家有什么实现思路？有没有人做过相关开发？是否存在其他替代实现方案？

我觉得很遗憾的是，很多人都做过推文抓取，但几乎没有人尝试在推文被删除的情况下，将其以大众熟悉的视觉样式还原展示。
符合Twitter官方object-model的数据示例如下：

{
    "lang": "en",
    "favorite_count": 360261,
    "self_thread": {
        "id_str": "1455800444505178112"
    },
    "created_at": "2021-11-03T07:34:08.000Z",
    "display_text_range": [...],
    "entities": {
        "hashtags": [],
        "urls": [],
        "user_mentions": [],
        "symbols": [],
        "media": [
            {
                "display_url": "...",
                "expanded_url": "...",
                "indices": [...],
                "url": "..."
            }
        ]
    },
    "id_str": "1455800444505178112",
    "text": "Yup, even the moon https:...",
    "user": {
        "id_str": "44196397",
        "name": "Elon Musk",
        "profile_image_url_https": "...",
        "screen_name": "elonmusk",
        "verified": true
    },
    "photos": [
        {
            "backgroundColor": {...},
            "cropCandidates": [...],
            "expandedUrl": "...",
            "url": "...",
            "width": 553,
            "height": 441
        }
    ],
    "conversation_count": 40684,
    "news_action_type": "conversation"
}

谢谢大家！

解决方案 #

核心实现思路 #

你手里已经有完整的核心字段，完全可以离线渲染出和官方一致的推文样式，不需要依赖任何Twitter官方接口：

• 样式层面直接复刻推特公开的CSS规范，颜色、间距、字体大小、圆角数值都可以直接获取，核心元素（圆形头像、蓝/金认证标识、发布时间格式、互动计数、媒体卡片样式）都可以直接用你已有的字段直接映射填充，不需要额外数据
• 文本格式化直接解析entities字段即可：根据里面的hashtag、用户提及、链接的位置下标，把纯文本切割后加上对应样式的标签，完全不需要额外的网络请求
• 日期字段把created_at的ISO时间戳转成推特常用的相对时间（如「2小时前」「2021年11月3日」）即可，纯前端JS就能实现，不需要后端支持

具体落地步骤 #

1. 先搭建基础DOM结构，按层级拆分：用户信息栏→推文正文→媒体展示区→互动数据栏四个模块，每个模块对应你JSON里的对应字段
2. 媒体部分如果已经存储了图片/视频的本地缓存或者原链接直接渲染即可，没有资源的话也可以做统一的占位样式
3. 如果需要支持明暗模式，直接预设两套CSS变量，切换的时候改根变量就行，推特的明暗配色都是公开的固定数值，直接用就行

替代方案 #

如果不想从零写CSS，也可以用现有的开源离线推文渲染组件，只需要把你现有的JSON字段做一层简单的字段映射，就能直接渲染，所有逻辑都在本地执行，不会请求任何Twitter官方接口，完全满足展示已删除推文的需求。

内容的提问来源于stack exchange，提问作者mabois