docsify 本地部署完整配置模板 || 将md文件放到网页上展示
以下是可直接复用的配置模板，包含核心文件、启动步骤和常用配置，新手可直接复制使用。
一、核心文件结构
先创建如下项目文件夹结构（无需复杂目录，基础结构即可）：
docsify-docs/ # 项目根文件夹（可自定义名称）
├─ index.html # 入口文件（核心配置）
├─ README.md # 首页内容（默认首页）
└─ docs/ # 可选：存放子文档（多级目录可嵌套）├─ 安装指南.md└─ 常见问题.md
二、关键文件完整代码
1. index.html（核心配置文件）
直接复制到项目根目录，可根据需求修改配置项：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的 Docsify 文档</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body><div id="app">加载中...</div><script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script><!-- 单独引入搜索插件（避免插件加载顺序问题） --><script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.min.js"></script><script>window.$docsify = {name: '我的博客',loadSidebar: true,loadNavbar: true, // 新增：开启顶部导航栏加载auto2top: true,themeColor: '#42b983',nav: [{ text: '首页', link: '/' },{ text: '安装指南', link: '/docs/安装指南' },{ text: '常见问题', link: '/docs/常见问题' },{ text: 'CSDN', link: 'https://blog.csdn.net/weixin_53197693' }],search: {placeholder: '搜索文档...',noData: '未找到结果',depth: 6}};
</script>
</body>
</html>
2. README.md（首页示例内容）
复制到项目根目录，替换为你的实际内容：
## 一、博主基础信息
| 信息类别 | 具体内容 |
|----------|----------|
| 昵称 | 码银 |
| 码龄 | 5年 |
| 加入CSDN时间 | 2020年12月3日 |
| 个人简介 | 记录编程相关知识，文章中难免有错误之处，还望海涵指正 |
| 博客定位 | 技术学习与实践分享，含源码、数据集及问题解决方案 |
3. 自定义侧边栏（可选，_sidebar.md）
若需自定义侧边栏结构，在项目根目录新建 _sidebar.md 文件：
- [首页](/)
- 基础指南- [安装步骤](docs/安装指南)- [环境要求](docs/环境要求)
- 问题解决- [常见问题](docs/常见问题)- [错误排查](docs/错误排查)
- [关于](about.md)
4、自定义顶部导航栏（可选，_navbar.md）
* [首页](/)
* [安装指南](docs/安装指南)
* [常见问题](docs/常见问题)
* [CSDN](https://blog.csdn.net/weixin_53197693)
三、本地部署启动步骤
1. 准备环境（二选一）
方式1：使用 Node.js + npm（推荐）
- 安装 Node.js（如何安装node）
- 安装本地服务器工具（任选一个）：
# 安装 live-server（启动后自动刷新） npm install -g live-server# 或安装 http-server（轻量无依赖） npm install -g http-server
方式2：使用 VS Code 插件（无需 Node.js）
点这里：vscode安装包2
- 安装 VS Code 插件：
Live Server（搜索插件名安装） - 右键点击项目根目录的
index.html，选择「Open with Live Server」即可启动
2. 启动本地服务器
方式1：命令行启动（已安装 live-server/http-server）
- 打开终端，进入项目根目录（如
cd /Users/xxx/docsify-docs） - 执行启动命令：
# 若安装了 live-server（推荐，自动刷新） live-server# 若安装了 http-server http-server -p 3000 # 3000 为端口号，可自定义 - 启动成功后，终端会显示访问地址（如
http://127.0.0.1:8080），浏览器打开即可预览
方式2：VS Code 插件启动
- 打开 VS Code，加载项目文件夹
- 右键点击
index.html文件，选择「Open with Live Server」 - 自动打开浏览器，直接预览文档网站
最终展示效果如下:
