博客搭建教程(6)：主题与部署
统一的配色让网站看起来专业。我们选樱花粉作为主色调： Tailwind CSS v4 支持 dark: 变体，配合 .dark 类自动切换。 这个脚本在页面渲染前执行，读到 "dark" 就立即给 <html 加 .dark 类，完全不会闪白屏。 纯 CSS 动画实现花瓣飘落： React 组件生成 40 个随机位置/大小/速度的粒子，position: fixed 覆盖全屏。 我们用 unifi...
#博客搭建
共 6 篇文章
博客搭建教程(5)：登录认证
认证就是"证明你是谁"。你去银行取钱要输密码，登录网站要输入账号密码——这就是认证。 我们用的是 JWT（JSON Web Token） 方案： 1. 用户输入账号密码 → 服务器验证 2. 验证通过 → 服务器签发一个"令牌"（JWT） 3. 令牌存在浏览器的 Cookie 里 4. 之后每次请求，浏览器自动带这个 Cookie，服务器就知道你是谁了 Cookie 是浏览器存储的一小段数据。每次...
博客搭建教程(4)：评论系统
API（Application Programming Interface）是一组 URL 地址，前端通过访问这些 URL 来获取数据或提交数据。 比如我们要提交评论，就发一个 POST 请求到 /api/comments。 类比：API 就像是餐厅的服务员。你（前端）告诉服务员你要什么（请求），服务员去厨房（数据库）取菜，然后端给你（响应）。 在 prisma/schema.prisma 里添加...
博客搭建教程(3)：前端页面
我们的页面代码用的是一个叫 JSX 的语法。它长这样： {post.title} 的意思是：把 JavaScript 变量 post.title 的值插入到 HTML 里。JSX = HTML + JavaScript，可以混着写。 在 Next.js App Router 里，页面文件默认是服务端组件（Server Component）。这意味着代码在服务器上运行，直接查数据库、渲染 HTML，...
博客搭建教程(2)：数据库入门
数据库就是存数据的地方。比如你的博客有 100 篇文章，这 100 篇文章存在数据库里。 数据库有很多种。我们用的是 SQLite——它不需要安装任何软件，整个数据库就是一个文件（dev.db），非常适合个人博客。 直接操作数据库需要写 SQL 语句（SELECT FROM posts WHERE ...），比较繁琐。 Prisma 是一个 ORM（Object-Relational Mappi...
博客搭建教程(1)：从零开始
如果你对编程几乎不了解，只会用浏览器上网，但想拥有一个自己的博客网站——这篇教程就是为你写的。 我们会从安装软件开始，一步一步搭建出一个完整的博客。每篇教程预计 30-60 分钟可以跟着做完。 不需要任何基础，只要会打字、会用浏览器就行。 JavaScript（简称 JS）是网页的编程语言。你在浏览器里看到的所有动态效果（点击按钮、弹出窗口、动画）都是 JavaScript 做的。 Node.js...