[开源]🚀基于astro的导航站主题，轻松维护,零后端零数据库,支持Vercel和CF
本帖最后由 zywe 于 2025-6-25 19:02 编辑`Astro-xwnav:不仅仅是简单的链接集合，更是智能化的导航平台，让您只需专注内容管理而非技术细节,只需编辑一个数据文件，所有功能都会自动更新，极大简化维护工作,是低配甚至无服务器,个人自用或新手首次搭建导航站的首选`
!(https://i.miji.bid/2025/06/21/8cef691facf27b5705f692962052a15b.png)
# 开源地址
🟢Github：(https://github.com/zywe03/astro-xwnav)
🟢在线演示：(https://dh.zywe.de/)
### 快速部署总共六步 (git拉取➡️安装环境➡️自定义网站➡️更新数据文件➡️执行脚本➡️部署)
### 🛜 第一次导入大量网址链接,借助AI快速生成网站导航内容(强烈建议)
**列出想要生成的网站所属分类,名称或网站**,短和长描述让AI生成，节省工作量
AI提示词:
```
统一分类opensource
网站：
github
baidu.com
谷歌
具体按照以下样式生成，使用“JavaScript风格格式+单引号”，不要添加"icon字段"和"[]""
{
id: 'github',
title: 'GitHub',
description: '全球最大的开源代码托管平台，支持 Git 版本控制，适用于协作开发、项目管理和自动化工作流，是开发者共享与协作的核心工具。'
shortDesc: '代码托管平台。',
url: 'https://github.com/',
category: 'opensource',
},
描述根据网站实际内容,专业,准确,介绍背景独特优势等等,不要太刻板,臃肿,重复
```
插入数据文件后
执行`npx tsx .\icon-system\0icon.ts`自动下载图标,即可完成,大量导航网站导入
## 如何优雅上传服务器
1. ➡️使用Cloudflare Pages或Vercel作为服务器
## 🟢如何优雅上传服务器
1. ➡️使用Cloudflare Pages或Vercel作为服务器
vscode更新数据文件，执行图标下载脚本，同步更新到仓库即可
2. ➡️使用vps作为服务器
2.1:使用`rsync`，配置一键脚本上传
2.2:更新文件，执行脚本，构建，设置好nginx，压缩dist目录，上传后解压，每次更新删除服务器的dist，再传新的压缩包
### 🌈 主要特点
- 🚀 **Astro快速加载**：优化清晰，超轻量，性能卓越
- 🚫 **无需后端、无需数据库**：纯静态，无任何运行依赖
- 🕶️ **隐藏链接地址**：悬停在卡片，不显示链接地址
- 🏷 **简洁直观的界面**：分类清晰，操作便捷
- 🔍 **智能搜索功能**：快速查找您需要的网站
- 📎 **双分类导航栏**：主页横向导航+侧边导航
- 📃 **卡片式网站展示**：直观美观，一目了然
- 🔄 **自动化工作流**：减少手动操作，提高效率
- 🌓 **暗色模式**：智能切换暗色/亮色模式
- ⏱️ **快速返回顶部**：一键回到顶部的便捷按钮
- 📸 **图片懒加载**：提升加载速度和用户体验
- 🔊 **流畅的动画过渡**：提升用户界面交互体验
- 💻 **智能顶部栏**：上滑展出，下滑收缩不挡视野
- 🙌 **人性化设计**：搜索框，侧边栏可点空白处退出
- 🌤️ **实时天气显示**：集成API实时获取当地天气
- 📊 **侧边栏统计功能**：显示网站总数和分类统计信息
- 🎨 **404页面**：精美的像素风格404错误页面
- 📱 **响应式布局**：适配所有设备屏幕
- 👆 **手势交互支持**：左滑打开侧边栏，支持触摸和鼠标拖拽
- 🔑 **智能提示**：左滑箭头提示，引导用户发现隐藏功能
- 🎯 **精准触控体验**：40%屏幕区域触发，平衡易用性与误触
- 💾 **Island岛屿架构**：
- **按需加载**：动态组件独立渲染，提升加载速度
- **静态首屏**：首屏纯静态生成，并行加载交互组件
- **延迟水合**：交互元素延迟水合，减少首屏阻塞
- **查询优先**：搜索和导航操作优先渲染
- **浏览器缓存**：利用存储机制优化重复访问
## 🌟 独特优势
- 🤖 自动化功能，让您只需专注于内容管理而非技术细节,只需修改一个数据文件（`src/data/navLinks.js`），所有功能都会自动更新，极大简化了维护工作
### 自动化功能
- **🖼️ 自动图标获取**：添加新网站和新分类时无需手动下载图标，脚本自动获取并优化图标引用图标一条龙
- **📑 自动分类导航**：侧边栏分类导航会根据数据文件自动更新，无需手动修改HTML
- **🔎 自动搜索索引**：搜索功能会自动检测新增网站和分类，无需额外配置
- **🃏 自动卡片生成**：网站卡片布局会自动适应新增内容，保持一致的视觉效果
- **🎨 自动主题切换**：根据用户系统配置自动切换暗色/亮色主题
- **🧹 自动清理图标**：图标管理脚本会自动清理未使用的图标文件，保持项目整洁
- **📱 自动响应式适配**：无需编写额外代码，完美适配各种设备屏幕
- **🗺️ 自动生成站点地图**：每次构建项目自动生成robots.txt和sitemap.xml
- **📝 自动SEO元数据**：每次构建项目自动生成和管理SEO相关的元标签等等代码
### 🟢自动生成的灯塔情况(https://pagespeed.web.dev/)
!(https://i.miji.bid/2025/06/11/4ceed547f12b6e7753b8f776090abed3.png) 不错，研究一下 本帖最后由 zywe 于 2025-6-13 18:31 编辑
heardic 发表于 2025-6-12 20:53
不错，研究一下
快速部署总共六步 (git拉取➡️安装环境➡️自定义网站➡️更新数据文件➡️执行脚本➡️部署),就是这么便捷 zywe 发表于 2025-6-12 21:03
可以看一下README.md写得够清晰吗?
这个不错啊，先mark一下 优秀啊，已star{tieba14} heardic 发表于 2025-6-12 22:16
这个不错啊，先mark一下
{tieba25}开发的动力 本帖最后由 zywe 于 2025-6-13 18:31 编辑
nicexi 发表于 2025-6-12 22:16
优秀啊，已star
{tieba25}都是开发的动力,快速部署总共六步 (git拉取➡️安装环境➡️自定义网站➡️更新数据文件➡️执行脚本➡️部署),就是这么便捷 ## 如何优雅上传服务器
1. 使用Cloudflare Pages或Vercel作为服务器
vscode更新数据文件，执行图标下载脚本，同步更新到仓库即可
2. 使用vps作为服务器
2.1:使用`rsync`，配置一键脚本上传
2.2:更新，执行，构建，设置好nginx识别目录，压缩dist，上传解压，更新就删服务器的dist，再传新的压缩包 2025/6/15:修复bug
在前置脚本区写的注释网站,会导致图标脚本错误识别,还有无法正确引用
已经修复,现在可以正确跳过注释,识别网站缺少图标情况,还有正确引用
有bug或者有想添加的功能,欢迎大家反馈在问题区,看到就会维护 先收藏一下 进来学习一下，感谢分享。有机会试验下。 感谢分享，先收藏，后面部署 2025/6/21 🎉 大更新 1.5.0
1. 更新优化若干个UI设计和操作逻辑(具体可在演示站点查看)
2. 新增
```
侧边栏色块统计站点分类和网站数量
主页导航栏小搜索框
搜索框支持curl+k快捷键唤出
手势交互支持：40%屏幕区域左滑打开侧边栏，支持触摸和鼠标拖拽
专属404页面
```
3. 优化搜索逻辑,基于网址和短描述和分类
4. 效果图
!(https://i.miji.bid/2025/06/21/8cef691facf27b5705f692962052a15b.png)
5. 设计了一个的404页面
!(https://i.miji.bid/2025/06/21/ef10d5915e5a2375802a1825a1382339.png)
## 更新指南(注意保存好数据文件的分类和网站数组)
Astro-xwnav 会不定期发布 新功能,修复BUG,维护功能
- 添加一次上游`git remote add upstream https://github.com/zywe03/astro-xwnav.git`
- 之后执行`git pull upstream main`即可更新(⚠️ 注意写好`.gitignore文件`避免覆盖数据)
页:
[1]