改成你喜欢的样式

你好，我是 Bob。今天教你如何定制 FlowPage 的样式，让它更符合你的风格。

修改站点基本信息

打开 flowpage.config.ts，找到 site 部分：

site: {
  title: '你的站点名称',
  description: '站点简介',
  author: '你的名字',
  url: 'https://yoursite.com',
  lang: 'zh-CN'
}

改成你自己的信息，保存后刷新浏览器就能看到效果。

切换深色/浅色模式

FlowPage 内置了深色和浅色两种主题。

点击右上角的太阳/月亮图标就能切换。

主题会自动保存，下次打开还是你选的模式。

自定义配色

想改配色？打开 tailwind.config.mjs：

theme: {
  extend: {
    colors: {
      primary: '#your-color',    // 主色调
      secondary: '#your-color',  // 辅助色
    }
  }
}

不知道用什么颜色？试试这些工具：

Coolors - 配色方案生成器
Adobe Color - 专业配色工具

调整字体

修改字体大小

打开 src/layouts/FlowLayout.astro，找到 <style> 部分：

:root {
  --text-base: 1rem;     /* 正文大小 */
  --text-lg: 1.25rem;    /* 大号文字 */
  --text-xl: 1.5rem;     /* 标题大小 */
}

改成你喜欢的大小。

更换字体

想用不同的字体？在 FlowLayout.astro 的 <head> 里添加：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Your+Font&display=swap" rel="stylesheet">

然后在样式里使用：

body {
  font-family: 'Your Font', sans-serif;
}

修改圆角和间距

FlowPage 默认用了较大的圆角和间距，让卡片更有现代感。

想调整？打开 tailwind.config.mjs：

theme: {
  extend: {
    borderRadius: {
      'card': '1.5rem',  // 卡片圆角
    },
    spacing: {
      'block': '2rem',   // 块间距
    }
  }
}

自定义首页

首页是 src/pages/index.astro。

你可以：

修改欢迎语
调整布局
添加自己的介绍
改变导航按钮样式

直接编辑文件，保存就能看到效果。

修改导航页

导航页配置在 flowpage.config.ts 的 content.nav.blocks：

nav: {
  blocks: [
    {
      title: '最新文章',
      filter: { limit: 5, sortBy: 'date' }
    },
    {
      title: '精选内容',
      filter: { topics: ['featured'] }
    }
  ]
}

你可以调整显示的分类、排序方式、显示数量。

小技巧

改一点看一点：不要一次改太多，容易出错
备份代码：改之前先提交一次 Git
参考示例：看看其他 Tailwind 站点的配色
移动端优先：改完记得在手机上看看效果

慢慢调整，找到最适合你的风格！