--- title: "AstroPaper 博客自定义" description: "How I customize my blog based on AstroPaper theme" date: 2024-05-25 tags: ["blog", "astro", "css"] source: https://lkwplus.com/blog/astropaper-blog-customization --- :::caution 因本站已对博客主题完成重构，此博客内容已过时，仅存档。 ::: ## 修改博客主题现有内容 ### 修改主题颜色 根据个人喜好对主题的深色模式中的颜色定义进行了修改，修改 `--color-fill` 以更改网站的背景颜色，修改 `--color-accent` 以更改强调色。相关 CSS 定义于 `src/styles/base.css` 中： ```diff title="src/styles/base.css" diff --git a/src/styles/base.css b/src/styles/base.css index 6efa219..7b4de7a 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -13,9 +13,9 @@ --color-border: 236, 233, 233; } html[data-theme="dark"] { - --color-fill: 33, 39, 55; + --color-fill: 27, 32, 37; --color-text-base: 234, 237, 243; - --color-accent: 255, 107, 1; + --color-accent: 217, 122, 72; --color-card: 52, 63, 96; --color-card-muted: 138, 51, 2; --color-border: 171, 75, 8; ``` ### 修改代码高亮 AstroPaper 通过 [Shiki](https://shiki.style/) 实现代码高亮，支持多种主题，可以在 `astro.config.ts` 中进行配置。我选择采用 `catppuccino-mocha` 主题替换默认的 `one-dark-pro` 主题。 ```diff title="astro.config.ts" diff --git a/astro.config.ts b/astro.config.ts index 52d3437..cc33c96 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -25,14 +25,28 @@ export default defineConfig({ rehypePlugins: [rehypeKatex], shikiConfig: { - theme: "one-dark-pro", + // https://shiki.style/themes + theme: "catppuccin-mocha", + // 另外，也提供了多种主题 + // https://shiki.style/guide/dual-themes + // themes: { + // light: 'github-light', + // dark: 'min-dark', + // }, + // 添加自定义语言 + // https://shiki.style/languages + // langs: [], + // 启用自动换行，以防止水平滚动 wrap: true, + // 添加自定义转换器：https://shiki.style/guide/transformers + // 查找常用转换器：https://shiki.style/packages/transformers + // transformers: [], }, }, vite: { ``` ### 修改字体 由于 AstroPaper 主题默认采用的 IBM Plex Mono 字体对于中文支持不佳，我选择将主字体替换为个人更偏好的 [Sono](https://fonts.google.com/specimen/Sono)，而对于 Sono 字体无法渲染的中文等部分，则由开源中文字体 [霞鹜文楷](https://github.com/lxgw/LxgwWenKai) 提供，最后以 monospace 作为 fallback 字体。 在 `tailwind.config.cjs` 中将 `IBM Plex Mono` 替换为 `Sono` 和 `LXGW WenKai Screen`: ```diff title="tailwind.config.cjs" diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 8e43860..06dacbc 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -55,6 +55,7 @@ module.exports = { }, fontFamily: { - mono: ["IBM Plex Mono", "monospace"], + mono: ["Sono", "LXGW WenKai Screen", "monospace"], }, typography: { ``` 接下来需要引入霞鹜文楷字体的 Stylesheet，为了避免阻塞渲染，可以将 `media` 设置为 `print`，在加载完成后再将 `media` 设置为 `all`。同时，采用饿了么提供的 CDN 提高加载速度，相关代码添加到 `src/layouts/Layout.astro` 中： ```diff title="src/layouts/Layout.astro" diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 826c3d2..931baa1 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -99,6 +94,14 @@ const socialImageURL = new URL( rel="stylesheet" /> + + + ``` 但是通过以上的修改，会存在两个问题： - 标签展示时，若采用霞鹜文楷字体，会导致显示紊乱； - 代码框中也会采用霞鹜文楷字体，不符合等宽字体的要求。 对于第一个问题，需要在 `src/components/Tag.astro` 中将字体设定为 `font-mono`： ```diff title="src/components/Tag.astro" diff --git a/src/components/Tag.astro b/src/components/Tag.astro index 5a4a376..72f65e0 100644 --- a/src/components/Tag.astro +++ b/src/components/Tag.astro @@ -31,6 +31,7 @@ const { tag, size = "sm" } = Astro.props; ``` 对于 `src/config.ts` 中定义的 `SOCIALS` 常量，添加布尔值 `footeractive` 字段，用于控制是否在 Footer 中展示： ```diff title="src/config.ts" diff --git a/src/config.ts b/src/config.ts index 35aae63..6e9089a 100644 --- a/src/config.ts +++ b/src/config.ts @@ -17,131 +18,151 @@ export const SOCIALS: SocialObjects = [ { name: "Github", href: "https://github.com/synthpop123", linkTitle: `${SITE.author} on Github`, active: true, + footeractive: true, }, { name: "Instagram", href: "https://www.instagram.com/whoamamiii/", linkTitle: `${SITE.author} on Instagram`, active: true, + footeractive: false, }, ``` 为了保证 `footeractive` 的合法性，需要在 `src/types.ts` 中添加对应的类型定义： ```diff title="src/types.ts" diff --git a/src/types.ts b/src/types.ts index 72ba2f0..97ccdca 100644 --- a/src/types.ts +++ b/src/types.ts @@ -15,5 +16,6 @@ export type SocialObjects = { name: keyof typeof socialIcons; href: string; active: boolean; + footeractive: boolean; linkTitle: string; }[]; ``` ### 添加 Misc 页面 在博客中添加一个 Misc 页面，用于展示一些额外的内容，如友链、听歌观影记录等。首先在 `src/layouts` 目录下添加 `MiscLayout.astro`： ```diff title="src/layouts/MiscLayout.astro" diff --git a/src/layouts/MiscLayout.astro b/src/layouts/MiscLayout.astro new file mode 100644 index 0000000..dc7d48f --- /dev/null +++ b/src/layouts/MiscLayout.astro @@ -0,0 +1,58 @@ +--- +import { SITE } from "@config"; +import Breadcrumbs from "@components/Breadcrumbs.astro"; +import Footer from "@components/Footer.astro"; +import Header from "@components/Header.astro"; +import Layout from "./Layout.astro"; + +export interface Props { + frontmatter: { + title: string; + description?: string; + }; +} + +const { frontmatter } = Astro.props; +--- + + +
+ +
+
+

{frontmatter.title}

+ +
+
+ +