### 如何使用
Markdown 创建
左侧导航菜单
为了实现基于
Markdown 的文档
生成带有
左侧导航栏的功能，可以采用多种方法和技术栈来完成这一目标。以下是几种常见的解决方案及其具体实现方式。
#### 方法一：利用 `
markdown-toc` 插件
生成 TOC 并调整布局
可以通过 JavaScript 库 `
markdown-toc` 自动
生成目录内容，并将其放置到 HTML 页面的
左侧作为导航栏[^2]。
此方法的核心在于：
1. 使用 `
markdown-toc` 提取
Markdown 文件中的标题结构。
2. 将提取的结果嵌入到 HTML 的特定区域（通常是 `<div>` 容器），并通过 CSS 调整其位置为
左侧固定悬浮。
代码示例如下：
```javascript
// 加载
markdown-toc 模块
var toc = require('
markdown-toc');
// 输入
Markdown 内容
let
markdownContent = '# One\n\n# Two';
//
生成 TOC
let generatedToc = toc(
markdownContent).content;
console.log(generatedToc);
// 输出结果类似于：
// - [One](#one)
// - [Two](#two)
// 动态插入到 DOM 中
document.getElementById('sidebar').innerHTML = generatedToc;
```
通过这种方式
生成的 TOC 可以被轻松定位到页面
左侧行列中，并配合滚动监听脚本增强用户体验。
---
#### 方法二：Vue.js 结合
Markdown 解析库动态渲染
如果项目环境允许引入前端框架 Vue.js，则可借助专门用于处理
Markdown 和
生成侧边导航的工具包，比如 `marked` 或者 `showdown` 来解析
Markdown 数据流，再结合自定义逻辑构建
左侧导航条目[^3]。
下面是一个简单的例子展示如何操作：
```html
<template>
<div id="app">
<!--
左侧导航 -->
<nav class="side-nav">{{ sideNav }}</nav>
<!-- 主要内容区 -->
<main>{{ parsed
Markdown }}</main>
</div>
</template>
<script>
import marked from 'marked'; // 引入 Marked 库
export default {
data() {
retu
rn {
rawMdText: "# Title H1\n## Subtitle H2",
sideNav: "",
parsed
Markdown: ""
};
},
mounted() {
this.parseAndGenerate();
},
methods: {
parseAndGenerate() {
const renderer = new marked.Renderer();
// 自定义 Header 处理函数捕获标题信息
renderer.heading = (text, level) => {
this.sideNav += `- ${"#".repeat(level)} [${text}](#${text.toLowerCase().replace(/\s+/g, "-")})\n`;
retu
rn "";
};
this.parsed
Markdown = marked(this.rawMdText, { renderer });
}
}
};
</script>
<style scoped>
.side-nav {
position: fixed;
top: 0;
left: 0;
width: 20%;
}
main {
margin-left: 25%; /* 给出足够的空间给左边栏 */
}
</style>
```
这种方法的优势在于高度灵活可控的同时还能保持良好的性能表现。
---
#### 方法三：静态站点
生成器支持内置功能
对于更复杂的场景或者长期维护需求较高的情况来说，推荐考虑一些成熟的 **静态网站
生成器** ，它们往往已经集成了类似功能模块可以直接调用而无需额外编码工作量太大。例如提到过的 VuePress 博客系统就是这样一个典型代表[^4]。
它不仅能够很好地兼容标准
Markdown 语法规则，还提供了丰富的主题定制选项以及插件扩展机制帮助开发者快速搭建具备专业外观风格的技术文档类网页应用。
配置样例片段如下所示：
```yaml
themeConfig:
sidebarDepth: 2 # 设置侧边栏深度，默认只显示 h2-h3 标签下的子项
```
只需简单几步设置即可开启自动化流程从而省去大量重复劳动成本。
---
### 总结
综上所述，无论是单纯依赖第三方 JS 库还是深入集成现代 Web 技术栈都可以有效达成预期目的即——让由
Markdown 编写的资料拥有直观易用的
左侧索引指引体系。选择何种途径取决于实际项目的复杂程度和个人偏好等因素综合考量之后决定最为合适的一种方案实施下去。
本文介绍了一种用于Markdown文件预览的插件安装步骤。主要包括：通过终端命令安装所需的tocmd插件；在Markdown文件所在目录下创建preview文件夹；最后通过命令指定单个文件或整个目录进行预览。
扫一扫
6576
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
