新增页面

详细介绍如何在 IndieShow 项目中添加新页面，包括页面创建、路由配置、组件开发和国际化支持等内容

在本教程中，你将学习如何在 IndieShow 项目中创建新页面。我们提供了三种方式来创建页面，你可以根据需求选择合适的方式。

第一种：创建数据源为 markdown 内容的页面

这是最简单的方式，适合大多数情况。使用这种方式创建的页面会自动包含网站的通用页眉（Header）和页脚（Footer），并且从 content/{language} 文件夹下读取不同语言的内容。

创建页面文件

在 pages 目录下创建一个新的 .vue 文件。例如，如果要创建"关于我们"页面，可以创建 about.vue。

编写页面内容

将以下代码复制到你的新页面文件中：

pages/about.vue

<script setup lang="ts">
import { useSeo } from "~/composables/useSeo"
 
// 设置页面的 SEO 信息
const { updatePageSeo } = useSeo()
updatePageSeo("about")  // 参数填写你的页面名称
</script>
 
<template>
  <div class="flex min-h-screen flex-col">
    <main class="container mx-auto px-4 py-16 sm:px-6 lg:px-8">
      <MarkdownContent page="about" />  {/* 这里的 page 参数要和上面的 updatePageSeo 参数保持一致 */}
    </main>
  </div>
</template>

剩余步骤，可以查看更新网站协议

第二种：创建复用默认布局的页面

这种方式适合需要自定义页面内容，同时又想保持网站统一外观的情况。页面会自动使用 layouts/default.vue 中定义的布局，包含统一的页眉（Header）和页脚（Footer）。线上实操可以查看pricing分支下的这个提交记录fc4dac6。

创建页面文件

在 pages 目录下创建一个新的 .vue 文件，例如 about.vue：

pages/about.vue

<script setup lang="ts">
import { useI18n } from "#imports"
import { useSeo } from "~/composables/useSeo"
 
const { t } = useI18n()  // 用于多语言支持
const { updatePageSeo } = useSeo()
 
// 更新页面的 SEO 信息
updatePageSeo("about")
</script>
 
<template>
  <div class="flex min-h-screen flex-col">
    <main class="flex-1">
      <div class="container mx-auto px-4 py-16 sm:px-6 lg:px-8">
        <!-- 页面内容 -->
        <UIScrollAnimation animation="fade-up" :duration="1200">
          <div class="mx-auto max-w-3xl text-center">
            <h1 class="bg-gradient-to-r from-primary-600 via-primary-500 to-primary-600 bg-clip-text text-4xl font-extrabold tracking-tight text-transparent sm:text-5xl">
              {{ t('about.title') }}
            </h1>
            <p class="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
              {{ t('about.description') }}
            </p>
            
            <!-- 在这里添加你的自定义内容 -->
            <div class="mt-12">
              <!-- 你可以添加更多的组件、图片或其他内容 -->
            </div>
          </div>
        </UIScrollAnimation>
      </div>
    </main>
  </div>
</template>

添加多语言支持

在 i18n/locales 目录下的语言文件中添加对应的翻译：

i18n/locales/zh/about.json

{
  "title": "关于我们",
  "description": "这是一个示例页面"
}

i18n/locales/en/about.json

{
  "title": "About Us",
  "description": "This is an example page"
}

新增 about 页面的 SEO 配置

在 i18n 配置文件中添加新页面的翻译：

i18n/locales/zh/seo.json

{
  "about": {
    "title": "关于我们",
    "description": "了解我们的团队、使命和愿景，以及我们如何为用户提供优质的服务和解决方案",
    "keywords": "关于我们, 公司简介, 团队介绍, 企业文化, 发展历程, 使命愿景"
  }
  // ... 其他页面配置
}

i18n/locales/en/seo.json

{
  "about": {
    "title": "About Us",
    "description": "Learn about our team, mission, and vision, and how we provide quality services and solutions to our users",
    "keywords": "about us, company profile, team introduction, corporate culture, development history, mission vision"
  }
  // ... other page configurations
}

确保在所有语言文件中都添加对应的翻译内容，保持翻译的专业性和一致性。

添加导航栏多语言支持

在 i18n/locales 目录下的导航栏文件中添加对应的翻译：

i18n/locales/zh/nav.json

{  
  "works": "我的作品",
  "follow": "关注我们",
  "group": "用户交流",
  "language": "语言"
  "about": "关于", 
}

i18n/locales/en/nav.json

{  
  "works": "My Works",
  "follow": "Follow Us",
  "group": "Group",
  "language": "Language",
  "about": "About",  
}

加载语言文件

在 i18n/locales 目录下的index.ts文件中添加对应的翻译：

i18n/locales/zh/index.ts

import { defineI18nLocale } from "#i18n"
 
export default defineI18nLocale(async () => ({
  site: await import("./site.json").then(r => r.default),
  components: await import("./components.json").then(r => r.default),
  cta: await import("./cta.json").then(r => r.default),
  features: await import("./features.json").then(r => r.default),
  footer: await import("./footer.json").then(r => r.default),
  nav: await import("./nav.json").then(r => r.default),
  showcase: await import("./showcase.json").then(r => r.default),
  seo: await import("./seo.json").then(r => r.default),
  group: await import("./group.json").then(r => r.default),
  about: await import("./about.json").then(r => r.default), 
}))

i18n/locales/en/index.ts

import { defineI18nLocale } from "#i18n"
 
export default defineI18nLocale(async () => ({
  site: await import("./site.json").then(r => r.default),
  components: await import("./components.json").then(r => r.default),
  cta: await import("./cta.json").then(r => r.default),
  features: await import("./features.json").then(r => r.default),
  footer: await import("./footer.json").then(r => r.default),
  nav: await import("./nav.json").then(r => r.default),
  showcase: await import("./showcase.json").then(r => r.default),
  seo: await import("./seo.json").then(r => r.default),
  group: await import("./group.json").then(r => r.default),
  about: await import("./about.json").then(r => r.default), 
}))

更新 SEO 配置

在 SEO 配置文件中添加新页面：

config/seo.ts

export const seoConfig = {
  pages: ["home", "privacy", "terms", "group", "sales"], 
  pages: ["home", "privacy", "terms", "group", "sales", "about"],  
  // 其他配置保持不变...
};

导航栏新增菜单

在导航栏配置文件中添加新页面：

config/nav.ts

export const NAV_LINKS = [  
  { text: "nav.works", href: "#showcase" },
  { text: "nav.follow", href: "#cta" },
  { text: "nav.group", href: "/group" },
  { text: "nav.about", href: "/about" }, 
] as const

页面样式说明

这个模板已经包含了：

渐变标题效果
响应式布局
暗色主题支持
页面滚动动画
自适应容器宽度

你可以根据需要修改样式类名或添加新的样式。

第三种：创建自定义布局的页面

如果你需要一个与其他页面不同的特殊布局，可以使用这种方式。

创建自定义布局

在 layouts 目录下创建一个新的布局文件，例如 custom.vue
在这个文件中定义你想要的特殊布局

在页面中使用自定义布局

pages/special-page.vue

<script setup>
// 指定使用自定义布局
definePageMeta({
  layout: 'custom'  // 这里的 'custom' 对应 layouts/custom.vue
})
</script>
 
<template>
  <!-- 你的页面内容 -->
</template>

布局系统说明

IndieShow 使用了一个智能的布局系统，它的核心是 layouts/default.vue 文件。这个文件就像一个"页面模板"，定义了所有页面都会用到的通用结构，比如：

顶部的导航栏（Header）
底部的页脚（Footer）
页面的整体布局结构

除非你特别指定使用其他布局，否则所有新页面都会自动使用这个默认布局。

下一步

IDE 配置

配置开发环境获得最佳开发体验

代码规范

配置项目的代码规范和格式化工具

更新维护

了解如何保持项目依赖的更新和维护

站点配置

配置网站的基本信息和设置