博客开张：为什么是漫画风格

2026-07-27

终于把这个博客搭起来了。第一篇文章，按照惯例，聊聊这个站本身。

为什么写博客

写下来是最便宜的思考方式。很多想法在脑子里觉得清楚，落到纸上才发现到处是洞。博客就是我的「校外练习册」——没交作业压力，但写坏了会脸红。

技术选型

一句话版本：Next.js 16 + MDX + Tailwind CSS v4 + Shiki，设计 token 全部收敛在一个 CSS 文件里。

模块	选型	理由
框架	Next.js（App Router）	RSC + 静态生成，快
内容	MDX	文章即代码，可以塞组件
代码高亮	Shiki	精确到 token 的着色
样式	Tailwind v4 + CSS 变量	换肤只改 token 层

代码当然要高亮

写技术博客，代码块是刚需。来一段「这个博客是怎么读文章的」：

src/lib/posts.ts（节选）

import fs from "node:fs";
import path from "node:path";
import matter from "gray-matter";
 
const POSTS_DIR = path.join(process.cwd(), "content", "posts");
 
export function getAllPosts(): PostMeta[] {
  return fs
    .readdirSync(POSTS_DIR)
    .filter((file) => file.endsWith(".mdx"))
    .map((file) => {
      const raw = fs.readFileSync(path.join(POSTS_DIR, file), "utf8");
      const { data } = matter(raw);
      return { slug: file.replace(/\.mdx$/, ""), ...data } as PostMeta;
    })
    .sort((a, b) => (a.date < b.date ? 1 : -1));
}

行内代码也得有样子，比如 npm run build 和 compileMDX()。

为什么画成漫画

网点纸、硬阴影、分镜格子——漫画的排版语言天生适合「分区阅读」，每一格只讲一件事。

长文阅读最怕视觉疲劳。日漫用黑白网点 + 单色点缀解决了这个问题：底色是纸，文字是墨，红色只在最该被看到的地方出现。

一个占位用的线稿图标 — 图：以后这里的图片都会走对象存储 + next/image，一期先放占位图。

下一篇写写这套漫画风设计系统具体长什么样。回见。

彩蛋时间

这个博客的点缀色为什么偏偏是漫画红？刮开看答案：

答：因为它最像「一格画面里唯一的惊叹号」。 纸底是昼，墨色是夜，红色是主角登场那一格——全站只允许它出现几次，每次都必须是高潮。

Anonymous 押

COMMENTS!

评论区即将开放

站长小抄：在 giscus.app 生成配置，填进 siteConfig.giscus 或 NEXT_PUBLIC_GISCUS_* 环境变量即可开张。

← 回到归档