将 DEV.TO 引入您的博客
如果您在 Twitter 上关注软件或 Web 开发者,您可能已经注意到一些围绕博客平台 Medium 的抱怨。自从 Medium 采取“围墙花园”式的运营模式,并开始要求读者为免费内容支付月费以来,许多开发者都在考虑离开 Medium。目前,人们经常讨论两种选择:要么推出个人定制博客,要么将内容转移到另一个热门平台 dev.to(顺便说一下,您就是在这个平台上阅读本文的)。
两者都是可行的选择,而且鉴于静态网站生成器的普及,实现起来也很容易。虽然搭建博客可以让你更好地掌控内容呈现,但定期在 dev.to 上发布博文的好处也不容小觑。最直接的好处是可以接触到一个由志同道合的志同道合者组成的庞大社区,以及内置的审核评论、搜索引擎优化 (SEO) 功能,以及一个方便定位的读者群,方便你定位你的小众编程内容。dev.to 团队也非常透明地公开他们正在开发的内容和可以分享的内容,因此你始终可以了解未来的进展。
现在,我承认我自己对 dev.to 有点偏见。我一直关注着它的发展,从 Ben Halpern 刚起步的个人博客“The Practical Dev”到如今这个强大的平台和业务。如果可以的话,我很乐意投资它,因为我太喜欢这个平台了。总之,请谨慎对待我的推荐。我觉得这是一个创建内容并与社区分享的好地方,但我也明白在自己的网站上拥有自己的博客也可能有好处。希望这篇文章能告诉你如何两者兼得。
dev.to 一个备受期待但鲜为人知的功能是其于今年 5 月初发布的全新文章 API (Articles API)。这是一个简单易用的 REST API,允许经过身份验证的用户创建、更新和阅读文章。在更新我的个人博客时,我一直在尝试使用它来导入文章并将其显示在专用页面上,我觉得它有很多功能可以实现。我还没有深入研究目前所有可用的端点,但我会尝试介绍一下我目前已经实现的端点,并讨论一下我计划对尚未实现的端点进行改进。
我这里介绍的更多是实验性的策略,而非使用 DEV Articles API 和静态站点生成器的规范性方法。虽然代码来自我自己当前的实现,但我建议你将其视为一个建议。
在继续之前,先简单介绍一下假设和技术。
正如我之前提到的,我看到的很多讨论都提到了使用静态站点生成器来创建博客。因此,本文的其余部分假设您至少熟悉一种静态站点生成器工具。如果您不熟悉静态站点生成器,我强烈建议您先了解一下JAMStack架构,并探索一下Gatsby或Gridsome,然后再回来阅读本文。静态站点生成器是一个庞大的话题,但我发现它们很容易上手。我已经使用 Gridsome(一个使用 Vue.js 构建的静态站点生成器)实现了这一点,所以我的示例将以此为基础。据我所知,大多数静态站点生成器都具备实现此目标的基础架构,因此不必局限于任何一种特定工具。
显示 DEV 帖子列表
我们先从获取帖子列表开始。DEV Articles API 提供了一个 GET 接口,用于检索帖子,无需任何访问令牌。只需在 后面附加一个查询字符串即可https://dev.to/api/articles
。
https://dev.to/api/articles # Gets the top 30 "hottest" articles
https://dev.to/api/articles?tag=keyword# Gets articles tagged with "keyword"
https://dev.to/api/articles?username=thatUser # Gets articles written by thatUser
https://dev.to/api/articles?state=fresh # Gets "fresh" articles
https://dev.to/api/articles?state=rising # Gets "rising" articles
https://dev.to/api/articles?top=10 # Gets the top positively-reacted-to
# articles from the past 10 days
每个请求通常会将返回的帖子分页,每页最多 30 篇文章。获取接下来的 30 篇文章需要添加page
查询字符串,因此,查找过去 10 天内排名前 31 到第 60 篇文章的方法如下:
https://dev.to/api/articles?top=10&page=2
返回的数组中的每个 JSON 对象都包含符合查询字符串参数的每篇文章的元数据和前言。因此,如果我们https://dev.to/api/articles?username=cdvillard
在浏览器中使用,我们将返回一个包含以下内容的数组:
{
type_of: "article",
id: 90594,
title: "RTFC: Why patience is a developer's best friend",
description: "Patience as a virtue can mean a lot to a developer.",
cover_image: "https://res.cloudinary.com/practicaldev/image/fetch/s--Rqg-VarX--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/36d4a4hhje64epv8248d.jpg",
published_at: "2019-03-12T22:24:53.528Z",
tag_list: [
"edit",
"beginners",
"productivity",
"cdvillard"
],
slug: "rtfc-why-patience-is-a-developers-best-friend-l95",
path: "/cdvillard/rtfc-why-patience-is-a-developers-best-friend-l95",
url: "https://dev.to/cdvillard/rtfc-why-patience-is-a-developers-best-friend-l95",
canonical_url: "https://dev.to/cdvillard/rtfc-why-patience-is-a-developers-best-friend-l95",
comments_count: 0,
positive_reactions_count: 11,
published_timestamp: "2019-03-12T22:24:53Z",
user: {
name: "Charles D. Villard",
username: "cdvillard",
twitter_username: "cdvillard",
github_username: "cdvillard",
website_url: "http://cdvillard.github.io",
profile_image: "https://res.cloudinary.com/practicaldev/image/fetch/s--cX9wiyae--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/11581/9217c42f-218d-4a3c-b565-9a7e9b597cd1.jpg",
profile_image_90: "https://res.cloudinary.com/practicaldev/image/fetch/s--xG2hWmsO--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/11581/9217c42f-218d-4a3c-b565-9a7e9b597cd1.jpg"
}
}
如果您之前在 DEV 上发布过任何内容,我鼓励您尝试一下,看看您的内容是什么样的。
按照你选择的静态网站生成器的推荐做法,为你想要查询的文章创建一个 GET 请求。这可以使用 来完成XMLHttpRequest
,但我使用了 Axios 库,这样更方便一些。
// Starts a GET request to the DEV API
axios.get("https://dev.to/api/articles?username=cdvillard&tag=cdvillard")
.then(response => { // When a response is received
this.blogList = [...response.data]; // Add that to my Vue data
})
.catch(err => { // If something goes wrong
console.log(err); // Log it to the console
})
}
你可能注意到了,我在请求中不仅查询了我的用户名,还查询了一个……我的用户名的标签?为什么?因为 DEV API 会返回任何它认为是文章的内容。这包括所有带有“讨论”标签的帖子,这是 DEV 用来指示类似论坛帖子的方式。用我的用户名标记我想要显示的文章只是一种过滤掉这些帖子的变通方法。
将这些数据带到前端取决于特定静态站点生成器的架构,但一旦您学会了如何访问它,就可以对其进行迭代。毕竟,静态站点生成器的大部分功能在于能够快速构建和实现网站,这通常意味着可以使用循环创建迭代标记的附加功能。在 Gridsome 中,这意味着使用 Vue 的v-for
指令来调用数据并基于每个对象进行构建。
<!-- The v-for creates an instance of each "blog-preview" component
for each "blog" in the "blogList" we got earlier,
and attaches each property from the "blog" to an associated property
of the "blog-preview" component. Kind of like connect-the-dots.
If you want to learn more about Vue components and props, start with
the Vue documentation at https://vuejs.org/v2/guide/components.html -->
<blog-preview v-for="blog of blogList"
:key="blog.id"
:blog-title="blog.title"
:blog-description="blog.description"
:blog-link="blog.canonical_url"
></blog-preview>
如果一切顺利,你应该会看到你的文章列在你选择的页面上。如果你想了解我的具体操作方法,欢迎查看我的代码库。
显示 DEV 帖子
我们已经获得了文章和链接的列表,但实际上并没有显示一篇正式的文章。为此,我们需要调用另一个 API 端点,具体来说是调用id
我们想要查找的文章的 API 端点。这部分 API 的功能并不多,但您可以获得关于文章的所有信息,包括 DEV 的 Markdown 渲染器生成的 HTML。向 发出请求https://dev.to/api/articles/90594
将返回如下 JSON 对象:
{
type_of: "article",
id: 90594,
title: "RTFC: Why patience is a developer's best friend",
description: "Patience as a virtue can mean a lot to a developer.",
cover_image: "https://res.cloudinary.com/practicaldev/image/fetch/s--Rqg-VarX--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/36d4a4hhje64epv8248d.jpg",
readable_publish_date: "Mar 12",
social_image: "https://res.cloudinary.com/practicaldev/image/fetch/s--ENrc8Sz1--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/36d4a4hhje64epv8248d.jpg",
tag_list: "edit, beginners, productivity, cdvillard",
tags: [
"edit",
"beginners",
"productivity",
"cdvillard"
],
slug: "rtfc-why-patience-is-a-developers-best-friend-l95",
path: "/cdvillard/rtfc-why-patience-is-a-developers-best-friend-l95",
url: "https://dev.to/cdvillard/rtfc-why-patience-is-a-developers-best-friend-l95",
canonical_url: "https://dev.to/cdvillard/rtfc-why-patience-is-a-developers-best-friend-l95",
comments_count: 0,
positive_reactions_count: 11,
created_at: "2019-03-12T22:22:46Z",
edited_at: "2019-05-18T13:24:39Z",
crossposted_at: null,
published_at: "2019-03-12T22:24:53Z",
last_comment_at: "2019-03-12T22:24:53Z",
body_html: "<p>I'm typically not a patient person. It's a flaw I cop to a lot, and it's something I actively...",
ltag_style: [ ],
ltag_script: [ ],
user: {
name: "Charles D. Villard",
username: "cdvillard",
twitter_username: "cdvillard",
github_username: "cdvillard",
website_url: "http://cdvillard.github.io",
profile_image: "https://res.cloudinary.com/practicaldev/image/fetch/s--cX9wiyae--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/11581/9217c42f-218d-4a3c-b565-9a7e9b597cd1.jpg",
profile_image_90: "https://res.cloudinary.com/practicaldev/image/fetch/s--xG2hWmsO--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/11581/9217c42f-218d-4a3c-b565-9a7e9b597cd1.jpg"
}
}
该body_html
属性可能会引起您的注意,因为使用它可以减少格式化博客文章所带来的许多麻烦。
在 DEV 上发布和更新帖子
说到使用 API 向 DEV 发帖,我得承认自己还在学习如何使用。我还没有尝试过,但我觉得这才是 DEV API 真正发挥作用的地方。理论上,拥有静态生成网站的人可以在维护自己的网站的同时,向 dev.to 交叉发帖。具体如何操作,我会在另一篇博文中讨论,但考虑到我们是在 JAMStack 中工作,这很可能是无服务器函数发挥作用的地方。我将在接下来的几天里尝试使用 Netlify 和一个函数服务,看看如何实现这一点。
接下来去哪里
我希望您能从中领悟到 DEV API 的灵活性,以及在 DEV.to 上发布文章和创建自己的博客是多么容易。截至撰写本文时,我尚无法评论这样做对 SEO 的影响,但我预计不会有任何重大负面影响,从而增加流量找到您。我个人希望那些对此有想法的人能够加入社区,让社区变得更加精彩。越多人参与进来越好。
鏂囩珷鏉ユ簮锛�https://dev.to/cdvillard/bringing-dev-to-to-your-blog-27nb