DEV Community
·
我为Bluesky制作了一个个人资料卡小部件 🦋
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
作者分享了一个可嵌入网站的Bluesky个人资料卡小部件（bsky-widget），使用简单，仅需两行代码，支持多种框架，提供自定义样式和GitHub链接，鼓励用户生成自己的卡片。
🎯
关键要点
-
作者分享了一个可嵌入网站的Bluesky个人资料卡小部件（bsky-widget）。
-
使用简单，仅需两行代码即可在网站上使用bsky-widget。
-
支持多种框架，用户可以通过npm安装来使用。
-
提供自定义样式的选项，用户可以根据需要覆盖CSS变量。
-
鼓励用户生成自己的卡片，并提供GitHub链接和卡片生成器链接。
❓
延伸问答
如何在我的网站上使用Bluesky个人资料卡小部件？
只需两行代码即可使用bsky-widget：在HTML中添加<bsky-widget handle="你的用户名"></bsky-widget>和<script src="https://unpkg.com/bsky-widget@~0.1/dist/index.js" type="module"></script>。
bsky-widget支持哪些框架？
bsky-widget支持多种框架，用户可以通过npm安装来使用，无需手动添加<script>标签。
我可以自定义Bluesky个人资料卡的样式吗？
可以，用户可以覆盖CSS变量来自定义样式，具体可参考文档。
如何生成自己的Bluesky个人资料卡？
可以使用提供的卡片生成器链接，访问https://bsky-widget.srbh.dev/saurabhdaware生成自己的卡片。
bsky-widget的GitHub链接是什么？
bsky-widget的GitHub链接是https://github.com/saurabhdaware/bsky-widget。
使用bsky-widget时需要注意什么？
确保在页面底部添加<script>标签，以便正确加载小部件，并根据需要设置最小高度和宽度。
➡️
