在你的博客或网站上嵌入毛孔堵塞检测器（免费小组件）

如果你写护肤内容——博客、Newsletter、诊所网站或客户的店铺——你的读者迟早会问同一个问题：“可这款保湿霜会堵塞毛孔吗？”现在，你可以让读者直接在你的页面上自己找到答案：毛孔堵塞检测器的免费嵌入式版本。

这个小组件能做什么

这个小组件把完整的分析器装进一个紧凑的框架：访客粘贴成分表，即可看到每个匹配成分的彩色 0-5 致痘评级，还可以展开方法说明。它完全在访客的浏览器中运行——无需账号、无需上传、不会追踪他们粘贴了什么。

如何添加

两行 HTML，放在页面任意位置：

<div data-pore-clogging-checker></div>
<script src="https://porecloggingchecker.app/widget.js" defer></script>

这就是全部接入工作。加载脚本会：

• 查找所有带 data-pore-clogging-checker 属性的元素（如果你更喜欢，也可以用 data-pcc-widget），
• 插入一个指向托管版检测器的 iframe，
• 自动调整框架高度以适配内容，包括分析运行之后。

无论页面上有多少个嵌入点，<script> 标签每页只需放一次——它会挂载所有嵌入点。

配置选项

通过容器 div 上的 data 属性传递设置。全部为可选：

• data-locale - 强制指定小组件语言：en、zh、ja 或 ko。默认跟随访客的浏览器。
• data-theme - light、dark 或 system（默认），控制外观样式。
• data-prefill - 预填成分输入框，非常适合在文章中点评某款具体产品：

<div
  data-pore-clogging-checker
  data-locale="en"
  data-theme="light"
  data-prefill="Aqua, Glycerin, Cocos Nucifera Oil, Isopropyl Myristate"
></div>

完整嵌入指南提供了 WordPress、Shopify、Squarespace、Wix 和 Ghost 的分步说明，以及一个带实时预览的交互式配置器。

样式与摆放建议

小组件会继承你的页面宽度，所以请把它和文章正文放进同一个容器。它最适合放在产品评测和结论之间，或者作为任何成分深度解析的搭配工具：

<div style="max-width: 720px; margin: 2rem auto;" data-pore-clogging-checker></div>
<script src="https://porecloggingchecker.app/widget.js" defer></script>

框架会沿用网站自身的明暗主题，匹配访客的系统偏好。

为什么它免费

检测器是一个公益工具：它在客户端运行、不收集任何成分数据，存在的意义就是帮助易痘人群做出更好的选择。嵌入它分文不取、无需 API 密钥，也没有需要担心的速率限制——所有工作都由访客的浏览器完成。

给开发者和折腾党

加载器约 80 行，是不依赖任何库的原生 JavaScript——如果你想自托管或审计代码，可以阅读源码。iframe 会发送 pcc:resize 消息，如果你更愿意自己管理高度，可以监听它。

如果你嵌入了它，我们很想看看你做出来的东西——欢迎发邮件到 hello@porecloggingchecker.app 聊聊。如果你的读者好奇评级是怎么来的，请把他们指向终极指南。