✨ 由 Google Gemini 深度优化与重构 一个无广告、极速、现代化的自适应浏览器起始页。

喵喵起始页 是一款基于 Vue 3 和 Tailwind CSS 打造的现代化单页应用 (SPA)。

本项目在原版基础上,由 Google Gemini 进行代码重构与 UI 升级,采用了流行的 玻璃拟态 (Glassmorphism) 视觉风格与 Bento Grid (便当盒) 布局,兼顾美观与性能,且保持了**"无需构建、开箱即用"**的极简特性。

• 🎨 现代设计:全站采用玻璃拟态风格,配合丝滑的过渡动画,视觉体验极佳。
• 🧩 便当盒布局:侧边栏采用 Bento Grid 布局,链接分类清晰,美观大方。
• ⚡️ 极速体验:移除 jQuery,重构为 Vue 3 + Tailwind (Runtime),代码更轻量,运行更流畅。
• 🛠 零门槛部署:No-Node.js environment required! 无需安装 npm,无需构建,单个 HTML 文件即可运行。
• 📱 完美适配:响应式设计,PC、平板、手机端均有完美表现。

本项目由 Google Gemini 基于以下技术栈进行重构:

• 核心逻辑: Vue.js 3 (Global Build) - 使用 Composition API 管理页面状态。
• 样式系统: Tailwind CSS (Runtime) - JIT 运行时编译,实现复杂的玻璃拟态效果。
• 图标库: FontAwesome 6 - 提供丰富的矢量图标支持。
• API 服务:
  • 一言 (Hitokoto): 每日一句接口。
  • 和风天气 (QWeather): 动态天气小组件。

本项目支持CDN 在线引用与本地化部署两种模式,您可以根据需求自由选择。

• 特点:文件体积最小,复制 HTML 代码即可运行。
• 依赖:需联网加载 unpkg 和 cdn.tailwindcss.com 资源。

使用方法: 直接下载项目中的 index.html,双击打开即可使用。

• 特点:依赖库本地化,断网可用,秒开,稳定性极高。
• 依赖:需下载静态资源包。

部署步骤:

1. 准备目录结构:

   / (项目根目录)
   ├── index.html # 主入口文件
   └── static/ # 本地静态资源库
    ├── js/ # 存放 vue.global.prod.js, tailwindcss.js
    ├── css/ # 存放 all.min.css
    └── webfonts/ # 存放字体文件 (FontAwesome)
   

2. 下载依赖资源:

   • Vue 3: 下载 vue.global.prod.js -> static/js/
   • Tailwind: 下载 tailwindcss.js -> static/js/ (需重命名)
   • FontAwesome: 下载 Release 包 -> 解压 css 和 webfonts 到 static/

3. 配置本地引用: 在 index.html 中将 CDN 链接替换为本地相对路径(源码中已包含相关注释)。

导航链接数据直接内嵌于 index.html 底部的 <script> 标签中,格式为 JSON。 Gemini 已为您将原版的所有链接数据完整迁移,您可以直接在代码中修改:

const links = [
 {
 "category": "热门推荐", 
 "icon": "fire",
 "items": [
 { "name": "DeepL翻译", "url": "...", "icon": "language", "color": "#1B1E25" },
 // ... 您可以在此自由添加更多链接
 ]
 },
 // ...
]

• Refactored & Optimized by (重构与优化): Google Gemini
  • 代码重构 (jQuery -> Vue 3)
  • UI 视觉升级 (Glassmorphism & Bento Grid)
  • 性能优化 (移除冗余依赖)
  • 文档编写
• Assets (资源): Font Awesome, Iconfont

License: MIT

"即使是微小的星光,也能照亮夜空。" —— Generated by Gemini