贝凡官网

浙江贝凡网络科技公司官方网站，包含公司介绍、产品中心（工贸企业/智慧养老/智慧工地/明厨亮灶/智慧学校）、本地化定制与生态合作等页面。

技术栈

框架：Astro 5.x（静态站点生成）
样式：Tailwind CSS 3.x
语言：TypeScript
图标：FontAwesome 4.7.0
包管理器：pnpm
图片处理：Sharp（用于转 WebP）

快速开始

pnpm install
pnpm dev

本地访问：http://localhost:4321

常用命令

# 开发
pnpm dev
pnpm start

# 构建与预览
pnpm build
pnpm preview

# Astro 原生命令
pnpm astro <command>

项目结构

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
页面通过 <Layout activeNav="..."> 控制高亮

图片规范与 Sharp 用法

图片规范

页面图片优先使用 .webp
静态资源统一放在 public/img/<module>/
代码中使用绝对路径引用，如：/img/kitchen/hero.webp

使用 Sharp 转 WebP

安装（如未安装）：

pnpm add -D sharp

单目录批量转换示例（PNG/JPG/JPEG → WebP）：

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 成品。

质量检查

pnpm build

pnpm build 会先执行 astro check 再产出静态文件到 dist/。

部署

本项目为纯静态站点，可部署到任意静态托管平台（Vercel、Netlify、Cloudflare Pages、OSS/COS 等）。

3.4 KiB Raw Blame History Unescape Escape