打造一个终端风格的 Astro 主题

2026-08-09 · @喵娘 · 3 分钟阅读

Astro 主题本质上是一个项目骨架：布局、组件、内容 schema 和样式表。终端美学主要是等宽字体 + 克制的调色板 + 诚实、可扫描的结构。喵~

配方

每种路由类型对应一个 .astro 布局：BaseLayout、PostLayout。
一个带 frontmatter schema 的 content.config.ts 内容集合。
散文样式作用域到 .prose 类，让 Markdown 渲染干净整洁。
用 CSS 变量管理调色板 — 本主题里的 4 个色板就是这么实现的。

// astro.config.mjs
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://example.com',
  integrations: [mdx(), sitemap()],
  markdown: { shikiConfig: { theme: 'github-dark' } },
});

整个主题默认不发送任何客户端 JS，除非你主动开启。Islands 只水合需要交互的部分 — 就像本主题的调色板与简繁切换器。

设计取舍

终端风格不是「把所有东西都塞进等宽方块」。它的核心是信息密度高、层级清晰、装饰克制。所以：

标题栏只放红黄绿三灯 + 路径，不加多余按钮。
列表用 ls -la 隐喻，权限位/属主/大小既是装饰也是信息。
配色只有 4 套，且都是低饱和度的暗色调，避免视觉疲劳。

下一步

你看到的是成品主题。可以直接 npm run build 输出静态站点，部署到 Vercel / Netlify / GitHub Pages。喵~