页面组件

Fumomo-Nuxt 包含多个精心设计的页面和可复用组件，本文档将详细介绍它们的功能和用法。

页面结构

首页 (index.vue)

首页是网站的入口，包含以下主要元素：

• 主标题和副标题 - 从配置文件读取
• 欢迎语句 - 自定义的欢迎信息
• 特色卡片 - 展示网站的主要功能
• 分散动画 - 向下滚动时的页面切换动画（可配置）

文章页 (articles.vue)

展示从 RSS 源获取的博客文章：

• 文章列表，支持分页
• 文章卡片显示标题、描述和发布时间
• 点击跳转到原文链接

关于页 (about.vue)

个人介绍页面，包含：

• 个人信息卡片 - 头像、姓名、简介
• 社交链接 - GitHub、邮箱等
• 个人履历组件 - GitHub 热力图、技能、教育背景等
• 我的历程组件 - 时间轴形式展示个人经历

项目页 (projects.vue)

展示个人项目作品：

• 项目卡片网格布局
• 每个项目包含标题、描述、技术栈
• 预览链接和 GitHub 链接

友链页 (friends.vue)

友情链接展示页面：

• 友链卡片展示
• 链接到友站

网站页 (website.vue)

展示你运营的其他网站：

• 网站卡片列表
• 可选的状态监测功能
• 自动刷新状态

核心组件

Footer.vue

统一的页脚组件，显示：

• 网站 slogan
• 版权信息
• 技术栈链接

<footer class="py-8 text-center bg-primary/10">
  <p class="text-xl font-fumofumo">Fumomo - 简约而不简单</p>
  <p class="text-sm">© {{ currentYear }} Fumomo. 保留所有权利。</p>
</footer>

Qualification.vue

个人履历组件，包含多个可配置的板块：

GitHub 热力图

自动根据配置的 GitHub 链接生成热力图：

<img
  :src="`https://ghchart.rshah.org/${githubUsername}`"
  :alt="`GitHub contributions for ${githubUsername}`"
/>

技能专长

动态加载 components/icons/ 目录下的图标组件：

<div v-for="icon in techIcons" :key="icon.name">
  <component :is="icon.component" class="w-12 h-12" />
  <span>{{ icon.name }}</span>
</div>

其他板块

• 教育背景
• 工作经历
• 项目经历
• 获得荣誉

每个板块都可以在配置文件中独立开关。

Myjourney.vue

时间轴形式展示个人经历：

interface TimelineItem {
  date: string
  title: string
  description: string
}

const timelineItems: TimelineItem[] = [
  {
    date: '2025.08.20',
    title: '完成第一个项目',
    description: '独立开发并上线了个人主页'
  },
  // ...更多时间点
]

布局组件

default.vue

默认布局组件，提供：

• SEO meta 标签设置
• Open Graph 和 Twitter Card 支持
• 自定义光标效果（可配置）
• Umami 统计脚本
• Font Awesome 图标库

useHead({
  title: fullTitle,
  meta: [
    { name: 'description', content: props.description },
    { property: 'og:type', content: 'website' },
    { property: 'og:title', content: fullTitle },
    // ...
  ]
})

图标组件

技能专长图标存放在 app/components/icons/ 目录下。

添加新图标

1. 访问 icones.js.org
2. 选择你需要的图标
3. 下载 Vue 组件格式
4. 放入 components/icons/ 目录
5. 组件会自动被加载和显示

命名规范

图标文件应以 Logos 开头，如：

• LogosVue.vue
• LogosNuxt.vue
• LogosTailwindcss.vue

动画效果

分散动画

首页和关于页支持滚动分散动画：

// 检测滚动触发动画
const handleScroll = () => {
  const scrollTop = window.pageYOffset
  const windowHeight = window.innerHeight
  const docHeight = document.documentElement.scrollHeight

  // 计算滚动进度
  scrollProgress.value = scrollTop / (docHeight - windowHeight)
}

自定义光标

可在主题配置中启用自定义光标效果：

theme: {
  customCursor: true,  // 启用自定义光标
}

响应式设计

所有组件都针对移动端进行了优化：

// 检测移动设备
const checkMobile = () => {
  const isMobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
  const isMobileWidth = window.innerWidth <= 768
  isMobile.value = isMobileUA || isMobileWidth
}

移动端会自动禁用某些动画效果，确保流畅的用户体验。