Rumah >hujung hadapan web >tutorial js >Dev.to menyiarkan ke blog Docusaurus (nodej automasi)

Dev.to menyiarkan ke blog Docusaurus (nodej automasi)

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-11-09 02:02:02432semak imbas

Dev.to post to Docusaurus blog (automation nodejs)

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:

  1. Ia mengambil artikel anda yang diterbitkan daripada dev.to menggunakan API.
  2. Untuk setiap artikel, ia menukar metadata kepada perkara hadapan yang serasi dengan Docusaurus.
  3. Ia menggabungkan perkara hadapan dengan kandungan Markdown artikel.
  4. Ia menyimpan setiap artikel sebagai fail Markdown yang berasingan dalam direktori blog.

Untuk menggunakan skrip ini:

  1. Ganti YOUR_DEV_TO_API_KEY dengan kunci dev.to API anda yang sebenar[1].
  2. Ganti YOUR_DEV_TO_USERNAME dengan nama pengguna dev.to anda.
  3. Jalankan skrip menggunakan nod convert.js.

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:

  1. Salin fail Markdown yang dijana daripada direktori blog ke direktori blog projek Docusaurus anda.
  2. Pastikan fail docusaurus.config.js anda mempunyai pemalam blog yang dikonfigurasikan dengan betul[1][3].

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn