docsify 本地部署完整配置模板 || 将md文件放到网页上展示

最新推荐文章于 2025-11-11 08:37:19 发布

原创最新推荐文章于 2025-11-11 08:37:19 发布 · 727 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#docsify #html #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」
自动打开浏览器，直接预览文档网站

最终展示效果如下:
在这里插入图片描述