Docusaurus ブログに投稿する開発者 (オートメーション Nodejs)

開発コミュニティこんにちは!
今日は、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. API を使用して、公開された記事を dev.to から取得します。
2. 記事ごとに、メタデータを Docusaurus 互換の前付に変換します。
3. 前付と記事の Markdown コンテンツを組み合わせます。
4. 各記事を個別の Markdown ファイルとしてブログ ディレクトリに保存します。

このスクリプトを使用するには:

1. YOUR_DEV_TO_API_KEY を実際の dev.to API キー [1] に置き換えます。
2. YOUR_DEV_TO_USERNAME を dev.to ユーザー名に置き換えます。
3. ノードconvert.jsを使用してスクリプトを実行します。

スクリプトを実行すると、dev.to 記事が Docusaurus 互換のブログ投稿に変換されて、ブログ ディレクトリ [1][3] にあることがわかります。

これらの投稿を Docusaurus サイトに統合するには:

1. 生成された Markdown ファイルをブログ ディレクトリから Docusaurus プロジェクトのブログ ディレクトリにコピーします。
2. docusaurus.config.js ファイルにブログ プラグインが正しく設定されていることを確認してください[1][3]。

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

以上がDocusaurus ブログに投稿する開発者 (オートメーション Nodejs)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。