2026-10-16 · 一次真实的部署、一次小小的排错，和一个一直在进步的博客俱乐部。
这是什么
BlogsClub 新推出的「友圈挂件」：把你关注的博主们的最新文章，做成一个可以直接嵌进自己博客的聚合页。今日/昨日/本周/本月更新统计、按博主筛选、搜索、正序倒序，还有翻页/滚动加载/点击加载三种浏览方式（访客的浏览偏好会被自动记住）——功能比很多博主独立开发的「友圈页」都完整。
技术上也讲究：挂件用完整的 Shadow DOM 做样式隔离，既不污染博客已有样式，也不会被主题影响；单文件、零第三方依赖，一个 <script> 引入即用；主题色可自定义，深浅两套配色自动推导。
部署到本站
本站是报纸风的 paddysun-newsprint 主题，为了让挂件「像原生的」，我做了三层适配：
- 强调色自动跟随：挂件的
color是 HTML 属性、没法引用 CSS 变量，于是在它初始化前用一小段脚本从主题的--np-accent变量实时读取注入——主题以后换色，挂件自动跟着变； - 字体穿透：利用组件内部
font-family:inherit的 reset 链，把全站衬线字体送进 Shadow DOM，挂件不再是突兀的「无衬线外来户」； - 版式融入：挂件区升格为正式栏目，沿用主题的分类标题、细线外框和引言样式，像一帧贴在报纸上的剪报。
排错小记
部署第一版时遇到怪事：挂件标题下方一片空白，控制台一个报错都没有。
服务端排查全绿：挂件脚本正常加载、getFriends API 返回正常（我的友圈收录 951 篇文章）、CORS 全放行。问题显然在浏览器端——于是往页面里注入钩子，手动执行挂件脚本内部被 catch(e){} 静默吞掉的异常，真凶现形：
NotSupportedError: Failed to execute 'attachShadow' on 'Element':
This element does not support attachShadow原因：嵌入代码里的旧写法标签 <follows> 不含连字符，不是合法的自定义元素名，按 Web 规范不允许挂载 Shadow DOM——所有现代浏览器都会抛 NotSupportedError；而脚本把这个异常吞了，于是只剩一片安静的空白。
修复很简单，换成教程里另一种「标准自定义元素」写法即可：
<!-- ❌ 旧写法：所有现代浏览器都无法渲染（且无任何报错） -->
<follows blog="496"></follows>
<!-- ✅ 标准写法 -->
<follows-widget blog="496" color="#6b1f1f" theme="light"></follows-widget>也顺便@白熊：脚本对旧写法的兼容路径可以加个显式告警，别让后来的博主再摸黑排查。(他应该能看到吧)
短评
BlogsClub 最牛逼的地方，是白熊在不断地做新功能、优化体验——从 RSS 聚合、博阅榜，到这次的友圈挂件和关注列表挂件，瀑布流、抽屉、偏好记忆这些细节一直在打磨，能感觉到这个聚合站是「活的」。 QQ 群（957197421）交流氛围也很好，答疑很快。
如果你想给自己的博客加一个「会呼吸的友链页」，欢迎通过我的邀请链接加入体验：BlogsClub 入驻申请（我的邀请）。
本站已经实际部署，效果可以直接看：paddysun.top/links——顺手逛逛友圈里的邻居们，都不错。
发表回复