Nav 导航主题

一款专为 WellCMS 设计的现代导航网站主题，参考 OneNav 设计风格，适合搭建导航站、工具站、资源站。

主题特色

🎨 现代化设计

• 简洁清爽的界面风格
• 卡片式网站展示布局
• 响应式设计，完美适配 PC/平板/手机
• 支持暗黑模式，一键切换

🔍 强大的搜索功能

• 全站搜索支持
• 实时搜索建议
• 按分类筛选搜索

📱 移动端优化

• 自适应布局
• 触控友好的交互设计
• 移动端专属导航菜单

🌙 暗黑模式

• CSS 变量驱动的主题切换
• localStorage 持久化存储用户偏好
• 平滑过渡动画

🖼️ 智能图标处理

• 自动获取网站 favicon
• 支持本地上传图标
• 支持远程图标 URL
• 无图标时显示默认图标

功能模块

首页

• Banner 大图展示
• 分类导航菜单
• 网站卡片瀑布流布局
• 侧边栏热门推荐

列表页

• 分类筛选
• 排序功能
• 分页导航

内容页

• 网站详情展示
• 访问统计
• 相关推荐
• 跳转链接（带来源追踪）

搜索页

• 关键词高亮
• 搜索结果分类展示

用户中心

• 登录/注册
• 个人信息管理
• 头像上传
• 密码修改
• 账号绑定
• 我的发布
• 待审核内容

提交网站

• 网站信息表单
• 图标上传
• 远程图标 URL
• 分类选择
• 审核流程

审核管理

• 待审核列表
• 通过/驳回操作
• 批量处理

技术特性

前端技术

• HTML5 + CSS3
• CSS 变量（主题切换）
• Flexbox + Grid 布局
• Font Awesome 图标库
• jQuery（兼容 WellCMS）

响应式断点

1. /* 大屏幕 */
2. @media (min-width: 1200px)
4. /* 平板 */
5. @media (max-width: 1024px)
7. /* 手机 */
8. @media (max-width: 768px)

CSS 变量

1. :root {
2. --primary: #3b82f6; /* 主色调 */
3. --primary-dark: #2563eb; /* 主色调深色 */
4. --bg: #f8fafc; /* 背景色 */
5. --bg-card: #ffffff; /* 卡片背景 */
6. --text: #1e293b; /* 文字颜色 */
7. --text-muted: #64748b; /* 次要文字 */
8. --border: #e2e8f0; /* 边框颜色 */
9. --radius: 8px; /* 圆角 */
10. }
12. /* 暗黑模式 */
13. [data-theme="dark"] {
14. --primary: #60a5fa;
15. --bg: #0f172a;
16. --bg-card: #1e293b;
17. --text: #f1f5f9;
18. --border: #334155;
19. }

安装说明

1. 将 nav 文件夹上传至 view/template/ 目录
2. 后台 → 主题 → 启用「导航主题」
3. 配置分类和网站内容

兼容性

• WellCMS 2.0+
• PHP 7.2+
• MySQL 5.7+
• 现代浏览器（Chrome、Firefox、Safari、Edge）

版本历史

v1.0.0

• 初始版本发布
• 基础导航功能
• 响应式布局
• 暗黑模式支持
• 友情链接模块
• 网站提交审核流程