最近我重新探索了dev.to api，惊喜地发现它无需api密钥即可使用！这意味着您可以轻松地将文章嵌入到任何地方（例如您的个人博客）,而无需担心密钥安全问题。您可以通过指定作者或文章id来获取文章列表或单篇文章。为此，我开发了一个web组件，方便您获取文章列表或单篇文章。让我们从“列表模式”开始：
<code class="html"><dev-to author="madsstoumann" itemsperpage="10" links="internal" theme="classic"></dev-to></code>
效果如下：
请注意theme和links属性。
目前支持三种主题（您可以轻松添加更多）：
- Minimalist
- Classic
- Modern
links属性可以设置为“internal”或“external”。前者会在组件内直接打开文章，后者则在新标签页中打开dev.to上的文章。
接下来，我们来看一下“文章模式”： 如果只需要直接显示文章，无需显示列表，可以使用“文章模式”：
<code class="html"><dev-to article="2014104" theme="classic"></dev-to></code>
您可以将主题更改为“Modern”或“Minimalist”，体验不同的视觉效果：
国际化支持
组件支持i18n，您可以使用本地语言显示日期和UI文本：
<code class="html"><dev-to author="madsstoumann" i18n='{"es":{"more":"más...","reactions":"reacciones"}}' lang="es"></dev-to></code>
自定义样式
可以使用CSS ::part() 选择器自定义组件的各个部分：
<code class="css">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;
}</code>
阴影DOM
如果需要直接操作组件样式（无阴影DOM和部件），只需添加noshadow属性：
<code class="html"><dev-to author="madsstoumann" noshadow></dev-to></code>
演示
您可以通过以下链接体验演示： https://www.php.cn/link/df8a6aa94e8b9dafafb2761be5c197c5
安装
您可以通过npm安装组件：
<code class="bash">npm i @browser.style/dev-to</code>
或者直接从浏览器中使用。
欢迎提出您的宝贵意见！
封面图片来自Markus Spiske。
