IndieShow 图标IndieShow 使用文档

导航栏配置

配置 IndieShow 项目的导航栏，包括添加新导航项、配置多语言文本、修改样式和实现下拉菜单，以及移动端导航菜单的适配

自定义导航栏

IndieShow-Starter-Nuxt 提供了灵活易用的导航栏配置系统，让你可以根据需求自定义网站导航。

导航配置文件

导航栏的配置主要在 config/nav.ts 文件中管理：

config/nav.ts
/**
 * 导航链接配置
 */
export const NAV_LINKS = [
  { text: "nav.works", href: "#showcase" },
  { text: "nav.follow", href: "#cta" },
  { text: "nav.group", href: "/group" },
] as const

配置项说明

每个导航项包含以下属性：

  • text: 导航项显示的文本，使用 i18n 的键名实现多语言
  • href: 导航项链接的地址，可以是页面路径或锚点链接

添加新的导航项

要添加新的导航项，只需在 NAV_LINKS 数组中添加新的对象：

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

国际化导航文本

导航项的文本使用 i18n 键名，需要在语言文件中定义对应的翻译：

  1. 在 i18n/locales/zh/nav.json 中添加中文翻译：
i18n/locales/zh/nav.json
{
  "works": "作品展示",
  "follow": "关注我们",
  "group": "加入社区",
  "about": "关于我们"
}
  1. 在 i18n/locales/en/nav.json 中添加英文翻译：
i18n/locales/en/nav.json
{
  "works": "Showcase",
  "follow": "Follow Us",
  "group": "Join Community",
  "about": "About Us"
}

自定义导航栏样式

导航栏的样式定义在 components/layout/LayoutHeader.vue 组件中，你可以根据需要修改：

  1. 修改导航栏的背景色：
components/layout/LayoutHeader.vue
<template>
  <header class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
    <!-- 导航内容 -->
  </header>
</template>
  1. 修改导航项的样式：
components/layout/LayoutHeader.vue
<style>
.nav-link {
  @apply px-3 py-2 text-sm font-medium text-gray-700 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400;
}
</style>

添加下拉菜单

为了增加更复杂的导航结构，你可以扩展 nav.ts 的配置：

config/nav.ts
export const NAV_LINKS = [
  { text: "nav.works", href: "#showcase" },
  { 
    text: "nav.resources", 
    children: [
      { text: "nav.docs", href: "/docs" },
      { text: "nav.tutorials", href: "/tutorials" }
    ] 
  },
  { text: "nav.group", href: "/group" },
] as const

然后在 LayoutHeader.vue 中添加处理下拉菜单的逻辑和样式。

移动端导航菜单

IndieShow-Starter-Nuxt 已经内置了响应式导航菜单，在移动设备上会自动显示汉堡菜单按钮。如果你需要自定义移动端导航，可以修改 LayoutHeader.vue 中的相关代码：

components/layout/LayoutHeader.vue
<template>
  <!-- 桌面导航 -->
  <div class="hidden lg:flex">
    <!-- 导航链接 -->
  </div>
  
  <!-- 移动导航 -->
  <div class="lg:hidden">
    <button @click="toggleMobileMenu" class="mobile-menu-button">
      <!-- 汉堡菜单图标 -->
    </button>
    
    <!-- 移动菜单 -->
    <div v-if="mobileMenuOpen" class="mobile-menu">
      <!-- 移动导航链接 -->
    </div>
  </div>
</template>
 
<script setup>
const mobileMenuOpen = ref(false)
 
function toggleMobileMenu() {
  mobileMenuOpen.value = !mobileMenuOpen.value
}
</script>

下一步

打字机效果

配置网站的打字机动画效果

SEO 配置

优化网站的搜索引擎设置

国际化配置

配置多语言支持

法律条款

配置网站的法律相关页面

目录