简介
在开发前端应用时，我们通常会用到各种依赖库和工具。而 npm 就是用来帮助我们管理这些依赖的工具。其中，@gerhobbelt/markdown-it-wikilinks 是一个非常有用的 npm 包，它可以帮助我们在 Markdown 文本中添加指向 Wiki 页面的链接。
安装
要使用 @gerhobbelt/markdown-it-wikilinks，我们首先需要安装它。在终端中输入以下命令：
npm install @gerhobbelt/markdown-it-wikilinks
使用
1. 引入包
在需要使用 @gerhobbelt/markdown-it-wikilinks 的文件中，我们需要先引入这个包：
const wikiLinks = require('@gerhobbelt/markdown-it-wikilinks'); const md = require('markdown-it')().use(wikiLinks({ /* options */ }));
2. 添加 Wiki 页面链接
接着，在我们要添加链接的 Markdown 文本中，可以使用以下格式来创建指向 Wiki 页面的链接：
[[pageName|可选显示文字]]
其中，pageName 是 Wiki 页面的名称或者路径，可选显示文字 是我们要显示的链接文字。如果不填写此参数，链接文字将默认为 pageName。
比如，我们需要在 Markdown 文本中添加一条指向 /docs/react 的链接，可以这样写：
请查看文档： [[/docs/react|React 文档]]
3. 配置参数
@gerhobbelt/markdown-it-wikilinks 提供了一些可配置的参数，可以通过传递一个对象来进行配置。
默认的配置参数如下：
-- -------------------- ---- ------- - -------- --- -- ------------------------------------------- --------------------- ------ -- -------------- ------------ ------------------- -- ---------- -------------------- ----- -- ----------- ----------------- --- -- ---------------------- ---------- --- -- ---- --- -------------- ------------------ ----------- -- --- ----- -- -------- ---- -- ---- --- --- -- -------------------------- ---- -- -------------- -展开代码
其中，baseURL 和 generatePageNameFromLabel 可以直接在 use() 中传递。
比如：
md.use(wikiLinks, { baseURL: '/docs', generatePageNameFromLabel: (label) => label.toLowerCase().replace(/\s+/, '-') });
这个配置将使链接默认指向 /docs/page-name，而且链接显示文字中的空格将被自动转化为短横线。
示例代码
以下是一个使用 @gerhobbelt/markdown-it-wikilinks 的示例：
-- -------------------- ---- ------- ----- --------- - --------------------------------------------- ----- -- - ---------------------------------------- -------- -------- -------------------------- ------- -- ---------------------------------- ---- ---- ----- ---------- - - - --------- ---- ------- ---- -- -- ------- -- ----- --- ------------------------------------- -------- -- ----- ---- ----- ---- -------- ------ ----- --- -------------- ----------------------------------------- ------------ ---- ---- ---- -- ---- -- ------- ---- -- --- ---- ----- --- -------- ----- -- --- --------- ---- -- ----- ----- ------ ------------- ------- ----- ---- - ---------------------- -- -- ---- --展开代码
以上代码将生成以下 HTML 代码：
<h1>Wiki-Like Link Example</h1> <p>This is an example of using the <code>@gerhobbelt/markdown-it-wikilinks</code> package.</p> <p>To learn more about this package, please visit our documentation: <a href="/docs/markdown-it-wikilinks" class="internal">Markdown-It Wikilinks</a>.</p> <p>It's also easy to link to another page in the same Wiki. For example, click on the following link to learn about React:</p> <p><a href="/docs/react" class="internal">React Doc</a></p>
这样，我们就可以在 Markdown 文本中方便地添加指向 Wiki 页面的链接了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f02c870403f2923b035bd97
