博客主题和样式自定义指南
博客主题和样式自定义指南
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 类
✅ 最佳实践
- 保持一致性 - 使用统一的设计系统
- 渐进增强 - 确保在禁用样式时仍可用
- 性能优先 - 避免过度的动画和效果
- 可访问性 - 确保足够的对比度和可读性
- 测试兼容性 - 在不同设备和浏览器中测试
🎉 开始自定义
现在你已经掌握了 Taco 的样式自定义系统,可以开始打造独特的博客外观了:
- ✅ 修改颜色主题和字体
- ✅ 自定义背景和装饰
- ✅ 添加动画效果
- ✅ 优化响应式设计
- ✅ 调试和测试
让你的博客与众不同吧!🎨