博客主题和样式自定义指南

2024-03-10·无心文字

博客主题和样式自定义指南

Taco 提供了强大的主题和样式自定义功能,让你可以轻松打造独特的博客外观。

🎨 主题系统概览

博客支持明暗两套主题,并且可以跟随系统自动切换。所有的样式文件都位于 src/styles/ 目录下。

样式文件结构

src/styles/
├── globals.sass         # 全局样式
├── _var.sass           # 变量定义
├── _dark.sass          # 暗色主题
├── _elements.sass      # 基础元素样式
├── _page.sass          # 页面布局样式
├── init.css            # 初始化样式
└── lib/
    ├── prism.css       # 代码高亮样式
    └── yue.css         # 文章内容样式

🔧 配置文件说明

Tailwind 配置

tailwind.config.js 是主要的样式配置文件:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './data/**/*.{js,md}'
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // 自定义颜色
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a'
        }
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif']
      }
    }
  }
}

NextUI 配置

NextUI 组件的主题配置在 src/app/providers.js 中:

import { NextUIProvider } from '@heroui/system'
import { ThemeProvider } from 'next-themes'

export function Providers({ children }) {
  return (
    <NextUIProvider>
      <ThemeProvider 
        attribute="class" 
        defaultTheme="system"
        enableSystem
      >
        {children}
      </ThemeProvider>
    </NextUIProvider>
  )
}

🎯 自定义颜色主题

1. 修改主色调

tailwind.config.js 中修改主色调:

theme: {
  extend: {
    colors: {
      // 蓝色主题(默认)
      primary: {
        50: '#eff6ff',
        100: '#dbeafe',
        500: '#3b82f6',
        900: '#1e3a8a'
      },
      
      // 或者改为绿色主题
      primary: {
        50: '#f0fdf4',
        100: '#dcfce7',
        500: '#22c55e',
        900: '#14532d'
      }
    }
  }
}

2. 添加自定义颜色

colors: {
  brand: {
    light: '#a7f3d0',
    DEFAULT: '#10b981',
    dark: '#047857'
  },
  accent: '#f59e0b'
}

3. 暗色主题定制

src/styles/_dark.sass 中修改暗色主题:

[data-theme="dark"]
  // 背景色
  --bg-primary: #0f172a
  --bg-secondary: #1e293b
  
  // 文字颜色
  --text-primary: #f8fafc
  --text-secondary: #cbd5e1
  
  // 边框颜色
  --border: #334155
  
  // 链接颜色
  --link: #60a5fa
  --link-hover: #93c5fd

📝 字体自定义

1. 使用 Google Fonts

src/app/layout.js 中引入字体:

import { Inter, Noto_Sans_SC } from 'next/font/google'

const inter = Inter({ 
  subsets: ['latin'],
  variable: '--font-sans'
})

const notoSansSC = Noto_Sans_SC({ 
  subsets: ['chinese-simplified'],
  weight: ['300', '400', '500', '700'],
  variable: '--font-zh'
})

2. 配置 Tailwind

theme: {
  extend: {
    fontFamily: {
      sans: ['var(--font-sans)', 'sans-serif'],
      zh: ['var(--font-zh)', 'sans-serif']
    }
  }
}

3. 应用字体

.article-content {
  @apply font-zh;
}

h1, h2, h3 {
  @apply font-sans font-bold;
}

🖼️ 背景和装饰

1. 页面背景

src/styles/globals.sass 中设置:

body
  // 纯色背景
  background-color: var(--bg-primary)
  
  // 或者渐变背景
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
  
  // 或者图片背景
  background-image: url('/bg-pattern.png')
  background-size: cover
  background-attachment: fixed

2. 卡片样式

自定义文章卡片样式:

.blog-card
  @apply bg-white dark:bg-slate-800
  @apply rounded-xl shadow-lg
  @apply border border-gray-200 dark:border-slate-700
  @apply hover:shadow-xl transition-shadow
  @apply p-6
  
  // 添加渐变边框
  background: linear-gradient(white, white) padding-box,
              linear-gradient(135deg, #667eea, #764ba2) border-box
  border: 2px solid transparent

🎭 动画效果

1. 页面过渡动画

Taco 使用 Framer Motion 实现动画,在 src/app/template.js 中配置:

'use client'
import { motion } from 'framer-motion'

export default function Template({ children }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.3 }}
    >
      {children}
    </motion.div>
  )
}

2. 自定义动画类

tailwind.config.js 中添加动画:

theme: {
  extend: {
    keyframes: {
      'fade-in-up': {
        '0%': {
          opacity: '0',
          transform: 'translateY(10px)'
        },
        '100%': {
          opacity: '1',
          transform: 'translateY(0)'
        }
      }
    },
    animation: {
      'fade-in-up': 'fade-in-up 0.5s ease-out'
    }
  }
}

🌈 响应式设计

1. 断点配置

theme: {
  screens: {
    'xs': '475px',
    'sm': '640px',
    'md': '768px',
    'lg': '1024px',
    'xl': '1280px',
    '2xl': '1536px'
  }
}

2. 响应式样式示例

.container
  @apply px-4 sm:px-6 lg:px-8
  @apply max-w-sm sm:max-w-md lg:max-w-4xl xl:max-w-6xl
  @apply mx-auto
  
.grid-layout
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3
  @apply gap-4 md:gap-6 lg:gap-8

🎨 代码高亮主题

1. 修改代码块样式

src/styles/lib/prism.css 中自定义:

/* VS Code Dark 主题 */
code[class*="language-"],
pre[class*="language-"] {
  color: #d4d4d4;
  background: #1e1e1e;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.5;
}

.token.comment { color: #6a9955; }
.token.string { color: #ce9178; }
.token.number { color: #b5cea8; }
.token.keyword { color: #569cd6; }

2. 添加行号和复制按钮

可以通过修改 Prism.js 配置添加更多功能。

🔧 高级自定义

1. CSS 变量系统

src/styles/_var.sass 中定义全局变量:

:root
  // 间距
  --spacing-xs: 0.5rem
  --spacing-sm: 1rem
  --spacing-md: 1.5rem
  --spacing-lg: 2rem
  --spacing-xl: 3rem
  
  // 圆角
  --radius-sm: 0.375rem
  --radius-md: 0.5rem
  --radius-lg: 0.75rem
  
  // 阴影
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05)
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1)
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1)

2. 组件样式隔离

创建模块化的 SCSS 文件:

// src/styles/components/blog-card.module.sass
.card
  @apply bg-white dark:bg-slate-800
  @apply rounded-lg shadow-md
  @apply p-6 mb-6
  
  &:hover
    @apply shadow-lg transform -translate-y-1
    @apply transition-all duration-200
    
  .title
    @apply text-xl font-bold mb-2
    @apply text-gray-900 dark:text-white
    
  .excerpt
    @apply text-gray-600 dark:text-gray-300
    @apply text-sm leading-relaxed

📱 移动端优化

1. 触摸优化

.touch-target
  @apply min-h-[44px] min-w-[44px]  // iOS 推荐的最小触摸区域
  @apply flex items-center justify-center
  
.button
  @apply touch-manipulation  // 禁用双击缩放
  @apply select-none        // 禁用文本选择

2. 滚动优化

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* iOS 惯性滚动 */
.scroll-container {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

🎯 实用技巧

1. 快速预览样式更改

# 开发模式支持热重载
pnpm dev

# 监听 CSS 文件变化
pnpm dev --turbo

2. 生产环境优化

# 构建时会自动purge未使用的CSS
pnpm build

# 分析包大小
pnpm build --analyze

3. 调试样式

  • 使用浏览器开发者工具
  • 安装 Tailwind CSS IntelliSense 插件
  • 使用 @apply 指令组合 Tailwind 类

✅ 最佳实践

  1. 保持一致性 - 使用统一的设计系统
  2. 渐进增强 - 确保在禁用样式时仍可用
  3. 性能优先 - 避免过度的动画和效果
  4. 可访问性 - 确保足够的对比度和可读性
  5. 测试兼容性 - 在不同设备和浏览器中测试

🎉 开始自定义

现在你已经掌握了 Taco 的样式自定义系统,可以开始打造独特的博客外观了:

  1. ✅ 修改颜色主题和字体
  2. ✅ 自定义背景和装饰
  3. ✅ 添加动画效果
  4. ✅ 优化响应式设计
  5. ✅ 调试和测试

让你的博客与众不同吧!🎨