astrion-website/README.md

46 lines
2.0 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Astrion 官网
[Astrion](https://github.com/JOJO6618/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/ 同步)
```
## 本地预览
```bash
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
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描边跟随轮廓内容矢量不形变。