最近我重新探索了dev.to api，惊喜地发现它无需api密钥即可使用！这意味着您可以轻松地将文章嵌入到任何地方（例如您的个人博客）,而无需担心密钥安全问题。您可以通过指定作者或文章id来获取文章列表或单篇文章。为此，我开发了一个web组件，方便您获取文章列表或单篇文章。让我们从“列表模式”开始：
<dev-to author="madsstoumann" itemsperpage="10" links="internal" theme="classic"></dev-to>
效果如下：
请注意theme和links属性。
目前支持三种主题（您可以轻松添加更多）：
links属性可以设置为“internal”或“external”。前者会在组件内直接打开文章，后者则在新标签页中打开dev.to上的文章。
接下来，我们来看一下“文章模式”： 如果只需要直接显示文章，无需显示列表，可以使用“文章模式”：
<dev-to article="2014104" theme="classic"></dev-to>
您可以将主题更改为“Modern”或“Minimalist”，体验不同的视觉效果：
国际化支持
组件支持i18n，您可以使用本地语言显示日期和UI文本：
<dev-to author="madsstoumann" i18n='{"es":{"more":"más...","reactions":"reacciones"}}' lang="es"></dev-to>自定义样式
可以使用CSS ::part() 选择器自定义组件的各个部分：
dev-to::part(avatar) {
border-radius: 50%;
border: 2px solid currentcolor;
}
dev-to::part(cover) {
filter: sepia(0.3);
}
dev-to::part(more) {
background: #ff00ff;
}阴影DOM
如果需要直接操作组件样式（无阴影DOM和部件），只需添加noshadow属性：
<dev-to author="madsstoumann" noshadow></dev-to>
演示
您可以通过以下链接体验演示： https://www.php.cn/link/df8a6aa94e8b9dafafb2761be5c197c5
安装
您可以通过npm安装组件：
npm i @browser.style/dev-to
或者直接从浏览器中使用。
欢迎提出您的宝贵意见！
封面图片来自Markus Spiske。
以上就是非官方的Devto嵌入Web组件的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
999
收藏
