非官方的Devto嵌入Web组件

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《非官方的Devto嵌入Web组件》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

最近我重新探索了dev.to API，惊喜地发现它无需API密钥即可使用！这意味着您可以轻松地将文章嵌入到任何地方（例如您的个人博客）,而无需担心密钥安全问题。您可以通过指定作者或文章ID来获取文章列表或单篇文章。为此，我开发了一个Web组件，方便您获取文章列表或单篇文章。让我们从“列表模式”开始：

效果如下：

请注意theme和links属性。

目前支持三种主题（您可以轻松添加更多）：

• Minimalist
• Classic
• Modern

links属性可以设置为“internal”或“external”。前者会在组件内直接打开文章，后者则在新标签页中打开dev.to上的文章。

接下来，我们来看一下“文章模式”： 如果只需要直接显示文章，无需显示列表，可以使用“文章模式”：

您可以将主题更改为“Modern”或“Minimalist”，体验不同的视觉效果：

国际化支持

组件支持i18n，您可以使用本地语言显示日期和UI文本：

自定义样式

可以使用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属性：

演示

您可以通过以下链接体验演示： browser.style/ui/dev-to

安装

您可以通过npm安装组件：

npm i @browser.style/dev-to

或者直接从浏览器中使用。

欢迎提出您的宝贵意见！

封面图片来自Markus Spiske。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~