博客搭好了 • Tomato's Juice

这篇文章有两个作用：一是宣告博客上线，二是当作功能自检页 —— 下面每一块都对应一项配置，只要有一处显示不正常，就能立刻定位到是哪个功能没生效。

代码高亮#

主题用 Shiki 做构建期高亮，并带了几个自定义 transformer。下面这段应该有文件名标题栏、右上角复制按钮，且第 3 行高亮：

src/utils/greet.ts

export function greet(name: string) {
  const now = new Date()
  return `你好，${name}！现在是 ${now.toLocaleString('zh-CN')}`
}

增删标记也应该带颜色：

astro.config.ts

export default defineConfig({
- adapter: vercel({ imageService: true }),
- output: 'server'
+ output: 'static'
})

diff

数学公式#

行内公式：当 $n \to \infty$ 时， $\left(1 + \frac{1}{n}\right)^n \to e$ 。

块级公式：

\int_{-\infty}^{\infty} e^{-x^2} \, \mathrm{d}x = \sqrt{\pi}

如果上面显示成裸的 LaTeX 源码（比如看到 \int 和 \sqrt 字样），说明 KaTeX 的 CSS 没有加载。

Mermaid 图表#

从推送代码到网站更新，中间发生的事：

flowchart LR
  A[git push] --> B[GitHub Actions]
  B --> C[bun install]
  C --> D[astro build]
  D --> E[上传 Pages 产物]
  E --> F[deploy-pages]
  F --> G[blog.itmt.io]

图表是在浏览器里渲染的，所以首次加载会有一瞬间显示源码文本，属正常现象。切换右上角的深浅色模式，图表配色应该跟着变。

引用与列表#

过早的优化是万恶之源。

—— Donald Knuth

搭建过程中踩到的几个坑：

主题默认是 Vercel SSR，上 GitHub Pages 必须改成 output: 'static'
主题不支持 base path，所以要么用自定义域名，要么用 <用户名>.github.io 仓库
Pagefind 的搜索索引只在 build 时生成，dev 模式下搜不到东西，这不是 bug

表格#

功能	状态	说明
代码高亮	内置	Shiki + 自定义 transformer
数学公式	内置	KaTeX
站内搜索	内置	Pagefind，需 build 后生效
Mermaid	自行添加	客户端 CDN 渲染
评论	待启用	Waline，需先部署后端

接下来#

把 src/site.config.ts 里标了 TODO 的占位符换成自己的信息
重写 src/pages/about/index.astro（目前是主题自带的演示内容）
删掉 src/content/blog/ 下不需要的示例文章

写作语法可以参考主题自带的 Markdown 示例。