iFluxArt Docs

Hey，同学！这一篇教你如何把首页变得「与众不同」，展现出你的个人风格～ 🎨

📁 文件位置

Web 项目的首页主要由以下文件组成：

text

apps/web/src/app/
├── page.tsx              # 首页主页面
├── layout.tsx            # 布局（导航栏、底部）
└── components/           # 页面组件
    └── home/             # 首页专用组件

🎯 核心配置项

1. Hero 区域（大标题区）

在 page.tsx 中，你可以找到类似这样的配置：

typescript

const HERO_CONFIG = {
  title: '欢迎来到 iFluxArt',
  description: '你的个人内容管理平台',
  actions: [
    { text: '开始使用', link: '/docs/quick-start', variant: 'primary' },
    { text: '了解更多', link: '/docs/introduction', variant: 'secondary' },
  ],
};

为什么要这样设计？

Hero 区域是用户第一眼看到的内容，直接决定了「要不要继续看下去」。采用「标题 + 描述 + 行动按钮」的结构，是经过验证的最有效的信息传递方式。

💡 小技巧：标题控制在 10-20 字，描述控制在 30-50 字，效果最佳！

2. 精选内容

首页会展示来自 Blog 的最新文章：

typescript

// 从博客系统获取最新文章
const featuredPosts = await getLatestPosts({ limit: 6 });

数据来源：

调用 blog 的 API 获取文章列表
支持按分类筛选
支持按时间排序

3. 特性介绍卡片

展示项目的核心功能亮点：

typescript

const FEATURES = [
  {
    icon: '📝',
    title: '博客系统',
    description: 'MDX 支持，代码高亮，Mermaid 图表',
  },
  {
    icon: '📚',
    title: '文档站点',
    description: '自动目录，搜索功能，MDX 组件',
  },
  {
    icon: '🔗',
    title: '网址导航',
    description: '自动抓取，分类管理，SEO 优化',
  },
];

🔧 自定义步骤

方法一：修改配置文件

有些内容可以通过环境变量配置：

txt

# .env.local
NEXT_PUBLIC_SITE_NAME=我的网站
NEXT_PUBLIC_SITE_DESCRIPTION=专注于技术的内容创作
NEXT_PUBLIC_DEFAULT_OG_IMAGE=https://example.com/og.png

方法二：直接修改代码

如果想要更深入的定制，直接修改 page.tsx：

typescript

// 修改标题
const HERO_CONFIG = {
  title: '我的个人网站',  // 改成你的标题
  description: '分享我的技术和想法',  // 改成你的描述
  // ...
};

🎨 布局调整

响应式设计

首页已经内置响应式布局，会自动适配：

断点	屏幕宽度	布局
Mobile	< 640px	单列，卡片堆叠
Tablet	640px - 1024px	双列
Desktop	> 1024px	三列或多列

为什么这样设计？

响应式设计确保「任何设备都能有良好的阅读体验」。不需要额外代码，Tailwind CSS 的响应式工具类已经帮你搞定！

背景效果

目前使用简洁的渐变背景，可以通过 CSS 调整：

css

/* apps/web/src/app/globals.css */
.hero-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

📊 配置项参考

配置项	类型	说明
`title`	string	Hero 标题
`description`	string	Hero 描述
`actions`	array	行动按钮组
`features`	array	特性卡片组
`featuredCount`	number	精选文章数量

💡 设计建议

1. 保持简洁

首页不是「堆砌信息」的地方，而是「吸引关注」的入口。保持简洁，给用户继续探索的动力。

2. 突出个性

可以通过以下方式体现个人风格：

自定义头像/封面图
独特的配色
独特的文案风格

3. 明确行动

每个区块都要有明确的「下一步」引导，让用户知道该做什么。

🔗 下一步

认证流程 —— 配置登录注册入口
主题配置 —— 调整配色和主题
部署上线 —— 让更多人看到你的站点

✨ 记住：首页是「名片」，让它帮你说话！

Hey，同学！这一篇教你如何把首页变得「与众不同」，展现出你的个人风格～ 🎨

📁 文件位置

Web 项目的首页主要由以下文件组成：

text

apps/web/src/app/
├── page.tsx              # 首页主页面
├── layout.tsx            # 布局（导航栏、底部）
└── components/           # 页面组件
    └── home/             # 首页专用组件

🎯 核心配置项

1. Hero 区域（大标题区）

在 page.tsx 中，你可以找到类似这样的配置：

typescript

const HERO_CONFIG = {
  title: '欢迎来到 iFluxArt',
  description: '你的个人内容管理平台',
  actions: [
    { text: '开始使用', link: '/docs/quick-start', variant: 'primary' },
    { text: '了解更多', link: '/docs/introduction', variant: 'secondary' },
  ],
};

为什么要这样设计？

💡 小技巧：标题控制在 10-20 字，描述控制在 30-50 字，效果最佳！

2. 精选内容

首页会展示来自 Blog 的最新文章：

typescript

// 从博客系统获取最新文章
const featuredPosts = await getLatestPosts({ limit: 6 });

数据来源：

调用 blog 的 API 获取文章列表
支持按分类筛选
支持按时间排序

3. 特性介绍卡片

展示项目的核心功能亮点：

typescript

const FEATURES = [
  {
    icon: '📝',
    title: '博客系统',
    description: 'MDX 支持，代码高亮，Mermaid 图表',
  },
  {
    icon: '📚',
    title: '文档站点',
    description: '自动目录，搜索功能，MDX 组件',
  },
  {
    icon: '🔗',
    title: '网址导航',
    description: '自动抓取，分类管理，SEO 优化',
  },
];

🔧 自定义步骤

方法一：修改配置文件

有些内容可以通过环境变量配置：

txt

# .env.local
NEXT_PUBLIC_SITE_NAME=我的网站
NEXT_PUBLIC_SITE_DESCRIPTION=专注于技术的内容创作
NEXT_PUBLIC_DEFAULT_OG_IMAGE=https://example.com/og.png

方法二：直接修改代码

如果想要更深入的定制，直接修改 page.tsx：

typescript

// 修改标题
const HERO_CONFIG = {
  title: '我的个人网站',  // 改成你的标题
  description: '分享我的技术和想法',  // 改成你的描述
  // ...
};

🎨 布局调整

响应式设计

首页已经内置响应式布局，会自动适配：

断点	屏幕宽度	布局
Mobile	< 640px	单列，卡片堆叠
Tablet	640px - 1024px	双列
Desktop	> 1024px	三列或多列

为什么这样设计？

响应式设计确保「任何设备都能有良好的阅读体验」。不需要额外代码，Tailwind CSS 的响应式工具类已经帮你搞定！

背景效果

目前使用简洁的渐变背景，可以通过 CSS 调整：

css

/* apps/web/src/app/globals.css */
.hero-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

📊 配置项参考

配置项	类型	说明
`title`	string	Hero 标题
`description`	string	Hero 描述
`actions`	array	行动按钮组
`features`	array	特性卡片组
`featuredCount`	number	精选文章数量

💡 设计建议

1. 保持简洁

首页不是「堆砌信息」的地方，而是「吸引关注」的入口。保持简洁，给用户继续探索的动力。

2. 突出个性

可以通过以下方式体现个人风格：

自定义头像/封面图
独特的配色
独特的文案风格

3. 明确行动

每个区块都要有明确的「下一步」引导，让用户知道该做什么。

🔗 下一步

认证流程 —— 配置登录注册入口
主题配置 —— 调整配色和主题
部署上线 —— 让更多人看到你的站点

✨ 记住：首页是「名片」，让它帮你说话！

首页配置

📁 文件位置

🎯 核心配置项

1. Hero 区域（大标题区）

2. 精选内容

3. 特性介绍卡片

🔧 自定义步骤

方法一：修改配置文件

方法二：直接修改代码

🎨 布局调整

响应式设计

背景效果

📊 配置项参考

💡 设计建议

1. 保持简洁

2. 突出个性

3. 明确行动

🔗 下一步

首页配置

📁 文件位置

🎯 核心配置项

1. Hero 区域（大标题区）

2. 精选内容

3. 特性介绍卡片

🔧 自定义步骤

方法一：修改配置文件

方法二：直接修改代码

🎨 布局调整

响应式设计

背景效果

📊 配置项参考

💡 设计建议

1. 保持简洁

2. 突出个性

3. 明确行动

🔗 下一步