小黑丸纯文本极简博客程序

CREATE TABLE posts (

id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),

title TEXT NOT NULL,

slug TEXT NOT NULL UNIQUE,

content TEXT NOT NULL,

published BOOLEAN NOT NULL DEFAULT false,

created_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now(),

updated_at TIMESTAMP WITH TIME ZONE NOT NULL DEFAULT now()

);

CREATE INDEX idx_posts_slug ON posts(slug);

CREATE INDEX idx_posts_published ON posts(published);

主要组件详解

核心组件

#### 1. 站点头部 (SiteHeader)

站点头部组件包含网站标志、导航链接和主题切换按钮。它是固定在页面顶部的，在用户滚动时保持可见。

#### 2. 文章卡片 (PostCard)

文章卡片组件用于在首页和列表页面展示文章预览。它显示文章标题、发布日期、阅读时间估计和内容摘要。

#### 3. Markdown渲染器 (MarkdownRenderer)

Markdown渲染器组件负责将Markdown格式的文本转换为HTML并应用语法高亮。它使用marked库进行转换，并使用Prism.js进行代码高亮。

#### 4. 文章表单 (PostForm)

文章表单组件用于创建和编辑文章。它包含标题、slug、内容和发布状态字段，并使用Server Actions处理表单提交。

管理组件

#### 1. 管理头部 (AdminHeader)

管理头部组件是管理界面的导航栏，包含返回网站、创建新文章和登出按钮。

#### 2. 删除文章按钮 (DeletePostButton)

删除文章按钮组件提供安全的文章删除功能，包含确认对话框以防止意外删除。

页面结构

公开页面

管理页面

认证与授权

博客系统使用简单而安全的认证机制：

1. 密码认证：使用环境变量中的管理员密码进行验证

1. 会话管理：使用HTTP-only cookies存储会话令牌

1. 中间件保护：使用Next.js中间件保护管理路由

认证流程：

1. 用户访问管理页面

1. 中间件检查会话cookie

1. 如果未认证，重定向到登录页面

1. 用户输入密码

1. 服务器验证密码并创建会话

1. 用户被重定向到管理面板

数据流程

读取文章流程

1. 用户访问首页或文章页面

1. 函数使用Supabase客户端查询数据库

1. 数据返回给服务器组件

1. 服务器组件渲染HTML并发送给客户端

创建/编辑文章流程

1. 用户填写文章表单

1. 表单提交到Server Action

1. Server Action验证输入并检查slug唯一性

1. 数据保存到数据库

1. 缓存被重新验证

1. 用户被重定向到管理面板

性能优化

小黑丸博客采用多种技术确保最佳性能：

1. 服务器组件：减少客户端JavaScript负载

1. 图像优化：使用Next.js的Image组件进行自动图像优化

1. 代码分割：自动的基于路由的代码分割

1. 懒加载：动态导入重量级库如marked和Prism.js

1. 响应式设计：确保在所有设备上的良好性能

部署指南

前提条件

• Node.js 18+

• Supabase账户

• Vercel账户（推荐）

环境变量

部署前需要设置以下环境变量：

SUPABASE_URL=https://your-project.supabase.co

SUPABASE_ANON_KEY=your-anon-key

SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

ADMIN_PASSWORD=your-admin-password

NEXT_PUBLIC_APP_URL=https://your-domain.com

数据库设置

1. 在Supabase中创建新项目

1. 执行上述SQL创建posts表

1. 设置行级安全策略（RLS）

Vercel部署步骤

1. 将代码推送到GitHub仓库

1. 在Vercel中导入项目

1. 配置环境变量

1. 部署项目

使用指南

访问博客

管理内容

1. 在管理面板中，您可以：

1. 查看所有文章

1. 创建新文章

1. 编辑现有文章

1. 删除文章

1. 发布或取消发布文章

编写文章

1. 在管理面板中点击"新建文章"

1. 填写标题和slug（URL）

1. 使用Markdown编写内容

1. 选择是否立即发布

1. 点击"保存文章"

自定义和扩展

主题定制