我为网站/博客制作了 DEV.to 小部件。 它长这样 使用方法（仅需两行代码 :D） DEV 小部件 大家好！我制作了一个（非官方的）DEV.to 小部件/个人资料卡，您可以在您的网站和博客中使用它（您只需复制粘贴 2 行代码即可 :D）。
它长这样
使用方法（仅需两行代码 :D）
<dev-widget data-username= "saurabhdaware" ></dev-widget> <!-- Place script tag before the end of the body tag -->
<script src= "https://unpkg.com/dev-widget@^1/dist/card.component.min.mjs" type= "module" ></script>
Enter fullscreen mode
Exit fullscreen mode
搞定！只需将 你 的 dev.to 用户名填入 data-username 属性，即可获得你的个人资料卡片 :D
如果您想将其安装为 ES6 模块（主要用于框架中）
npm install --save dev-widget
Enter fullscreen mode
Exit fullscreen mode
并将其导入到文件顶部
import ' dev-widget '
Enter fullscreen mode
Exit fullscreen mode
然后你就可以使用
<dev-widget data-username= "saurabhdaware" ></dev-widget>
Enter fullscreen mode
Exit fullscreen mode
还有一些其他属性 data-width， data-limit您可以在我的 GitHub 上查看完整文档：
适用于 https://dev.to/ 的非官方小部件/个人资料卡
DEV 小部件
用于生成卡片的图形用户界面 ： https://dev-widget.netlify.app/create
Codepen ： https://codepen.io/saurabhdaware/pen/NWWbOvv
dev.to 的非官方小部件/个人资料卡 。
你可以把它用在你的网站/博客里，展示你的 DEV.to 文章🌻
安装和使用
- 通过脚本标签
< dev-widget data-username ="saurabhdaware "> </ dev-widget >
<!-- Place script tag before the end of the body tag -->
< script src ="https://unpkg.com/dev-widget@^1/dist/card.component.min.mjs " type ="module "> </ script >
Enter fullscreen mode
Exit fullscreen mode
- 作为 NPM 模块 这可以在 React、Vue 和几乎所有其他前端框架中使用。
npm install --save dev-widget
Enter fullscreen mode
Exit fullscreen mode
在你的框架组件中
import 'dev-widget'
Enter fullscreen mode
Exit fullscreen mode
属性指南
属性 描述 默认
数据用户名 您的 DEV.to 用户名
数据宽度 卡片宽度 300像素
数据内容高度 物品容器的高度 300像素
数据主题 卡片 主题 （ dark，，，， ） ocean pink cobalt2default默认
数据名称（可选） 卡片上显示的名称 将要
…
请给仓库点赞⭐🦄
另外，如果您想为 Hacktoberfest 项目做贡献，我非常乐意帮忙。您可以查看 CONTRIBUTING.md 文件 了解贡献指南。
GitHub： https://github.com/saurabhdaware/DEV-widget NPM：https: //npmjs.org/package/dev-widget Codepen： https: //codepen.io/saurabhdaware/pen/NWWbOvv
文章来源：https://dev.to/saurabhdaware/i-made-dev-to-widget-for-websites-blogs-40p2 
