開發社區您好！
今天我將為您提供一個如何將 dev.to 文章轉換為 Docusaurus 部落格的程式設計範例。此範例將使用 Node.js 從 dev.to API 取得文章並建立與 Docusaurus 部落格文章相容的 Markdown 檔案。
首先，讓我們設定專案並安裝必要的依賴項：
mkdir devto-to-docusaurus cd devto-to-docusaurus npm init -y npm install axios fs-extra front-matter
現在，建立一個名為convert.js 的檔案並加入以下程式碼：
const axios = require('axios');
const fs = require('fs-extra');
const frontMatter = require('front-matter');
const path = require('path');
const DEV_TO_API_KEY = 'YOUR_DEV_TO_API_KEY';
const DEV_TO_USERNAME = 'YOUR_DEV_TO_USERNAME';
const OUTPUT_DIR = './blog';
async function fetchDevToArticles() {
const response = await axios.get(`https://dev.to/api/articles/me/published`, {
headers: { 'api-key': DEV_TO_API_KEY }
});
return response.data;
}
function convertToDocusaurusFrontMatter(article) {
const date = new Date(article.published_at);
return {
title: article.title,
authors: [DEV_TO_USERNAME],
tags: article.tag_list,
date: date.toISOString().split('T')[0],
slug: article.slug,
description: article.description,
};
}
async function convertArticleToMarkdown(article) {
const frontMatterContent = convertToDocusaurusFrontMatter(article);
const markdown = `---
${Object.entries(frontMatterContent).map(([key, value]) => `${key}: ${Array.isArray(value) ? `[${value.join(', ')}]` : value}`).join('\n')}
---
${article.body_markdown}`;
const fileName = `${frontMatterContent.date}-${article.slug}.md`;
const filePath = path.join(OUTPUT_DIR, fileName);
await fs.outputFile(filePath, markdown);
console.log(`Created: ${filePath}`);
}
async function main() {
try {
const articles = await fetchDevToArticles();
await fs.ensureDir(OUTPUT_DIR);
for (const article of articles) {
await convertArticleToMarkdown(article);
}
console.log('Conversion completed successfully!');
} catch (error) {
console.error('Error:', error.message);
}
}
main();
此腳本的工作原理如下：
要使用此腳本：
運行腳本後，您將在部落格目錄[1][3]中發現您的 dev.to 文章已轉換為與 Docusaurus 相容的部落格文章。
要將這些貼文整合到您的 Docusaurus 網站中：
以下是 docusaurus.config.js 的範例：
module.exports = {
// ... other config options
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
path: 'blog',
routeBasePath: 'blog',
blogTitle: 'My Dev.to Blog',
blogDescription: 'A collection of my dev.to articles',
blogSidebarCount: 'ALL',
blogSidebarTitle: 'All Blog Posts',
showReadingTime: true,
editUrl: 'https://github.com/yourusername/your-repo/edit/main/website/',
},
},
],
],
// ... other config options
};
此配置將部落格外掛程式設定為使用部落格目錄並在側邊欄中顯示所有貼文[1][3]。
請記住根據您的專案結構和偏好自訂 editUrl 和其他選項。透過此設置，您的 dev.to 文章將無縫整合到您的 Docusaurus 部落格中。
引用：
[1] https://docusaurus.io/docs/blog
[2] https://dev.to/dreamlogic/how-to-use-the-multi-blog-plugin-for-docusaurus-32a2
[3] https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog
[4] https://dev.to/tuenguyen2911_67/inspired-by-docusaurus-2cm6
[5] https://dev.to/dianaiminza/documentation-using-docusaurus-40g5
[6] https://dev.to/seanyasno/starting-a-new-blogging-journey-with-docusaurus-3aap
[7] https://dev.to/lo_victoria2666/build-beautiful-documentation-websites-with-docusaurus-8o2
[8] https://dev.to/katiel/exploring-the-code-behind-docusaurus-pbk
以上是Dev.to 發佈到 Docusaurus 部落格（自動化 Nodejs）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
