我为Bluesky制作了一个个人资料卡小部件 🦋

📝

内容提要

作者分享了一个可嵌入网站的Bluesky个人资料卡小部件（bsky-widget），使用简单，仅需两行代码，支持多种框架，提供自定义样式和GitHub链接，鼓励用户生成自己的卡片。

🎯

关键要点

• 作者分享了一个可嵌入网站的Bluesky个人资料卡小部件（bsky-widget）。

• 使用简单，仅需两行代码即可在网站上使用bsky-widget。

• 支持多种框架，用户可以通过npm安装来使用。

• 提供自定义样式的选项，用户可以根据需要覆盖CSS变量。

• 鼓励用户生成自己的卡片，并提供GitHub链接和卡片生成器链接。

🔎

延伸解读

简单易用的嵌入方式

bsky-widget的设计使得用户可以通过简单的两行代码将个人资料卡嵌入到网站中。这种简便性降低了技术门槛，适合各种技术水平的用户，尤其是初学者。

多框架支持与自定义选项

该小部件支持多种开发框架，用户可以通过npm轻松安装。此外，提供的自定义样式选项允许用户根据需求调整外观，增强了灵活性和个性化体验。

鼓励社区参与

作者鼓励用户生成自己的个人资料卡，并提供了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>标签，以便正确加载小部件，并根据需要设置最小高度和宽度。

🏷️

标签

Bluesky GitHub 个人资料卡 小部件 嵌入