# wiki_viewer

**Repository Path**: WhiteTing/wiki_viewer

## Basic Information

- **Project Name**: wiki_viewer
- **Description**: wiki_all
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-27
- **Last Updated**: 2026-03-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Wiki Viewer

一个简单的 Markdown Wiki 查看器，可在浏览器中运行，支持文件树导航和内部链接。

## 功能特性

- 📁 文件树导航侧边栏
- 📄 Markdown 渲染和语法高亮
- 🔗 内部 Wiki 链接
- 🎨 简洁响应式设计
- 💻 代码块高亮

## 环境要求

- Node.js (v16 或更高版本)
- npm、yarn 或 pnpm

## 安装步骤

1. 安装依赖：
```bash
npm install
# 或者
yarn install
# 或者
pnpm install
```

2. 启动开发服务器：
```bash
npm run dev
# 或者
yarn dev
# 或者
pnpm dev
```

3. 在浏览器中打开 `http://localhost:3000`

## 添加 Wiki 内容

1. 将 Markdown 文件放入 `public/wiki/` 目录
2. 更新 `public/wiki/files.json` 以包含你的文件
3. 创建子目录进行组织

## 项目结构

```
wiki-viewer/
├── public/
│   └── wiki/
│       ├── files.json          # 文件树配置
│       ├── index.md            # 首页
│       ├── getting-started.md  # 示例页面
│       └── examples/           # 子目录
│           └── index.md
├── src/
│   ├── components/
│   │   ├── Home.vue
│   │   ├── Sidebar.vue
│   │   ├── FileNode.vue
│   │   └── MarkdownViewer.vue
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
└── vite.config.js
```

## files.json 格式

```json
[
  {
    "name": "首页",
    "path": "index.md",
    "isDirectory": false
  },
  {
    "name": "示例",
    "path": "examples",
    "isDirectory": true,
    "children": [
      {
        "name": "示例页面",
        "path": "examples/index.md",
        "isDirectory": false
      }
    ]
  }
]
```

## 内部链接

使用相对路径链接到其他 Wiki 页面：

```markdown
[入门指南](getting-started.md)
[API 文档](api.md)
[示例](examples/index.md)
```

## 生产环境构建

```bash
npm run build
npm run preview
```

## 调试方法

### 检查依赖

```bash
# 检查 Node.js 和 npm 是否已安装
node --version
npm --version
```

### 清除缓存

```bash
# 清除 npm 缓
npm cache clean --force

# 删除 node_modules 并重新安装
rm -rf node_modules package-lock.json
npm install
```

### 常见问题

**问题：`npm: command not found`**
- Node.js 未安装。使用以下方法之一安装：
  - macOS: `brew install node`
  - 从官网下载: https://nodejs.org/

**问题：端口 3000 已被占用**
- 在 `vite.config.js` 中更改端口：
```javascript
server: {
  port: 3001  // 改为可用端口
}
```

**问题：文件无法加载**
- 检查浏览器控制台是否有错误
- 确保 Markdown 文件在 `public/wiki/` 目录中
- 验证 `files.json` 中的文件路径是否正确

### 开发技巧

- 使用浏览器开发者工具 (F12) 检查元素和调试
- 检查 Network 标签页查看失败的文件加载
- 推荐安装 Vue DevTools 扩展进行 Vue 调试

## 技术栈

- Vue 3
- Vite
- Vue Router
- markdown-it
- highlight.js