Vitepress新建文章脚本实现自动化链接添加

文
章
目
录

• 一、前期准备：修改config.mts文件
• （一）创建menu.json文件
• （二）修改config.mts文件
• 二、核心步骤：编写脚本
• （一）创建脚本文件
• （二）获取用户输入并处理
• （三）创建文章文件
• （四）更新menu.json文件
• 三、使用脚本：配置package.json

最近在使用某云笔记写东西的时候，发现它有两个设备同时登录的限制，这让我觉得很不方便。于是，我就搭建了一个Vitepress环境，这样不仅能满足写作需求，还能直接把内容上传到Git，方便又高效。

但是在使用Vitepress的过程中，我发现每次创建新文章都要手动添加链接，这实在是太繁琐了。为了提高效率，我就自己写了个脚本，现在分享给大家，希望能给大家提供一些参考。

一、前期准备：修改config.mts文件

（一）创建menu.json文件

首先，要在/docs/.vitepress目录下创建一个menu.json文件。这个文件的作用是存储文章的标题和对应的链接信息。比如，我们先添加一条示例数据：

[
  {
    \"text\": \"20250418-测试\",
    \"link\": \"/20250418-测试\"
  }
]

这里的text就是文章显示在侧边栏的标题，link则是文章对应的链接路径。

（二）修改config.mts文件

接下来，需要修改/docs/.vitepress/config.mts文件。在这个文件中引入刚刚创建的menu.json，并配置侧边栏，让侧边栏能显示文章链接。具体代码如下：

import Menu from \"./menu.json\"

export default defineConfig({
    themeConfig: {
        sidebar: [
            {
                text: \'Examples\',
                items: Menu
            }
        ],
    }
})

这段代码的意思是，在Vitepress的主题配置中，设置侧边栏。其中，侧边栏的分组名称为“Examples”，里面的文章项就是从menu.json文件中读取的内容。这样，侧边栏就能根据menu.json的配置展示文章链接了。

二、核心步骤：编写脚本

（一）创建脚本文件

我们在项目的scripts目录下创建一个名为create-post.js的文件，这个文件就是实现自动化创建文章和链接的关键。下面来详细看看它的代码：

const fs = require(\'fs\');
const path = require(\'path\');
const readline = require(\'readline\');

这里引入了三个Node.js的核心模块。fs模块用于文件的读取和写入操作；path模块主要处理文件路径相关的问题；readline模块则用于和用户进行命令行交互，获取用户输入。

（二）获取用户输入并处理

// 获取命令行输入
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

rl.question(\'请输入文章名: \', (articleName) => {
    // 格式化日期和文章名
    const date = new Date();
    const year = date.getFullYear();
    let month = date.getMonth() + 1; // 月份从0开始，所以需要加1
    let day = date.getDate();

    // 确保月份和日期是两位数
    month = month < 10? \'0\' + month : month;
    day = day < 10? \'0\' + day : day;

    // 创建文件名
    const fileName = `${year}${month}${day}-${articleName}`;
    const filePath = path.join(__dirname, \'../docs\', `${fileName}.md`);

这段代码中，首先通过readline.createInterface创建了一个用于获取用户输入的接口。当用户在命令行输入文章名后，程序会获取当前日期，并对日期进行格式化处理，确保月份和日期都是两位数。然后，将格式化后的日期和用户输入的文章名组合成文件名，并通过path.join方法生成文件在项目中的完整路径。

（三）创建文章文件

// 写入空文件
fs.writeFile(filePath, \'\', (err) => {
    if (err) throw err;
    console.log(`\"${fileName}.md\" 已经创建在 docs 文件夹下.`);
});

这里使用fs.writeFile方法在指定路径下创建一个空的Markdown文件，文件名就是前面生成的fileName。如果创建过程中出现错误，就抛出错误信息；如果成功创建，会在命令行打印提示信息。

（四）更新menu.json文件

// 更新 menu.json 文件
const menuFilePath = path.join(__dirname, \'../docs/.vitepress/menu.json\');
fs.readFile(menuFilePath, \'utf8\', (err, data) => {
    if (err) throw err;

    const menuItems = JSON.parse(data);
    const newItem = { text: fileName, link: `/${fileName}` };

    // 添加新项
    menuItems.push(newItem);

    // 将更新后的数据写回到 menu.json 文件
    fs.writeFile(menuFilePath, JSON.stringify(menuItems, null, 2), \'utf8\', (err) => {
        if (err) throw err;
        console.log(`新文章链接已添加到 menu.json 文件中.`);
    });
});

rl.close();

这段代码的作用是更新menu.json文件。首先读取menu.json文件的内容，将其解析为JSON对象。然后创建一个新的文章项，包含文章标题和链接。接着把这个新项添加到menuItems数组中，最后再把更新后的menuItems数组写回到menu.json文件中。同样，如果在读取或写入过程中出现错误，就抛出错误信息；成功更新后，会在命令行打印提示。

三、使用脚本：配置package.json

最后一步，我们要在package.json文件中添加一条指令，方便在命令行中执行脚本。在package.json的scripts字段中添加如下代码：

{
  \"scripts\": {
    \"docs:dev\": \"vitepress dev docs\",
    \"docs:build\": \"vitepress build docs\",
    \"docs:preview\": \"vitepress preview docs\",
    \"create\": \"node scripts/create-post.js\"  // 新加指令
  },
  \"devDependencies\": {
    \"vitepress\": \"^1.6.3\"
  }
}

添加完这条指令后，在命令行中执行npm run create，就会按照脚本的逻辑提示你输入文章名，然后自动创建文章文件并更新menu.json文件，完成文章的创建和链接添加。比如在命令行输入：

PS C:\\Users\\mapLe\\Documents\\MyNote> npm run create
> create > node scripts/create-post.js 请输入文章名:测试

执行后，就会看到提示信息：\"20250425-测试.md\"已经创建在docs文件夹下以及新文章链接已添加到menu.json文件中 ，实测非常好用。这样一来，以后在Vitepress中创建文章和添加链接就变得轻松多了，大大提高了写作效率。