IndieShow 图标IndieShow 使用文档

项目结构

介绍 IndieShow 项目的文件结构和目录组织，包括组件、配置、国际化、页面和静态资源等各个模块的详细说明和最佳实践

IndieShow 采用了清晰的目录结构，让你能够轻松找到和管理项目中的各个部分。下面我们来详细了解每个目录的作用：

目录结构总览

IndieShow/
├── components/     # 组件目录
├── composables/    # 组合式函数
├── config/         # 配置文件
├── content/        # 内容文件
├── i18n/          # 国际化文件
├── layouts/        # 布局模板
├── pages/         # 页面文件
├── plugins/        # 插件目录
├── public/        # 静态资源
└── types/         # 类型定义

详细说明

1. components 目录

组件目录采用分类管理，便于查找和维护：

BlockCTA.vue
BlockFeature.vue
BlockHero.vue
BlockShowcase.vue
CommonLocaleSwitch.vue
CommonThemeSwitch.vue
LayoutFooter.vue
LayoutHeader.vue
MarkdownContent.vue
UIBackToTop.vue
UILoadingBar.vue
UIQRCodeModal.vue
UIScrollAnimation.vue
UITypeWriter.vue

组件目录说明：

  • blocks/: 页面主要区块组件

    • BlockCTA.vue: 号召性动作区块
    • BlockFeature.vue: 特性展示区块
    • BlockHero.vue: 首屏展示区块
    • BlockShowcase.vue: 作品展示区块

  • common/: 通用功能组件

    • CommonLocaleSwitch.vue: 语言切换组件
    • CommonThemeSwitch.vue: 主题切换组件

  • layout/: 布局组件

    • LayoutFooter.vue: 页面底部组件
    • LayoutHeader.vue: 页面头部组件

  • markdown/: Markdown 相关组件

    • MarkdownContent.vue: Markdown 内容渲染组件

  • ui/: 基础 UI 组件

    • UIBackToTop.vue: 返回顶部组件
    • UILoadingBar.vue: 加载进度条组件
    • UIQRCodeModal.vue: 二维码弹窗组件
    • UIScrollAnimation.vue: 滚动动画组件
    • UITypeWriter.vue: 打字机效果组件

2. plugins 目录

统计和分析相关的插件：

analytics-baidu.client.ts
analytics-google.client.ts
analytics-openpanel.client.ts
analytics-plausible.client.ts
analytics-umami.client.ts

3. config 目录

配置文件目录：

nav.ts
seo.ts
showcase.ts
social.ts
theme.ts

4. composables 目录

组合式函数：

useLocale.ts
useMarkdown.ts
useSeo.ts

5. layouts 目录

布局模板：

default.vue

6. pages 目录

页面文件：

index.vue
group.vue
privacy.vue
sales.vue
terms.vue

7. i18n 目录

多语言支持文件：

components.json
cta.json
features.json
footer.json
group.json
index.ts
nav.json
seo.json
showcase.json
site.json

8. types 目录

TypeScript 类型定义：

index.ts

重要配置文件

项目根目录下的重要配置文件：

app.vue
app.config.ts
nuxt.config.ts
i18n.config.ts
eslint.config.js
tsconfig.json
package.json
Dockerfile

开发规范

1. 组件开发规范

  • 组件分类：

    • blocks/: 以 Block 前缀命名的页面区块组件
    • common/: 以 Common 前缀命名的通用组件
    • layout/: 以 Layout 前缀命名的布局组件
    • markdown/: 以 Markdown 前缀命名的内容渲染组件
    • ui/: 以 UI 前缀命名的基础组件

  • 命名规范：

    • 使用 PascalCase 命名组件
    • 组件名使用前缀区分类型（Block/Common/Layout/Markdown/UI）
    • 客户端组件添加 .client 后缀

2. 插件开发规范

  • 命名规范：

    • 使用 kebab-case 命名插件文件
    • 客户端插件添加 .client 后缀
    • 分析插件使用 analytics- 前缀

  • 类型定义：

    • 在 types/plugins 目录下定义插件类型
    • 使用 TypeScript 的模块扩展

3. 类型定义规范

  • 目录组织：
    • components/: 组件相关类型
    • config/: 配置相关类型
    • core/: 核心功能类型
    • i18n/: 国际化相关类型
    • plugins/: 插件相关类型

下一步

环境配置

配置项目的环境变量和参数

导航配置

自定义网站的导航菜单

打字机效果

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

SEO 配置

优化网站的搜索引擎设置

目录