[开源]🚀基于astro的导航站主题,轻松维护,零后端零数据库,支持Vercel和CF

Astro-xwnav:不仅仅是简单的链接集合,更是智能化的导航平台,让您只需专注内容管理而非技术细节,只需编辑一个数据文件,所有功能都会自动更新,极大简化维护工作,是低配甚至无服务器,个人自用或新手首次搭建导航站的首选

开源地址

:green_circle:Github:astro-xwnav
:green_circle:在线演示:https://dh.zywe.de

快速部署总共六步 (git拉取:right_arrow:安装环境:right_arrow:自定义网站:right_arrow:更新数据文件:right_arrow:执行脚本:right_arrow:部署)

:wireless: 第一次导入大量网址链接,借助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. :right_arrow:使用Cloudflare Pages或Vercel作为服务器

:green_circle:如何优雅上传服务器

  1. :right_arrow:使用Cloudflare Pages或Vercel作为服务器

vscode更新数据文件,执行图标下载脚本,同步更新到仓库即可

  1. :right_arrow:使用vps作为服务器

2.1:使用rsync,配置一键脚本上传

2.2:更新文件,执行脚本,构建,设置好nginx,压缩dist目录,上传后解压,每次更新删除服务器的dist,再传新的压缩包

:rainbow: 主要特点

  • :rocket: Astro快速加载:优化清晰,超轻量,性能卓越
  • :prohibited: 无需后端、无需数据库:纯静态,无任何运行依赖
  • :sunglasses: 隐藏链接地址:悬停在卡片,不显示链接地址
  • :label: 简洁直观的界面:分类清晰,操作便捷
  • :magnifying_glass_tilted_left: 智能搜索功能:快速查找您需要的网站
  • :paperclip: 双分类导航栏:主页横向导航+侧边导航
  • :page_with_curl: 卡片式网站展示:直观美观,一目了然
  • :counterclockwise_arrows_button: 自动化工作流:减少手动操作,提高效率
  • :first_quarter_moon: 暗色模式:智能切换暗色/亮色模式
  • :stopwatch: 快速返回顶部:一键回到顶部的便捷按钮
  • :camera_with_flash: 图片懒加载:提升加载速度和用户体验
  • :speaker_high_volume: 流畅的动画过渡:提升用户界面交互体验
  • :laptop: 智能顶部栏:上滑展出,下滑收缩不挡视野
  • :raising_hands: 人性化设计:搜索框,侧边栏可点空白处退出
  • :sun_behind_small_cloud: 实时天气显示:集成API实时获取当地天气
  • :bar_chart: 侧边栏统计功能:显示网站总数和分类统计信息
  • :artist_palette: 404页面:精美的像素风格404错误页面
  • :mobile_phone: 响应式布局:适配所有设备屏幕
  • :backhand_index_pointing_up: 手势交互支持:左滑打开侧边栏,支持触摸和鼠标拖拽
  • :key: 智能提示:左滑箭头提示,引导用户发现隐藏功能
  • :bullseye: 精准触控体验:40%屏幕区域触发,平衡易用性与误触
  • :floppy_disk: Island岛屿架构
    • 按需加载:动态组件独立渲染,提升加载速度
    • 静态首屏:首屏纯静态生成,并行加载交互组件
    • 延迟水合:交互元素延迟水合,减少首屏阻塞
    • 查询优先:搜索和导航操作优先渲染
    • 浏览器缓存:利用存储机制优化重复访问

:glowing_star: 独特优势

  • :robot: 自动化功能,让您只需专注于内容管理而非技术细节,只需修改一个数据文件(src/data/navLinks.js),所有功能都会自动更新,极大简化了维护工作

自动化功能

  • :framed_picture: 自动图标获取:添加新网站和新分类时无需手动下载图标,脚本自动获取并优化图标引用图标一条龙
  • :bookmark_tabs: 自动分类导航:侧边栏分类导航会根据数据文件自动更新,无需手动修改HTML
  • :magnifying_glass_tilted_right: 自动搜索索引:搜索功能会自动检测新增网站和分类,无需额外配置
  • :joker: 自动卡片生成:网站卡片布局会自动适应新增内容,保持一致的视觉效果
  • :artist_palette: 自动主题切换:根据用户系统配置自动切换暗色/亮色主题
  • :broom: 自动清理图标:图标管理脚本会自动清理未使用的图标文件,保持项目整洁
  • :mobile_phone: 自动响应式适配:无需编写额外代码,完美适配各种设备屏幕
  • :world_map: 自动生成站点地图:每次构建项目自动生成robots.txt和sitemap.xml
  • :memo: 自动SEO元数据:每次构建项目自动生成和管理SEO相关的元标签等等代码

:green_circle:自动生成的灯塔情况PageSpeed Insights

19 个赞

感谢分享 :xhj003:,可以部署在CF-pages上好评啊!

4 个赞

感谢分享

4 个赞

之前那个帖子,有评论希望不使用vps,马上加了这个支持 :xhj15:

3 个赞

:xhj19:

2 个赞

如何优雅上传服务器

  1. 使用Cloudflare Pages或Vercel作为服务器

vscode更新数据文件,执行图标下载脚本,同步更新到仓库即可

  1. 使用vps作为服务器

2.1:使用rsync,配置一键脚本上传

2.2:更新,执行,构建,设置好nginx识别目录,压缩dist,上传解压,更新就删服务器的dist,再传新的压缩包

1 个赞

楼下试试

1 个赞

好的,我来试试 :xhj003:

1 个赞

整个UI很清爽,点赞:+1:

1 个赞

极简,干净,清晰 :xhj15:

1 个赞

好东西 收藏起来慢慢研究

1 个赞

好的,快速部署总共六步 (git拉取:right_arrow:安装环境:right_arrow:自定义网站:right_arrow:更新数据文件:right_arrow:执行脚本:right_arrow:部署),就是这么便捷 :xhj003:

1 个赞

Demo 打不开。

1 个赞

感谢反馈,最近rn小鸡网络波动挺频繁,现在看看应该好了,测试结束已经确定占用很低,到时候看看再换到其他服务器,会稳定一些 :xhj15:

1 个赞

能从书签导入更好啊

1 个赞

“从书签导入”确实非常实用,已经把它列入了开发计划中 :xhj003:

1 个赞

审美相当到位

1 个赞

哈哈,很高兴你喜欢,很大的鼓励 :xhj16:

2 个赞

就喜欢能部署在CF上

1 个赞

后来发现部署在 Cloudflare 上确实方便!也是根据之前大家反馈更新出来的@ keale

1 个赞