博客美化指南：组件、动效与个性化定制

学习路径建议

美化博客不要一上来就大改，建议按这个顺序逐步深入：

配色 & 字体 → 布局调整 → 组件增强 → 动效交互 → 高级玩法

一、快速上手：改配色

打开 app/globals.css，找到 @theme 块，改几个颜色值就能换一套皮肤：

@theme {
  /* 把蓝色系换成你自己的品牌色 */
  --color-primary-50: #fef2f2;
  --color-primary-100: #fee2e2;
  --color-primary-200: #fecaca;
  --color-primary-300: #fca5a5;
  --color-primary-400: #f87171;
  --color-primary-500: #ef4444;   /* 主色 ← 改这个就行 */
  --color-primary-600: #dc2626;
  --color-primary-700: #b91c1c;
  --color-primary-800: #991b1b;
  --color-primary-900: #7f1d1d;
}

💡 去 uicolors.app 生成一整套色板，复制粘贴即可。

二、添加动效：从简单到复杂

2.1 页面加载淡入（最简单）

在 app/globals.css 加一段：

@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

main {
  animation: fade-in 0.5s ease-out;
}

2.2 卡片悬浮效果（已有基础，加增强）

当前 components/PostCard.tsx 已经有 hover:shadow-md，可以再加：

// PostCard.tsx 中给外层 article 加上：
className="... hover:-translate-y-1 transition-transform duration-300"

2.3 按钮和链接微交互

/* globals.css */
a, button {
  transition: all 0.2s ease;
}

/* 点击反馈 */
button:active {
  transform: scale(0.96);
}

2.4 滚动渐显动画（进阶）

如果想更炫，装一个轻量动画库：

npm install motion  # 原 framer-motion， React 动画标准库

然后给 PostCard 加滚动入场：

// components/PostCard.tsx
"use client";
import { motion } from "motion/react";

export default function PostCard({ post }) {
  return (
    <motion.article
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4 }}
      className="..."
    >
      {/* 内容不变 */}
    </motion.article>
  );
}

三、新增组件：跟着现有结构走

项目组件都在 components/ 下，每个组件职责单一。想加新组件，参考现有模式：

想加什么	创建文件	放哪里
评论系统	`components/Comment.tsx`	文章详情页底部
文章目录 (TOC)	`components/TableOfContents.tsx`	文章页侧边栏
搜索框	`components/Search.tsx`	Header 导航栏
友链列表	`components/Friends.tsx`	首页或独立页面
时间线	`components/Timeline.tsx`	关于页面

示例：添加 Giscus 评论

去 giscus.app 按指引配置
创建 components/Comment.tsx：

"use client";
import { useEffect, useRef } from "react";

export default function Comment() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://giscus.app/client.js";
    script.setAttribute("data-repo", "LZY041017/blog");
    script.setAttribute("data-repo-id", "你的repo-id");
    script.setAttribute("data-category", "Announcements");
    script.setAttribute("data-category-id", "你的category-id");
    script.setAttribute("data-mapping", "pathname");
    script.setAttribute("data-theme", "preferred_color_scheme");
    script.crossOrigin = "anonymous";
    script.async = true;
    ref.current?.appendChild(script);
  }, []);

  return <div ref={ref} className="mt-16" />;
}

在 app/posts/[slug]/page.tsx 的 </article> 后面引入：

import Comment from "@/components/Comment";
// 在文章内容后面加：
<Comment />

四、推荐资源

灵感来源

dribbble.com — 设计灵感
motion.dev — React 动画文档
tailwindcss.com/docs/animation — Tailwind 内置动画类
codepen.io — 前端效果实验场

配色工具

uicolors.app — 色板生成
realtimecolors.com — 实时预览配色
huemint.com — AI 生成配色方案

学习顺序建议

第一周：改颜色、换字体、调整间距        ← 纯 CSS，改改值就有效果
第二周：添加 hover 效果、过渡动画       ← Tailwind 内置类就能做
第三周：引入 motion 库做入场动画        ← 需要写少量 JS
第四周：添加评论、搜索等第三方组件      ← 集成外部服务

五、项目文件速查

想改某个地方，直接找对应文件：

改外观       → app/globals.css（配色、字体、全局样式）
改站点信息   → lib/constants.ts（标题、描述、社交链接）
改导航栏     → components/Header.tsx
改首页       → app/page.tsx
改文章卡片   → components/PostCard.tsx
改文章详情页 → app/posts/[slug]/page.tsx
改暗色模式   → components/ThemeToggle.tsx + globals.css
加新页面     → app/新目录/page.tsx
加新组件     → components/新组件.tsx

🎯 核心原则：先模仿，再创造。去 Dribbble 找喜欢的博客设计，然后用 Tailwind 类一个个还原，这是最快的学习方式。