一个采用VuePress设计风格的Typecho文档主题，专为技术文档网站设计，提供清晰的导航结构和优秀的阅读体验。

• 🎨 VuePress风格设计 – 采用简洁现代的设计风格，深蓝色主色调配绿色强调色

• 📱 响应式布局 – 完美适配桌面、平板、手机等多种设备

• 🧭 清晰导航结构 – 顶部导航栏、面包屑导航、侧边栏目录

• 📖 自动目录生成 – 自动生成文章目录树，支持折叠展开

• 🔍 全站搜索功能 – 实时搜索文档内容，支持关键词高亮

• 🏷️ 文档分类管理 – 支持分类和标签系统，便于内容组织

• ⚡ 性能优化 – 轻量级设计，快速加载

• 后端: PHP (Typecho 1.2+)

• 前端: HTML5/CSS3/JavaScript (ES6+)

• 搜索功能: Fuse.js

• 字体: Inter (Google Fonts)

• Typecho: 1.2.0 或更高版本
• PHP: 7.4 或更高版本
• Web服务器: Apache/Nginx
• 浏览器: 支持现代浏览器（Chrome 60+, Firefox 60+, Safari 12+, Edge 79+）
• 字体: 注意给Typecho配置上伪静态并在后台开启地址重写功能 (必要)

1. 登录Typecho后台管理界面
2. 导航至 控制台 → 外观 → 设置外观
3. 在可用主题列表中找到 Vuecho
4. 点击 启用 按钮
5. 主题启用成功后，访问网站前台查看效果

启用主题后，进入 控制台 → 外观 → 设置外观 → 设置 进行详细配置：

• 站点Logo: 上传或输入Logo图片地址
• 顶栏标题: 自定义顶部导航栏显示的标题
• 首页Logo: 首页Hero区域显示的Logo图片地址

• GitHub地址: 输入GitHub主页地址
• 联系邮箱: 输入联系邮箱地址

• 搜索功能: 开启/关闭全站搜索功能
• 评论功能: 开启/关闭评论功能
• Font Awesome图标: 启用/禁用图标库

• 启用首页模式: 开启后首页显示项目介绍，关闭则显示文章列表
• 项目标题: 首页显示的项目标题
• 项目描述: 首页显示的项目描述信息
• 快速上手: 配置快速上手按钮的文字和链接
• 了解更多: 配置了解更多按钮的文字、链接和图标
• 项目特性: 配置项目特性列表

• 自定义CSS: 添加自定义样式代码
• 自定义JavaScript: 添加自定义脚本代码

1. 登录Typecho后台
2. 点击 撰写 → 撰写文章
3. 输入文章标题和内容
4. 选择合适的分类
5. 发布文章

在Typecho后台创建页面，主题会自动索引页面

• 设置合适的站点标题和描述
• 为每篇文章添加摘要
• 使用合理的标题层级结构
• 添加适当的内链

在主题设置的”自定义CSS”中添加你的样式：

/* 自定义主色调 */
:root {
    --primary-color: #3eaf7c;
    --primary-dark: #369870;
}

/* 自定义字体 */
body {
    font-family: 'Your Custom Font', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

docs/
├── assets/                 # 静态资源目录
│   ├── css/
│   │   ├── style.css      # 主样式文件

│   ├── js/
│   │   ├── main.js        # 主要JavaScript功能

│   │   └── fuse.min.js    # 搜索功能库
│   └── images/            # 图片资源
├── index.php              # 首页模板
├── post.php               # 文章页模板
├── page.php               # 页面模板
├── archive.php            # 归档页模板
├── header.php             # 页面头部
├── footer.php             # 页面底部
├── sidebar.php            # 侧边栏
├── comments.php           # 评论模板
├── functions.php          # 主题函数
└── README.md              # 说明文档

:root {
    --primary-color: #your-color;
    --primary-dark: #your-dark-color;
}

// 你的自定义JavaScript代码

:root {
    --primary-color: #your-color;
    --primary-dark: #your-dark-color;
}

type(scope): description

[optional body]

[optional footer]