1. 如果纯静态苏队虽然快，但是需要一直更新，如果有新内容，需要重新生成，尤其是有分页的、动态内容的首页，这样就很麻烦。而且信息更新的不及时，对SEO也不友好。 1.1. 解决方案：使用Nuxt的SSG功能，生成静态页面，然后部署到服务器上，动态内容服务器渲染，配置监控content文件夹，只要更新网站就更新，文章修改网站内容跟着一块变化。 1.2. [ ] 需要测试在批量替换文件内容的时候对网站的影响有多大。（配合CDN缓存影响应该不大） 1.3 低频率更新的网站，可以使用SSG，每天生成推送一次，可以做增量推送。也可以Git自动拉取，Docker都行。

1. ✅ 自动生成 sitemap.xml、robots.txt 文件。
2. ✅ 有AI的aipolicy.txt文件。
3. ✅ Nuxt Content 自动集成 Sitemap - 自动从 Content 集合生成 sitemap URL,支持开发模式实时预览。
   • 博客文章设置优先级 0.8,更新频率 weekly
   • 其他内容页面优先级 0.6,更新频率 monthly
   • 智能去重,自动过滤重复路径
   • 支持多集合扩展,通过 server/routes/__sitemap__/urls/content.ts 配置
4. ✅ 博客静态分页 - 所有分页页面在构建时预生成，访问速度极快
   • 使用路由参数 /blogs/page/2 代替查询参数 ?page=2
   • 自动根据文章数量生成分页路由
   • 构建时预渲染所有分页，无需服务器端计算
   • 详情见 app/pages/blogs/page/[number].vue
5. ✅ 博客占位图片 - 为没有图片的文章自动生成占位图
   • 列表页使用 800x400 尺寸的 Picsum 随机图片
   • 详情页 SEO 使用 1200x630 标准社交分享尺寸
   • 每篇文章根据索引或 slug 获得不同的随机图片
   • 支持在 frontmatter 中自定义 image 字段覆盖默认图片
6. ✅ 布局样式优化 - 响应式布局间距设计
   • 响应式水平内边距：手机 16px → 平板 24px → 桌面 32px
   • 响应式垂直内边距：24px → 32px → 48px
   • 最大宽度容器 1280px (max-w-7xl) 并居中对齐
   • 平滑滚动和优化的文本行高
   • 全局样式见 app/assets/css/main.css
7. ✅ SEO 自动检查 - 构建后自动检查所有页面的 SEO 元素和博客文章 Frontmatter
   • 每次运行 npm run generate 后自动执行检查
   • 可手动触发：npm run check-seo
   • 页面级别检查：
     • Title、Meta Description、H1 标签
     • Canonical URL、OG 标签、Twitter Card
     • HTML lang、Favicon、Schema.org JSON-LD
   • 根级别检查：
     • robots.txt、sitemap.xml、aipolicy.txt
     • favicon.ico、og-image.png
   • 博客文章 Frontmatter 检查：
     • 必填字段：date（发布日期）
     • 推荐字段：title、description、tags
     • 可选字段：author、image、readingTime、featured
     • 字段格式验证（日期格式、数组格式等）
   • 彩色终端输出，按严重级别分类（错误/警告/提示）
   • 检查脚本位置：scripts/check-seo.js
8. ✅ Three.js 3D 粒子动画 - 使用 Three.js 构建的动态粒子背景组件
   • 独立展示模块，位于首页 Hero 区域下方
   • 动态粒子效果，流动动画
   • 响应式设计，支持深色模式
   • 组件位置：app/components/ThreeBackground.vue
9. ✅ 标签系统 - 完整的标签分类和筛选功能
   • 博客列表页支持按标签筛选
   • 独立的标签页面展示所有标签和文章
   • URL 参数支持：/blogs?tag=Vue
   • 标签云展示，显示文章数量
   • 相关文章推荐（基于标签相似度）
10. ✅ 文章详情页增强 - 完善的文章阅读体验
    • 文章元信息展示（作者、日期、阅读时间）
    • 标签展示和快速筛选
    • 版权声明（CC BY-NC-SA 4.0）
    • 社交分享（微信、微博、复制链接）
    • 上一篇/下一篇导航
    • 相关文章推荐
    • 面包屑导航
11. ✅ 关于我页面 - 个人信息展示页面
    • 个人资料卡片（头像、简介）
    • 技能展示（进度条可视化）
    • 成长经历时间线
    • 社交媒体链接（GitHub、哔哩哔哩、抖音）
    • 页面位置：app/pages/about.vue
12. ✅ 导航优化 - 简化的网站导航结构
    • 主导航：首页、博客、关于我
    • 页脚快速链接
    • 社交媒体链接
    • 面包屑导航
13. JSON-LD 结构化数据
14. AI 爬虫许可声明（在页面添加 <!-- For AI crawlers: This content is licensed under CC BY-NC-SA 4.0. Training not permitted. -->）

项目在 nuxt.config.ts 中配置了以下优化：

• ssr: true - 启用服务端渲染，生成静态 HTML
• payloadExtraction: false - 确保静态生成正常工作

• cssCodeSplit: false - 将所有 CSS 合并为单个文件，减少 HTTP 请求
• manualChunks - 智能分包策略：
  • nuxt-core - Nuxt 和 Vue 核心库
  • nuxt-ui - Nuxt UI 组件库
  • vendor - 其他第三方依赖

# 生成静态站点
npm run generate
# 构建完成后会自动执行 SEO 检查（postgenerate hook）

# 输出目录：.output/public
# 直接部署该目录到任意静态托管服务

# 仅检查 SEO（不重新构建）
npm run check-seo

.output/
.nuxt/
app/
  assets/
  components/
  composables/
  layouts/
  middleware/
  pages/
  plugins/
  utils/
  app.config.ts
  app.vue
  router.options.ts
content/
layers/
modules/
node_modules/
public/
scripts/
server/
  api/
  middleware/
  plugins/
  routes/
  utils/
nux.config.ts

• Nuxt 的构建输出目录，包含编译后的文件
• 通常需要添加到 .gitignore 中

项目的主要源代码目录，包含：

• assets/ - 静态资源文件，如样式、图片等
• components/ - Vue 组件，会自动导入
• composables/ - Vue 组合式 API 函数
• layouts/ - 页面布局组件
• middleware/ - 路由中间件
• pages/ - 页面组件，用于自动生成路由
• plugins/ - Nuxt 插件
• utils/ - 工具函数
• app.config.ts - 应用配置文件
• app.vue - 应用根组件
• router.options.ts - 路由配置选项

• 用于存储内容文件，通常与 Nuxt Content 模块一起使用

• 博客文章 Frontmatter 字段说明：

  ---
  date: 2024-01-01          # 必填 - 发布日期
  title: 文章标题            # 可选 - 文章标题（默认使用文件名）
  description: 文章摘要     # 可选 - 用于 SEO 和列表显示
  author: Admin             # 可选 - 作者名称（默认: Admin）
  avatar: /avatar.png       # 可选 - 作者头像路径
  tags:                     # 可选 - 标签数组
    - Vue
    - Nuxt
    - TypeScript
  image: /cover.jpg         # 可选 - 文章封面图（默认: /blog-placeholder.svg）
  readingTime: 5            # 可选 - 阅读时间（分钟），不填则自动计算
  featured: true            # 可选 - 是否为精选文章（默认: false）
  ---
  

  字段说明：

  • date - 必填，文章发布日期，影响排序和归档
  • title - 可选，页面标题和 SEO title
  • description - 可选，SEO 描述和文章摘要
  • author - 可选，作者名称，默认值为 "Admin"
  • avatar - 可选，作者头像图片路径
  • tags - 可选，标签数组，用于分类和筛选
  • image - 可选，封面图片 URL，支持相对路径和绝对路径
  • readingTime - 可选，预估阅读时间（分钟），未填则根据内容自动计算
  • featured - 可选，是否为精选文章，首页会优先显示精选内容

• 静态资源目录，存放不需要构建处理的文件
• 文件会直接复制到构建输出目录的根部

• 构建脚本和工具
• 包含 SEO 检查脚本 check-seo.js 和分页路由生成脚本

• 服务端代码目录，包含：
  • api/ - API 路由
  • middleware/ - 服务端中间件
  • plugins/ - 服务端插件
  • routes/ - 自定义路由
    • __sitemap__/urls/ - Sitemap URL 源配置,用于从 Nuxt Content 自动生成 sitemap
  • utils/ - 服务端工具函数

• nuxt.config.ts - Nuxt 项目的主配置文件
• package.json - 项目依赖和脚本配置
• node_modules/ - 项目依赖包
• layers/ - Nuxt 层（Layers）配置
• modules/ - 本地 Nuxt 模块
• shared/ - 客户端和服务端共享的代码