Dev.to postet im Docusaurus-Blog (Automation NodeJS)

Hallo Dev-Community!
Heute stelle ich Ihnen ein programmatisches Beispiel für die Konvertierung von dev.to-Artikeln in einen Docusaurus-Blog zur Verfügung. In diesem Beispiel wird Node.js verwendet, um Artikel von der dev.to-API abzurufen und Markdown-Dateien zu erstellen, die mit Docusaurus-Blogbeiträgen kompatibel sind.

Zuerst richten wir das Projekt ein und installieren die notwendigen Abhängigkeiten:

mkdir devto-to-docusaurus
cd devto-to-docusaurus
npm init -y
npm install axios fs-extra front-matter

Erstellen Sie nun eine Datei mit dem Namen „convert.js“ und fügen Sie den folgenden Code hinzu:

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();

So funktioniert dieses Skript:

1. Es ruft Ihre veröffentlichten Artikel mithilfe der API von dev.to ab.
2. Für jeden Artikel werden die Metadaten in Docusaurus-kompatible Titeltexte konvertiert.
3. Es kombiniert die Titelseite mit dem Markdown-Inhalt des Artikels.
4. Es speichert jeden Artikel als separate Markdown-Datei im Blog-Verzeichnis.

So verwenden Sie dieses Skript:

1. Ersetzen Sie YOUR_DEV_TO_API_KEY durch Ihren tatsächlichen dev.to-API-Schlüssel[1].
2. Ersetzen Sie YOUR_DEV_TO_USERNAME durch Ihren dev.to-Benutzernamen.
3. Führen Sie das Skript mit dem Knoten „convert.js“ aus.

Nachdem Sie das Skript ausgeführt haben, finden Sie Ihre dev.to-Artikel, die in Docusaurus-kompatible Blog-Beiträge konvertiert wurden, im Blog-Verzeichnis[1][3].

So integrieren Sie diese Beiträge in Ihre Docusaurus-Site:

1. Kopieren Sie die generierten Markdown-Dateien aus dem Blog-Verzeichnis in das Blog-Verzeichnis Ihres Docusaurus-Projekts.
2. Stellen Sie sicher, dass in Ihrer Datei docusaurus.config.js das Blog-Plugin korrekt konfiguriert ist[1][3].

Hier ist ein Beispiel, wie Ihre docusaurus.config.js aussehen könnte:

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
};

Diese Konfiguration richtet das Blog-Plugin so ein, dass es das Blog-Verzeichnis verwendet und alle Beiträge in der Seitenleiste anzeigt[1][3].

Denken Sie daran, die editUrl und andere Optionen entsprechend Ihrer Projektstruktur und Ihren Vorlieben anzupassen. Mit diesem Setup werden Ihre dev.to-Artikel nahtlos in Ihren Docusaurus-Blog integriert.

Zitate:
[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

Das obige ist der detaillierte Inhalt vonDev.to postet im Docusaurus-Blog (Automation NodeJS). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!