Astro 项目命名规范最佳实践

一套让结构和 SEO 都更清晰的约定

在使用 Astro 搭建 企业官网、技术博客或内容站 时，
命名规范往往决定了项目后期的可维护性和搜索引擎表现。

在实际的 烟台网站制作、青岛网站制作 项目中，我们经常会遇到这些问题：

• 页面文件名随意，URL 不统一，影响 SEO
• 组件、数据、内容混在一起，新人难以上手
• 项目初期很清爽，半年后目录结构开始失控

这篇文章结合 Astro 官方推荐 + 企业级项目实战经验，
总结一套简单、主流、适合长期维护的 Astro 命名规范。

---

一、页面命名（src/pages）

✅ 推荐：kebab-case（短横线）

src/pages/
├─ index.astro
├─ about-us.astro
├─ contact.astro
├─ blog/
│  ├─ index.astro
│  └─ ddd-layer-guidelines.astro

为什么这样做？

• 文件名 ≈ URL，可读性极高
• 搜索引擎更容易理解页面语义
• 非常适合做 烟台网站制作、青岛网站制作 这类本地服务型页面

❌ 不推荐：

AboutUs.astro
aboutUs.astro

---

二、组件命名（src/components）

✅ 推荐：PascalCase

components/
├─ Header.astro
├─ Footer.astro
├─ HeroSection.astro
├─ FeatureGrid.astro

这样做的好处：

• 与 React / Vue / Svelte 生态一致
• 在企业官网中，一眼就能分清「页面」和「组件」
• 非常适合长期维护的网站制作项目

---

三、布局命名（src/layouts）

✅ 推荐：PascalCase + Layout 后缀

layouts/
├─ BaseLayout.astro
├─ BlogLayout.astro
├─ MarketingLayout.astro

在 青岛网站制作 / 烟台网站制作 项目中， 企业官网、博客、落地页往往布局不同，Layout 后缀非常清晰。

---

四、数据与配置命名（src/data）

✅ 推荐：camelCase.ts

data/
├─ whatWeDo.ts
├─ longTermValue.ts
├─ siteMetadata.ts

export const siteMetadata = {
  title: 'YOUKEZAN',
  description: '烟台网站制作 · 青岛网站制作 · 企业级软件定制'
};

原因：

• 数据本质是变量
• import 语义自然
• 非常适合企业官网的模块化内容管理

---

五、内容集合命名（src/content）

✅ 推荐：kebab-case（尤其是 MD / MDX）

content/
├─ blog/
│  ├─ astro-naming-best-practices.mdx
│  ├─ ddd-application-layer.mdx

在做 本地 SEO 内容（如：烟台网站制作解决方案、青岛网站制作经验）时：

• 文件名就是 URL
• 可控、稳定、利于长期排名

---

六、组件内变量与 Props 命名

Props 接口

export interface Props {
  title: string;
  description?: string;
}

普通变量

const pageTitle = '烟台网站制作解决方案';
const heroImageUrl = '/images/hero-web-development.webp';

常量

export const SITE_TITLE = 'YOUKEZAN';
export const SITE_DESCRIPTION = '烟台网站制作 / 青岛网站制作 / 企业数字化解决方案';

---

七、样式与静态资源

CSS 文件

styles/
├─ global.css
├─ marketing-theme.css

图片资源

public/images/
├─ hero-yantai-web-design.webp
├─ hero-qingdao-web-development.webp

建议：

• 图片文件名直接体现业务含义
• 对 烟台网站制作、青岛网站制作 页面非常友好

---

八、一套可直接执行的统一规范

pages        → kebab-case
components   → PascalCase
layouts      → PascalCase + Layout
data         → camelCase.ts
content      → kebab-case.mdx
variables    → camelCase
constants    → SCREAMING_SNAKE_CASE
images       → kebab-case

---

结语

命名规范不是为了“显得专业”， 而是为了让项目 能活得更久。

在 烟台网站制作、青岛网站制作 这类长期运营的网站中：

• URL 清晰 = 搜索引擎友好
• 结构稳定 = 后期成本可控
• 命名统一 = 团队协作顺畅

Astro 本身已经足够轻量， 好的命名规范，才是让它真正“长期可用”的关键。

命名不是小事， 它决定了一个网站能不能陪你跑三年、五年，甚至更久。

---