Helo Komuniti Dev!
Hari ini saya akan memberikan anda contoh program tentang cara menukar artikel dev.ke kepada blog Docusaurus. Contoh ini akan menggunakan Node.js untuk mengambil artikel daripada dev.to API dan membuat fail Markdown yang serasi dengan catatan blog Docusaurus.
Pertama, mari kita sediakan projek dan pasang kebergantungan yang diperlukan:
mkdir devto-to-docusaurus cd devto-to-docusaurus npm init -y npm install axios fs-extra front-matter
Sekarang, buat fail bernama convert.js dan tambah kod berikut:
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();
Begini cara skrip ini berfungsi:
Untuk menggunakan skrip ini:
Selepas menjalankan skrip, anda akan mendapati artikel dev.to anda ditukar kepada catatan blog yang serasi dengan Docusaurus dalam direktori blog[1][3].
Untuk menyepadukan siaran ini ke dalam tapak Docusaurus anda:
Berikut ialah contoh bagaimana docusaurus.config.js anda mungkin kelihatan:
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 };
Konfigurasi ini menyediakan pemalam blog untuk menggunakan direktori blog dan memaparkan semua siaran dalam bar sisi[1][3].
Ingat untuk menyesuaikan editUrl dan pilihan lain mengikut struktur dan pilihan projek anda. Dengan persediaan ini, artikel dev.to anda akan disepadukan dengan lancar ke dalam blog Docusaurus anda.
Petikan:
[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
Atas ialah kandungan terperinci Dev.to menyiarkan ke blog Docusaurus (nodej automasi). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!