Astro Paper 设置流程记录

Open Table of contents

添加KaTeX支持
配置主题
配置中文字体
配置中文i18n
时间日期格式修改
将默认置顶的文章取消
修改主页和关于内容
调整暗色主题配色

添加KaTeX支持

参考文章设置若干配置文件。但是会报pnpm-lock.yaml的问题，因为一旦更新package.json而没有同步更新pnpm-lock.yaml文件，Pages.Dev就会报错。

于是，参考本仓库的actions构建一个自动build出pnpm-lock.yaml文件并push回来的Actions就行了。

此外，针对文件typography.css，特别额外添加：

@plugin "@tailwindcss/typography";

@layer base {
  /* other classes */

  /* Katex text color */
  .prose .katex-display {
    @apply text-foreground;
  }

  /* 额外添加这三行 */
  .app-prose .katex-display { 
    @apply text-foreground; 
  } 

  /* ===== Code Blocks & Syntax Highlighting ===== */
  /* other classes */
}src/styles/typography.css

以保证$$...$$内的公式字体颜色与正文一致。

接下来是 $\KaTeX$ 的测试内容。 $\AA$

麦克斯韦方程组

包含偏微分、点乘、叉乘以及希腊字母，能很好地测试 aligned 环境的对齐。

\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0}, \\ \nabla \cdot \mathbf{B} &= 0, \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t}, \\ \nabla \times \mathbf{B} &= \mu_0\left(\mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}\right). \end{aligned}

高斯积分与欧拉恒等式结合

测试：开方、无限符号与上下标，根号包裹延伸能力以及分数线间距。

\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi} \quad \text{and} \quad e^{i\pi} + 1 = 0.

拉马努金无限连分数

测试多层嵌套分数 \cfrac 的缩放。

\cfrac{1}{1 + \cfrac{e^{-2\pi}}{1 + \cfrac{e^{-4\pi}}{1 + \cfrac{e^{-6\pi}}{1 + \ddots}}}} = \left( \sqrt{\frac{5+\sqrt{5}}{2}} - \frac{\sqrt{5}+1}{2} \right) e^{\frac{2\pi}{5}}.

狄拉克算子与引力场方程简写

测试：特殊符号与粗体。

i\gamma^\mu \partial_\mu \psi - m\psi = 0 \quad \implies \quad R_{\mu\nu} - \frac{1}{2}R\,g_{\mu\nu} + \Lambda g_{\mu\nu} = \frac{8\pi G}{c^4} T_{\mu\nu}.

标准正态分布与傅里叶变换

测试：大型括号与积分上下标位置。

f(x) = \frac{1}{\sigma\sqrt{2\pi}} \exp\left( -\frac{(x-\mu)^2}{2\sigma^2} \right) \quad \Longleftrightarrow \quad \hat{f}(\xi) = \int_{-\infty}^{\infty} f(x) e^{-2\pi i x \xi} \, dx.

配置主题

根据这篇文章配置astro-paper.config.ts文件。关闭“修改”选项时也要把url删掉。

配置中文字体

这绝对是一个巨大的坑：目前中文字体最佳实践是woff2字体分片，但是！AstroPaper不支持！！Debug几个小时也不行。

首先，采用非切片中文字体（加载慢？那就慢呗~）：

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  // ...
  fonts: [
    {
      name: "Google Sans Code",
      cssVariable: "--font-google-sans-code",
      provider: fontProviders.google(),
      fallbacks: ["monospace"],
      weights: [300, 400, 500, 600, 700],
      styles: ["normal", "italic"],
      formats: ["woff", "ttf"],
    },
    { 
      name: "LXGW WenKai",
      cssVariable: "--font-lxgw-wenkai-screen",
      provider: fontProviders.fontsource(),
      fallbacks: ["Noto Sans SC"],
      weights: [300,500,700],
      styles: ["normal"],
      formats: ["woff2"],
    },
  ],
});

然后，选定预载500的字重：

---
import { Font } from "astro:assets";
// ...
---

<head>
  <!-- ... -->
  <Font
    cssVariable="--font-lxgw-wenkai-screen"
    preload={[{ weight: 500, style: "normal" }]}
  />
  <!-- ... -->
</head>

最后，改css：

/* Register design tokens for Tailwind v4 */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --font-app: var(--font-lxgw-wenkai-screen); 
}

配置中文i18n

创建src\i18n\lang\zh.ts并翻译。此后需要在astro.config.ts中修改：

  i18n: {
    locales: ["en", "zh"],
    defaultLocale: "zh",
    routing: {
      prefixDefaultLocale: false,
    },
  },

以及在astro-paper.config.ts中修改第11行：

lang: "zh",

时间日期格式修改

修改src\components\Datetime.astro中第36行:

const date = datetime.format("YYYY-MM-DD");

将默认置顶的文章取消

取消三篇默认置顶的文章。

修改主页和关于内容

删掉大量内容。

调整暗色主题配色

将橙色改得更黄。