项目简介link

Doccure Documentation 是一个医疗预约管理系统模板的在线文档站点，支持展示 HTML、Laravel、Angular、Vue 四种技术版本。页面内置明暗主题切换、响应式侧边栏、代码高亮等功能，适合作为多框架产品文档的参考模板。

技术栈link

• Bootstrap 5 — CSS 框架（使用 data-bs-theme 属性支持主题切换）
• jQuery 3.6+ — DOM 操作与插件初始化
• Prism.js — 代码语法高亮
• Feather Icons — 图标库
• Isotope — 瀑布流布局
• Magnific Popup — 图片灯箱
• Zoom — 图片鼠标悬停放大

项目结构link

doccure-205/
├── documentation/
│   ├── index.html          # 入口页，四框架导航卡片
│   ├── html.html           # HTML 版文档
│   ├── laravel.html        # Laravel 版文档
│   ├── angular.html        # Angular 版文档
│   ├── vue.html            # Vue 版文档
│   └── assets/
│       ├── css/
│       │   ├── bootstrap.min.css
│       │   ├── style.css         # 主样式，含 Poppins/Nunito 字体
│       │   ├── prism.css         # 代码高亮
│       │   └── dark.css          # 暗色主题
│       ├── js/
│       │   ├── main.js           # 核心逻辑：侧边栏、主题切换、响应式
│       │   ├── prism.js
│       │   ├── feather.min.js
│       │   └── jquery.*.min.js
│       └── plugins/
└── angular.zip / html.zip / laravel.zip / vue.zip

核心文件说明link

• documentation/index.html — 文档站点入口，展示四个技术版本的导航卡片
• documentation/assets/css/style.css — 主样式表，定义布局、字体、排版及明暗主题变量
• documentation/assets/css/prism.css — Prism 代码高亮主题样式
• documentation/assets/js/main.js — 核心交互逻辑，包括侧边栏显隐、主题切换、移动端检测（mobileAndTabletCheck）及 localStorage 状态持久化
• documentation/html.html — 纯 HTML 版本的完整文档页面（含代码示例展示）

快速开始link

本项目为纯静态站点，无需构建：

1. 直接在浏览器中打开 documentation/index.html；或
2. 本地启动任意 HTTP 服务器（如 python -m http.server）后访问。

使用建议link

main.js 中的 hideShowSidebar 函数根据屏幕宽度（sSize.min: 576, sSize.max: 992）和 sidebar 模式（sb-default / sb-collapse）动态控制侧边栏行为，修改前建议先理解该函数的判断逻辑，以免破坏响应式体验。暗色主题可通过 data-bs-theme-tool 属性触发，切换状态会写入 localStorage。