# SiC
**Repository Path**: meditative/SiC
## Basic Information
- **Project Name**: SiC
- **Description**: SiC
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 2
- **Created**: 2026-08-06
- **Last Updated**: 2026-08-11
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 上海铂米瑞光电技术有限公司 — 碳化硅镜片网站
这是一个为上海铂米瑞光电技术有限公司建设的 bilingual（中英双语）企业官网，主打碳化硅（SiC）镜片、光学窗口与衬底产品。网站采用纯静态 HTML/CSS/JavaScript 构建，无需后端或构建工具，可直接部署到任何静态服务器、对象存储或小程序 web-view。
---
## 项目结构
```
碳化硅镜片/
├── index.html # 中文首页
├── en/index.html # 英文首页
├── products/ # 产品中心（中文）
│ ├── index.html
│ ├── sic-lens.html # 碳化硅镜片详情
│ ├── sic-window.html # 碳化硅光学窗口详情
│ └── sic-substrate.html # 碳化硅衬底详情
├── applications/ # 应用领域（中文）
│ ├── index.html
│ ├── aerospace.html
│ ├── laser.html
│ └── semiconductor.html
├── support/ # 技术支持（中文）
│ ├── index.html
│ ├── coating.html
│ └── customization.html
├── news/ # 新闻中心（中文）
│ ├── index.html
│ └── article-template.html
├── about/ # 关于我们（中文）
│ └── index.html
├── contact/ # 联系我们（中文）
│ └── index.html
├── en/ # 英文版（结构与中文一致）
│ ├── products/
│ ├── applications/
│ ├── support/
│ ├── news/
│ ├── about/
│ └── contact/
├── assets/
│ ├── css/ # 样式文件
│ │ ├── main.css # 变量、重置、基础字体
│ │ ├── layout.css # 头部、导航、页脚、容器
│ │ ├── components.css # 按钮、卡片、表格、下拉
│ │ ├── pages.css # 页面级样式
│ │ └── responsive.css # 响应式断点
│ ├── js/ # 脚本文件
│ │ ├── main.js # 入口
│ │ ├── i18n.js # 语言检测与切换
│ │ ├── nav.js # 导航交互
│ │ └── components.js # 公共组件初始化
│ ├── data/ # 双语数据
│ │ ├── zh.json # 中文字典
│ │ ├── en.json # 英文字典
│ │ └── products.json # 产品参数参考数据
│ └── images/ # 图片资源
│ ├── logo.svg # 占位 Logo
│ ├── hero/
│ ├── products/
│ └── icons/
├── sitemap.xml # 站点地图（含 hreflang）
├── robots.txt # 搜索引擎爬虫规则
└── README.md # 本文件
```
---
## 技术栈
- **HTML5** + **原生 JavaScript（ES6 modules）**
- **CSS 自定义属性** + **移动优先响应式**
- **JSON 字典** 实现中英双语（`data-i18n` 属性绑定）
- 无构建工具、无框架依赖
---
## 本地预览
由于使用了 ES6 模块，直接用 `file://` 打开页面可能会因 CORS 限制导致 JS 无法加载。建议使用本地静态服务器：
### 方法 1：Python（推荐）
```bash
cd "C:\Users\HUAWEI\Desktop\碳化硅镜片"
python -m http.server 8000
```
然后浏览器访问 `http://localhost:8000`
### 方法 2：Node.js
```bash
cd "C:\Users\HUAWEI\Desktop\碳化硅镜片"
npx serve
```
### 方法 3：VS Code Live Server 插件
在 VS Code 中打开项目文件夹，右键 `index.html` → "Open with Live Server"。
---
## 双语机制
- 中文页面放在根目录，英文页面放在 `/en/` 目录。
- 语言字典文件：`assets/data/zh.json` 和 `assets/data/en.json`。
- HTML 元素通过 `data-i18n="key.path"` 绑定文本，`data-i18n-attr="attribute"` 绑定属性（如 placeholder、alt）。
- 点击导航栏右侧 `中 / EN` 切换语言时，会自动跳转到对应语种的页面。
- 语言偏好保存在浏览器 `localStorage` 中。
### 修改文案
1. 打开 `assets/data/zh.json` 或 `assets/data/en.json`。
2. 找到对应键值并修改。
3. 刷新页面即可生效。
### 新增页面文案
1. 在 `zh.json` 和 `en.json` 中添加相同结构的键。
2. 在 HTML 元素上添加 `data-i18n="your.new.key"`。
---
## 需要替换的占位内容
以下内容为占位符，正式上线前请务必替换：
### 1. 公司联系信息
位置：`assets/data/zh.json` 和 `assets/data/en.json` 中的 `footer` 部分。
- `footer.phone_value`：电话
- `footer.email_value`：邮箱
- `footer.address_value`：地址
- 各页面页脚底部的 ICP 备案号（当前为 `沪ICP备XXXXXXXX号（请替换）`）
### 2. 公司 Logo
位置：`assets/images/logo.svg`
当前为一个简单的 SVG 占位 Logo。建议替换为贵司正式 Logo，保持宽度 180px、高度 40px 左右。
### 3. 产品图片
位置：`assets/images/products/`
当前产品详情页和首页产品卡片使用占位图。请按以下命名放入实际产品照片：
- `sic-lens-main.jpg` — 碳化硅镜片主图
- `sic-window-main.jpg` — 碳化硅光学窗口主图
- `sic-substrate-main.jpg` — 碳化硅衬底主图
然后在对应 HTML 文件中，将 `.gallery-placeholder` 替换为 `![]()
` 标签引用上述图片。
### 4. 公司实景 / 关于我们图片
位置：`about/index.html` 中的 `.about-story__image` 占位区。
### 5. Open Graph 图片
位置：`assets/images/og-cover.jpg`
当前被 `sitemap.xml` 和各页面 `` 引用，但文件尚未创建。建议制作一张 1200×630 像素的封面图。
### 6. 产品参数
当前产品详情页中的参数为行业典型值，仅供参考。请根据实际产品规格修改：
- `products/sic-lens.html`
- `products/sic-window.html`
- `products/sic-substrate.html`
- 对应的英文页面 `en/products/*.html`
### 7. 新闻内容
`news/index.html` 和 `news/article-template.html` 为新闻模板。发布真实新闻时，可复制 `article-template.html` 并重命名为有意义的文件名（如 `news-2024-12-15.html`），然后替换内容。
---
## SEO 优化项
网站已内置以下 SEO 措施：
- 每个页面独立的 ``、`<meta name="description">`、`<meta name="keywords">`
- 语义化 HTML（`<header>`、`<nav>`、`<main>`、`<article>`、`<footer>`）
- `canonical` 规范链接
- `hreflang` 多语言声明（页面 `<head>` + `sitemap.xml`）
- Open Graph / Twitter Card 元数据
- Schema.org `Organization` JSON-LD（首页）
- Schema.org `Product` JSON-LD（产品详情页）
- `sitemap.xml` 站点地图
- `robots.txt` 允许全部抓取
上线前请检查：
1. 所有 `https://www.bomirui.com` 是否替换为真实域名。
2. `sitemap.xml` 中的 `lastmod` 日期是否需要更新。
3. 各页面 `<title>` 和 `<meta name="description">` 是否符合实际业务。
---
## 响应式断点
| 断点 | 目标设备 |
|---|---|
| < 576px | 手机竖屏 |
| 576px – 767px | 手机横屏 / 小平板 |
| 768px – 1023px | 平板 |
| ≥ 1024px | 桌面 |
| ≥ 1200px | 大屏桌面 |
---
## 后续扩展建议
### 添加新产品
1. 在 `products/` 和 `en/products/` 下创建新的产品详情页。
2. 在 `products/index.html` 和 `en/products/index.html` 中添加产品卡片。
3. 在 `assets/data/zh.json` 和 `assets/data/en.json` 中添加产品相关文案。
4. 更新首页 `index.html` 和 `en/index.html` 中的产品预览区。
5. 更新 `sitemap.xml`。
### 扩展导航下拉
当前产品中心下拉已包含：
- 按产品类型：碳化硅镜片、碳化硅光学窗口、碳化硅衬底
- 按应用领域：航空航天、激光系统、半导体
后续可在各页面的 `<nav>` 中直接添加 `<li>` 和 `<a>` 链接，并同步更新 `zh.json` / `en.json` 中的 `nav` 文案。
### 添加新语言
如需增加其他语言，可复制 `en/` 目录并重命名（如 `jp/`），再创建对应的 `assets/data/jp.json`，并修改 `i18n.js` 中的语言判断逻辑。
---
## 浏览器兼容性
- Chrome / Edge（最新 2 个版本）
- Firefox（最新 2 个版本）
- Safari（最新 2 个版本）
- 移动端浏览器：iOS Safari、Android Chrome
- 微信小程序 / 支付宝小程序 web-view
---
## 许可证
本网站代码为上海铂米瑞光电技术有限公司定制开发，未经授权请勿用于其他商业用途。
---
如有任何问题或需要进一步定制，请联系开发团队。