# 贝凡官网 浙江贝凡网络科技公司官方网站,包含公司介绍、产品中心(工贸企业/智慧养老/智慧工地/明厨亮灶/智慧学校)、本地化定制与生态合作等页面。 ## 技术栈 - **框架**:Astro 5.x(静态站点生成) - **样式**:Tailwind CSS 3.x - **语言**:TypeScript - **图标**:FontAwesome 4.7.0 - **包管理器**:pnpm - **图片处理**:Sharp(用于转 WebP) ## 快速开始 ```bash pnpm install pnpm dev ``` 本地访问:`http://localhost:4321` ## 常用命令 ```bash # 开发 pnpm dev pnpm start # 构建与预览 pnpm build pnpm preview # Astro 原生命令 pnpm astro ``` ## 项目结构 ```text beifan.cn/ ├── src/ │ ├── layouts/ │ │ └── Layout.astro │ ├── pages/ │ │ ├── index.astro │ │ ├── qazk/index.astro │ │ ├── elderly/index.astro │ │ ├── construction/index.astro │ │ ├── kitchen/index.astro │ │ ├── education/index.astro │ │ ├── customization/index.astro │ │ ├── partnership/index.astro │ │ └── intro/*/index.astro │ ├── components/ │ │ └── sections/ │ └── styles/styles.css ├── public/ │ ├── img/ │ │ ├── elderly/ │ │ ├── construction/ │ │ ├── kitchen/ │ │ ├── education/ │ │ └── ... │ └── js/script.js ├── astro.config.mjs ├── tailwind.config.mjs └── package.json ``` ## 主要页面 - `/`:公司介绍首页 - `/qazk`:工贸企业(企安智控) - `/elderly`:智慧养老 - `/construction`:智慧工地 - `/kitchen`:明厨亮灶 - `/education`:智慧学校 - `/customization`:本地化定制 - `/partnership`:生态合作 - `/intro/*`:产品/能力介绍子页面 ## 导航说明 导航由 `src/layouts/Layout.astro` 统一管理: - 一级:公司介绍 / 产品中心 / 本地化定制 / 生态合作 - 产品中心二级:`qazk`、`elderly`、`construction`、`kitchen`、`education` - 页面通过 `` 控制高亮 ## 图片规范与 Sharp 用法 ### 图片规范 - 页面图片优先使用 `.webp` - 静态资源统一放在 `public/img//` - 代码中使用绝对路径引用,如:`/img/kitchen/hero.webp` ### 使用 Sharp 转 WebP 安装(如未安装): ```bash pnpm add -D sharp ``` 单目录批量转换示例(PNG/JPG/JPEG → WebP): ```bash node --input-type=module -e "import sharp from 'sharp'; import { promises as fs } from 'node:fs'; import path from 'node:path'; const dir='public/img/kitchen'; const files=await fs.readdir(dir); for (const name of files){ const ext=path.extname(name).toLowerCase(); if(!['.png','.jpg','.jpeg'].includes(ext)) continue; const src=path.join(dir,name); const out=path.join(dir,path.basename(name,ext)+'.webp'); await sharp(src).webp({quality:82,effort:6}).toFile(out);}" ``` 建议:设计源文件保留在仓库外或素材目录中,不直接放 `public/img/`,提交前只保留 WebP 成品。 ## 质量检查 ```bash pnpm build ``` `pnpm build` 会先执行 `astro check` 再产出静态文件到 `dist/`。 ## 部署 本项目为纯静态站点,可部署到任意静态托管平台(Vercel、Netlify、Cloudflare Pages、OSS/COS 等)。 --- © 浙江贝凡网络科技有限公司