Astrion 官网

Astrion（暂定名「星子」）的官方网站：面向用户的使用指南与面向开发者的设计原理解读。

线上地址：https://astrion.cyjai.com

仓库结构

demo/       站点根（部署到服务器的完整内容）
  index.html      主页（深空星空 + 演示区 iframe + 特色动画 + FAQ + 联系我）
  docs.html       文档站（前端渲染 content/ 下的 md）
  demo.html       演示区（真实前端壳 + Service Worker mock API）
  site-assets/    样式与脚本（含 i18n.js 中英字典、anim-*.js 特色动画模块）
  content/        文档正文（11 篇 markdown）
  mock/           演示区 mock 数据
  static/         产品前端真实构建产物（演示区用）
content/    文档文案源（与 demo/content/ 同步）

本地预览

cd demo
python3 -m http.server 8898

页面	地址
主页	http://127.0.0.1:8898/index.html
文档站	http://127.0.0.1:8898/docs.html

注意：演示区（demo.html）依赖 Service Worker mock API，必须通过 http(s) 访问（file:// 无效）；改动 demo.html/sw.js 后需 bump sw.js 中的 CACHE 版本号并硬刷新。

部署

bash deploy_website.sh   # rsync 到服务器 /var/www/astrion/（59.110.19.30）

技术要点

• 演示区 1:1 还原：demo/static/ 是主项目前端真实构建产物，Service Worker 拦截 /api/* 返回 mock 数据；iframe 内固定 1400×860 逻辑尺寸 + 外层 transform: scale() 等比缩放。
• 多语言：主页中英双语（data-i18n 标记 + site-assets/i18n.js 字典），跟随浏览器语言自动切换，页脚可手动切换；四个特色动画模块（anim-*.js）通过 T(zh,en) + setLocale() 支持双语。
• 特色动画：无边框无底融于星空；03 收盒用「裁切式 genie」——单个 SVG 元素每帧绘制 S 曲线 path（描边跟随轮廓），内容矢量不形变。