当你从公司接手了一个上世纪的网站，发现它不仅设计过时，而且功能也不符合现代用户的需求，它像一个小巷门口的小超市和一个大宗化工B2B平台的之间的差距不是一星半点。我展开了对比研究，开始了整站的重建工作。
技术选型
考虑主营产品23种，每种对应了落地页，还有新闻列表，也对应了新闻详情，使用古老的HTML+CSS+JS手写显然不合适。我选择使用Astro框架。Astro的组件化和静态站点生成特性，使得网站性能优越，加载速度快，用户体验良好，同时在实现多语言支持方面也表现出色。
如下是我的工程目录：
project/
├─ README.md
├─ package.json
├─ src/
│ ├─ api/ // 接口相关代码
│ ├─ assets/ // 静态资源
│ ├─ components/ // 公共组件
│ ├─ config/ // 多语言配置
│ ├─ data/ // 产品数据
| | ├─ import/ // 进口产品数据
| | ├─ export/ // 出口产品数据
│ | ├─ catalog // 产品目录数据
│ ├─ i18n/ // 多语言配置
│ | ├─ en/ // 英文配置
│ | ├─ ru/ // 俄文配置
│ | ├─ es/ // 西班牙文配置
│ ├─ layout/ // 布局组件
│ ├─ pages/ // 页面组件
│ ├─ utils/ // 工具函数
│ ├─ news/ // 新闻数据
│ ├─ style/ // 样式文件
/
访问链接查看最终呈现效果：Yishun Chemical
技术选型
考虑主营产品23种，每种对应了落地页，还有新闻列表，也对应了新闻详情，使用古老的HTML+CSS+JS手写显然不合适。我选择使用Astro框架。Astro的组件化和静态站点生成特性，使得网站性能优越，加载速度快，用户体验良好，同时在实现多语言支持方面也表现出色。
如下是我的工程目录：
访问链接查看最终呈现效果：Yishun Chemical