Vitepress新建文章脚本实现自动化链接添加
最近在使用某云笔记写东西的时候,发现它有两个设备同时登录的限制,这让我觉得很不方便。于是,我就搭建了一个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:UsersmapLeDocumentsMyNote> npm run create > create > node scripts/create-post.js 请输入文章名:测试
执行后,就会看到提示信息:"20250425-测试.md"已经创建在docs文件夹下
以及新文章链接已添加到menu.json文件中
,实测非常好用。这样一来,以后在Vitepress中创建文章和添加链接就变得轻松多了,大大提高了写作效率。