ZenNav AI 主题功能介绍

让我为您详细介绍这个现代化 WordPress 导航主题的所有功能：

🎨 核心功能

1. 现代扁平化设计

• 左侧边栏导航 (240px 宽度)
  • 可折叠至 72px 的图标模式
  • 流畅的展开/收起动画
  • 基于分类的导航结构
  • 悬停和激活状态效果
  • 图标 + 文字双重显示

2. 智能搜索系统

• 三种搜索引擎:
  • 百度搜索
  • Google 搜索
  • AI 搜索 (OpenAI 支持)
• 标签页切换界面
• AI 快速提示词:
  • “帮我写一份周报”
  • “解释量子纠缠”
  • “生成 Python 爬虫代码”
  • “推荐几部科幻电影”
• 实时搜索结果显示
• 打字机效果展示 AI 回答

3. AI 搜索集成 🤖

• WordPress 后台设置页面
  • 位置: 仪表盘 → ZenNav AI
  • 可配置 OpenAI API 密钥
  • 可自定义 API URL
  • 可选择 AI 模型 (默认 GPT-3.5)
• AJAX 实时请求
  • 无需刷新页面
  • 安全的服务器端代理
  • 完善的错误处理
• 智能响应展示
  • 流畅的打字机动画
  • 格式化的文本显示
  • 加载状态提示

4. 网址导航展示

• 卡片式布局
  • 分类展示网站链接
  • 自动获取网站图标
  • 支持外部链接
  • 悬停动画效果
• 网格自适应
  • 自动调整列数
  • 响应式设计
  • 统一的卡片大小

📱 响应式设计

桌面端 (> 768px)

• 固定侧边栏导航
• 多列卡片网格
• 完整的搜索功能
• 所有动画效果

移动端 (≤ 768px)

• 汉堡菜单图标
• 侧边栏覆盖显示
• 全宽搜索栏
• 单列卡片布局
• 点击外部关闭侧边栏

🎯 用户体验功能

1. 微交互动画

• 按钮悬停放大效果 (1.05x)
• 卡片悬停上浮效果 (-4px)
• 搜索框聚焦阴影
• 侧边栏平滑过渡 (0.3s)
• 标签页切换动画

2. 无障碍支持

• 键盘导航支持
• ARIA 标签
• 明确的焦点状态
• 语义化 HTML5 结构

3. 性能优化

• 图片懒加载支持
• CSS 变量统一管理
• 最小化的 JavaScript
• GPU 加速动画

⚙️ 后台管理功能

WordPress 集成

• 主题设置页面
  • AI API 配置
  • 搜索引擎管理
  • 外观自定义
• 内容管理
  • 通过分类组织链接
  • 自定义字段支持 (

    url)

  • 特色图片支持
  • 摘要显示

开发者友好

• 模板部件系统
• 钩子 (Hook) 支持
• 可扩展的架构
• 详细的代码注释

🎨 设计特性

视觉元素

• 配色方案:

  • 主色: #2F80ED (蓝色)
  • 背景: #F7FAFF (浅灰蓝)
  • 卡片: #FFFFFF (白色)
  • 文本: #111827 (深灰)

• 圆角设计:

  • 按钮: 10px
  • 卡片: 12px
  • 导航项: 8px
  • 提示词: 20px

• 阴影效果:

  • 卡片悬停阴影
  • 搜索框聚焦阴影
  • 移动端侧边栏阴影

字体系统

• 优先使用 Inter、SF Pro
• 中文: PingFang SC、Microsoft YaHei
• 标题粗细: 600
• 正文粗细: 400

🔧 技术特性

前端技术

• 原生 JavaScript (无依赖)
• CSS3 动画
• Flexbox + Grid 布局
• Feather Icons 图标库

后端功能

• WordPress AJAX API
• 安全的数据验证
• wp_remote_post API 调用
• 设置 API 集成

浏览器兼容

• ✅ Chrome/Edge (最新版)
• ✅ Firefox (最新版)
• ✅ Safari (最新版)
• ✅ 移动浏览器 (iOS/Android)

📦 主题文件结构