我自己构建了 dev.to Feed 页面，而不是嵌入 Widget

Source: Dev.to

为什么我跳过了 dev.to 小部件

有一种简单的方法可以在你的网站上展示 dev.to 文章：粘贴一个小部件。我差点就这么做了，但越看越觉得它和我构建其他内容的方式有点格格不入。我的站点是全手工打造的——HTML、CSS、JavaScript、结构化布局、注入层、主题处理。每一步都是有意为之。直接放入第三方小部件当然能工作，但它不会感觉像系统的一部分；它更像是被塞进去的东西。这种差别比听起来更重要。

使用 dev.to RSS Feed

dev.to 提供了公开的 RSS 订阅源。那是数据。与其嵌入 UI 组件，我选择获取订阅源、解析 XML，然后在站点上以原生组件的形式渲染文章。没有 iframe——只有数据 → 结构化对象 → 我自己的卡片组件。

工作原理

1. 从 https://dev.to/feed/your-username 请求 RSS XML。
2. 解析 XML（例如在浏览器中使用 DOMParser，或在服务器端使用相应库）。
3. 将每个 <item> 映射为包含标题、URL、发布日期和摘要的 JavaScript 对象。
4. 将这些对象喂入我已有的卡片组件库。

好处

• 设计一致性 – 文章的外观与我的设计系统保持一致（间距、排版、悬停状态）。
• 性能 – 影响极小，因为只传输原始数据；没有额外的脚本或 iframe。
• 认证无关 – 页面在访客是否登录 dev.to 的情况下都能正常工作。
• 关注点分离 – RSS 简单、稳定、可预测；它不尝试控制布局。

这种内容与表现的分离非常强大。dev.to 负责发布和发现，我负责呈现。

结论

对站点表层的控制让长期维护更干净。当你拥有表现层时，就不必与别人的样式、脚本或结构进行协商——只需要处理数据。如果你在构建个人站点并希望同步博客内容，考虑拉取 RSS 而不是嵌入小部件。这是一个小改动，却能让你的架构保持有意图。