[["Map",1,2,9,10],"meta::meta",["Map",3,4,5,6,7,8],"astro-version","5.16.6","content-config-digest","eef1f8c4076f6736","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://blog.sercypress.cn/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"layout\":\"constrained\",\"responsiveStyles\":true},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{\"light\":\"min-light\",\"dark\":\"night-owl\"},\"defaultColor\":false,\"wrap\":false,\"transformers\":[{},{\"name\":\"@shikijs/transformers:notation-highlight\"},{\"name\":\"@shikijs/transformers:notation-highlight-word\"},{\"name\":\"@shikijs/transformers:notation-diff\"}]},\"remarkPlugins\":[null,[null,{\"test\":\"Table of contents\"}]],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[]},\"env\":{\"schema\":{\"PUBLIC_GOOGLE_SITE_VERIFICATION\":{\"access\":\"public\",\"context\":\"client\",\"optional\":true,\"type\":\"string\"}},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":true,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false}}","blog",["Map",11,12,58,59,117,118,166,167,203,204,234,235,286,287,337,338,369,370,421,422,463,464,519,520,598,599,650,651,674,675,725,726,778,779],"dynamic-og-image-generation-in-astropaper-blog-posts",{"id":11,"data":13,"body":23,"filePath":24,"digest":25,"rendered":26},{"author":14,"pubDatetime":15,"modDatetime":16,"title":17,"featured":18,"draft":18,"tags":19,"description":22},"Sat Naing",["Date","2022-12-28T04:59:04.866Z"],["Date","2025-03-12T13:39:20.763Z"],"AstroPaper 博客文章中的动态 OG 图片生成",false,[20,21],"docs","release","AstroPaper v1.4.0 的新功能，引入了博客文章的动态 OG 图片生成。","AstroPaper v1.4.0 的新功能，引入了博客文章的动态 OG 图片生成。\n\n## 目录\n\n## 介绍\n\nOG 图片（也称为社交图片）在社交媒体互动中扮演着重要角色。如果你不知道 OG 图片是什么，它是在我们在 Facebook、Discord 等社交媒体上分享网站 URL 时显示的一张图片。\n\n> Twitter 使用的社交图片技术上不称为 OG 图片。不过，在本文中，我将使用 OG 图片来指代所有类型的社交图片。\n\n## 默认/静态 OG 图片（旧方式）\n\nAstroPaper 已经提供了一种为博客文章添加 OG 图片的方式。作者可以在前置元数据 `ogImage` 中指定 OG 图片。即使作者没有在前置元数据中定义 OG 图片，也会使用默认的 OG 图片作为后备（在本例中为 `public/astropaper-og.jpg`）。但问题是，默认的 OG 图片是静态的，这意味着每篇没有在前置元数据中包含 OG 图片的博客文章都将始终使用相同的默认 OG 图片，尽管每篇文章的标题/内容各不相同。\n\n## 动态 OG 图片\n\n为每篇文章生成动态 OG 图片可以让作者避免为每篇博客文章指定 OG 图片。此外，这可以防止后备 OG 图片对所有博客文章都相同。\n\n在 AstroPaper v1.4.0 中，使用了 Vercel 的 [Satori](https://github.com/vercel/satori) 包来生成动态 OG 图片。\n\n动态 OG 图片将在构建时为满足以下条件的博客文章生成：\n\n- 前置元数据中不包含 OG 图片\n- 未被标记为草稿\n\n## AstroPaper 动态 OG 图片的构成\n\nAstroPaper 的动态 OG 图片包含_博客文章标题_、_作者名称_和_网站标题_。作者名称和网站标题将通过 **\"src/config.ts\"** 文件中的 `SITE.author` 和 `SITE.title` 获取。标题则从博客文章前置元数据 `title` 生成。\n\n![示例动态 OG 图片链接](https://user-images.githubusercontent.com/53733092/209704501-e9c2236a-3f4d-4c67-bab3-025aebd63382.png)\n\n### 非拉丁字符问题\n\n包含非拉丁字符的标题默认无法正确显示。要解决这个问题，我们需要将 `loadGoogleFont.ts` 中的 `fontsConfig` 替换为你偏好的字体。\n\n```ts file=src/utils/loadGoogleFont.ts\nasync function loadGoogleFonts(\n  text: string\n): Promise\u003C\n  Array\u003C{ name: string; data: ArrayBuffer; weight: number; style: string }>\n> {\n  const fontsConfig = [\n    {\n      name: \"Noto Sans JP\",\n      font: \"Noto+Sans+JP\",\n      weight: 400,\n      style: \"normal\",\n    },\n    {\n      name: \"Noto Sans JP\",\n      font: \"Noto+Sans+JP:wght@700\",\n      weight: 700,\n      style: \"normal\",\n    },\n    { name: \"Noto Sans\", font: \"Noto+Sans\", weight: 400, style: \"normal\" },\n    {\n      name: \"Noto Sans\",\n      font: \"Noto+Sans:wght@700\",\n      weight: 700,\n      style: \"normal\",\n    },\n  ];\n  // ...\n}\n```\n\n> 查看更多信息请查看[此 PR](https://github.com/satnaing/astro-paper/pull/318)。\n\n## 权衡\n\n虽然这是一个很好的功能，但也存在权衡。每张 OG 图片大约需要一秒钟生成。这在开始时可能不明显，但随着博客文章数量的增长，你可能想禁用此功能。由于每张 OG 图片都需要时间来生成，大量图片会线性地增加构建时间。\n\n例如：如果一张 OG 图片需要一秒钟生成，那么 60 张图片将需要大约一分钟，而 600 张图片将需要大约 10 分钟。随着内容的扩展，这可能会显著影响构建时间。\n\n相关问题：[#428](https://github.com/satnaing/astro-paper/issues/428)\n\n## 局限性\n\n在撰写本文时，[Satori](https://github.com/vercel/satori) 还相当新，尚未达到主要版本发布。因此，这个动态 OG 图片功能仍然存在一些限制。\n\n- 此外，目前还不支持 RTL 语言。\n- 在标题中[使用 emoji](https://github.com/vercel/satori#emojis) 可能有点棘手。","src/data/blog/dynamic-og-images.md","202302d9aaa335b7",{"html":27,"metadata":28},"\u003Cp>AstroPaper v1.4.0 的新功能，引入了博客文章的动态 OG 图片生成。\u003C/p>\n\u003Ch2 id=\"目录\">目录\u003C/h2>\n\u003Ch2 id=\"介绍\">介绍\u003C/h2>\n\u003Cp>OG 图片（也称为社交图片）在社交媒体互动中扮演着重要角色。如果你不知道 OG 图片是什么，它是在我们在 Facebook、Discord 等社交媒体上分享网站 URL 时显示的一张图片。\u003C/p>\n\u003Cblockquote>\n\u003Cp>Twitter 使用的社交图片技术上不称为 OG 图片。不过，在本文中，我将使用 OG 图片来指代所有类型的社交图片。\u003C/p>\n\u003C/blockquote>\n\u003Ch2 id=\"默认静态-og-图片旧方式\">默认/静态 OG 图片（旧方式）\u003C/h2>\n\u003Cp>AstroPaper 已经提供了一种为博客文章添加 OG 图片的方式。作者可以在前置元数据 \u003Ccode>ogImage\u003C/code> 中指定 OG 图片。即使作者没有在前置元数据中定义 OG 图片，也会使用默认的 OG 图片作为后备（在本例中为 \u003Ccode>public/astropaper-og.jpg\u003C/code>）。但问题是，默认的 OG 图片是静态的，这意味着每篇没有在前置元数据中包含 OG 图片的博客文章都将始终使用相同的默认 OG 图片，尽管每篇文章的标题/内容各不相同。\u003C/p>\n\u003Ch2 id=\"动态-og-图片\">动态 OG 图片\u003C/h2>\n\u003Cp>为每篇文章生成动态 OG 图片可以让作者避免为每篇博客文章指定 OG 图片。此外，这可以防止后备 OG 图片对所有博客文章都相同。\u003C/p>\n\u003Cp>在 AstroPaper v1.4.0 中，使用了 Vercel 的 \u003Ca href=\"https://github.com/vercel/satori\">Satori\u003C/a> 包来生成动态 OG 图片。\u003C/p>\n\u003Cp>动态 OG 图片将在构建时为满足以下条件的博客文章生成：\u003C/p>\n\u003Cul>\n\u003Cli>前置元数据中不包含 OG 图片\u003C/li>\n\u003Cli>未被标记为草稿\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"astropaper-动态-og-图片的构成\">AstroPaper 动态 OG 图片的构成\u003C/h2>\n\u003Cp>AstroPaper 的动态 OG 图片包含_博客文章标题_、\u003Cem>作者名称_和_网站标题\u003C/em>。作者名称和网站标题将通过 \u003Cstrong>“src/config.ts”\u003C/strong> 文件中的 \u003Ccode>SITE.author\u003C/code> 和 \u003Ccode>SITE.title\u003C/code> 获取。标题则从博客文章前置元数据 \u003Ccode>title\u003C/code> 生成。\u003C/p>\n\u003Cp>\u003Cimg src=\"https://user-images.githubusercontent.com/53733092/209704501-e9c2236a-3f4d-4c67-bab3-025aebd63382.png\" alt=\"示例动态 OG 图片链接\">\u003C/p>\n\u003Ch3 id=\"非拉丁字符问题\">非拉丁字符问题\u003C/h3>\n\u003Cp>包含非拉丁字符的标题默认无法正确显示。要解决这个问题，我们需要将 \u003Ccode>loadGoogleFont.ts\u003C/code> 中的 \u003Ccode>fontsConfig\u003C/code> 替换为你偏好的字体。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"ts\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">async\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> function\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> loadGoogleFonts\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D9F5DD\">(\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D7DBE0\">  text\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> string\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D9F5DD\">)\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#FFCB8B\"> Promise\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"><\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#FFCB8B\">  Array\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"><{ name\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">; data\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#FFCB8B\"> ArrayBuffer\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">; weight\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> number\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">; style\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> }>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">  const\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> fontsConfig\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> [\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">      name\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">Noto Sans JP\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">      font\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">Noto+Sans+JP\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">      weight\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 400\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">      style\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">normal\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">      name\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">Noto Sans JP\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">      font\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">Noto+Sans+JP:wght@700\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">      weight\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 700\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">      style\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">normal\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    {\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> name\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">Noto Sans\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> font\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">Noto+Sans\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> weight\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 400\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> style\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">normal\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">      name\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">Noto Sans\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">      font\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">Noto+Sans:wght@700\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">      weight\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 700\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">      style\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">normal\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  ];\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  // ...\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/utils/loadGoogleFont.ts\u003C/span>\u003C/pre>\n\u003Cblockquote>\n\u003Cp>查看更多信息请查看\u003Ca href=\"https://github.com/satnaing/astro-paper/pull/318\">此 PR\u003C/a>。\u003C/p>\n\u003C/blockquote>\n\u003Ch2 id=\"权衡\">权衡\u003C/h2>\n\u003Cp>虽然这是一个很好的功能，但也存在权衡。每张 OG 图片大约需要一秒钟生成。这在开始时可能不明显，但随着博客文章数量的增长，你可能想禁用此功能。由于每张 OG 图片都需要时间来生成，大量图片会线性地增加构建时间。\u003C/p>\n\u003Cp>例如：如果一张 OG 图片需要一秒钟生成，那么 60 张图片将需要大约一分钟，而 600 张图片将需要大约 10 分钟。随着内容的扩展，这可能会显著影响构建时间。\u003C/p>\n\u003Cp>相关问题：\u003Ca href=\"https://github.com/satnaing/astro-paper/issues/428\">#428\u003C/a>\u003C/p>\n\u003Ch2 id=\"局限性\">局限性\u003C/h2>\n\u003Cp>在撰写本文时，\u003Ca href=\"https://github.com/vercel/satori\">Satori\u003C/a> 还相当新，尚未达到主要版本发布。因此，这个动态 OG 图片功能仍然存在一些限制。\u003C/p>\n\u003Cul>\n\u003Cli>此外，目前还不支持 RTL 语言。\u003C/li>\n\u003Cli>在标题中\u003Ca href=\"https://github.com/vercel/satori#emojis\">使用 emoji\u003C/a> 可能有点棘手。\u003C/li>\n\u003C/ul>",{"headings":29,"localImagePaths":51,"remoteImagePaths":52,"frontmatter":53,"imagePaths":57},[30,33,35,38,41,44,47,49],{"depth":31,"slug":32,"text":32},2,"目录",{"depth":31,"slug":34,"text":34},"介绍",{"depth":31,"slug":36,"text":37},"默认静态-og-图片旧方式","默认/静态 OG 图片（旧方式）",{"depth":31,"slug":39,"text":40},"动态-og-图片","动态 OG 图片",{"depth":31,"slug":42,"text":43},"astropaper-动态-og-图片的构成","AstroPaper 动态 OG 图片的构成",{"depth":45,"slug":46,"text":46},3,"非拉丁字符问题",{"depth":31,"slug":48,"text":48},"权衡",{"depth":31,"slug":50,"text":50},"局限性",[],[],{"author":14,"pubDatetime":54,"modDatetime":55,"title":17,"slug":11,"featured":18,"draft":18,"tags":56,"description":22},["Date","2022-12-28T04:59:04.866Z"],["Date","2025-03-12T13:39:20.763Z"],[20,21],[],"astro-paper-2",{"id":58,"data":60,"body":66,"filePath":67,"assetImports":68,"digest":70,"rendered":71},{"author":14,"pubDatetime":61,"title":62,"featured":18,"tags":63,"ogImage":64,"description":65},["Date","2023-01-30T15:57:52.737Z"],"AstroPaper 2.0",[21],"__ASTRO_IMAGE_https://user-images.githubusercontent.com/53733092/215771435-25408246-2309-4f8b-a781-1f3d93bdf0ec.png","AstroPaper with the enhancements of Astro v2. Type-safe markdown contents, bug fixes and better dev experience etc.","Astro 2.0 has been released with some cool features, breaking changes, DX improvements, better error overlay and so on. AstroPaper takes advantage of those cool features, especially Content Collections API.\n\n\u003C!-- ![Introducing AstroPaper 2.0](https://user-images.githubusercontent.com/53733092/215683840-dc2502f5-8c5a-44f0-a26c-4e7180455056.png) -->\n\n![Introducing AstroPaper 2.0](https://user-images.githubusercontent.com/53733092/215771435-25408246-2309-4f8b-a781-1f3d93bdf0ec.png)\n\n## Table of contents\n\n## Features & Changes\n\n### Type-safe Frontmatters and Redefined Blog Schema\n\nFrontmatter of AstroPaper 2.0 markdown contents are now type-safe thanks to Astro’s Content Collections. Blog schema is defined inside the `src/content/_schemas.ts` file.\n\n### New Home for Blog contents\n\nAll the blog posts were moved from `src/contents` to `src/content/blog` directory.\n\n### New Fetch API\n\nContents are now fetched with `getCollection` function. No relative path to the content needs to be specified anymore.\n\n```ts\n// old content fetching method\n- const postImportResult = import.meta.glob\u003CMarkdownInstance\u003CFrontmatter>>(\n  \"../contents/**/**/*.md\",);\n\n// new content fetching method\n+ const postImportResult = await getCollection(\"blog\");\n```\n\n### Modified Search Logic for better Search Result\n\nIn the older version of AstroPaper, when someone search some article, the search criteria keys that will be searched are `title`, `description` and `headings` (heading means all the headings h1 ~ h6 of the blog post). In AstroPaper v2, only `title` and `description` will be searched as the user types.\n\n### Renamed Frontmatter Properties\n\nThe following frontmatter properties are renamed.\n\n| Old Names | New Names   |\n| --------- | ----------- |\n| datetime  | pubDatetime |\n| slug      | postSlug    |\n\n### Default Tag for blog post\n\nIf a blog post doesn't have any tag (in other words, frontmatter property `tags` is not specified), the default tag `others` will be used for that blog post. But you can set the default tag in the `/src/content/_schemas.ts` file.\n\n```ts\n// src/contents/_schemas.ts\nexport const blogSchema = z.object({\n  // ---\n  // replace \"others\" with whatever you want\n  tags: z.array(z.string()).default([\"others\"]),\n  ogImage: z.string().optional(),\n  description: z.string(),\n});\n```\n\n### New Predefined Dark Color Scheme\n\nAstroPaper v2 has a new dark color scheme (high contrast & low contrast) which is based on Astro's dark logo. Check out [this link](https://astro-paper.pages.dev/posts/predefined-color-schemes#astro-dark) for more info.\n\n![New Predefined Dark Color Scheme](https://user-images.githubusercontent.com/53733092/215680520-59427bb0-f4cb-48c0-bccc-f182a428d72d.svg)\n\n### Automatic Class Sorting\n\nAstroPaper 2.0 includes automatic class sorting with [TailwindCSS Prettier plugin](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier)\n\n### Updated Docs & README\n\nAll the [#docs](https://astro-paper.pages.dev/tags/docs/) blog posts and [README](https://github.com/satnaing/astro-paper#readme) are updated for this AstroPaper v2.\n\n## Bug Fixes\n\n- fix broken tags in the Blog Post page\n- in a tag page, the last part of the breadcrumb is now updated to lower-case for consistency\n- exclude draft posts in a tag page\n- fix 'onChange value not updating issue' after a page reload","src/data/blog/_releases/astro-paper-2.md",[69],"https://user-images.githubusercontent.com/53733092/215771435-25408246-2309-4f8b-a781-1f3d93bdf0ec.png","c33285ceb5aea3b2",{"html":72,"metadata":73},"\u003Cp>Astro 2.0 has been released with some cool features, breaking changes, DX improvements, better error overlay and so on. AstroPaper takes advantage of those cool features, especially Content Collections API.\u003C/p>\n\u003C!-- ![Introducing AstroPaper 2.0](https://user-images.githubusercontent.com/53733092/215683840-dc2502f5-8c5a-44f0-a26c-4e7180455056.png) -->\n\u003Cp>\u003Cimg src=\"https://user-images.githubusercontent.com/53733092/215771435-25408246-2309-4f8b-a781-1f3d93bdf0ec.png\" alt=\"Introducing AstroPaper 2.0\">\u003C/p>\n\u003Ch2 id=\"table-of-contents\">Table of contents\u003C/h2>\n\u003Cp>\u003C/p>\u003Cdetails>\u003Csummary>Open Table of contents\u003C/summary>\u003Cp>\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ca href=\"#features--changes\">Features & Changes\u003C/a>\n\u003Cul>\n\u003Cli>\u003Ca href=\"#type-safe-frontmatters-and-redefined-blog-schema\">Type-safe Frontmatters and Redefined Blog Schema\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#new-home-for-blog-contents\">New Home for Blog contents\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#new-fetch-api\">New Fetch API\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#modified-search-logic-for-better-search-result\">Modified Search Logic for better Search Result\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#renamed-frontmatter-properties\">Renamed Frontmatter Properties\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#default-tag-for-blog-post\">Default Tag for blog post\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#new-predefined-dark-color-scheme\">New Predefined Dark Color Scheme\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#automatic-class-sorting\">Automatic Class Sorting\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#updated-docs--readme\">Updated Docs & README\u003C/a>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\u003Ca href=\"#bug-fixes\">Bug Fixes\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Cp>\u003C/p>\u003C/details>\u003Cp>\u003C/p>\n\u003Ch2 id=\"features--changes\">Features & Changes\u003C/h2>\n\u003Ch3 id=\"type-safe-frontmatters-and-redefined-blog-schema\">Type-safe Frontmatters and Redefined Blog Schema\u003C/h3>\n\u003Cp>Frontmatter of AstroPaper 2.0 markdown contents are now type-safe thanks to Astro’s Content Collections. Blog schema is defined inside the \u003Ccode>src/content/_schemas.ts\u003C/code> file.\u003C/p>\n\u003Ch3 id=\"new-home-for-blog-contents\">New Home for Blog contents\u003C/h3>\n\u003Cp>All the blog posts were moved from \u003Ccode>src/contents\u003C/code> to \u003Ccode>src/content/blog\u003C/code> directory.\u003C/p>\n\u003Ch3 id=\"new-fetch-api\">New Fetch API\u003C/h3>\n\u003Cp>Contents are now fetched with \u003Ccode>getCollection\u003C/code> function. No relative path to the content needs to be specified anymore.\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"ts\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">// old content fetching method\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">-\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> const\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> postImportResult\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\"> import\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#7FDBCA;--shiki-dark-font-style:italic\">meta\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">glob\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\"><\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#FFCB8B;--shiki-dark-font-style:italic\">MarkdownInstance\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\"><\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#FFCB8B;--shiki-dark-font-style:italic\">Frontmatter\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">>>\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">  \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">../contents/**/**/*.md\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">// new content fetching method\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">+\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> const\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> postImportResult\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\"> await\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> getCollection\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">blog\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"modified-search-logic-for-better-search-result\">Modified Search Logic for better Search Result\u003C/h3>\n\u003Cp>In the older version of AstroPaper, when someone search some article, the search criteria keys that will be searched are \u003Ccode>title\u003C/code>, \u003Ccode>description\u003C/code> and \u003Ccode>headings\u003C/code> (heading means all the headings h1 ~ h6 of the blog post). In AstroPaper v2, only \u003Ccode>title\u003C/code> and \u003Ccode>description\u003C/code> will be searched as the user types.\u003C/p>\n\u003Ch3 id=\"renamed-frontmatter-properties\">Renamed Frontmatter Properties\u003C/h3>\n\u003Cp>The following frontmatter properties are renamed.\u003C/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Old Names\u003C/th>\u003Cth>New Names\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>datetime\u003C/td>\u003Ctd>pubDatetime\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>slug\u003C/td>\u003Ctd>postSlug\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch3 id=\"default-tag-for-blog-post\">Default Tag for blog post\u003C/h3>\n\u003Cp>If a blog post doesn’t have any tag (in other words, frontmatter property \u003Ccode>tags\u003C/code> is not specified), the default tag \u003Ccode>others\u003C/code> will be used for that blog post. But you can set the default tag in the \u003Ccode>/src/content/_schemas.ts\u003C/code> file.\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"ts\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">// src/contents/_schemas.ts\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">export\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> const\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> blogSchema\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">object\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">{\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  // ---\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  // replace \"others\" with whatever you want\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  tags\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">array\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">())\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">default\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">([\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">others\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">])\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  ogImage\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">optional\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  description\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">}\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"new-predefined-dark-color-scheme\">New Predefined Dark Color Scheme\u003C/h3>\n\u003Cp>AstroPaper v2 has a new dark color scheme (high contrast & low contrast) which is based on Astro’s dark logo. Check out \u003Ca href=\"https://astro-paper.pages.dev/posts/predefined-color-schemes#astro-dark\">this link\u003C/a> for more info.\u003C/p>\n\u003Cp>\u003Cimg src=\"https://user-images.githubusercontent.com/53733092/215680520-59427bb0-f4cb-48c0-bccc-f182a428d72d.svg\" alt=\"New Predefined Dark Color Scheme\">\u003C/p>\n\u003Ch3 id=\"automatic-class-sorting\">Automatic Class Sorting\u003C/h3>\n\u003Cp>AstroPaper 2.0 includes automatic class sorting with \u003Ca href=\"https://tailwindcss.com/blog/automatic-class-sorting-with-prettier\">TailwindCSS Prettier plugin\u003C/a>\u003C/p>\n\u003Ch3 id=\"updated-docs--readme\">Updated Docs & README\u003C/h3>\n\u003Cp>All the \u003Ca href=\"https://astro-paper.pages.dev/tags/docs/\">#docs\u003C/a> blog posts and \u003Ca href=\"https://github.com/satnaing/astro-paper#readme\">README\u003C/a> are updated for this AstroPaper v2.\u003C/p>\n\u003Ch2 id=\"bug-fixes\">Bug Fixes\u003C/h2>\n\u003Cul>\n\u003Cli>fix broken tags in the Blog Post page\u003C/li>\n\u003Cli>in a tag page, the last part of the breadcrumb is now updated to lower-case for consistency\u003C/li>\n\u003Cli>exclude draft posts in a tag page\u003C/li>\n\u003Cli>fix ‘onChange value not updating issue’ after a page reload\u003C/li>\n\u003C/ul>",{"headings":74,"localImagePaths":111,"remoteImagePaths":112,"frontmatter":113,"imagePaths":116},[75,78,81,84,87,90,93,96,99,102,105,108],{"depth":31,"slug":76,"text":77},"table-of-contents","Table of contents",{"depth":31,"slug":79,"text":80},"features--changes","Features & Changes",{"depth":45,"slug":82,"text":83},"type-safe-frontmatters-and-redefined-blog-schema","Type-safe Frontmatters and Redefined Blog Schema",{"depth":45,"slug":85,"text":86},"new-home-for-blog-contents","New Home for Blog contents",{"depth":45,"slug":88,"text":89},"new-fetch-api","New Fetch API",{"depth":45,"slug":91,"text":92},"modified-search-logic-for-better-search-result","Modified Search Logic for better Search Result",{"depth":45,"slug":94,"text":95},"renamed-frontmatter-properties","Renamed Frontmatter Properties",{"depth":45,"slug":97,"text":98},"default-tag-for-blog-post","Default Tag for blog post",{"depth":45,"slug":100,"text":101},"new-predefined-dark-color-scheme","New Predefined Dark Color Scheme",{"depth":45,"slug":103,"text":104},"automatic-class-sorting","Automatic Class Sorting",{"depth":45,"slug":106,"text":107},"updated-docs--readme","Updated Docs & README",{"depth":31,"slug":109,"text":110},"bug-fixes","Bug Fixes",[],[],{"author":14,"pubDatetime":114,"title":62,"slug":58,"featured":18,"ogImage":69,"tags":115,"description":65},["Date","2023-01-30T15:57:52.737Z"],[21],[],"setting-dates-via-git-hooks",{"id":117,"data":119,"body":128,"filePath":129,"digest":130,"rendered":131},{"author":120,"pubDatetime":121,"modDatetime":122,"title":123,"featured":18,"draft":18,"tags":124,"description":126,"canonicalURL":127},"Simon Smale",["Date","2024-01-03T20:40:08.000Z"],["Date","2024-01-08T18:59:05.000Z"],"如何使用 Git Hooks 设置创建和修改日期",[20,125],"FAQ","如何使用 Git Hooks 在 AstroPaper 中设置创建和修改日期","https://smale.codes/posts/setting-dates-via-git-hooks/","本文将介绍如何使用 pre-commit Git hook 自动填写 AstroPaper 博客主题前置元数据中的创建日期（`pubDatetime`）和修改日期（`modDatetime`）。\n\n## 目录\n\n## 随处可用\n\n[Git hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks) 非常适合自动化任务，例如[添加](https://gist.github.com/SSmale/3b380e5bbed3233159fb7031451726ea)或[检查](https://itnext.io/using-git-hooks-to-enforce-branch-naming-policy-ffd81fa01e5e)分支名称到提交信息，或者[阻止你提交明文密码](https://gist.github.com/SSmale/367deee757a9b2e119d241e120249000)。它们最大的缺点是客户端 hooks 是按机器配置的。\n\n你可以通过创建一个 `hooks` 目录并手动将它们复制到 `.git/hooks` 目录或设置符号链接来解决这个问题，但这都需要你记得去设置，而这不是我擅长的事情。\n\n由于该项目使用 npm，我们可以利用一个名为 [Husky](https://typicode.github.io/husky/) 的包（AstroPaper 已安装此包）来自动安装 hooks。\n\n> 更新！在 AstroPaper [v4.3.0](https://github.com/satnaing/astro-paper/releases/tag/v4.3.0) 中，pre-commit hook 已被移除，转而使用 GitHub Actions。不过，你可以轻松地[自行安装 Husky](https://typicode.github.io/husky/get-started.html)。\n\n## Hook 内容\n\n我们希望这个 hook 在我们提交代码时运行，以更新日期并将其作为我们更改的一部分，因此我们将使用 `pre-commit` hook。AstroPaper 项目已经设置好了这个 hook，如果没有设置，你可以运行 `npx husky add .husky/pre-commit 'echo \"这是我们新的 pre-commit hook\"'`。\n\n导航到 `hooks/pre-commit` 文件，我们将添加以下一个或两个代码片段。\n\n### 文件被编辑时更新修改日期\n\n---\n\n更新：\n\n本节已更新为更智能的新版本 hook。它现在不会在文章发布前增加 `modDatetime`。首次发布时，将 draft 状态设置为 `first`，然后见证奇迹的发生。\n\n---\n\n```shell\n# 已修改的文件，更新 modDatetime\ngit diff --cached --name-status |\ngrep -i '^M.*\\.md$' |\nwhile read _ file; do\n  filecontent=$(cat \"$file\")\n  frontmatter=$(echo \"$filecontent\" | awk -v RS='---' 'NR==2{print}')\n  draft=$(echo \"$frontmatter\" | awk '/^draft: /{print $2}')\n  if [ \"$draft\" = \"false\" ]; then\n    echo \"$file modDateTime 已更新\"\n    cat $file | sed \"/---.*/,/---.*/s/^modDatetime:.*$/modDatetime: $(date -u \"+%Y-%m-%dT%H:%M:%SZ\")/\" > tmp\n    mv tmp $file\n    git add $file\n  fi\n  if [ \"$draft\" = \"first\" ]; then\n    echo \"首次发布 $file，draft 设为 false，modDateTime 已移除\"\n    cat $file | sed \"/---.*/,/---.*/s/^modDatetime:.*$/modDatetime:/\" | sed \"/---.*/,/---.*/s/^draft:.*$/draft: false/\" > tmp\n    mv tmp $file\n    git add $file\n  fi\ndone\n```\n\n`git diff --cached --name-status` 从 git 中获取已暂存待提交的文件。输出看起来像：\n\n```shell\nA       src/content/blog/setting-dates-via-git-hooks.md\n```\n\n开头的字母表示执行的操作，上例中文件已添加。修改过的文件显示 `M`。\n\n我们将输出传递给 grep 命令，查找已修改的行。该行需要以 `M` 开头（`^(M)`），后面有任意数量的字符（`.*`），并以 `.md` 文件扩展名结尾（`.(md)$`）。这将过滤掉未被修改的 markdown 文件 `egrep -i \"^(M).*\\.(md)$\"`。\n\n---\n\n#### 改进 - 更精确\n\n这可以进一步限定为只查找 `blog` 目录中的 markdown 文件，因为这些文件才有正确的前置元数据。\n\n---\n\n正则表达式将捕获两个部分：字母和文件路径。我们将这个列表传递给 while 循环以遍历匹配的行，并将字母赋值给 `a`，路径赋值给 `b`。我们现在先忽略 `a`。\n\n为了知道文件的 draft 状态，我们需要它的前置元数据。在以下代码中，我们使用 `cat` 获取文件内容，然后使用 `awk` 在前置元数据分隔符（`---`）处分割文件，并取第二个块（前置元数据，即 `---` 之间的部分）。然后再次使用 `awk` 查找 draft 键并输出其值。\n\n```shell\n  filecontent=$(cat \"$file\")\n  frontmatter=$(echo \"$filecontent\" | awk -v RS='---' 'NR==2{print}')\n  draft=$(echo \"$frontmatter\" | awk '/^draft: /{print $2}')\n```\n\n现在我们有了 `draft` 的值，我们将做三件事之一：将 modDatetime 设为当前时间（当 draft 为 false 时 `if [ \"$draft\" = \"false\" ]; then`），清除 modDatetime 并将 draft 设为 false（当 draft 设为 first 时 `if [ \"$draft\" = \"first\" ]; then`），或者什么都不做（其他情况）。\n\n接下来的 sed 命令对我来说有点神奇，因为我不常用它，它是从[另一篇关于类似操作的博客文章](https://mademistakes.com/notes/adding-last-modified-timestamps-with-git/)中复制来的。本质上，它是在文件的前置元数据标签（`---`）内查找 `pubDatetime:` 键，获取整行并将其替换为 `pubDatetime: $(date -u \"+%Y-%m-%dT%H:%M:%SZ\")/\"`，即相同的键和当前日期时间（格式正确）。\n\n这个替换是针对整个文件的，所以我们将结果放入临时文件（`> tmp`），然后将新文件移动（`mv`）到旧文件的位置，覆盖它。然后将其添加到 git 中，就像是我们自己做的更改一样。\n\n---\n\n#### 注意\n\n为了让 `sed` 生效，前置元数据中需要已经存在 `modDatetime` 键。还需要做一些其他更改才能使应用程序能够使用空白日期构建，请参见[下文](#空的-moddatetime-更改)。\n\n---\n\n### 为新文件添加日期\n\n为新文件添加日期的过程同上，但这次我们要查找已添加（`A`）的行，并替换 `pubDatetime` 的值。\n\n```shell\n# 新文件，添加/更新 pubDatetime\ngit diff --cached --name-status | egrep -i \"^(A).*\\.(md)$\" | while read a b; do\n  cat $b | sed \"/---.*/,/---.*/s/^pubDatetime:.*$/pubDatetime: $(date -u \"+%Y-%m-%dT%H:%M:%SZ\")/\" > tmp\n  mv tmp $b\n  git add $b\ndone\n```\n\n---\n\n#### 改进 - 只循环一次\n\n我们可以使用 `a` 变量在循环内切换，在同一个循环中更新 `modDatetime` 或添加 `pubDatetime`。\n\n---\n\n## 填充前置元数据\n\n如果你的 IDE 支持代码片段，则可以选择创建自定义代码片段来填充前置元数据。[AstroPaper v4 默认会为 VSCode 提供一个代码片段。](https://github.com/satnaing/astro-paper/pull/206)\n\n\u003Cvideo autoplay muted=\"muted\" controls plays-inline=\"true\" class=\"border border-skin-line\">\n  \u003Csource src=\"https://github.com/satnaing/astro-paper/assets/17761689/e13babbc-2d78-405d-8758-ca31915e41b0\" type=\"video/mp4\">\n\u003C/video>\n\n## 空的 `modDatetime` 更改\n\n为了让 Astro 能够编译 markdown 并正常工作，它需要知道前置元数据中预期的内容。这是通过 `src/content/config.ts` 中的配置完成的。\n\n为了允许键存在但没有值，我们需要编辑第 10 行，添加 `.nullable()` 函数。\n\n```ts\nconst blog = defineCollection({\n  type: \"content\",\n  schema: ({ image }) =>\n    z.object({\n      author: z.string().default(SITE.author),\n      pubDatetime: z.date(),\n      modDatetime: z.date().optional(), // [!code --]\n      modDatetime: z.date().optional().nullable(), // [!code ++]\n      title: z.string(),\n      featured: z.boolean().optional(),\n      draft: z.boolean().optional(),\n      tags: z.array(z.string()).default([\"others\"]),\n      ogImage: image().or(z.string()).optional(),\n      description: z.string(),\n      canonicalURL: z.string().optional(),\n      readingTime: z.string().optional(),\n    }),\n});\n```\n\n为了不让 IDE 在博客引擎文件中报错，我还做了以下操作：\n\n1. 在 `src/layouts/Layout.astro` 的第 15 行添加了 `| null`，使其看起来像：\n\n   ```typescript\n   export interface Props {\n     title?: string;\n     author?: string;\n     description?: string;\n     ogImage?: string;\n     canonicalURL?: string;\n     pubDatetime?: Date;\n     modDatetime?: Date | null;\n   }\n   ```\n\n2. 在 `src/components/Datetime.tsx` 的第 5 行添加了 `| null`，使其看起来像：\n\n   ```typescript\n   interface DatetimesProps {\n     pubDatetime: string | Date;\n     modDatetime: string | Date | undefined | null;\n   }\n   ```","src/data/blog/setting-dates-via-git-hooks.md","e42f42f5edbb3b00",{"html":132,"metadata":133},"\u003Cp>本文将介绍如何使用 pre-commit Git hook 自动填写 AstroPaper 博客主题前置元数据中的创建日期（\u003Ccode>pubDatetime\u003C/code>）和修改日期（\u003Ccode>modDatetime\u003C/code>）。\u003C/p>\n\u003Ch2 id=\"目录\">目录\u003C/h2>\n\u003Ch2 id=\"随处可用\">随处可用\u003C/h2>\n\u003Cp>\u003Ca href=\"https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks\">Git hooks\u003C/a> 非常适合自动化任务，例如\u003Ca href=\"https://gist.github.com/SSmale/3b380e5bbed3233159fb7031451726ea\">添加\u003C/a>或\u003Ca href=\"https://itnext.io/using-git-hooks-to-enforce-branch-naming-policy-ffd81fa01e5e\">检查\u003C/a>分支名称到提交信息，或者\u003Ca href=\"https://gist.github.com/SSmale/367deee757a9b2e119d241e120249000\">阻止你提交明文密码\u003C/a>。它们最大的缺点是客户端 hooks 是按机器配置的。\u003C/p>\n\u003Cp>你可以通过创建一个 \u003Ccode>hooks\u003C/code> 目录并手动将它们复制到 \u003Ccode>.git/hooks\u003C/code> 目录或设置符号链接来解决这个问题，但这都需要你记得去设置，而这不是我擅长的事情。\u003C/p>\n\u003Cp>由于该项目使用 npm，我们可以利用一个名为 \u003Ca href=\"https://typicode.github.io/husky/\">Husky\u003C/a> 的包（AstroPaper 已安装此包）来自动安装 hooks。\u003C/p>\n\u003Cblockquote>\n\u003Cp>更新！在 AstroPaper \u003Ca href=\"https://github.com/satnaing/astro-paper/releases/tag/v4.3.0\">v4.3.0\u003C/a> 中，pre-commit hook 已被移除，转而使用 GitHub Actions。不过，你可以轻松地\u003Ca href=\"https://typicode.github.io/husky/get-started.html\">自行安装 Husky\u003C/a>。\u003C/p>\n\u003C/blockquote>\n\u003Ch2 id=\"hook-内容\">Hook 内容\u003C/h2>\n\u003Cp>我们希望这个 hook 在我们提交代码时运行，以更新日期并将其作为我们更改的一部分，因此我们将使用 \u003Ccode>pre-commit\u003C/code> hook。AstroPaper 项目已经设置好了这个 hook，如果没有设置，你可以运行 \u003Ccode>npx husky add .husky/pre-commit 'echo \"这是我们新的 pre-commit hook\"'\u003C/code>。\u003C/p>\n\u003Cp>导航到 \u003Ccode>hooks/pre-commit\u003C/code> 文件，我们将添加以下一个或两个代码片段。\u003C/p>\n\u003Ch3 id=\"文件被编辑时更新修改日期\">文件被编辑时更新修改日期\u003C/h3>\n\u003Chr>\n\u003Cp>更新：\u003C/p>\n\u003Cp>本节已更新为更智能的新版本 hook。它现在不会在文章发布前增加 \u003Ccode>modDatetime\u003C/code>。首次发布时，将 draft 状态设置为 \u003Ccode>first\u003C/code>，然后见证奇迹的发生。\u003C/p>\n\u003Chr>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"shell\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"># 已修改的文件，更新 modDatetime\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">git\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> diff\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> --cached\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> --name-status\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">grep\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> -i\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> '\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">^M.*\\.md$\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">'\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">while\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> read\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> _\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> file\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">; \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">do\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  filecontent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">$(\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">cat\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#C5E478\">$file\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  frontmatter\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">$(\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">echo\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#C5E478\">$filecontent\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> awk\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> -v\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> RS=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">'\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">---\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">'\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> '\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">NR==2{print}\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">'\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  draft\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">$(\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">echo\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#C5E478\">$frontmatter\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> awk\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> '\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">/^draft: /{print $2}\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">'\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  if\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> [ \u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#C5E478\">$draft\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">false\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> ]; \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">then\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">    echo\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#C5E478\">$file\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\"> modDateTime 已更新\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">    cat\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\"> $file\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> sed\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">/---.*/,/---.*/s/^modDatetime:.*$/modDatetime: $(\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">date\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> -u\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">+%Y-%m-%dT%H:%M:%SZ\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">)/\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> >\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> tmp\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">    mv\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> tmp\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\"> $file\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">    git\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> add\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\"> $file\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  fi\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  if\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> [ \u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#C5E478\">$draft\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">first\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> ]; \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">then\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">    echo\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">首次发布 \u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#C5E478\">$file\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">，draft 设为 false，modDateTime 已移除\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">    cat\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\"> $file\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> sed\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">/---.*/,/---.*/s/^modDatetime:.*$/modDatetime:/\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> sed\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">/---.*/,/---.*/s/^draft:.*$/draft: false/\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> >\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> tmp\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">    mv\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> tmp\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\"> $file\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">    git\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> add\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\"> $file\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  fi\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">done\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>\u003Ccode>git diff --cached --name-status\u003C/code> 从 git 中获取已暂存待提交的文件。输出看起来像：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"shell\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">A\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">       src/content/blog/setting-dates-via-git-hooks.md\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>开头的字母表示执行的操作，上例中文件已添加。修改过的文件显示 \u003Ccode>M\u003C/code>。\u003C/p>\n\u003Cp>我们将输出传递给 grep 命令，查找已修改的行。该行需要以 \u003Ccode>M\u003C/code> 开头（\u003Ccode>^(M)\u003C/code>），后面有任意数量的字符（\u003Ccode>.*\u003C/code>），并以 \u003Ccode>.md\u003C/code> 文件扩展名结尾（\u003Ccode>.(md)$\u003C/code>）。这将过滤掉未被修改的 markdown 文件 \u003Ccode>egrep -i \"^(M).*\\.(md)$\"\u003C/code>。\u003C/p>\n\u003Chr>\n\u003Ch4 id=\"改进---更精确\">改进 - 更精确\u003C/h4>\n\u003Cp>这可以进一步限定为只查找 \u003Ccode>blog\u003C/code> 目录中的 markdown 文件，因为这些文件才有正确的前置元数据。\u003C/p>\n\u003Chr>\n\u003Cp>正则表达式将捕获两个部分：字母和文件路径。我们将这个列表传递给 while 循环以遍历匹配的行，并将字母赋值给 \u003Ccode>a\u003C/code>，路径赋值给 \u003Ccode>b\u003C/code>。我们现在先忽略 \u003Ccode>a\u003C/code>。\u003C/p>\n\u003Cp>为了知道文件的 draft 状态，我们需要它的前置元数据。在以下代码中，我们使用 \u003Ccode>cat\u003C/code> 获取文件内容，然后使用 \u003Ccode>awk\u003C/code> 在前置元数据分隔符（\u003Ccode>---\u003C/code>）处分割文件，并取第二个块（前置元数据，即 \u003Ccode>---\u003C/code> 之间的部分）。然后再次使用 \u003Ccode>awk\u003C/code> 查找 draft 键并输出其值。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"shell\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  filecontent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">$(\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">cat\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#C5E478\">$file\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  frontmatter\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">$(\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">echo\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#C5E478\">$filecontent\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> awk\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> -v\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> RS=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">'\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">---\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">'\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> '\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">NR==2{print}\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">'\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  draft\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">$(\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">echo\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#C5E478\">$frontmatter\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> awk\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> '\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">/^draft: /{print $2}\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">'\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">)\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>现在我们有了 \u003Ccode>draft\u003C/code> 的值，我们将做三件事之一：将 modDatetime 设为当前时间（当 draft 为 false 时 \u003Ccode>if [ \"$draft\" = \"false\" ]; then\u003C/code>），清除 modDatetime 并将 draft 设为 false（当 draft 设为 first 时 \u003Ccode>if [ \"$draft\" = \"first\" ]; then\u003C/code>），或者什么都不做（其他情况）。\u003C/p>\n\u003Cp>接下来的 sed 命令对我来说有点神奇，因为我不常用它，它是从\u003Ca href=\"https://mademistakes.com/notes/adding-last-modified-timestamps-with-git/\">另一篇关于类似操作的博客文章\u003C/a>中复制来的。本质上，它是在文件的前置元数据标签（\u003Ccode>---\u003C/code>）内查找 \u003Ccode>pubDatetime:\u003C/code> 键，获取整行并将其替换为 \u003Ccode>pubDatetime: $(date -u \"+%Y-%m-%dT%H:%M:%SZ\")/\"\u003C/code>，即相同的键和当前日期时间（格式正确）。\u003C/p>\n\u003Cp>这个替换是针对整个文件的，所以我们将结果放入临时文件（\u003Ccode>> tmp\u003C/code>），然后将新文件移动（\u003Ccode>mv\u003C/code>）到旧文件的位置，覆盖它。然后将其添加到 git 中，就像是我们自己做的更改一样。\u003C/p>\n\u003Chr>\n\u003Ch4 id=\"注意\">注意\u003C/h4>\n\u003Cp>为了让 \u003Ccode>sed\u003C/code> 生效，前置元数据中需要已经存在 \u003Ccode>modDatetime\u003C/code> 键。还需要做一些其他更改才能使应用程序能够使用空白日期构建，请参见\u003Ca href=\"#%E7%A9%BA%E7%9A%84-moddatetime-%E6%9B%B4%E6%94%B9\">下文\u003C/a>。\u003C/p>\n\u003Chr>\n\u003Ch3 id=\"为新文件添加日期\">为新文件添加日期\u003C/h3>\n\u003Cp>为新文件添加日期的过程同上，但这次我们要查找已添加（\u003Ccode>A\u003C/code>）的行，并替换 \u003Ccode>pubDatetime\u003C/code> 的值。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"shell\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"># 新文件，添加/更新 pubDatetime\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">git\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> diff\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> --cached\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> --name-status\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> egrep\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> -i\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">^(A).*\\.(md)$\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\"> while\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\"> read\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> a\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> b\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">; \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">do\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">  cat\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\"> $b\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> sed\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">/---.*/,/---.*/s/^pubDatetime:.*$/pubDatetime: $(\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">date\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> -u\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">+%Y-%m-%dT%H:%M:%SZ\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">)/\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> >\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> tmp\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">  mv\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> tmp\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\"> $b\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">  git\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> add\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\"> $b\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">done\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Chr>\n\u003Ch4 id=\"改进---只循环一次\">改进 - 只循环一次\u003C/h4>\n\u003Cp>我们可以使用 \u003Ccode>a\u003C/code> 变量在循环内切换，在同一个循环中更新 \u003Ccode>modDatetime\u003C/code> 或添加 \u003Ccode>pubDatetime\u003C/code>。\u003C/p>\n\u003Chr>\n\u003Ch2 id=\"填充前置元数据\">填充前置元数据\u003C/h2>\n\u003Cp>如果你的 IDE 支持代码片段，则可以选择创建自定义代码片段来填充前置元数据。\u003Ca href=\"https://github.com/satnaing/astro-paper/pull/206\">AstroPaper v4 默认会为 VSCode 提供一个代码片段。\u003C/a>\u003C/p>\n\u003Cvideo autoplay muted controls plays-inline=\"true\" class=\"border border-skin-line\">\n  \u003Csource src=\"https://github.com/satnaing/astro-paper/assets/17761689/e13babbc-2d78-405d-8758-ca31915e41b0\" type=\"video/mp4\">\n\u003C/video>\n\u003Ch2 id=\"空的-moddatetime-更改\">空的 \u003Ccode>modDatetime\u003C/code> 更改\u003C/h2>\n\u003Cp>为了让 Astro 能够编译 markdown 并正常工作，它需要知道前置元数据中预期的内容。这是通过 \u003Ccode>src/content/config.ts\u003C/code> 中的配置完成的。\u003C/p>\n\u003Cp>为了允许键存在但没有值，我们需要编辑第 10 行，添加 \u003Ccode>.nullable()\u003C/code> 函数。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl has-diff\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"ts\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">const\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> blog\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> defineCollection\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">{\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  type\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">content\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">  schema\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D9F5DD\"> (\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">{\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D7DBE0;--shiki-dark-font-style:italic\"> image\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\"> }\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D9F5DD\">)\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">object\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">{\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">      author\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">default\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">SITE\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#BAEBE2;--shiki-dark-font-style:italic\">author\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">)\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">      pubDatetime\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">date\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff remove\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">      modDatetime\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">date\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">optional\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff add\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">      modDatetime\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">date\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">optional\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">nullable\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">      title\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">      featured\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">boolean\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">optional\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">      draft\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">boolean\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">optional\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">      tags\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">array\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">())\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">default\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">([\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">others\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">])\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">      ogImage\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> image\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">or\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">())\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">optional\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">      description\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">      canonicalURL\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">optional\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">      readingTime\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">optional\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">    }\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">)\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">}\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>为了不让 IDE 在博客引擎文件中报错，我还做了以下操作：\u003C/p>\n\u003Col>\n\u003Cli>\n\u003Cp>在 \u003Ccode>src/layouts/Layout.astro\u003C/code> 的第 15 行添加了 \u003Ccode>| null\u003C/code>，使其看起来像：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"typescript\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">export\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> interface\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#D6DEEB\"> Props\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  title\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">?:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  author\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">?:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  description\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">?:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  ogImage\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">?:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  canonicalURL\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">?:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  pubDatetime\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">?:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#FFCB8B\"> Date\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  modDatetime\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">?:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#FFCB8B\"> Date\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> null\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003C/li>\n\u003Cli>\n\u003Cp>在 \u003Ccode>src/components/Datetime.tsx\u003C/code> 的第 5 行添加了 \u003Ccode>| null\u003C/code>，使其看起来像：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"typescript\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">interface\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#D6DEEB\"> DatetimesProps\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  pubDatetime\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> string\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#FFCB8B\"> Date\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  modDatetime\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> string\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#FFCB8B\"> Date\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> undefined\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> |\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> null\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003C/li>\n\u003C/ol>",{"headings":134,"localImagePaths":159,"remoteImagePaths":160,"frontmatter":161,"imagePaths":165},[135,136,138,141,143,147,149,151,154,156],{"depth":31,"slug":32,"text":32},{"depth":31,"slug":137,"text":137},"随处可用",{"depth":31,"slug":139,"text":140},"hook-内容","Hook 内容",{"depth":45,"slug":142,"text":142},"文件被编辑时更新修改日期",{"depth":144,"slug":145,"text":146},4,"改进---更精确","改进 - 更精确",{"depth":144,"slug":148,"text":148},"注意",{"depth":45,"slug":150,"text":150},"为新文件添加日期",{"depth":144,"slug":152,"text":153},"改进---只循环一次","改进 - 只循环一次",{"depth":31,"slug":155,"text":155},"填充前置元数据",{"depth":31,"slug":157,"text":158},"空的-moddatetime-更改","空的 modDatetime 更改",[],[],{"author":120,"pubDatetime":162,"modDatetime":163,"title":123,"featured":18,"draft":18,"tags":164,"canonicalURL":127,"description":126},["Date","2024-01-03T20:40:08.000Z"],["Date","2024-01-08T18:59:05.000Z"],[20,125],[],"how-to-update-dependencies",{"id":166,"data":168,"body":174,"filePath":175,"assetImports":176,"digest":179,"rendered":180},{"author":14,"pubDatetime":169,"title":170,"featured":18,"draft":18,"tags":171,"ogImage":172,"description":173},["Date","2023-07-20T15:33:05.569Z"],"如何更新 AstroPaper 的依赖",[125],"__ASTRO_IMAGE_../../assets/images/forrest-gump-quote.png","如何更新项目依赖和 AstroPaper 模板。","更新项目依赖可能很繁琐。然而，忽视项目依赖更新也不是一个好主意 😬。在这篇文章中，我将分享我通常如何更新项目，以 AstroPaper 为例。不过，这些步骤也适用于其他 js/node 项目。\n\n![Forrest Gump Fake Quote](@/assets/images/forrest-gump-quote.png)\n\n## 目录\n\n## 更新包依赖\n\n有几种方法可以更新依赖，我尝试了各种方法来找到最简单的路径。一种方法是通过 `npm install package-name@latest` 手动更新每个包。这是最直接的更新方式。然而，这可能不是最高效的选择。\n\n我推荐的更新依赖方式是使用 [npm-check-updates 包](https://www.npmjs.com/package/npm-check-updates)。freeCodeCamp 上有一篇很好的[文章](https://www.freecodecamp.org/news/how-to-update-npm-dependencies/)介绍了这个工具，所以我不会解释它是什么以及如何使用它。相反，我将展示我的典型做法。\n\n首先，全局安装 `npm-check-updates` 包。\n\n```bash\nnpm install -g npm-check-updates\n```\n\n在进行任何更新之前，最好先检查所有可以更新的新依赖。\n\n```bash\nncu\n```\n\n大多数情况下，补丁版本的依赖可以在不影响项目的情况下更新。因此，我通常通过运行 `ncu -i --target patch` 或 `ncu -u --target patch` 来更新补丁版本。区别在于 `ncu -u --target patch` 会更新所有补丁，而 `ncu -i --target patch` 会提供一个选项来选择要更新哪些包。由你来决定采用哪种方式。\n\n接下来是更新次要版本依赖。次要版本的包更新通常不会破坏项目，但最好还是检查一下各个包的发布说明。这些次要更新通常包含一些很酷的功能，可以应用到我们的项目中。\n\n```bash\nncu -i --target minor\n```\n\n最后但同样重要的是，依赖中可能会有一些主要版本的包更新。因此，通过运行以下命令来检查剩余的依赖更新：\n\n```bash\nncu -i\n```\n\n如果有任何主要版本更新（或你仍需进行的一些更新），上述命令将输出这些剩余的包。如果包是主要版本更新，你必须非常小心，因为这很可能会破坏整个项目。因此，请仔细阅读相应的发布说明（或文档），并进行相应的更改。\n\n如果你运行 `ncu -i` 后发现没有更多需要更新的包，_**恭喜！！！**_ 你已经成功更新了项目中的所有依赖。\n\n## 更新 AstroPaper 模板\n\n与其他开源项目一样，AstroPaper 也在不断进化，修复 bug、更新功能等。因此，如果你是使用 AstroPaper 作为模板的人，当有新版发布时，你可能也想更新模板。\n\n问题是，你可能已经根据自己的喜好修改了模板。因此，我无法确切地展示**\"放之四海而皆准的完美方式\"**来将模板更新到最新版本。不过，这里有一些在不破坏仓库的情况下更新模板的技巧。请记住，大多数情况下，更新包依赖可能就足够了。\n\n### 需要注意的文件和目录\n\n大多数情况下，你可能不想覆盖的文件和目录是 `src/content/blog/`、`src/config.ts`、`src/pages/about.md`，以及其他资源和样式，如 `public/` 和 `src/styles/base.css`（因为你很可能已经修改了这些文件）。\n\n如果你是最小化修改模板的人，那么除了上述文件和目录外，将所有内容替换为最新的 AstroPaper 应该是可以的。这就像原生 Android 操作系统与其他厂商特定操作系统（如 OneUI）的关系。你对基础内容的修改越少，你需要更新的内容就越少。\n\n你可以逐个手动替换每个文件，也可以使用 git 的神奇力量来更新所有内容。我不会展示手动替换的过程，因为它非常简单。如果你对这种直接但低效的方法不感兴趣，那就请耐心听我说 🐻。\n\n### 使用 Git 更新 AstroPaper\n\n**重要！！！**\n\n> 只有在你了解如何解决合并冲突时才执行以下操作。否则，你最好手动替换文件或仅更新依赖。\n\n首先，将 astro-paper 添加为项目的远程仓库。\n\n```bash\ngit remote add astro-paper https://github.com/satnaing/astro-paper.git\n```\n\n检出一个新分支以更新模板。如果你知道自己在做什么，并且对自己的 git 技能有信心，可以跳过此步骤。\n\n```bash\ngit checkout -b build/update-astro-paper\n```\n\n然后，通过运行以下命令从 astro-paper 拉取更改：\n\n```bash\ngit pull astro-paper main\n```\n\n如果遇到 `fatal: refusing to merge unrelated histories` 错误，可以通过运行以下命令解决：\n\n```bash\ngit pull astro-paper main --allow-unrelated-histories\n```\n\n运行上述命令后，你很可能会在项目中遇到冲突。你需要手动解决这些冲突，并根据需要进行必要的调整。\n\n解决冲突后，彻底测试你的博客，确保一切按预期运行。检查你的文章、组件以及任何自定义修改。\n\n对结果满意后，就可以将更新分支合并到你的主分支了（仅当你在另一个分支中更新模板时才需要这样做）。恭喜！你已成功将模板更新到最新版本。你的博客现在是最新的，准备好闪耀登场了！🎉\n\n## 结论\n\n在这篇文章中，我分享了一些关于更新依赖和 AstroPaper 模板的见解和流程。我真诚希望这篇文章对你有所帮助，并能协助你更有效地管理项目。\n\n如果你有其他替代方案或改进方法来更新依赖/AstroPaper，我很乐意听取你的意见。因此，请不要犹豫，在仓库中发起讨论、发送电子邮件给我或提交 issue。非常感谢你的意见和想法！\n\n请理解我最近日程很忙，可能无法快速回复。但我保证会尽快回复你。😬\n\n感谢你花时间阅读这篇文章，祝你项目一切顺利！","src/data/blog/how-to-update-dependencies.md",[177,178],"@/assets/images/forrest-gump-quote.png","../../assets/images/forrest-gump-quote.png","59e3cab61b384796",{"html":181,"metadata":182},"\u003Cp>更新项目依赖可能很繁琐。然而，忽视项目依赖更新也不是一个好主意 😬。在这篇文章中，我将分享我通常如何更新项目，以 AstroPaper 为例。不过，这些步骤也适用于其他 js/node 项目。\u003C/p>\n\u003Cp>\u003Cimg __ASTRO_IMAGE_=\"{"src":"@/assets/images/forrest-gump-quote.png","alt":"Forrest Gump Fake Quote","index":0}\">\u003C/p>\n\u003Ch2 id=\"目录\">目录\u003C/h2>\n\u003Ch2 id=\"更新包依赖\">更新包依赖\u003C/h2>\n\u003Cp>有几种方法可以更新依赖，我尝试了各种方法来找到最简单的路径。一种方法是通过 \u003Ccode>npm install package-name@latest\u003C/code> 手动更新每个包。这是最直接的更新方式。然而，这可能不是最高效的选择。\u003C/p>\n\u003Cp>我推荐的更新依赖方式是使用 \u003Ca href=\"https://www.npmjs.com/package/npm-check-updates\">npm-check-updates 包\u003C/a>。freeCodeCamp 上有一篇很好的\u003Ca href=\"https://www.freecodecamp.org/news/how-to-update-npm-dependencies/\">文章\u003C/a>介绍了这个工具，所以我不会解释它是什么以及如何使用它。相反，我将展示我的典型做法。\u003C/p>\n\u003Cp>首先，全局安装 \u003Ccode>npm-check-updates\u003C/code> 包。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">npm\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> install\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> -g\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> npm-check-updates\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>在进行任何更新之前，最好先检查所有可以更新的新依赖。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">ncu\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>大多数情况下，补丁版本的依赖可以在不影响项目的情况下更新。因此，我通常通过运行 \u003Ccode>ncu -i --target patch\u003C/code> 或 \u003Ccode>ncu -u --target patch\u003C/code> 来更新补丁版本。区别在于 \u003Ccode>ncu -u --target patch\u003C/code> 会更新所有补丁，而 \u003Ccode>ncu -i --target patch\u003C/code> 会提供一个选项来选择要更新哪些包。由你来决定采用哪种方式。\u003C/p>\n\u003Cp>接下来是更新次要版本依赖。次要版本的包更新通常不会破坏项目，但最好还是检查一下各个包的发布说明。这些次要更新通常包含一些很酷的功能，可以应用到我们的项目中。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">ncu\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> -i\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> --target\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> minor\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>最后但同样重要的是，依赖中可能会有一些主要版本的包更新。因此，通过运行以下命令来检查剩余的依赖更新：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">ncu\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> -i\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>如果有任何主要版本更新（或你仍需进行的一些更新），上述命令将输出这些剩余的包。如果包是主要版本更新，你必须非常小心，因为这很可能会破坏整个项目。因此，请仔细阅读相应的发布说明（或文档），并进行相应的更改。\u003C/p>\n\u003Cp>如果你运行 \u003Ccode>ncu -i\u003C/code> 后发现没有更多需要更新的包，\u003Cem>\u003Cstrong>恭喜！！！\u003C/strong>\u003C/em> 你已经成功更新了项目中的所有依赖。\u003C/p>\n\u003Ch2 id=\"更新-astropaper-模板\">更新 AstroPaper 模板\u003C/h2>\n\u003Cp>与其他开源项目一样，AstroPaper 也在不断进化，修复 bug、更新功能等。因此，如果你是使用 AstroPaper 作为模板的人，当有新版发布时，你可能也想更新模板。\u003C/p>\n\u003Cp>问题是，你可能已经根据自己的喜好修改了模板。因此，我无法确切地展示**“放之四海而皆准的完美方式”**来将模板更新到最新版本。不过，这里有一些在不破坏仓库的情况下更新模板的技巧。请记住，大多数情况下，更新包依赖可能就足够了。\u003C/p>\n\u003Ch3 id=\"需要注意的文件和目录\">需要注意的文件和目录\u003C/h3>\n\u003Cp>大多数情况下，你可能不想覆盖的文件和目录是 \u003Ccode>src/content/blog/\u003C/code>、\u003Ccode>src/config.ts\u003C/code>、\u003Ccode>src/pages/about.md\u003C/code>，以及其他资源和样式，如 \u003Ccode>public/\u003C/code> 和 \u003Ccode>src/styles/base.css\u003C/code>（因为你很可能已经修改了这些文件）。\u003C/p>\n\u003Cp>如果你是最小化修改模板的人，那么除了上述文件和目录外，将所有内容替换为最新的 AstroPaper 应该是可以的。这就像原生 Android 操作系统与其他厂商特定操作系统（如 OneUI）的关系。你对基础内容的修改越少，你需要更新的内容就越少。\u003C/p>\n\u003Cp>你可以逐个手动替换每个文件，也可以使用 git 的神奇力量来更新所有内容。我不会展示手动替换的过程，因为它非常简单。如果你对这种直接但低效的方法不感兴趣，那就请耐心听我说 🐻。\u003C/p>\n\u003Ch3 id=\"使用-git-更新-astropaper\">使用 Git 更新 AstroPaper\u003C/h3>\n\u003Cp>\u003Cstrong>重要！！！\u003C/strong>\u003C/p>\n\u003Cblockquote>\n\u003Cp>只有在你了解如何解决合并冲突时才执行以下操作。否则，你最好手动替换文件或仅更新依赖。\u003C/p>\n\u003C/blockquote>\n\u003Cp>首先，将 astro-paper 添加为项目的远程仓库。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">git\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> remote\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> add\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> astro-paper\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> https://github.com/satnaing/astro-paper.git\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>检出一个新分支以更新模板。如果你知道自己在做什么，并且对自己的 git 技能有信心，可以跳过此步骤。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">git\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> checkout\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> -b\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> build/update-astro-paper\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>然后，通过运行以下命令从 astro-paper 拉取更改：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">git\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> pull\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> astro-paper\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> main\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>如果遇到 \u003Ccode>fatal: refusing to merge unrelated histories\u003C/code> 错误，可以通过运行以下命令解决：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">git\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> pull\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> astro-paper\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> main\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> --allow-unrelated-histories\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>运行上述命令后，你很可能会在项目中遇到冲突。你需要手动解决这些冲突，并根据需要进行必要的调整。\u003C/p>\n\u003Cp>解决冲突后，彻底测试你的博客，确保一切按预期运行。检查你的文章、组件以及任何自定义修改。\u003C/p>\n\u003Cp>对结果满意后，就可以将更新分支合并到你的主分支了（仅当你在另一个分支中更新模板时才需要这样做）。恭喜！你已成功将模板更新到最新版本。你的博客现在是最新的，准备好闪耀登场了！🎉\u003C/p>\n\u003Ch2 id=\"结论\">结论\u003C/h2>\n\u003Cp>在这篇文章中，我分享了一些关于更新依赖和 AstroPaper 模板的见解和流程。我真诚希望这篇文章对你有所帮助，并能协助你更有效地管理项目。\u003C/p>\n\u003Cp>如果你有其他替代方案或改进方法来更新依赖/AstroPaper，我很乐意听取你的意见。因此，请不要犹豫，在仓库中发起讨论、发送电子邮件给我或提交 issue。非常感谢你的意见和想法！\u003C/p>\n\u003Cp>请理解我最近日程很忙，可能无法快速回复。但我保证会尽快回复你。😬\u003C/p>\n\u003Cp>感谢你花时间阅读这篇文章，祝你项目一切顺利！\u003C/p>",{"headings":183,"localImagePaths":197,"remoteImagePaths":198,"frontmatter":199,"imagePaths":202},[184,185,187,190,192,195],{"depth":31,"slug":32,"text":32},{"depth":31,"slug":186,"text":186},"更新包依赖",{"depth":31,"slug":188,"text":189},"更新-astropaper-模板","更新 AstroPaper 模板",{"depth":45,"slug":191,"text":191},"需要注意的文件和目录",{"depth":45,"slug":193,"text":194},"使用-git-更新-astropaper","使用 Git 更新 AstroPaper",{"depth":31,"slug":196,"text":196},"结论",[177],[],{"title":170,"author":14,"pubDatetime":200,"slug":166,"featured":18,"draft":18,"ogImage":178,"tags":201,"description":173},["Date","2023-07-20T15:33:05.569Z"],[125],[177],"customizing-astropaper-theme-color-schemes",{"id":203,"data":205,"body":212,"filePath":213,"digest":214,"rendered":215},{"author":14,"pubDatetime":206,"modDatetime":207,"title":208,"featured":18,"draft":18,"tags":209,"description":211},["Date","2022-09-25T15:20:35.000Z"],["Date","2026-01-09T15:00:15.170Z"],"自定义 AstroPaper 主题颜色方案",[210,20],"color-schemes","如何启用/禁用浅色与深色模式；以及自定义 AstroPaper 主题的颜色方案。","本文将解释如何启用/禁用网站的浅色与深色模式。此外，你将学习如何自定义整个网站的颜色方案。\n\n## 目录\n\n## 启用/禁用浅色与深色模式\n\nAstroPaper 主题默认包含浅色和深色模式。换句话说，将有两种颜色方案——一种用于浅色模式，另一种用于深色模式。此默认行为可以在 `SITE` 配置对象中禁用。\n\n```js file=\"src/config.ts\"\nexport const SITE = {\n  website: \"https://astro-paper.pages.dev/\", // 替换为你的部署域名\n  author: \"Sat Naing\",\n  profile: \"https://satnaing.dev/\",\n  desc: \"一个简约、响应式且 SEO 友好的 Astro 博客主题。\",\n  title: \"AstroPaper\",\n  ogImage: \"astropaper-og.jpg\",\n  lightAndDarkMode: true, // [!code highlight]\n  postPerIndex: 4,\n  postPerPage: 4,\n  scheduledPostMargin: 15 * 60 * 1000, // 15 分钟\n  showArchives: true,\n  showBackButton: true, // 在文章详情中显示返回按钮\n  editPost: {\n    enabled: true,\n    text: \"建议修改\",\n    url: \"https://github.com/satnaing/astro-paper/edit/main/\",\n  },\n  dynamicOgImage: true,\n  lang: \"en\", // html lang 代码。设为空则默认为 \"en\"\n  timezone: \"Asia/Bangkok\", // 默认全局时区（IANA 格式）https://en.wikipedia.org/wiki/List_of_tz_database_time_zones\n} as const;\n```\n\n要禁用`浅色与深色模式`，将 `SITE.lightAndDarkMode` 设为 `false`。\n\n## 选择初始颜色方案\n\n默认情况下，如果我们禁用 `SITE.lightAndDarkMode`，我们将只获得系统的 prefers-color-scheme。\n\n因此，要选择初始颜色方案而不是 prefers-color-scheme，我们需要在 `theme.ts` 中设置 `initialColorScheme` 变量。\n\n```ts file=\"src/scripts/theme.ts\"\n// 初始颜色方案\n// 可以是 \"light\"、\"dark\" 或空字符串（使用系统 prefers-color-scheme）\nconst initialColorScheme = \"\"; // \"light\" | \"dark\" // [!code hl]\n\nfunction getPreferTheme(): string {\n  // 从本地存储获取主题数据（用户的明确选择）\n  const currentTheme = localStorage.getItem(\"theme\");\n  if (currentTheme) return currentTheme;\n\n  // 如果设置了初始颜色方案，则返回（站点默认）\n  if (initialColorScheme) return initialColorScheme;\n\n  // 返回用户设备的偏好颜色方案（系统后备）\n  return window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n    ? \"dark\"\n    : \"light\";\n}\n\n// ...\n```\n\n**initialColorScheme** 变量可以接受两个值：`\"light\"`、`\"dark\"`。如果你不想指定初始颜色方案，可以保留空字符串（默认值）。\n\n- `\"\"` - 系统的 prefers-color-scheme。（默认）\n- `\"light\"` - 使用浅色模式作为初始颜色方案。\n- `\"dark\"` - 使用深色模式作为初始颜色方案。\n\n\u003Cdetails>\n\u003Csummary>为什么 initialColorScheme 不在 config.ts 中？\u003C/summary>\n为了避免页面重新加载时的颜色闪烁，我们必须在页面加载时尽可能早地放置主题初始化 JavaScript 代码。主题脚本分为两部分：一个在 `\u003Chead>` 中的最小内联脚本，用于立即设置主题；以及完整的脚本，异步加载。这种方法可以在保持最佳性能的同时防止 FOUC（未样式内容的闪烁）。\n\u003C/details>\n\n## 自定义颜色方案\n\nAstroPaper 主题的浅色和深色颜色方案都可以在 `global.css` 文件中自定义。\n\n```css file=\"src/styles/global.css\"\n@import \"tailwindcss\";\n@import \"./typography.css\";\n\n@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));\n\n:root,\nhtml[data-theme=\"light\"] {\n  --background: #fdfdfd;\n  --foreground: #282728;\n  --accent: #006cac;\n  --muted: #e6e6e6;\n  --border: #ece9e9;\n}\n\nhtml[data-theme=\"dark\"] {\n  --background: #212737;\n  --foreground: #eaedf3;\n  --accent: #ff6b01;\n  --muted: #343f60bf;\n  --border: #ab4b08;\n}\n/* ... */\n```\n\n在 AstroPaper 主题中，`:root` 和 `html[data-theme=\"light\"]` 选择器定义浅色颜色方案，而 `html[data-theme=\"dark\"]` 定义深色颜色方案。\n\n要自定义你自己的颜色方案，请在 `:root, html[data-theme=\"light\"]` 中指定你的浅色颜色，在 `html[data-theme=\"dark\"]` 中指定你的深色颜色。\n\n以下是颜色属性的详细说明。\n\n| 颜色属性         | 定义与用途                                    |\n| ---------------- | --------------------------------------------- |\n| `--background`   | 网站的主色。通常是主要背景色。                |\n| `--foreground`   | 网站的次要颜色。通常是文本颜色。              |\n| `--accent`       | 网站的重点色。链接颜色、悬停颜色等。          |\n| `--muted`        | 卡片和滚动条背景色，用于悬停状态等。          |\n| `--border`       | 边框颜色。用于边框工具类和视觉分隔。          |\n\n以下是更改浅色颜色方案的示例。\n\n```css file=\"src/styles/global.css\"\n/* ... */\n:root,\nhtml[data-theme=\"light\"] {\n  --background: #f6eee1;\n  --foreground: #012c56;\n  --accent: #e14a39;\n  --muted: #efd8b0;\n  --border: #dc9891;\n}\n/* ... */\n```\n\n> 查看 AstroPaper 已经为你制作的一些[预设颜色方案](https://astro-paper.pages.dev/posts/predefined-color-schemes/)。","src/data/blog/customizing-astropaper-theme-color-schemes.md","4921dda657f8abbe",{"html":216,"metadata":217},"\u003Cp>本文将解释如何启用/禁用网站的浅色与深色模式。此外，你将学习如何自定义整个网站的颜色方案。\u003C/p>\n\u003Ch2 id=\"目录\">目录\u003C/h2>\n\u003Ch2 id=\"启用禁用浅色与深色模式\">启用/禁用浅色与深色模式\u003C/h2>\n\u003Cp>AstroPaper 主题默认包含浅色和深色模式。换句话说，将有两种颜色方案——一种用于浅色模式，另一种用于深色模式。此默认行为可以在 \u003Ccode>SITE\u003C/code> 配置对象中禁用。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl has-highlighted mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">export\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> const\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> SITE\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  website\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">https://astro-paper.pages.dev/\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"> // 替换为你的部署域名\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  author\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">Sat Naing\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  profile\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">https://satnaing.dev/\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  desc\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">一个简约、响应式且 SEO 友好的 Astro 博客主题。\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  title\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">AstroPaper\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  ogImage\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">astropaper-og.jpg\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  lightAndDarkMode\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#FF5874;--shiki-dark-font-style:italic\"> true\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  postPerIndex\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 4\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  postPerPage\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 4\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  scheduledPostMargin\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 15\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> *\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 60\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> *\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 1000\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"> // 15 分钟\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  showArchives\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#FF5874;--shiki-dark-font-style:italic\"> true\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  showBackButton\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#FF5874;--shiki-dark-font-style:italic\"> true\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"> // 在文章详情中显示返回按钮\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  editPost\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">    enabled\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#FF5874;--shiki-dark-font-style:italic\"> true\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">    text\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">建议修改\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">    url\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">https://github.com/satnaing/astro-paper/edit/main/\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">  }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  dynamicOgImage\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#FF5874;--shiki-dark-font-style:italic\"> true\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  lang\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">en\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"> // html lang 代码。设为空则默认为 \"en\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  timezone\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">Asia/Bangkok\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"> // 默认全局时区（IANA 格式）https://en.wikipedia.org/wiki/List_of_tz_database_time_zones\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">}\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\"> as\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\"> const\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/config.ts\u003C/span>\u003C/pre>\n\u003Cp>要禁用\u003Ccode>浅色与深色模式\u003C/code>，将 \u003Ccode>SITE.lightAndDarkMode\u003C/code> 设为 \u003Ccode>false\u003C/code>。\u003C/p>\n\u003Ch2 id=\"选择初始颜色方案\">选择初始颜色方案\u003C/h2>\n\u003Cp>默认情况下，如果我们禁用 \u003Ccode>SITE.lightAndDarkMode\u003C/code>，我们将只获得系统的 prefers-color-scheme。\u003C/p>\n\u003Cp>因此，要选择初始颜色方案而不是 prefers-color-scheme，我们需要在 \u003Ccode>theme.ts\u003C/code> 中设置 \u003Ccode>initialColorScheme\u003C/code> 变量。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl has-highlighted mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"ts\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">// 初始颜色方案\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">// 可以是 \"light\"、\"dark\" 或空字符串（使用系统 prefers-color-scheme）\u003C/span>\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">const\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> initialColorScheme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">; \u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">// \"light\" | \"dark\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">function\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> getPreferTheme\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D9F5DD\">()\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  // 从本地存储获取主题数据（用户的明确选择）\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">  const\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> currentTheme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> localStorage\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">getItem\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">theme\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">  if\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> (currentTheme) \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">return\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> currentTheme;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  // 如果设置了初始颜色方案，则返回（站点默认）\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">  if\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> (initialColorScheme) \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">return\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> initialColorScheme;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  // 返回用户设备的偏好颜色方案（系统后备）\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  return\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#D6DEEB\"> window\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">matchMedia\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">(prefers-color-scheme: dark)\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">)\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#BAEBE2\">matches\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">    ?\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">dark\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">    :\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">light\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">// ...\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/scripts/theme.ts\u003C/span>\u003C/pre>\n\u003Cp>\u003Cstrong>initialColorScheme\u003C/strong> 变量可以接受两个值：\u003Ccode>\"light\"\u003C/code>、\u003Ccode>\"dark\"\u003C/code>。如果你不想指定初始颜色方案，可以保留空字符串（默认值）。\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode>\"\"\u003C/code> - 系统的 prefers-color-scheme。（默认）\u003C/li>\n\u003Cli>\u003Ccode>\"light\"\u003C/code> - 使用浅色模式作为初始颜色方案。\u003C/li>\n\u003Cli>\u003Ccode>\"dark\"\u003C/code> - 使用深色模式作为初始颜色方案。\u003C/li>\n\u003C/ul>\n\u003Cdetails>\n\u003Csummary>为什么 initialColorScheme 不在 config.ts 中？\u003C/summary>\n为了避免页面重新加载时的颜色闪烁，我们必须在页面加载时尽可能早地放置主题初始化 JavaScript 代码。主题脚本分为两部分：一个在 `` 中的最小内联脚本，用于立即设置主题；以及完整的脚本，异步加载。这种方法可以在保持最佳性能的同时防止 FOUC（未样式内容的闪烁）。\n\u003C/details>\n\u003Ch2 id=\"自定义颜色方案\">自定义颜色方案\u003C/h2>\n\u003Cp>AstroPaper 主题的浅色和深色颜色方案都可以在 \u003Ccode>global.css\u003C/code> 文件中自定义。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">@\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">tailwindcss\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">@\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">./typography.css\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">@\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">custom-variant\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> dark (&:where([data-theme=dark], [data-theme=dark] *));\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#C5E478\">:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">root\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">html\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">[\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">data-theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">light\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">]\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --background\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">fdfdfd\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --foreground\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">282728\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --accent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">006cac\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --muted\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">e6e6e6\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --border\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">ece9e9\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">html\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">[\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">data-theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">dark\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">]\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --background\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">212737\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --foreground\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">eaedf3\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --accent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">ff6b01\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --muted\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">343f60bf\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --border\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">ab4b08\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">/* ... */\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/styles/global.css\u003C/span>\u003C/pre>\n\u003Cp>在 AstroPaper 主题中，\u003Ccode>:root\u003C/code> 和 \u003Ccode>html[data-theme=\"light\"]\u003C/code> 选择器定义浅色颜色方案，而 \u003Ccode>html[data-theme=\"dark\"]\u003C/code> 定义深色颜色方案。\u003C/p>\n\u003Cp>要自定义你自己的颜色方案，请在 \u003Ccode>:root, html[data-theme=\"light\"]\u003C/code> 中指定你的浅色颜色，在 \u003Ccode>html[data-theme=\"dark\"]\u003C/code> 中指定你的深色颜色。\u003C/p>\n\u003Cp>以下是颜色属性的详细说明。\u003C/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>颜色属性\u003C/th>\u003Cth>定义与用途\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>--background\u003C/code>\u003C/td>\u003Ctd>网站的主色。通常是主要背景色。\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--foreground\u003C/code>\u003C/td>\u003Ctd>网站的次要颜色。通常是文本颜色。\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--accent\u003C/code>\u003C/td>\u003Ctd>网站的重点色。链接颜色、悬停颜色等。\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--muted\u003C/code>\u003C/td>\u003Ctd>卡片和滚动条背景色，用于悬停状态等。\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>--border\u003C/code>\u003C/td>\u003Ctd>边框颜色。用于边框工具类和视觉分隔。\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cp>以下是更改浅色颜色方案的示例。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">/* ... */\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#C5E478\">:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">root\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">html\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">[\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">data-theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">light\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">]\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --background\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">f6eee1\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --foreground\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">012c56\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --accent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">e14a39\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --muted\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">efd8b0\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --border\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">dc9891\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">/* ... */\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/styles/global.css\u003C/span>\u003C/pre>\n\u003Cblockquote>\n\u003Cp>查看 AstroPaper 已经为你制作的一些\u003Ca href=\"https://astro-paper.pages.dev/posts/predefined-color-schemes/\">预设颜色方案\u003C/a>。\u003C/p>\n\u003C/blockquote>",{"headings":218,"localImagePaths":227,"remoteImagePaths":228,"frontmatter":229,"imagePaths":233},[219,220,223,225],{"depth":31,"slug":32,"text":32},{"depth":31,"slug":221,"text":222},"启用禁用浅色与深色模式","启用/禁用浅色与深色模式",{"depth":31,"slug":224,"text":224},"选择初始颜色方案",{"depth":31,"slug":226,"text":226},"自定义颜色方案",[],[],{"author":14,"pubDatetime":230,"modDatetime":231,"title":208,"featured":18,"draft":18,"tags":232,"description":211},["Date","2022-09-25T15:20:35.000Z"],["Date","2026-01-09T15:00:15.170Z"],[210,20],[],"predefined-color-schemes",{"id":234,"data":236,"body":242,"filePath":243,"digest":244,"rendered":245},{"author":14,"pubDatetime":237,"modDatetime":238,"title":239,"featured":18,"draft":18,"tags":240,"description":241},["Date","2022-09-26T12:13:24.000Z"],["Date","2024-01-04T09:09:06.000Z"],"预设颜色方案",[210],"为 AstroPaper 博客主题精心制作的一些预设颜色方案。","我为这个 AstroPaper 博客主题精心制作了一些预设颜色方案。你可以用这些方案替换原有的颜色方案。\n\n如果你不知道如何配置颜色方案，请查看[这篇博客文章](https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/)。\n\n## 目录\n\n## 浅色颜色方案\n\n浅色颜色方案需要使用 CSS 选择器 `:root` 和 `html[data-theme=\"light\"]` 来定义。\n\n### 龙虾红\n\n![lobster-color-scheme](https://user-images.githubusercontent.com/53733092/192282447-1d222faf-a3ce-44a9-9cfe-ac873155e5a9.png)\n\n```css\n:root,\nhtml[data-theme=\"light\"] {\n  --background: #f6eee1;\n  --foreground: #012c56;\n  --accent: #e14a39;\n  --muted: #efd8b0;\n  --border: #dc9891;\n}\n```\n\n### 叶蓝\n\n![leaf-blue-color-scheme](https://user-images.githubusercontent.com/53733092/192318782-e80e3c39-54b5-423e-8f4b-9ae60402fc8d.png)\n\n```css\n:root,\nhtml[data-theme=\"light\"] {\n  --background: #f2f5ec;\n  --foreground: #353538;\n  --accent: #1158d1;\n  --muted: #bbc789;\n  --border: #7cadff;\n}\n```\n\n### 粉红浅色\n\n![pinky-color-scheme](https://user-images.githubusercontent.com/53733092/192286510-892d0042-2d6d-471e-bb72-954221ae2d17.png)\n\n```css\n:root,\nhtml[data-theme=\"light\"] {\n  --background: #fafcfc;\n  --foreground: #222e36;\n  --accent: #d3006a;\n  --muted: #f1bad4;\n  --border: #e3a9c6;\n}\n```\n\n## 深色颜色方案\n\n深色颜色方案需要定义为 `html[data-theme=\"dark\"]`。\n\n### AstroPaper 1 原始深色主题\n\n![AstroPaper 1 default dark theme](https://user-images.githubusercontent.com/53733092/215769153-13b0ad8d-5ba2-44b1-af06-e5ae61293f62.png)\n\n```css\nhtml[data-theme=\"dark\"] {\n  --background: #2f3741;\n  --foreground: #e6e6e6;\n  --accent: #1ad9d9;\n  --muted: #596b81;\n  --border: #3b4655;\n}\n```\n\n### 深牡蛎\n\n![deep-oyster-color-scheme](https://user-images.githubusercontent.com/53733092/192314524-45ec5904-3d8f-450a-9edf-1e32c5e11d6c.png)\n\n```css\nhtml[data-theme=\"dark\"] {\n  --background: #21233d;\n  --foreground: #f4f7f5;\n  --accent: #ff5256;\n  --muted: #4a4e86;\n  --border: #b12f32;\n}\n```\n\n### 粉红深色\n\n![pinky-dark-color-scheme](https://user-images.githubusercontent.com/53733092/192307050-fbd55326-911c-4001-87c6-a8ad9378ac2e.png)\n\n```css\nhtml[data-theme=\"dark\"] {\n  --background: #353640;\n  --foreground: #e9edf1;\n  --accent: #ff78c8;\n  --muted: #715566;\n  --border: #86436b;\n}\n```\n\n### Astro 深色（高对比度）\n\n![astro-dark-color-scheme](https://user-images.githubusercontent.com/53733092/215680520-59427bb0-f4cb-48c0-bccc-f182a428d72d.svg)\n\n```css\nhtml[data-theme=\"dark\"] {\n  --background: #212737;\n  --foreground: #eaedf3;\n  --accent: #ff6b01;\n  --muted: #8a3302;\n  --border: #ab4b08;\n}\n```\n\n### Astro 深色（AstroPaper 2 的新默认深色主题）\n\n![new dark color scheme - low contrast](https://user-images.githubusercontent.com/53733092/215772856-d5b7ae35-ddaa-4ed6-b0bf-3fa5dbcf834c.png)\n\n```css\nhtml[data-theme=\"dark\"] {\n  --background: #212737; /* 较低对比度的背景 */\n  --foreground: #eaedf3;\n  --accent: #ff6b01;\n  --muted: #8a3302;\n  --border: #ab4b08;\n}\n```\n\n### Astro 深紫（AstroPaper 3 的新深色主题）\n\n![AstroPaper v3 new theme](https://github.com/satnaing/astro-paper/assets/53733092/c8b5d7e1-a3bc-4852-a5ad-4abf7b3cec79)\n\n```css\nhtml[data-theme=\"dark\"] {\n  --background: #212737;\n  --foreground: #eaedf3;\n  --accent: #eb3fd3;\n  --muted: #7d4f7c;\n  --border: #642451;\n}\n```\n\n### AstroPaper v4 特别版（AstroPaper 4 的新深色主题）\n\n![AstroPaper v4 new theme](https://github.com/satnaing/astro-paper/assets/53733092/66eb74dc-7a0e-4f2e-982d-25f5c443b25a)\n\n```css\nhtml[data-theme=\"dark\"] {\n  --background: #000123;\n  --accent: #617bff;\n  --foreground: #eaedf3;\n  --muted: #0c0e4f;\n  --border: #303f8a;\n}\n```","src/data/blog/predefined-color-schemes.md","e8d28c8e0419d088",{"html":246,"metadata":247},"\u003Cp>我为这个 AstroPaper 博客主题精心制作了一些预设颜色方案。你可以用这些方案替换原有的颜色方案。\u003C/p>\n\u003Cp>如果你不知道如何配置颜色方案，请查看\u003Ca href=\"https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/\">这篇博客文章\u003C/a>。\u003C/p>\n\u003Ch2 id=\"目录\">目录\u003C/h2>\n\u003Ch2 id=\"浅色颜色方案\">浅色颜色方案\u003C/h2>\n\u003Cp>浅色颜色方案需要使用 CSS 选择器 \u003Ccode>:root\u003C/code> 和 \u003Ccode>html[data-theme=\"light\"]\u003C/code> 来定义。\u003C/p>\n\u003Ch3 id=\"龙虾红\">龙虾红\u003C/h3>\n\u003Cp>\u003Cimg src=\"https://user-images.githubusercontent.com/53733092/192282447-1d222faf-a3ce-44a9-9cfe-ac873155e5a9.png\" alt=\"lobster-color-scheme\">\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#C5E478\">:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">root\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">html\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">[\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">data-theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">light\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">]\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --background\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">f6eee1\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --foreground\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">012c56\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --accent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">e14a39\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --muted\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">efd8b0\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --border\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">dc9891\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"叶蓝\">叶蓝\u003C/h3>\n\u003Cp>\u003Cimg src=\"https://user-images.githubusercontent.com/53733092/192318782-e80e3c39-54b5-423e-8f4b-9ae60402fc8d.png\" alt=\"leaf-blue-color-scheme\">\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#C5E478\">:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">root\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">html\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">[\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">data-theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">light\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">]\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --background\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">f2f5ec\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --foreground\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">353538\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --accent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">1158d1\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --muted\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">bbc789\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --border\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">7cadff\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"粉红浅色\">粉红浅色\u003C/h3>\n\u003Cp>\u003Cimg src=\"https://user-images.githubusercontent.com/53733092/192286510-892d0042-2d6d-471e-bb72-954221ae2d17.png\" alt=\"pinky-color-scheme\">\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#C5E478\">:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">root\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">html\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">[\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">data-theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">light\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">]\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --background\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">fafcfc\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --foreground\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">222e36\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --accent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">d3006a\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --muted\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">f1bad4\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --border\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">e3a9c6\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"深色颜色方案\">深色颜色方案\u003C/h2>\n\u003Cp>深色颜色方案需要定义为 \u003Ccode>html[data-theme=\"dark\"]\u003C/code>。\u003C/p>\n\u003Ch3 id=\"astropaper-1-原始深色主题\">AstroPaper 1 原始深色主题\u003C/h3>\n\u003Cp>\u003Cimg src=\"https://user-images.githubusercontent.com/53733092/215769153-13b0ad8d-5ba2-44b1-af06-e5ae61293f62.png\" alt=\"AstroPaper 1 default dark theme\">\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">html\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">[\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">data-theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">dark\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">]\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --background\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">2f3741\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --foreground\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">e6e6e6\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --accent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">1ad9d9\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --muted\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">596b81\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --border\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">3b4655\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"深牡蛎\">深牡蛎\u003C/h3>\n\u003Cp>\u003Cimg src=\"https://user-images.githubusercontent.com/53733092/192314524-45ec5904-3d8f-450a-9edf-1e32c5e11d6c.png\" alt=\"deep-oyster-color-scheme\">\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">html\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">[\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">data-theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">dark\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">]\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --background\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">21233d\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --foreground\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">f4f7f5\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --accent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">ff5256\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --muted\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">4a4e86\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --border\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">b12f32\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"粉红深色\">粉红深色\u003C/h3>\n\u003Cp>\u003Cimg src=\"https://user-images.githubusercontent.com/53733092/192307050-fbd55326-911c-4001-87c6-a8ad9378ac2e.png\" alt=\"pinky-dark-color-scheme\">\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">html\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">[\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">data-theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">dark\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">]\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --background\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">353640\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --foreground\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">e9edf1\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --accent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">ff78c8\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --muted\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">715566\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --border\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">86436b\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"astro-深色高对比度\">Astro 深色（高对比度）\u003C/h3>\n\u003Cp>\u003Cimg src=\"https://user-images.githubusercontent.com/53733092/215680520-59427bb0-f4cb-48c0-bccc-f182a428d72d.svg\" alt=\"astro-dark-color-scheme\">\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">html\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">[\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">data-theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">dark\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">]\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --background\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">212737\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --foreground\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">eaedf3\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --accent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">ff6b01\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --muted\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">8a3302\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --border\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">ab4b08\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"astro-深色astropaper-2-的新默认深色主题\">Astro 深色（AstroPaper 2 的新默认深色主题）\u003C/h3>\n\u003Cp>\u003Cimg src=\"https://user-images.githubusercontent.com/53733092/215772856-d5b7ae35-ddaa-4ed6-b0bf-3fa5dbcf834c.png\" alt=\"new dark color scheme - low contrast\">\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">html\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">[\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">data-theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">dark\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">]\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --background\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">212737\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">; \u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">/* 较低对比度的背景 */\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --foreground\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">eaedf3\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --accent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">ff6b01\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --muted\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">8a3302\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --border\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">ab4b08\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"astro-深紫astropaper-3-的新深色主题\">Astro 深紫（AstroPaper 3 的新深色主题）\u003C/h3>\n\u003Cp>\u003Cimg src=\"https://github.com/satnaing/astro-paper/assets/53733092/c8b5d7e1-a3bc-4852-a5ad-4abf7b3cec79\" alt=\"AstroPaper v3 new theme\">\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">html\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">[\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">data-theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">dark\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">]\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --background\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">212737\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --foreground\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">eaedf3\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --accent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">eb3fd3\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --muted\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">7d4f7c\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --border\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">642451\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"astropaper-v4-特别版astropaper-4-的新深色主题\">AstroPaper v4 特别版（AstroPaper 4 的新深色主题）\u003C/h3>\n\u003Cp>\u003Cimg src=\"https://github.com/satnaing/astro-paper/assets/53733092/66eb74dc-7a0e-4f2e-982d-25f5c443b25a\" alt=\"AstroPaper v4 new theme\">\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">html\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">[\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">data-theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">dark\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">]\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --background\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">000123\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --accent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">617bff\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --foreground\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">eaedf3\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --muted\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">0c0e4f\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --border\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">303f8a\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>",{"headings":248,"localImagePaths":279,"remoteImagePaths":280,"frontmatter":281,"imagePaths":285},[249,250,252,254,256,258,260,263,265,267,270,273,276],{"depth":31,"slug":32,"text":32},{"depth":31,"slug":251,"text":251},"浅色颜色方案",{"depth":45,"slug":253,"text":253},"龙虾红",{"depth":45,"slug":255,"text":255},"叶蓝",{"depth":45,"slug":257,"text":257},"粉红浅色",{"depth":31,"slug":259,"text":259},"深色颜色方案",{"depth":45,"slug":261,"text":262},"astropaper-1-原始深色主题","AstroPaper 1 原始深色主题",{"depth":45,"slug":264,"text":264},"深牡蛎",{"depth":45,"slug":266,"text":266},"粉红深色",{"depth":45,"slug":268,"text":269},"astro-深色高对比度","Astro 深色（高对比度）",{"depth":45,"slug":271,"text":272},"astro-深色astropaper-2-的新默认深色主题","Astro 深色（AstroPaper 2 的新默认深色主题）",{"depth":45,"slug":274,"text":275},"astro-深紫astropaper-3-的新深色主题","Astro 深紫（AstroPaper 3 的新深色主题）",{"depth":45,"slug":277,"text":278},"astropaper-v4-特别版astropaper-4-的新深色主题","AstroPaper v4 特别版（AstroPaper 4 的新深色主题）",[],[],{"author":14,"pubDatetime":282,"modDatetime":283,"title":239,"slug":234,"featured":18,"draft":18,"tags":284,"description":241},["Date","2022-09-26T12:13:24.000Z"],["Date","2024-01-04T09:09:06.000Z"],[210],[],"adding-new-posts-in-astropaper-theme",{"id":286,"data":288,"body":295,"filePath":296,"digest":297,"rendered":298},{"author":14,"pubDatetime":289,"modDatetime":290,"title":291,"featured":292,"draft":18,"tags":293,"description":294},["Date","2022-09-23T15:22:00.000Z"],["Date","2025-06-13T16:52:45.934Z"],"在 AstroPaper 主题中添加新文章",true,[20],"使用 AstroPaper 主题创建或添加新文章的一些规则与建议。","以下是使用 AstroPaper 博客主题创建新文章的一些规则/建议、技巧与诀窍。\n\n![image](https://syncypress.top/picture-bed/7c937646e19a166648cc501a4f435c03.png)\n\n\u003Cfigure>\n  \u003Cimg\n    src=\"https://images.pexels.com/photos/159618/still-life-school-retro-ink-159618.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\"\n    alt=\"古典木质书桌、复古时钟与皮包。免费素材图片\"\n  />\n    \u003Cfigcaption class=\"text-center\">\n    图片来自 \u003Ca href=\"https://www.pexels.com/photo/brown-wooden-desk-159618/\">Pixabay\u003C/a>\n  \u003C/figcaption>\n\u003C/figure>\n\n## 目录\n\n## 创建博客文章\n\n要撰写新的博客文章，请在 `src/data/blog/` 目录下创建一个 markdown 文件。\n\n> 在 AstroPaper v5.1.0 之前，所有博客文章都必须放在 `src/data/blog/` 中，意味着你不能将它们组织到子目录中。\n\n从 AstroPaper v5.1.0 开始，你现在可以将博客文章组织到子目录中，从而更方便地管理内容。\n\n例如，如果你想把文章按 `2025` 分组，可以将它们放在 `src/data/blog/2025/` 中。这也会影响文章 URL，因此 `src/data/blog/2025/example-post.md` 可以通过 `/posts/2025/example-post` 访问。\n\n如果你不希望子目录影响文章 URL，只需在文件夹名称前加上下划线 `_`。\n\n```bash\n# 示例：博客文章结构与 URL\nsrc/data/blog/very-first-post.md          -> mysite.com/posts/very-first-post\nsrc/data/blog/2025/example-post.md        -> mysite.com/posts/2025/example-post\nsrc/data/blog/_2026/another-post.md       -> mysite.com/posts/another-post\nsrc/data/blog/docs/_legacy/how-to.md      -> mysite.com/posts/docs/how-to\nsrc/data/blog/Example Dir/Dummy Post.md   -> mysite.com/posts/example-dir/dummy-post\n```\n\n> 💡 提示：你也可以在前置元数据中覆盖博客文章的 slug。详见下一节。\n\n如果子目录 URL 没有出现在构建输出中，请删除 node_modules，重新安装依赖，然后重新构建。\n\n## 前置元数据\n\n前置元数据是存储博客文章（文章）重要信息的主要位置。前置元数据位于文章顶部，以 YAML 格式编写。了解更多关于前置元数据及其用法的信息，请参阅 [astro 文档](https://docs.astro.build/en/guides/markdown-content/)。\n\n以下是每篇文章的前置元数据属性列表。\n\n| 属性               | 描述                                                                                               | 备注                                          |\n| ------------------ | -------------------------------------------------------------------------------------------------- | --------------------------------------------- |\n| **_title_**        | 文章标题 (h1)                                                                                      | 必填\u003Csup>\\*\u003C/sup>                             |\n| **_description_**  | 文章描述。用于文章摘要和站点描述。                                                                 | 必填\u003Csup>\\*\u003C/sup>                             |\n| **_pubDatetime_**  | ISO 8601 格式的发布时间。                                                                          | 必填\u003Csup>\\*\u003C/sup>                             |\n| **_modDatetime_**  | ISO 8601 格式的修改时间。（仅在文章修改时添加此属性）                                                | 可选                                          |\n| **_author_**       | 文章作者。                                                                                         | 默认 = SITE.author                            |\n| **_slug_**         | 文章的 slug。此字段可选。                                                                          | 默认 = 基于文件名的 slug                      |\n| **_featured_**     | 是否在首页的精选区域显示此文章。                                                                   | 默认 = false                                  |\n| **_draft_**        | 将此文章标记为\"未发布\"。                                                                           | 默认 = false                                  |\n| **_tags_**         | 文章的相关关键词。以 YAML 数组格式书写。                                                           | 默认 = others                                 |\n| **_ogImage_**      | 文章的 OG 图片。用于社交媒体分享和 SEO。可以是远程 URL 或相对当前文件夹的图片路径。                | 默认 = `SITE.ogImage` 或生成的 OG 图片        |\n| **_canonicalURL_** | 规范 URL（绝对地址），用于文章已存在于其他来源时。                                                    | 默认 = `Astro.site` + `Astro.url.pathname`    |\n| **_hideEditPost_** | 隐藏博客标题下方的编辑文章按钮。仅对当前博客文章生效。                                               | 默认 = false                                  |\n| **_timezone_**     | 为当前博客文章指定 IANA 格式的时区。这将覆盖当前文章的 `SITE.timezone` 配置。                       | 默认 = `SITE.timezone`                        |\n\n> 提示！你可以在控制台中运行 `new Date().toISOString()` 来获取 ISO 8601 格式的日期时间。记得去掉引号。\n\n前置元数据中只有 `title`、`description` 和 `pubDatetime` 字段是必须指定的。\n\n标题和描述（摘要）对搜索引擎优化（SEO）很重要，因此 AstroPaper 建议在博客文章中包含这些内容。\n\n`slug` 是 URL 的唯一标识符。因此，`slug` 必须是唯一的，且与其他文章不同。`slug` 中的空白应使用 `-` 或 `_` 分隔，但建议使用 `-`。Slug 会根据博客文章的文件名自动生成。但你也可以在博客文章的前置元数据中定义自己的 `slug`。\n\n例如，如果博客文件名是 `adding-new-post.md` 且你未在前置元数据中指定 slug，Astro 会自动根据文件名创建 slug。因此 slug 将是 `adding-new-post`。但如果你在前置元数据中指定了 `slug`，它将覆盖默认的 slug。你可以在 [Astro 文档](https://docs.astro.build/en/guides/content-collections/#defining-custom-slugs)中了解更多相关信息。\n\n如果你在博客文章中省略了 `tags`（换句话说，如果没有指定标签），该文章将使用默认标签 `others`。你可以在 `content.config.ts` 文件中设置默认标签。\n\n```ts file=\"src/content.config.ts\"\nexport const blogSchema = z.object({\n  // ...\n  draft: z.boolean().optional(),\n  // [!code highlight:1]\n  tags: z.array(z.string()).default([\"others\"]), // 将 \"others\" 替换为你想要的默认标签\n  // ...\n});\n```\n\n### 前置元数据示例\n\n以下是文章的前置元数据示例。\n\n```yaml file=\"src/data/blog/sample-post.md\"\n---\ntitle: 文章标题\nauthor: 你的名字\npubDatetime: 2022-09-21T05:17:19Z\nslug: 文章-slug\nfeatured: true\ndraft: false\ntags:\n  - 某些\n  - 示例\n  - 标签\nogImage: ../../assets/images/example.png # src/assets/images/example.png\n# ogImage: \"https://example.org/remote-image.png\" # 远程 URL\ndescription: 这是示例文章的示例描述。\ncanonicalURL: https://example.org/my-article-was-already-posted-here\n---\n```\n\n## 添加目录\n\n默认情况下，文章不包含目录。要包含目录，你需要以特定方式指定。\n\n以 h2 格式（Markdown 中的 ##）编写 `Table of contents`，并将其放置在你希望目录出现的位置。\n\n例如，如果你想将目录放在介绍段落下方（就像我通常做的那样），可以按以下方式操作。\n\n\u003C!-- prettier-ignore-start -->\n```md\n---\n# 前置元数据\n---\n\n以下是使用 AstroPaper 博客主题创建新文章的一些建议、技巧与诀窍。\n\n\u003C!-- [!code ++] -->\n## Table of contents\n\n\u003C!-- 文章的其余内容 -->\n```\n\u003C!-- prettier-ignore-end -->\n\n## 标题\n\n关于标题有一点需要注意。AstroPaper 博客文章使用标题（前置元数据中的 title）作为文章的主标题。因此，文章中的其余标题应使用 h2 ~ h6。\n\n这条规则不是强制性的，但出于视觉、可访问性和 SEO 的考虑，强烈建议遵守。\n\n## 语法高亮\n\nAstroPaper 使用 [Shiki](https://shiki.style/) 作为默认的语法高亮工具。从 AstroPaper v5.4 开始，使用 [@shikijs/transformers](https://shiki.style/packages/transformers) 来增强围栏代码块的功能。如果你不想使用它，可以按如下方式移除：\n\n```bash\npnpm remove @shikijs/transformers\n```\n\n```js file=\"astro.config.ts\"\n// ...\n// [!code --:5]\nimport {\n  transformerNotationDiff,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n} from \"@shikijs/transformers\";\n\nexport default defineConfig({\n  // ...\n  markdown: {\n    remarkPlugins: [remarkToc, [remarkCollapse, { test: \"Table of contents\" }]],\n    shikiConfig: {\n      // 更多主题请访问 https://shiki.style/themes\n      themes: { light: \"min-light\", dark: \"night-owl\" },\n      defaultColor: false,\n      wrap: false,\n      transformers: [\n        transformerFileName(),\n      // [!code --:3]\n        transformerNotationHighlight(),\n        transformerNotationWordHighlight(),\n        transformerNotationDiff({ matchAlgorithm: \"v3\" }),\n      ],\n    },\n  },\n  // ...\n}\n```\n\n## 存储博客内容中的图片\n\n以下是两种在 markdown 文件中存储和显示图片的方法。\n\n> 注意！如果你需要在 markdown 中对优化图片进行样式设置，应[使用 MDX](https://docs.astro.build/en/guides/images/#images-in-mdx-files)。\n\n### 存储在 `src/assets/` 目录中（推荐）\n\n你可以将图片存储在 `src/assets/` 目录中。这些图片将通过 Astro 的[图片服务 API](https://docs.astro.build/en/reference/image-service-reference/) 自动优化。\n\n你可以使用相对路径或别名路径（`@/assets/`）来引用这些图片。\n\n示例：假设你想显示路径为 `/src/assets/images/example.jpg` 的 `example.jpg`。\n\n```md\n![图片描述](@/assets/images/example.jpg)\n\n\u003C!-- 或 -->\n\n![图片描述](../../assets/images/example.jpg)\n\n\u003C!-- 使用 img 标签或 Image 组件将无法正常工作 ❌ -->\n\u003Cimg src=\"@/assets/images/example.jpg\" alt=\"图片描述\">\n\u003C!-- ^^ 这是错误的 -->\n```\n\n> 从技术上讲，你可以将图片存储在 `src` 下的任何目录中。这里推荐 `src/assets` 只是建议。\n\n### 存储在 `public` 目录中\n\n你可以将图片存储在 `public` 目录中。请记住，存储在 `public` 目录中的图片不会被 Astro 处理，意味着它们不会被优化，你需要自己处理图片优化。\n\n对于这些图片，你应使用绝对路径；这些图片可以使用 [Markdown 注释](https://www.markdownguide.org/basic-syntax/#images-1)或 [HTML img 标签](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)来显示。\n\n示例：假设 `example.jpg` 位于 `/public/assets/images/example.jpg`。\n\n```md\n![图片描述](/assets/images/example.jpg)\n\n\u003C!-- 或 -->\n\n\u003Cimg src=\"/assets/images/example.jpg\" alt=\"图片描述\">\n```\n\n## 额外内容\n\n### 图片压缩\n\n当你在博客文章中放置图片时（尤其是 `public` 目录下的图片），建议对图片进行压缩。这会影响网站的整体性能。\n\n我推荐的图片压缩网站：\n\n- [TinyPng](https://tinypng.com/)\n- [TinyJPG](https://tinyjpg.com/)\n\n### OG 图片\n\n如果文章未指定 OG 图片，将使用默认的 OG 图片。虽然不是必须的，但建议在前置元数据中指定与文章相关的 OG 图片。OG 图片的推荐尺寸为 **_1200 × 640_** 像素。\n\n> 从 AstroPaper v1.4.0 开始，如果未指定 OG 图片，将自动生成。请查看[相关公告](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/)。","src/data/blog/adding-new-post.md","f3df3380df0ce5bd",{"html":299,"metadata":300},"\u003Cp>以下是使用 AstroPaper 博客主题创建新文章的一些规则/建议、技巧与诀窍。\u003C/p>\n\u003Cp>\u003Cimg src=\"https://syncypress.top/picture-bed/7c937646e19a166648cc501a4f435c03.png\" alt=\"image\">\u003C/p>\n\u003Cfigure>\n  \u003Cimg src=\"https://images.pexels.com/photos/159618/still-life-school-retro-ink-159618.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" alt=\"古典木质书桌、复古时钟与皮包。免费素材图片\">\n    \u003Cfigcaption class=\"text-center\">\n    图片来自 \u003Ca href=\"https://www.pexels.com/photo/brown-wooden-desk-159618/\">Pixabay\u003C/a>\n  \u003C/figcaption>\n\u003C/figure>\n\u003Ch2 id=\"目录\">目录\u003C/h2>\n\u003Ch2 id=\"创建博客文章\">创建博客文章\u003C/h2>\n\u003Cp>要撰写新的博客文章，请在 \u003Ccode>src/data/blog/\u003C/code> 目录下创建一个 markdown 文件。\u003C/p>\n\u003Cblockquote>\n\u003Cp>在 AstroPaper v5.1.0 之前，所有博客文章都必须放在 \u003Ccode>src/data/blog/\u003C/code> 中，意味着你不能将它们组织到子目录中。\u003C/p>\n\u003C/blockquote>\n\u003Cp>从 AstroPaper v5.1.0 开始，你现在可以将博客文章组织到子目录中，从而更方便地管理内容。\u003C/p>\n\u003Cp>例如，如果你想把文章按 \u003Ccode>2025\u003C/code> 分组，可以将它们放在 \u003Ccode>src/data/blog/2025/\u003C/code> 中。这也会影响文章 URL，因此 \u003Ccode>src/data/blog/2025/example-post.md\u003C/code> 可以通过 \u003Ccode>/posts/2025/example-post\u003C/code> 访问。\u003C/p>\n\u003Cp>如果你不希望子目录影响文章 URL，只需在文件夹名称前加上下划线 \u003Ccode>_\u003C/code>。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"># 示例：博客文章结构与 URL\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">src/data/blog/very-first-post.md\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">          -\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">>\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> mysite.com/posts/very-first-post\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">src/data/blog/2025/example-post.md\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">        -\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">>\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> mysite.com/posts/2025/example-post\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">src/data/blog/_2026/another-post.md\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">       -\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">>\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> mysite.com/posts/another-post\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">src/data/blog/docs/_legacy/how-to.md\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">      -\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">>\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> mysite.com/posts/docs/how-to\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">src/data/blog/Example\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> Dir/Dummy\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> Post.md\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">   -\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">>\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> mysite.com/posts/example-dir/dummy-post\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cblockquote>\n\u003Cp>💡 提示：你也可以在前置元数据中覆盖博客文章的 slug。详见下一节。\u003C/p>\n\u003C/blockquote>\n\u003Cp>如果子目录 URL 没有出现在构建输出中，请删除 node_modules，重新安装依赖，然后重新构建。\u003C/p>\n\u003Ch2 id=\"前置元数据\">前置元数据\u003C/h2>\n\u003Cp>前置元数据是存储博客文章（文章）重要信息的主要位置。前置元数据位于文章顶部，以 YAML 格式编写。了解更多关于前置元数据及其用法的信息，请参阅 \u003Ca href=\"https://docs.astro.build/en/guides/markdown-content/\">astro 文档\u003C/a>。\u003C/p>\n\u003Cp>以下是每篇文章的前置元数据属性列表。\u003C/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>属性\u003C/th>\u003Cth>描述\u003C/th>\u003Cth>备注\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Cstrong>\u003Cem>title\u003C/em>\u003C/strong>\u003C/td>\u003Ctd>文章标题 (h1)\u003C/td>\u003Ctd>必填\u003Csup>*\u003C/sup>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>\u003Cem>description\u003C/em>\u003C/strong>\u003C/td>\u003Ctd>文章描述。用于文章摘要和站点描述。\u003C/td>\u003Ctd>必填\u003Csup>*\u003C/sup>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>\u003Cem>pubDatetime\u003C/em>\u003C/strong>\u003C/td>\u003Ctd>ISO 8601 格式的发布时间。\u003C/td>\u003Ctd>必填\u003Csup>*\u003C/sup>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>\u003Cem>modDatetime\u003C/em>\u003C/strong>\u003C/td>\u003Ctd>ISO 8601 格式的修改时间。（仅在文章修改时添加此属性）\u003C/td>\u003Ctd>可选\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>\u003Cem>author\u003C/em>\u003C/strong>\u003C/td>\u003Ctd>文章作者。\u003C/td>\u003Ctd>默认 = SITE.author\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>\u003Cem>slug\u003C/em>\u003C/strong>\u003C/td>\u003Ctd>文章的 slug。此字段可选。\u003C/td>\u003Ctd>默认 = 基于文件名的 slug\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>\u003Cem>featured\u003C/em>\u003C/strong>\u003C/td>\u003Ctd>是否在首页的精选区域显示此文章。\u003C/td>\u003Ctd>默认 = false\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>\u003Cem>draft\u003C/em>\u003C/strong>\u003C/td>\u003Ctd>将此文章标记为”未发布”。\u003C/td>\u003Ctd>默认 = false\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>\u003Cem>tags\u003C/em>\u003C/strong>\u003C/td>\u003Ctd>文章的相关关键词。以 YAML 数组格式书写。\u003C/td>\u003Ctd>默认 = others\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>\u003Cem>ogImage\u003C/em>\u003C/strong>\u003C/td>\u003Ctd>文章的 OG 图片。用于社交媒体分享和 SEO。可以是远程 URL 或相对当前文件夹的图片路径。\u003C/td>\u003Ctd>默认 = \u003Ccode>SITE.ogImage\u003C/code> 或生成的 OG 图片\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>\u003Cem>canonicalURL\u003C/em>\u003C/strong>\u003C/td>\u003Ctd>规范 URL（绝对地址），用于文章已存在于其他来源时。\u003C/td>\u003Ctd>默认 = \u003Ccode>Astro.site\u003C/code> + \u003Ccode>Astro.url.pathname\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>\u003Cem>hideEditPost\u003C/em>\u003C/strong>\u003C/td>\u003Ctd>隐藏博客标题下方的编辑文章按钮。仅对当前博客文章生效。\u003C/td>\u003Ctd>默认 = false\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Cstrong>\u003Cem>timezone\u003C/em>\u003C/strong>\u003C/td>\u003Ctd>为当前博客文章指定 IANA 格式的时区。这将覆盖当前文章的 \u003Ccode>SITE.timezone\u003C/code> 配置。\u003C/td>\u003Ctd>默认 = \u003Ccode>SITE.timezone\u003C/code>\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cblockquote>\n\u003Cp>提示！你可以在控制台中运行 \u003Ccode>new Date().toISOString()\u003C/code> 来获取 ISO 8601 格式的日期时间。记得去掉引号。\u003C/p>\n\u003C/blockquote>\n\u003Cp>前置元数据中只有 \u003Ccode>title\u003C/code>、\u003Ccode>description\u003C/code> 和 \u003Ccode>pubDatetime\u003C/code> 字段是必须指定的。\u003C/p>\n\u003Cp>标题和描述（摘要）对搜索引擎优化（SEO）很重要，因此 AstroPaper 建议在博客文章中包含这些内容。\u003C/p>\n\u003Cp>\u003Ccode>slug\u003C/code> 是 URL 的唯一标识符。因此，\u003Ccode>slug\u003C/code> 必须是唯一的，且与其他文章不同。\u003Ccode>slug\u003C/code> 中的空白应使用 \u003Ccode>-\u003C/code> 或 \u003Ccode>_\u003C/code> 分隔，但建议使用 \u003Ccode>-\u003C/code>。Slug 会根据博客文章的文件名自动生成。但你也可以在博客文章的前置元数据中定义自己的 \u003Ccode>slug\u003C/code>。\u003C/p>\n\u003Cp>例如，如果博客文件名是 \u003Ccode>adding-new-post.md\u003C/code> 且你未在前置元数据中指定 slug，Astro 会自动根据文件名创建 slug。因此 slug 将是 \u003Ccode>adding-new-post\u003C/code>。但如果你在前置元数据中指定了 \u003Ccode>slug\u003C/code>，它将覆盖默认的 slug。你可以在 \u003Ca href=\"https://docs.astro.build/en/guides/content-collections/#defining-custom-slugs\">Astro 文档\u003C/a>中了解更多相关信息。\u003C/p>\n\u003Cp>如果你在博客文章中省略了 \u003Ccode>tags\u003C/code>（换句话说，如果没有指定标签），该文章将使用默认标签 \u003Ccode>others\u003C/code>。你可以在 \u003Ccode>content.config.ts\u003C/code> 文件中设置默认标签。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl has-highlighted mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"ts\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">export\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> const\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> blogSchema\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">object\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">{\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  // ...\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  draft\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">boolean\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">optional\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  tags\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">array\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">z\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">())\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">default\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">([\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">others\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">])\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"> // 将 \"others\" 替换为你想要的默认标签\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  // ...\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">}\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">);\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/content.config.ts\u003C/span>\u003C/pre>\n\u003Ch3 id=\"前置元数据示例\">前置元数据示例\u003C/h3>\n\u003Cp>以下是文章的前置元数据示例。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"yaml\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">---\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">title\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\"> 文章标题\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">author\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\"> 你的名字\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">pubDatetime\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#82AAFF\"> 2022-09-21T05:17:19Z\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">slug\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\"> 文章-slug\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">featured\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FF5874\"> true\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">draft\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FF5874\"> false\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">tags\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  - \u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">某些\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  - \u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">示例\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  - \u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">标签\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">ogImage\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\"> ../../assets/images/example.png\u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"> # src/assets/images/example.png\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"># ogImage: \"https://example.org/remote-image.png\" # 远程 URL\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">description\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\"> 这是示例文章的示例描述。\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">canonicalURL\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\"> https://example.org/my-article-was-already-posted-here\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">---\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/data/blog/sample-post.md\u003C/span>\u003C/pre>\n\u003Ch2 id=\"添加目录\">添加目录\u003C/h2>\n\u003Cp>默认情况下，文章不包含目录。要包含目录，你需要以特定方式指定。\u003C/p>\n\u003Cp>以 h2 格式（Markdown 中的 ##）编写 \u003Ccode>Table of contents\u003C/code>，并将其放置在你希望目录出现的位置。\u003C/p>\n\u003Cp>例如，如果你想将目录放在介绍段落下方（就像我通常做的那样），可以按以下方式操作。\u003C/p>\n\u003C!-- prettier-ignore-start -->\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl has-diff\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"md\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">---\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"># 前置元数据\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">---\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">以下是使用 AstroPaper 博客主题创建新文章的一些建议、技巧与诀窍。\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line diff add\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-weight:bold;--shiki-dark:#82B1FF;--shiki-dark-font-weight:inherit\">## Table of contents\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"><!-- 文章的其余内容 -->\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003C!-- prettier-ignore-end -->\n\u003Ch2 id=\"标题\">标题\u003C/h2>\n\u003Cp>关于标题有一点需要注意。AstroPaper 博客文章使用标题（前置元数据中的 title）作为文章的主标题。因此，文章中的其余标题应使用 h2 ~ h6。\u003C/p>\n\u003Cp>这条规则不是强制性的，但出于视觉、可访问性和 SEO 的考虑，强烈建议遵守。\u003C/p>\n\u003Ch2 id=\"语法高亮\">语法高亮\u003C/h2>\n\u003Cp>AstroPaper 使用 \u003Ca href=\"https://shiki.style/\">Shiki\u003C/a> 作为默认的语法高亮工具。从 AstroPaper v5.4 开始，使用 \u003Ca href=\"https://shiki.style/packages/transformers\">@shikijs/transformers\u003C/a> 来增强围栏代码块的功能。如果你不想使用它，可以按如下方式移除：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">pnpm\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> remove\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> @shikijs/transformers\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl has-diff mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">// ...\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff remove\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff remove\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  transformerNotationDiff\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff remove\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  transformerNotationHighlight\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff remove\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  transformerNotationWordHighlight\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff remove\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">} \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">@shikijs/transformers\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">export\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\"> default\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> defineConfig\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">({\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  // ...\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  markdown\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    remarkPlugins\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> [\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D7DBE0\">remarkToc\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> [\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D7DBE0\">remarkCollapse\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> { test\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">Table of contents\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> }]]\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    shikiConfig\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">      // 更多主题请访问 https://shiki.style/themes\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">      themes\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> { light\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">min-light\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> dark\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">night-owl\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">      defaultColor\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FF5874\"> false\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">      wrap\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FF5874\"> false\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">      transformers\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> [\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">        transformerFileName\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff remove\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">        transformerNotationHighlight\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff remove\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">        transformerNotationWordHighlight\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff remove\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">        transformerNotationDiff\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">({ matchAlgorithm\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">v3\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> })\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">      ]\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  // ...\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">astro.config.ts\u003C/span>\u003C/pre>\n\u003Ch2 id=\"存储博客内容中的图片\">存储博客内容中的图片\u003C/h2>\n\u003Cp>以下是两种在 markdown 文件中存储和显示图片的方法。\u003C/p>\n\u003Cblockquote>\n\u003Cp>注意！如果你需要在 markdown 中对优化图片进行样式设置，应\u003Ca href=\"https://docs.astro.build/en/guides/images/#images-in-mdx-files\">使用 MDX\u003C/a>。\u003C/p>\n\u003C/blockquote>\n\u003Ch3 id=\"存储在-srcassets-目录中推荐\">存储在 \u003Ccode>src/assets/\u003C/code> 目录中（推荐）\u003C/h3>\n\u003Cp>你可以将图片存储在 \u003Ccode>src/assets/\u003C/code> 目录中。这些图片将通过 Astro 的\u003Ca href=\"https://docs.astro.build/en/reference/image-service-reference/\">图片服务 API\u003C/a> 自动优化。\u003C/p>\n\u003Cp>你可以使用相对路径或别名路径（\u003Ccode>@/assets/\u003C/code>）来引用这些图片。\u003C/p>\n\u003Cp>示例：假设你想显示路径为 \u003Ccode>/src/assets/images/example.jpg\u003C/code> 的 \u003Ccode>example.jpg\u003C/code>。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"md\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">![\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">图片描述\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">]\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#7FDBCA\">(\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-light-text-decoration:inherit;--shiki-dark:#FF869A;--shiki-dark-text-decoration:underline\">@/assets/images/example.jpg\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#7FDBCA\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"><!-- 或 -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">![\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">图片描述\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">]\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#7FDBCA\">(\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-light-text-decoration:inherit;--shiki-dark:#FF869A;--shiki-dark-text-decoration:underline\">../../assets/images/example.jpg\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#7FDBCA\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"><!-- 使用 img 标签或 Image 组件将无法正常工作 ❌ -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"><img src=\"@/assets/images/example.jpg\" alt=\"图片描述\">\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"><!-- ^^ 这是错误的 -->\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cblockquote>\n\u003Cp>从技术上讲，你可以将图片存储在 \u003Ccode>src\u003C/code> 下的任何目录中。这里推荐 \u003Ccode>src/assets\u003C/code> 只是建议。\u003C/p>\n\u003C/blockquote>\n\u003Ch3 id=\"存储在-public-目录中\">存储在 \u003Ccode>public\u003C/code> 目录中\u003C/h3>\n\u003Cp>你可以将图片存储在 \u003Ccode>public\u003C/code> 目录中。请记住，存储在 \u003Ccode>public\u003C/code> 目录中的图片不会被 Astro 处理，意味着它们不会被优化，你需要自己处理图片优化。\u003C/p>\n\u003Cp>对于这些图片，你应使用绝对路径；这些图片可以使用 \u003Ca href=\"https://www.markdownguide.org/basic-syntax/#images-1\">Markdown 注释\u003C/a>或 \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\">HTML img 标签\u003C/a>来显示。\u003C/p>\n\u003Cp>示例：假设 \u003Ccode>example.jpg\u003C/code> 位于 \u003Ccode>/public/assets/images/example.jpg\u003C/code>。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"md\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">![\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">图片描述\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">]\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#7FDBCA\">(\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-light-text-decoration:inherit;--shiki-dark:#FF869A;--shiki-dark-text-decoration:underline\">/assets/images/example.jpg\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#7FDBCA\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"><!-- 或 -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"><img src=\"/assets/images/example.jpg\" alt=\"图片描述\">\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"额外内容\">额外内容\u003C/h2>\n\u003Ch3 id=\"图片压缩\">图片压缩\u003C/h3>\n\u003Cp>当你在博客文章中放置图片时（尤其是 \u003Ccode>public\u003C/code> 目录下的图片），建议对图片进行压缩。这会影响网站的整体性能。\u003C/p>\n\u003Cp>我推荐的图片压缩网站：\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https://tinypng.com/\">TinyPng\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"https://tinyjpg.com/\">TinyJPG\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Ch3 id=\"og-图片\">OG 图片\u003C/h3>\n\u003Cp>如果文章未指定 OG 图片，将使用默认的 OG 图片。虽然不是必须的，但建议在前置元数据中指定与文章相关的 OG 图片。OG 图片的推荐尺寸为 \u003Cstrong>\u003Cem>1200 × 640\u003C/em>\u003C/strong> 像素。\u003C/p>\n\u003Cblockquote>\n\u003Cp>从 AstroPaper v1.4.0 开始，如果未指定 OG 图片，将自动生成。请查看\u003Ca href=\"https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/\">相关公告\u003C/a>。\u003C/p>\n\u003C/blockquote>",{"headings":301,"localImagePaths":330,"remoteImagePaths":331,"frontmatter":332,"imagePaths":336},[302,303,305,307,309,311,313,315,317,320,323,325,327],{"depth":31,"slug":32,"text":32},{"depth":31,"slug":304,"text":304},"创建博客文章",{"depth":31,"slug":306,"text":306},"前置元数据",{"depth":45,"slug":308,"text":308},"前置元数据示例",{"depth":31,"slug":310,"text":310},"添加目录",{"depth":31,"slug":312,"text":312},"标题",{"depth":31,"slug":314,"text":314},"语法高亮",{"depth":31,"slug":316,"text":316},"存储博客内容中的图片",{"depth":45,"slug":318,"text":319},"存储在-srcassets-目录中推荐","存储在 src/assets/ 目录中（推荐）",{"depth":45,"slug":321,"text":322},"存储在-public-目录中","存储在 public 目录中",{"depth":31,"slug":324,"text":324},"额外内容",{"depth":45,"slug":326,"text":326},"图片压缩",{"depth":45,"slug":328,"text":329},"og-图片","OG 图片",[],[],{"author":14,"pubDatetime":333,"modDatetime":334,"title":291,"slug":286,"featured":292,"draft":18,"tags":335,"description":294},["Date","2022-09-23T15:22:00.000Z"],["Date","2025-06-13T16:52:45.934Z"],[20],[],"how-to-add-latex-equations-in-blog-posts",{"id":337,"data":339,"body":346,"filePath":347,"digest":348,"rendered":349},{"author":340,"pubDatetime":341,"modDatetime":342,"title":343,"tags":344,"description":345},"Alberto Perdomo",["Date","2024-09-08T20:58:52.737Z"],["Date","2025-03-22T09:25:46.734Z"],"如何在 Astro 博客文章中添加 LaTeX 公式",[20],"学习如何使用 Markdown、KaTeX 和 remark/rehype 插件在 Astro 博客文章中添加 LaTeX 公式。","本文档演示如何在 AstroPaper 的 Markdown 文件中使用 LaTeX 公式。LaTeX 是一个强大的排版系统，常用于数学和科学文档。\n\n\u003Cfigure>\n  \u003Cimg\n    src=\"https://images.pexels.com/photos/22690748/pexels-photo-22690748/free-photo-of-close-up-of-complicated-equations-written-on-a-blackboard.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\"\n    alt=\"黑板上复杂方程的特写，展示化学和数学符号。免费素材图片\"\n  />\n  \u003Cfigcaption class=\"text-center\">\n    图片来自 \u003Ca href=\"https://www.pexels.com/photo/close-up-of-complicated-equations-written-on-a-blackboard-22690748/\">Vitaly Gariev\u003C/a>\n  \u003C/figcaption>\n\u003C/figure>\n\n## 目录\n\n## 说明\n\n在本节中，你将找到如何在 AstroPaper 的 Markdown 文件中添加 LaTeX 支持的说明。\n\n1. 通过运行以下命令安装必要的 remark 和 rehype 插件：\n\n   ```bash\n   pnpm install rehype-katex remark-math katex\n   ```\n\n2. 更新 Astro 配置以使用这些插件：\n\n   ```ts file=astro.config.ts\n   // ...\n   import remarkMath from \"remark-math\";\n   import rehypeKatex from \"rehype-katex\";\n\n   export default defineConfig({\n     // ...\n     markdown: {\n       remarkPlugins: [\n         remarkMath, // [!code ++]\n         remarkToc,\n         [remarkCollapse, { test: \"Table of contents\" }],\n       ],\n       rehypePlugins: [rehypeKatex], // [!code ++]\n       shikiConfig: {\n         // 更多主题请访问 https://shiki.style/themes\n         themes: { light: \"min-light\", dark: \"night-owl\" },\n         wrap: false,\n       },\n     },\n     // ...\n   });\n   ```\n\n3. 在主布局文件中导入 KaTeX CSS\n\n   ```astro file=src/layouts/Layout.astro\n   ---\n   import { SITE } from \"@config\";\n\n   // astro 代码\n   ---\n\n   \u003C!doctype html>\n   \u003C!-- 其他元素 -->\n   \u003Cmeta property=\"og:image\" content={socialImageURL} />\n\n   \u003C!-- [!code highlight:4] -->\n   \u003Clink\n     rel=\"stylesheet\"\n     href=\"https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css\"\n   />\n\n   \u003Cbody>\n     \u003Cslot />\n   \u003C/body>\n   ```\n\n4. 最后一步，在 `typography.css` 中为 `katex` 添加文本颜色。\n\n   ```css file=src/styles/typography.css\n   @plugin \"@tailwindcss/typography\";\n\n   @layer base {\n     /* 其他类 */\n\n     /* Katex 文本颜色 */\n     /* [!code highlight:3] */\n     .prose .katex-display {\n       @apply text-foreground;\n     }\n\n     /* ===== 代码块与语法高亮 ===== */\n     /* 其他类 */\n   }\n   ```\n\n瞧，这样设置之后，你就可以在 Markdown 文件中编写 LaTeX 公式了，网站构建时这些公式将被正确渲染。完成设置后，文档的其余部分将正确显示。\n\n---\n\n## 行内公式\n\n行内公式写在单个美元符号 `$...$` 之间。以下是一些示例：\n\n1. 著名的质能等价公式：`$E = mc^2$`\n2. 求根公式：`$x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$`\n3. 欧拉恒等式：`$e^{i\\pi} + 1 = 0$`\n\n---\n\n## 块级公式\n\n对于更复杂的公式，或者当你希望公式单独成行显示时，使用双美元符号 `$$...$$`：\n\n高斯积分：\n\n```bash\n$$ \\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi} $$\n```\n\n黎曼 ζ 函数的定义：\n\n```bash\n$$ \\zeta(s) = \\sum_{n=1}^{\\infty} \\frac{1}{n^s} $$\n```\n\n麦克斯韦方程组的微分形式：\n\n```bash\n$$\n\\begin{aligned}\n\\nabla \\cdot \\mathbf{E} &= \\frac{\\rho}{\\varepsilon_0} \\\\\n\\nabla \\cdot \\mathbf{B} &= 0 \\\\\n\\nabla \\times \\mathbf{E} &= -\\frac{\\partial \\mathbf{B}}{\\partial t} \\\\\n\\nabla \\times \\mathbf{B} &= \\mu_0\\left(\\mathbf{J} + \\varepsilon_0 \\frac{\\partial \\mathbf{E}}{\\partial t}\\right)\n\\end{aligned}\n$$\n```\n\n---\n\n## 使用数学符号\n\nLaTeX 提供广泛的数学符号：\n\n- 希腊字母：`$\\alpha$`、`$\\beta$`、`$\\gamma$`、`$\\delta$`、`$\\epsilon$`、`$\\pi$`\n- 运算符：`$\\sum$`、`$\\prod$`、`$\\int$`、`$\\partial$`、`$\\nabla$`\n- 关系符号：`$\\leq$`、`$\\geq$`、`$\\approx$`、`$\\sim$`、`$\\propto$`\n- 逻辑符号：`$\\forall$`、`$\\exists$`、`$\\neg$`、`$\\wedge$`、`$\\vee$`","src/data/blog/how-to-add-latex-equations-in-blog-posts.md","a91797611650594d",{"html":350,"metadata":351},"\u003Cp>本文档演示如何在 AstroPaper 的 Markdown 文件中使用 LaTeX 公式。LaTeX 是一个强大的排版系统，常用于数学和科学文档。\u003C/p>\n\u003Cfigure>\n  \u003Cimg src=\"https://images.pexels.com/photos/22690748/pexels-photo-22690748/free-photo-of-close-up-of-complicated-equations-written-on-a-blackboard.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2\" alt=\"黑板上复杂方程的特写，展示化学和数学符号。免费素材图片\">\n  \u003Cfigcaption class=\"text-center\">\n    图片来自 \u003Ca href=\"https://www.pexels.com/photo/close-up-of-complicated-equations-written-on-a-blackboard-22690748/\">Vitaly Gariev\u003C/a>\n  \u003C/figcaption>\n\u003C/figure>\n\u003Ch2 id=\"目录\">目录\u003C/h2>\n\u003Ch2 id=\"说明\">说明\u003C/h2>\n\u003Cp>在本节中，你将找到如何在 AstroPaper 的 Markdown 文件中添加 LaTeX 支持的说明。\u003C/p>\n\u003Col>\n\u003Cli>\n\u003Cp>通过运行以下命令安装必要的 remark 和 rehype 插件：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">pnpm\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> install\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> rehype-katex\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> remark-math\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> katex\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003C/li>\n\u003Cli>\n\u003Cp>更新 Astro 配置以使用这些插件：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl has-diff mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"ts\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">// ...\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> remarkMath \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">remark-math\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> rehypeKatex \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">rehype-katex\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">export\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\"> default\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> defineConfig\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">({\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  // ...\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  markdown\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    remarkPlugins\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> [\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff add\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">      remarkMath\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">      remarkToc\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">      [remarkCollapse\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> { test\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">Table of contents\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> }]\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    ]\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff add\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    rehypePlugins\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> [rehypeKatex]\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    shikiConfig\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">      // 更多主题请访问 https://shiki.style/themes\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">      themes\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> { light\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">min-light\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> dark\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">night-owl\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">      wrap\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FF5874\"> false\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  // ...\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">});\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">astro.config.ts\u003C/span>\u003C/pre>\n\u003C/li>\n\u003Cli>\n\u003Cp>在主布局文件中导入 KaTeX CSS\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl has-highlighted mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"astro\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">---\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> { SITE } \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">@config\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">// astro 代码\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">---\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"><!\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">doctype\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\"> html\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"><!-- 其他元素 -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">meta\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\"> property\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">og:image\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\"> content\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D3423E\">{\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">socialImageURL\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D3423E\">}\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"> />\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">link\u003C/span>\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  rel\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">stylesheet\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  href\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">/>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">body\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">  <\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">slot\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"> />\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">body\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/layouts/Layout.astro\u003C/span>\u003C/pre>\n\u003C/li>\n\u003Cli>\n\u003Cp>最后一步，在 \u003Ccode>typography.css\u003C/code> 中为 \u003Ccode>katex\u003C/code> 添加文本颜色。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl has-highlighted mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">@\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">plugin\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> \"@tailwindcss/typography\";\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">@\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">layer\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> base {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  /* 其他类 */\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  /* Katex 文本颜色 */\u003C/span>\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#C5E478\">  .\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">prose\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#C5E478\"> .\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">katex-display\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    @\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#80CBC4\">apply\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#80CBC4\"> text-foreground\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  }\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  /* ===== 代码块与语法高亮 ===== */\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  /* 其他类 */\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/styles/typography.css\u003C/span>\u003C/pre>\n\u003C/li>\n\u003C/ol>\n\u003Cp>瞧，这样设置之后，你就可以在 Markdown 文件中编写 LaTeX 公式了，网站构建时这些公式将被正确渲染。完成设置后，文档的其余部分将正确显示。\u003C/p>\n\u003Chr>\n\u003Ch2 id=\"行内公式\">行内公式\u003C/h2>\n\u003Cp>行内公式写在单个美元符号 \u003Ccode>$...$\u003C/code> 之间。以下是一些示例：\u003C/p>\n\u003Col>\n\u003Cli>著名的质能等价公式：\u003Ccode>$E = mc^2$\u003C/code>\u003C/li>\n\u003Cli>求根公式：\u003Ccode>$x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$\u003C/code>\u003C/li>\n\u003Cli>欧拉恒等式：\u003Ccode>$e^{i\\pi} + 1 = 0$\u003C/code>\u003C/li>\n\u003C/ol>\n\u003Chr>\n\u003Ch2 id=\"块级公式\">块级公式\u003C/h2>\n\u003Cp>对于更复杂的公式，或者当你希望公式单独成行显示时，使用双美元符号 \u003Ccode>$$...$$\u003C/code>：\u003C/p>\n\u003Cp>高斯积分：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">$$\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\i\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">nt_{\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">-\\infty}^\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">{\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">\\\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">infty}\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> e^{-x^2}\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> dx\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\s\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">qrt{\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\">\\p\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">i}\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"> $$\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>黎曼 ζ 函数的定义：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">$$\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\z\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">eta(\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">s\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">) = \u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\">\\s\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">um_{\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">n\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">1\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}^{\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">\\infty}\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\f\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">rac{\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\">1\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">}{n^s}\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"> $$\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>麦克斯韦方程组的微分形式：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">$$\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">\\begin\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">{aligned}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">\\nabla\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\c\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">dot\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\m\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">athbf{E}\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\"> &\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">=\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\f\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">rac{\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\">\\r\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">ho}{\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\">\\v\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">arepsilon_0}\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\\\\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\">\\n\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">abla \u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\">\\c\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">dot\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\m\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">athbf{B}\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\"> &\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">=\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 0\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\\\\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\">\\n\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">abla \u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\">\\t\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">imes\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\m\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">athbf{E}\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\"> &\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">=\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\"> -\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#F78C6C\">\\f\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#82AAFF\">rac\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">{\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">\\partial\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\m\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">athbf{B}}{\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\">\\p\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">artial\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> t}\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\\\\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\">\\n\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">abla \u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\">\\t\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">imes\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\m\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">athbf{B}\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\"> &\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">=\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\m\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">u_0\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\">\\l\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">eft\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">\\mathbf\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">{J}\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> +\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\v\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">arepsilon_0\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\f\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">rac{\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\">\\p\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">artial\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\"> \\m\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">athbf{E}}{\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\">\\p\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">artial\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> t}\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#F78C6C\">\\r\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">ight\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">\\end\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\">{aligned}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">$$\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Chr>\n\u003Ch2 id=\"使用数学符号\">使用数学符号\u003C/h2>\n\u003Cp>LaTeX 提供广泛的数学符号：\u003C/p>\n\u003Cul>\n\u003Cli>希腊字母：\u003Ccode>$\\alpha$\u003C/code>、\u003Ccode>$\\beta$\u003C/code>、\u003Ccode>$\\gamma$\u003C/code>、\u003Ccode>$\\delta$\u003C/code>、\u003Ccode>$\\epsilon$\u003C/code>、\u003Ccode>$\\pi$\u003C/code>\u003C/li>\n\u003Cli>运算符：\u003Ccode>$\\sum$\u003C/code>、\u003Ccode>$\\prod$\u003C/code>、\u003Ccode>$\\int$\u003C/code>、\u003Ccode>$\\partial$\u003C/code>、\u003Ccode>$\\nabla$\u003C/code>\u003C/li>\n\u003Cli>关系符号：\u003Ccode>$\\leq$\u003C/code>、\u003Ccode>$\\geq$\u003C/code>、\u003Ccode>$\\approx$\u003C/code>、\u003Ccode>$\\sim$\u003C/code>、\u003Ccode>$\\propto$\u003C/code>\u003C/li>\n\u003Cli>逻辑符号：\u003Ccode>$\\forall$\u003C/code>、\u003Ccode>$\\exists$\u003C/code>、\u003Ccode>$\\neg$\u003C/code>、\u003Ccode>$\\wedge$\u003C/code>、\u003Ccode>$\\vee$\u003C/code>\u003C/li>\n\u003C/ul>",{"headings":352,"localImagePaths":362,"remoteImagePaths":363,"frontmatter":364,"imagePaths":368},[353,354,356,358,360],{"depth":31,"slug":32,"text":32},{"depth":31,"slug":355,"text":355},"说明",{"depth":31,"slug":357,"text":357},"行内公式",{"depth":31,"slug":359,"text":359},"块级公式",{"depth":31,"slug":361,"text":361},"使用数学符号",[],[],{"author":340,"pubDatetime":365,"modDatetime":366,"title":343,"tags":367,"description":345},["Date","2024-09-08T20:58:52.737Z"],["Date","2025-03-22T09:25:46.734Z"],[20],[],"how-to-configure-astropaper-theme",{"id":369,"data":371,"body":378,"filePath":379,"digest":380,"rendered":381},{"author":14,"pubDatetime":372,"modDatetime":373,"title":374,"featured":292,"draft":18,"tags":375,"description":377},["Date","2022-09-23T04:58:53.000Z"],["Date","2026-01-10T13:04:53.851Z"],"如何配置 AstroPaper 主题",[376,20],"configuration","如何让你的 AstroPaper 主题完全符合你的个性化需求。","AstroPaper 是一个高度可定制的 Astro 博客主题。使用 AstroPaper，你可以根据个人品味自定义一切。本文将解释如何通过配置文件轻松进行一些自定义设置。\n\n## 目录\n\n## 配置 SITE\n\n重要的配置位于 `src/config.ts` 文件中。在该文件中，你会看到 `SITE` 对象，你可以在其中指定网站的主要配置。\n\n在开发过程中，将 `SITE.website` 留空是可以的。但在生产模式下，你应该在 `SITE.website` 选项中指定你的部署 URL，因为这将被用于规范 URL、社交卡片 URL 等，这些对 SEO 很重要。\n\n```js file=src/config.ts\nexport const SITE = {\n  website: \"https://astro-paper.pages.dev/\", // 替换为你的部署域名\n  author: \"Sat Naing\",\n  profile: \"https://satnaing.dev/\",\n  desc: \"一个简约、响应式且 SEO 友好的 Astro 博客主题。\",\n  title: \"AstroPaper\",\n  ogImage: \"astropaper-og.jpg\",\n  lightAndDarkMode: true,\n  postPerIndex: 4,\n  postPerPage: 4,\n  scheduledPostMargin: 15 * 60 * 1000, // 15 分钟\n  showArchives: true,\n  showBackButton: true, // 在文章详情中显示返回按钮\n  editPost: {\n    enabled: true,\n    text: \"建议修改\",\n    url: \"https://github.com/satnaing/astro-paper/edit/main/\",\n  },\n  dynamicOgImage: true, // 启用自动动态 OG 图片生成\n  dir: \"ltr\", // \"rtl\" | \"auto\"\n  lang: \"en\", // html lang 代码。设为空则默认为 \"en\"\n  timezone: \"Asia/Bangkok\", // 默认全局时区（IANA 格式）https://en.wikipedia.org/wiki/List_of_tz_database_time_zones\n} as const;\n```\n\n以下是 SITE 配置选项：\n\n| 选项                   | 描述                                                                                                                                                                                                                                                                                                                                                                                                                                            |\n| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `website`              | 你的已部署网站 URL                                                                                                                                                                                                                                                                                                                                                                                                                              |\n| `author`               | 你的名字                                                                                                                                                                                                                                                                                                                                                                                                                                        |\n| `profile`              | 你的个人/作品集网站 URL，用于更好的 SEO。如果没有，设为 `null` 或空字符串 `\"\"`。                                                                                                                                                                                                                                                                                                                                                               |\n| `desc`                 | 你的网站描述。对 SEO 和社交媒体分享有用。                                                                                                                                                                                                                                                                                                                                                                                                      |\n| `title`                | 你的网站名称                                                                                                                                                                                                                                                                                                                                                                                                                                    |\n| `ogImage`              | 网站的默认 OG 图片。对社交媒体分享有用。OG 图片可以是外部图片 URL，也可以放在 `/public` 目录下。                                                                                                                                                                                                                                                                                                                                               |\n| `lightAndDarkMode`     | 启用或禁用网站的`浅色与深色模式`。如果禁用，将使用主色方案。此选项默认启用。                                                                                                                                                                                                                                                                                                                                                                    |\n| `postPerIndex`         | 首页`最近`部分显示的文章数量。                                                                                                                                                                                                                                                                                                                                                                                                                  |\n| `postPerPage`          | 你可以指定每页显示多少篇文章。（例如：如果你将 `SITE.postPerPage` 设为 3，每页只显示 3 篇文章）                                                                                                                                                                                                                                                                                                                                                 |\n| `scheduledPostMargin`  | 在生产模式下，`pubDatetime` 为未来时间的文章将不可见。但是，如果文章的 `pubDatetime` 在接下来的 15 分钟内，它将可见。如果你不喜欢默认的 15 分钟间隔，可以设置 `scheduledPostMargin`。                                                                                                                                                                                                                                                            |\n| `showArchives`         | 决定是否在网站上显示`归档`菜单（位于`关于`和`搜索`菜单之间）及其对应页面。此选项默认为 `true`。                                                                                                                                                                                                                                                                                                                                                |\n| `showBackButton`       | 决定是否在每篇博客文章中显示`返回`按钮。                                                                                                                                                                                                                                                                                                                                                                                                        |\n| `editPost`             | 此选项允许用户通过提供编辑链接来建议对博客文章的修改。可以通过将 `SITE.editPost.enabled` 设为 `false` 来禁用此功能。                                                                                                                                                                                                                                                                                                                            |\n| `dynamicOgImage`       | 此选项控制是否在博客文章前置元数据中未指定 `ogImage` 时[生成动态 OG 图片](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/)。如果你有很多博客文章，你可能想禁用此功能。详见[权衡](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/#trade-off)。                                                                                                                |\n| `dir`                  | 指定整个博客的文本方向。用作 [HTML dir 属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir)，如 `\u003Chtml dir=\"ltr\">`。支持的值：`ltr` \\| `rtl` \\| `auto`                                                                                                                                                                                                                                                     |\n| `lang`                 | 用作 HTML ISO 语言代码，如 `\u003Chtml lang\"en\">`。默认为 `en`。                                                                                                                                                                                                                                                                                                                                                                                     |\n| `timezone`             | 此选项允许你使用 [IANA 格式](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)指定时区。设置此项可确保本地主机和已部署站点的时间戳一致，消除时差。                                                                                                                                                                                                                                                                                   |\n\n## 更新布局宽度\n\n整个博客的默认 `max-width` 是 `768px`（`max-w-3xl`）。如果你想更改，可以在 `global.css` 中轻松更新 `max-w-app` 工具类。例如：\n\n```css file=src/styles/global.css\n@utility max-w-app {\n  /* [!code --:1] */\n  @apply max-w-3xl;\n  /* [!code ++:1] */\n  @apply max-w-4xl xl:max-w-5xl;\n}\n```\n\n你可以在 [Tailwind CSS 文档](https://tailwindcss.com/docs/max-width)中探索更多 `max-width` 值。\n\n## 配置 Logo 或标题\n\n在 AstroPaper v5 之前，你可以在 `src/config.ts` 文件中的 `LOGO_IMAGE` 对象中更新网站名称/logo。但是，在 AstroPaper v5 中，此选项已被移除，转而使用 Astro 内置的 SVG 和 Image 组件。\n\n![指向网站 logo 的箭头](https://res.cloudinary.com/noezectz/v1663911318/astro-paper/AstroPaper-logo-config_goff5l.png)\n\n你有 3 种选择：\n\n### 选项 1：SITE 标题文本\n\n这是最简单的选项。你只需更新 `src/config.ts` 文件中的 `SITE.title`。\n\n### 选项 2：Astro 的 SVG 组件\n\n如果你想使用 SVG logo，可以使用此选项。\n\n- 首先在 `src/assets` 目录中添加 SVG。（例如：`src/assets/dummy-logo.svg`）\n- 然后在 `Header.astro` 中导入该 SVG。\n\n  ```astro file=src/components/Header.astro\n  ---\n  // ...\n  import DummyLogo from \"@/assets/dummy-logo.svg\";\n  ---\n  ```\n\n- 最后，将 `{SITE.title}` 替换为导入的 logo。\n\n  ```html\n  \u003Ca\n    href=\"/\"\n    class=\"absolute py-1 text-left text-2xl leading-7 font-semibold whitespace-nowrap sm:static\"\n  >\n    \u003CDummyLogo class=\"scale-75 dark:invert\" />\n    \u003C!-- {SITE.title} -->\n  \u003C/a>\n  ```\n\n这种方法最大的好处是你可以根据需要自定义 SVG 样式。在上面的示例中，你可以看到 SVG logo 颜色如何在深色模式下反转。\n\n### 选项 3：Astro 的 Image 组件\n\n如果你的 logo 是图片但不是 SVG，你可以使用 Astro 的 Image 组件。\n\n- 将你的 logo 添加到 `src/assets` 目录中。（例如：`src/assets/dummy-logo.png`）\n- 在 `Header.astro` 中导入 `Image` 和你的 logo。\n\n  ```astro file=src/components/Header.astro\n  ---\n  // ...\n  import { Image } from \"astro:assets\";\n  import dummyLogo from \"@/assets/dummy-logo.png\";\n  ---\n  ```\n\n- 然后，将 `{SITE.title}` 替换为导入的 logo。\n\n  \u003C!-- prettier-ignore -->\n  ```html\n  \u003Ca\n    href=\"/\"\n    class=\"absolute py-1 text-left text-2xl leading-7 font-semibold whitespace-nowrap sm:static\"\n  >\n    \u003CImage src=\"{dummyLogo}\" alt=\"示例博客\" class=\"dark:invert\" />\n    \u003C!-- {SITE.title} -->\n  \u003C/a>\n  ```\n\n使用这种方法，你仍然可以通过 CSS 类来调整图片的外观。但这可能并不总是符合你的需求。如果你需要根据浅色或深色模式显示不同的 logo 图片，请查看 `Header.astro` 组件中如何处理浅色/深色图标。\n\n## 配置社交链接\n\n![指向社交链接图标的箭头](https://github.com/user-attachments/assets/8b895400-d088-442f-881b-02d2443e00cf)\n\n你可以在 `constants.ts` 中的 `SOCIALS` 对象中配置社交链接。\n\n```ts file=src/constants.ts\nexport const SOCIALS = [\n  {\n    name: \"GitHub\",\n    href: \"https://github.com/satnaing/astro-paper\",\n    linkTitle: ` ${SITE.title} 在 GitHub 上`,\n    icon: IconGitHub,\n  },\n  {\n    name: \"X\",\n    href: \"https://x.com/username\",\n    linkTitle: `${SITE.title} 在 X 上`,\n    icon: IconBrandX,\n  },\n  {\n    name: \"LinkedIn\",\n    href: \"https://www.linkedin.com/in/username/\",\n    linkTitle: `${SITE.title} 在 LinkedIn 上`,\n    icon: IconLinkedin,\n  },\n  {\n    name: \"邮箱\",\n    href: \"mailto:yourmail@gmail.com\",\n    linkTitle: `发送邮件给 ${SITE.title}`,\n    icon: IconMail,\n  },\n] as const;\n```\n\n## 配置分享链接\n\n你可以在 `src/constants.ts` 中的 `SHARE_LINKS` 对象中配置分享链接。\n\n![指向分享链接图标的箭头](https://github.com/user-attachments/assets/4f930b68-b625-45df-8c41-e076dd2b838e)\n\n## 配置字体\n\nAstroPaper 使用 Astro 的[实验性字体 API](https://docs.astro.build/en/reference/experimental-flags/fonts/)，默认字体为 [Google Sans Code](https://fonts.google.com/specimen/Google+Sans+Code)。这提供了跨所有平台的一致排版，并具有自动字体优化功能，包括预加载和缓存。\n\n### 使用默认字体\n\n字体会在 `astro.config.ts` 中自动配置，并在 `Layout.astro` 中加载。使用默认的 Google Sans Code 字体不需要额外配置。\n\n### 自定义字体\n\n要使用不同的字体，你需要更新三个地方：\n\n1. **更新 `astro.config.ts` 中的字体配置：**\n\n```ts file=astro.config.ts\nimport { defineConfig, fontProviders } from \"astro/config\";\n\nexport default defineConfig({\n  // ...\n  experimental: {\n    fonts: [\n      {\n        name: \"你的字体名称\", // [!code highlight]\n        cssVariable: \"--font-your-font\", // [!code highlight]\n        provider: fontProviders.google(),\n        fallbacks: [\"monospace\"],\n        weights: [300, 400, 500, 600, 700],\n        styles: [\"normal\", \"italic\"],\n      },\n    ],\n  },\n});\n```\n\n2. **更新 `Layout.astro` 中的 Font 组件：**\n\n```astro file=src/layouts/Layout.astro\n---\nimport { Font } from \"astro:assets\";\n// ...\n---\n\n\u003Chead>\n  \u003C!-- ... -->\n  // [!code highlight:4]\n  \u003CFont\n    cssVariable=\"--font-your-font\"\n    preload={[{ subset: \"latin\", weight: 400, style: \"normal\" }]}\n  />\n  \u003C!-- ... -->\n\u003C/head>\n```\n\n3. **更新 `global.css` 中的 CSS 变量映射：**\n\n```css file=src/styles/global.css\n@theme inline {\n  --font-app: var(--font-your-font); /* [!code highlight] */\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-accent: var(--accent);\n  --color-muted: var(--muted);\n  --color-border: var(--border);\n}\n```\n\n`--font-app` 变量通过 `font-app` Tailwind 工具类在整个主题中使用，因此更新这个单一变量将在所有地方应用你的自定义字体。\n\n> **注意**：确保字体名称与 [Google Fonts](https://fonts.google.com) 上的名称完全一致。对于其他字体提供商或本地字体，请参考 [Astro 实验性字体 API 文档](https://docs.astro.build/en/reference/experimental-flags/fonts/)。\n\n## 结论\n\n以上就是如何自定义该主题的简要说明。如果你了解一些编码知识，你可以进行更多的自定义。有关自定义样式的信息，请阅读[这篇文章](https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/)。感谢阅读。✌🏻","src/data/blog/how-to-configure-astropaper-theme.md","c15a678113fea93e",{"html":382,"metadata":383},"\u003Cp>AstroPaper 是一个高度可定制的 Astro 博客主题。使用 AstroPaper，你可以根据个人品味自定义一切。本文将解释如何通过配置文件轻松进行一些自定义设置。\u003C/p>\n\u003Ch2 id=\"目录\">目录\u003C/h2>\n\u003Ch2 id=\"配置-site\">配置 SITE\u003C/h2>\n\u003Cp>重要的配置位于 \u003Ccode>src/config.ts\u003C/code> 文件中。在该文件中，你会看到 \u003Ccode>SITE\u003C/code> 对象，你可以在其中指定网站的主要配置。\u003C/p>\n\u003Cp>在开发过程中，将 \u003Ccode>SITE.website\u003C/code> 留空是可以的。但在生产模式下，你应该在 \u003Ccode>SITE.website\u003C/code> 选项中指定你的部署 URL，因为这将被用于规范 URL、社交卡片 URL 等，这些对 SEO 很重要。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">export\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> const\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> SITE\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  website\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">https://astro-paper.pages.dev/\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"> // 替换为你的部署域名\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  author\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">Sat Naing\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  profile\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">https://satnaing.dev/\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  desc\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">一个简约、响应式且 SEO 友好的 Astro 博客主题。\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  title\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">AstroPaper\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  ogImage\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">astropaper-og.jpg\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  lightAndDarkMode\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#FF5874;--shiki-dark-font-style:italic\"> true\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  postPerIndex\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 4\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  postPerPage\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 4\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  scheduledPostMargin\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 15\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> *\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 60\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> *\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 1000\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"> // 15 分钟\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  showArchives\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#FF5874;--shiki-dark-font-style:italic\"> true\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  showBackButton\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#FF5874;--shiki-dark-font-style:italic\"> true\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"> // 在文章详情中显示返回按钮\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  editPost\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">    enabled\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#FF5874;--shiki-dark-font-style:italic\"> true\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">    text\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">建议修改\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">    url\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">https://github.com/satnaing/astro-paper/edit/main/\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">  }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  dynamicOgImage\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#FF5874;--shiki-dark-font-style:italic\"> true\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"> // 启用自动动态 OG 图片生成\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  dir\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">ltr\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"> // \"rtl\" | \"auto\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  lang\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">en\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"> // html lang 代码。设为空则默认为 \"en\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  timezone\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">Asia/Bangkok\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"> // 默认全局时区（IANA 格式）https://en.wikipedia.org/wiki/List_of_tz_database_time_zones\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">}\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\"> as\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\"> const\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/config.ts\u003C/span>\u003C/pre>\n\u003Cp>以下是 SITE 配置选项：\u003C/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>选项\u003C/th>\u003Cth>描述\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>\u003Ccode>website\u003C/code>\u003C/td>\u003Ctd>你的已部署网站 URL\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>author\u003C/code>\u003C/td>\u003Ctd>你的名字\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>profile\u003C/code>\u003C/td>\u003Ctd>你的个人/作品集网站 URL，用于更好的 SEO。如果没有，设为 \u003Ccode>null\u003C/code> 或空字符串 \u003Ccode>\"\"\u003C/code>。\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>desc\u003C/code>\u003C/td>\u003Ctd>你的网站描述。对 SEO 和社交媒体分享有用。\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>title\u003C/code>\u003C/td>\u003Ctd>你的网站名称\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>ogImage\u003C/code>\u003C/td>\u003Ctd>网站的默认 OG 图片。对社交媒体分享有用。OG 图片可以是外部图片 URL，也可以放在 \u003Ccode>/public\u003C/code> 目录下。\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>lightAndDarkMode\u003C/code>\u003C/td>\u003Ctd>启用或禁用网站的\u003Ccode>浅色与深色模式\u003C/code>。如果禁用，将使用主色方案。此选项默认启用。\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>postPerIndex\u003C/code>\u003C/td>\u003Ctd>首页\u003Ccode>最近\u003C/code>部分显示的文章数量。\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>postPerPage\u003C/code>\u003C/td>\u003Ctd>你可以指定每页显示多少篇文章。（例如：如果你将 \u003Ccode>SITE.postPerPage\u003C/code> 设为 3，每页只显示 3 篇文章）\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>scheduledPostMargin\u003C/code>\u003C/td>\u003Ctd>在生产模式下，\u003Ccode>pubDatetime\u003C/code> 为未来时间的文章将不可见。但是，如果文章的 \u003Ccode>pubDatetime\u003C/code> 在接下来的 15 分钟内，它将可见。如果你不喜欢默认的 15 分钟间隔，可以设置 \u003Ccode>scheduledPostMargin\u003C/code>。\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>showArchives\u003C/code>\u003C/td>\u003Ctd>决定是否在网站上显示\u003Ccode>归档\u003C/code>菜单（位于\u003Ccode>关于\u003C/code>和\u003Ccode>搜索\u003C/code>菜单之间）及其对应页面。此选项默认为 \u003Ccode>true\u003C/code>。\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>showBackButton\u003C/code>\u003C/td>\u003Ctd>决定是否在每篇博客文章中显示\u003Ccode>返回\u003C/code>按钮。\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>editPost\u003C/code>\u003C/td>\u003Ctd>此选项允许用户通过提供编辑链接来建议对博客文章的修改。可以通过将 \u003Ccode>SITE.editPost.enabled\u003C/code> 设为 \u003Ccode>false\u003C/code> 来禁用此功能。\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>dynamicOgImage\u003C/code>\u003C/td>\u003Ctd>此选项控制是否在博客文章前置元数据中未指定 \u003Ccode>ogImage\u003C/code> 时\u003Ca href=\"https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/\">生成动态 OG 图片\u003C/a>。如果你有很多博客文章，你可能想禁用此功能。详见\u003Ca href=\"https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/#trade-off\">权衡\u003C/a>。\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>dir\u003C/code>\u003C/td>\u003Ctd>指定整个博客的文本方向。用作 \u003Ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir\">HTML dir 属性\u003C/a>，如 \u003Ccode><html dir=\"ltr\">\u003C/code>。支持的值：\u003Ccode>ltr\u003C/code> | \u003Ccode>rtl\u003C/code> | \u003Ccode>auto\u003C/code>\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>lang\u003C/code>\u003C/td>\u003Ctd>用作 HTML ISO 语言代码，如 \u003Ccode><html lang\"en\">\u003C/code>。默认为 \u003Ccode>en\u003C/code>。\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>\u003Ccode>timezone\u003C/code>\u003C/td>\u003Ctd>此选项允许你使用 \u003Ca href=\"https://en.wikipedia.org/wiki/List_of_tz_database_time_zones\">IANA 格式\u003C/a>指定时区。设置此项可确保本地主机和已部署站点的时间戳一致，消除时差。\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Ch2 id=\"更新布局宽度\">更新布局宽度\u003C/h2>\n\u003Cp>整个博客的默认 \u003Ccode>max-width\u003C/code> 是 \u003Ccode>768px\u003C/code>（\u003Ccode>max-w-3xl\u003C/code>）。如果你想更改，可以在 \u003Ccode>global.css\u003C/code> 中轻松更新 \u003Ccode>max-w-app\u003C/code> 工具类。例如：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl has-diff mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">@\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">utility\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> max-w-app {\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff remove\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">  @\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">apply\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> max-w-3xl;\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff add\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">  @\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">apply\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> max-w-4xl xl:max-w-5xl;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/styles/global.css\u003C/span>\u003C/pre>\n\u003Cp>你可以在 \u003Ca href=\"https://tailwindcss.com/docs/max-width\">Tailwind CSS 文档\u003C/a>中探索更多 \u003Ccode>max-width\u003C/code> 值。\u003C/p>\n\u003Ch2 id=\"配置-logo-或标题\">配置 Logo 或标题\u003C/h2>\n\u003Cp>在 AstroPaper v5 之前，你可以在 \u003Ccode>src/config.ts\u003C/code> 文件中的 \u003Ccode>LOGO_IMAGE\u003C/code> 对象中更新网站名称/logo。但是，在 AstroPaper v5 中，此选项已被移除，转而使用 Astro 内置的 SVG 和 Image 组件。\u003C/p>\n\u003Cp>\u003Cimg src=\"https://res.cloudinary.com/noezectz/v1663911318/astro-paper/AstroPaper-logo-config_goff5l.png\" alt=\"指向网站 logo 的箭头\">\u003C/p>\n\u003Cp>你有 3 种选择：\u003C/p>\n\u003Ch3 id=\"选项-1site-标题文本\">选项 1：SITE 标题文本\u003C/h3>\n\u003Cp>这是最简单的选项。你只需更新 \u003Ccode>src/config.ts\u003C/code> 文件中的 \u003Ccode>SITE.title\u003C/code>。\u003C/p>\n\u003Ch3 id=\"选项-2astro-的-svg-组件\">选项 2：Astro 的 SVG 组件\u003C/h3>\n\u003Cp>如果你想使用 SVG logo，可以使用此选项。\u003C/p>\n\u003Cul>\n\u003Cli>\n\u003Cp>首先在 \u003Ccode>src/assets\u003C/code> 目录中添加 SVG。（例如：\u003Ccode>src/assets/dummy-logo.svg\u003C/code>）\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>然后在 \u003Ccode>Header.astro\u003C/code> 中导入该 SVG。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"astro\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">---\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">// ...\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> DummyLogo \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">@/assets/dummy-logo.svg\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">---\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/components/Header.astro\u003C/span>\u003C/pre>\n\u003C/li>\n\u003Cli>\n\u003Cp>最后，将 \u003Ccode>{SITE.title}\u003C/code> 替换为导入的 logo。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">a\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  href\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">/\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  class\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">absolute py-1 text-left text-2xl leading-7 font-semibold whitespace-nowrap sm:static\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">  <\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FFFFFF\">DummyLogo\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">scale-75 dark:invert\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"> />\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  <!-- {SITE.title} -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">a\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003C/li>\n\u003C/ul>\n\u003Cp>这种方法最大的好处是你可以根据需要自定义 SVG 样式。在上面的示例中，你可以看到 SVG logo 颜色如何在深色模式下反转。\u003C/p>\n\u003Ch3 id=\"选项-3astro-的-image-组件\">选项 3：Astro 的 Image 组件\u003C/h3>\n\u003Cp>如果你的 logo 是图片但不是 SVG，你可以使用 Astro 的 Image 组件。\u003C/p>\n\u003Cul>\n\u003Cli>\n\u003Cp>将你的 logo 添加到 \u003Ccode>src/assets\u003C/code> 目录中。（例如：\u003Ccode>src/assets/dummy-logo.png\u003C/code>）\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>在 \u003Ccode>Header.astro\u003C/code> 中导入 \u003Ccode>Image\u003C/code> 和你的 logo。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"astro\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">---\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">// ...\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> { Image } \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">astro:assets\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> dummyLogo \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">@/assets/dummy-logo.png\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">---\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/components/Header.astro\u003C/span>\u003C/pre>\n\u003C/li>\n\u003Cli>\n\u003Cp>然后，将 \u003Ccode>{SITE.title}\u003C/code> 替换为导入的 logo。\u003C/p>\n\u003C!-- prettier-ignore -->\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">a\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  href\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">/\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  class\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">absolute py-1 text-left text-2xl leading-7 font-semibold whitespace-nowrap sm:static\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">  <\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FFFFFF\">Image\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\"> src\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">{dummyLogo}\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\"> alt\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">示例博客\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">dark:invert\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"> />\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  <!-- {SITE.title} -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">a\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003C/li>\n\u003C/ul>\n\u003Cp>使用这种方法，你仍然可以通过 CSS 类来调整图片的外观。但这可能并不总是符合你的需求。如果你需要根据浅色或深色模式显示不同的 logo 图片，请查看 \u003Ccode>Header.astro\u003C/code> 组件中如何处理浅色/深色图标。\u003C/p>\n\u003Ch2 id=\"配置社交链接\">配置社交链接\u003C/h2>\n\u003Cp>\u003Cimg src=\"https://github.com/user-attachments/assets/8b895400-d088-442f-881b-02d2443e00cf\" alt=\"指向社交链接图标的箭头\">\u003C/p>\n\u003Cp>你可以在 \u003Ccode>constants.ts\u003C/code> 中的 \u003Ccode>SOCIALS\u003C/code> 对象中配置社交链接。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"ts\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">export\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> const\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> SOCIALS\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> [\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    name\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">GitHub\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    href\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">https://github.com/satnaing/astro-paper\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    linkTitle\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D6DEEB\"> `\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D3423E\"> ${\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">SITE\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#BAEBE2;--shiki-dark-font-style:italic\">title\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D3423E\">}\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-light-font-style:inherit;--shiki-dark:#ECC48D;--shiki-dark-font-style:italic\"> 在 GitHub 上\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D6DEEB\">`\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    icon\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> IconGitHub\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    name\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">X\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    href\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">https://x.com/username\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    linkTitle\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D6DEEB\"> `\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D3423E\">${\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">SITE\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#BAEBE2;--shiki-dark-font-style:italic\">title\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D3423E\">}\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-light-font-style:inherit;--shiki-dark:#ECC48D;--shiki-dark-font-style:italic\"> 在 X 上\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D6DEEB\">`\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    icon\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> IconBrandX\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    name\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">LinkedIn\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    href\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">https://www.linkedin.com/in/username/\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    linkTitle\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D6DEEB\"> `\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D3423E\">${\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">SITE\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#BAEBE2;--shiki-dark-font-style:italic\">title\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D3423E\">}\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-light-font-style:inherit;--shiki-dark:#ECC48D;--shiki-dark-font-style:italic\"> 在 LinkedIn 上\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D6DEEB\">`\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    icon\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> IconLinkedin\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    name\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">邮箱\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    href\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">mailto:yourmail@gmail.com\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    linkTitle\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D6DEEB\"> `\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-light-font-style:inherit;--shiki-dark:#ECC48D;--shiki-dark-font-style:italic\">发送邮件给 \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D3423E\">${\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">SITE\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#BAEBE2;--shiki-dark-font-style:italic\">title\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D3423E\">}\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D6DEEB\">`\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">    icon\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> IconMail\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">]\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\"> as\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\"> const\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/constants.ts\u003C/span>\u003C/pre>\n\u003Ch2 id=\"配置分享链接\">配置分享链接\u003C/h2>\n\u003Cp>你可以在 \u003Ccode>src/constants.ts\u003C/code> 中的 \u003Ccode>SHARE_LINKS\u003C/code> 对象中配置分享链接。\u003C/p>\n\u003Cp>\u003Cimg src=\"https://github.com/user-attachments/assets/4f930b68-b625-45df-8c41-e076dd2b838e\" alt=\"指向分享链接图标的箭头\">\u003C/p>\n\u003Ch2 id=\"配置字体\">配置字体\u003C/h2>\n\u003Cp>AstroPaper 使用 Astro 的\u003Ca href=\"https://docs.astro.build/en/reference/experimental-flags/fonts/\">实验性字体 API\u003C/a>，默认字体为 \u003Ca href=\"https://fonts.google.com/specimen/Google+Sans+Code\">Google Sans Code\u003C/a>。这提供了跨所有平台的一致排版，并具有自动字体优化功能，包括预加载和缓存。\u003C/p>\n\u003Ch3 id=\"使用默认字体\">使用默认字体\u003C/h3>\n\u003Cp>字体会在 \u003Ccode>astro.config.ts\u003C/code> 中自动配置，并在 \u003Ccode>Layout.astro\u003C/code> 中加载。使用默认的 Google Sans Code 字体不需要额外配置。\u003C/p>\n\u003Ch3 id=\"自定义字体\">自定义字体\u003C/h3>\n\u003Cp>要使用不同的字体，你需要更新三个地方：\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>更新 \u003Ccode>astro.config.ts\u003C/code> 中的字体配置：\u003C/strong>\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl has-highlighted mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"ts\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> { defineConfig\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> fontProviders } \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">astro/config\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">export\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\"> default\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> defineConfig\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">({\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  // ...\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  experimental\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    fonts\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> [\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">      {\u003C/span>\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">        name\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">你的字体名称\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">        cssVariable\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">--font-your-font\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">        provider\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#D6DEEB\"> fontProviders\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">google\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">()\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">        fallbacks\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> [\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">monospace\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">]\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">        weights\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> [\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\">300\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 400\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 500\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 600\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 700\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">]\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">        styles\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> [\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">normal\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">italic\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">]\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">      }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    ]\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">});\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">astro.config.ts\u003C/span>\u003C/pre>\n\u003Col start=\"2\">\n\u003Cli>\u003Cstrong>更新 \u003Ccode>Layout.astro\u003C/code> 中的 Font 组件：\u003C/strong>\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl has-highlighted mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"astro\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">---\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> { Font } \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">astro:assets\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">// ...\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">---\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">head\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  <!-- ... -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">  <\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\">Font\u003C/span>\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">    cssVariable\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">--font-your-font\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">    preload\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D3423E\">{\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">[{ subset\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">latin\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> weight\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 400\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> style\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">normal\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> }]\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D3423E\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">  />\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  <!-- ... -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">head\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/layouts/Layout.astro\u003C/span>\u003C/pre>\n\u003Col start=\"3\">\n\u003Cli>\u003Cstrong>更新 \u003Ccode>global.css\u003C/code> 中的 CSS 变量映射：\u003C/strong>\u003C/li>\n\u003C/ol>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl has-highlighted mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">@\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">theme\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> inline {\u003C/span>\u003C/span>\n\u003Cspan class=\"line highlighted\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  --font-app: var(--font-your-font\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">); \u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  --color-background: var(--background\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  --color-foreground: var(--foreground\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  --color-accent: var(--accent\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  --color-muted: var(--muted\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  --color-border: var(--border\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/styles/global.css\u003C/span>\u003C/pre>\n\u003Cp>\u003Ccode>--font-app\u003C/code> 变量通过 \u003Ccode>font-app\u003C/code> Tailwind 工具类在整个主题中使用，因此更新这个单一变量将在所有地方应用你的自定义字体。\u003C/p>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>注意\u003C/strong>：确保字体名称与 \u003Ca href=\"https://fonts.google.com\">Google Fonts\u003C/a> 上的名称完全一致。对于其他字体提供商或本地字体，请参考 \u003Ca href=\"https://docs.astro.build/en/reference/experimental-flags/fonts/\">Astro 实验性字体 API 文档\u003C/a>。\u003C/p>\n\u003C/blockquote>\n\u003Ch2 id=\"结论\">结论\u003C/h2>\n\u003Cp>以上就是如何自定义该主题的简要说明。如果你了解一些编码知识，你可以进行更多的自定义。有关自定义样式的信息，请阅读\u003Ca href=\"https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/\">这篇文章\u003C/a>。感谢阅读。✌🏻\u003C/p>",{"headings":384,"localImagePaths":414,"remoteImagePaths":415,"frontmatter":416,"imagePaths":420},[385,386,389,391,394,397,400,403,405,407,409,411,413],{"depth":31,"slug":32,"text":32},{"depth":31,"slug":387,"text":388},"配置-site","配置 SITE",{"depth":31,"slug":390,"text":390},"更新布局宽度",{"depth":31,"slug":392,"text":393},"配置-logo-或标题","配置 Logo 或标题",{"depth":45,"slug":395,"text":396},"选项-1site-标题文本","选项 1：SITE 标题文本",{"depth":45,"slug":398,"text":399},"选项-2astro-的-svg-组件","选项 2：Astro 的 SVG 组件",{"depth":45,"slug":401,"text":402},"选项-3astro-的-image-组件","选项 3：Astro 的 Image 组件",{"depth":31,"slug":404,"text":404},"配置社交链接",{"depth":31,"slug":406,"text":406},"配置分享链接",{"depth":31,"slug":408,"text":408},"配置字体",{"depth":45,"slug":410,"text":410},"使用默认字体",{"depth":45,"slug":412,"text":412},"自定义字体",{"depth":31,"slug":196,"text":196},[],[],{"author":14,"pubDatetime":417,"modDatetime":418,"title":374,"slug":369,"featured":292,"draft":18,"tags":419,"description":377},["Date","2022-09-23T04:58:53.000Z"],["Date","2026-01-10T13:04:53.851Z"],[376,20],[],"how-to-integrate-giscus-comments",{"id":421,"data":423,"body":431,"filePath":432,"digest":433,"rendered":434},{"author":424,"pubDatetime":425,"modDatetime":426,"title":427,"featured":18,"draft":18,"tags":428,"description":430},"FjellOverflow",["Date","2024-07-25T11:11:53.000Z"],["Date","2025-03-12T12:28:53.000Z"],"如何将 Giscus 评论集成到 AstroPaper",[429,9,20],"astro","在托管于 GitHub Pages 的静态博客上使用 Giscus 实现评论功能。","在像 [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) 这样的平台上托管轻量级静态博客有很多优点，但也会削弱一些互动性。幸运的是，[Giscus](https://giscus.app/) 的出现提供了一种在静态网站上嵌入用户评论的方式。\n\n## 目录\n\n## _Giscus_ 的工作原理\n\n[Giscus 使用 GitHub API](https://github.com/giscus/giscus?tab=readme-ov-file#how-it-works) 来读取和存储 _GitHub_ 用户在仓库关联的 `Discussions` 中发表的评论。\n\n在你的网站上嵌入 _Giscus_ 客户端脚本包，配置正确的仓库 URL，用户就可以在登录 _GitHub_ 后查看和撰写评论。\n\n这种方法是无服务器的，因为评论存储在 _GitHub_ 上，并在客户端从那里动态加载，因此非常适合像 _AstroPaper_ 这样的静态博客。\n\n## 设置 _Giscus_\n\n_Giscus_ 可以很容易地在 [giscus.app](https://giscus.app/) 上设置，但我还是会简要概述一下过程。\n\n### 前提条件\n\n让 _Giscus_ 工作的前提条件包括：\n\n- 仓库是[公开的](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/managing-repository-settings/setting-repository-visibility#making-a-repository-public)\n- 已安装 [Giscus 应用](https://github.com/apps/giscus)\n- 已为你的仓库开启 [Discussions](https://docs.github.com/en/github/administering-a-repository/managing-repository-settings/enabling-or-disabling-github-discussions-for-a-repository) 功能\n\n如果由于任何原因无法满足这些条件，很遗憾，_Giscus_ 无法集成。\n\n### 配置 _Giscus_\n\n接下来，需要配置 _Giscus_。在大多数情况下，预设的默认值已经适用，只有在你特定原因且知道自己在做什么时才应修改它们。不必过于担心做错选择；你以后随时可以调整配置。\n\n不过，你需要：\n\n- 选择正确的 UI 语言\n- 指定要连接的 _GitHub_ 仓库，通常是你在 _GitHub Pages_ 上托管静态 _AstroPaper_ 博客的仓库\n- 如果你想确保没有人能在 _GitHub_ 上直接创建随机评论，则创建一个 `Announcement` 类型的讨论并设置\n- 定义颜色方案\n\n配置设置后，_Giscus_ 会为你提供一个生成的 `\u003Cscript>` 标签，你将在接下来的步骤中用到。\n\n## 简单的 script 标签\n\n现在你应该有一个看起来像这样的脚本标签：\n\n```html\n\u003Cscript\n  src=\"https://giscus.app/client.js\"\n  data-repo=\"[在此输入仓库地址]\"\n  data-repo-id=\"[在此输入仓库 ID]\"\n  data-category=\"[在此输入分类名称]\"\n  data-category-id=\"[在此输入分类 ID]\"\n  data-mapping=\"pathname\"\n  data-strict=\"0\"\n  data-reactions-enabled=\"1\"\n  data-emit-metadata=\"0\"\n  data-input-position=\"bottom\"\n  data-theme=\"preferred_color_scheme\"\n  data-lang=\"en\"\n  crossorigin=\"anonymous\"\n  async\n>\u003C/script>\n```\n\n只需将其添加到网站的源代码中。如果你使用 _AstroPaper_ 并希望在文章中启用评论，请导航到 `PostDetails.astro`，将其粘贴到你希望评论出现的位置，比如在\"分享此文章到：\"按钮下方。\n\n```astro file=src/layouts/PostDetails.astro\n\u003CLayout {...layoutProps}>\n  \u003Cmain>\n    \u003CShareLinks />\n\n    \u003C!-- [!code ++:6] -->\n    \u003Cscript\n      src=\"https://giscus.app/client.js\"\n      data-repo=\"[在此输入仓库地址]\"\n      data-repo-id=\"[在此输入仓库 ID]\"\n      data-category=\"[在此输入分类名称]\"\n      data-category-id=\"[在此输入分类 ID]\">\u003C/script>\n  \u003C/main>\n  \u003CFooter />\n\u003C/Layout>\n```\n\n大功告成！你已成功在 _AstroPaper_ 中集成了评论功能！\n\n## 支持浅色/深色主题的 React 组件\n\n布局中嵌入的脚本标签是相当静态的，_Giscus_ 配置（包括 `theme`）被硬编码在布局中。鉴于 _AstroPaper_ 具有浅色/深色主题切换功能，让评论能够无缝地在浅色和深色主题之间切换将是很好的。为了实现这一点，我们需要一种更复杂的方法来嵌入 _Giscus_。\n\n首先，我们将安装 _Giscus_ 的 [React 组件](https://www.npmjs.com/package/@giscus/react)：\n\n```bash\nnpm i @giscus/react && npx astro add react\n```\n\n然后，在 `src/components` 中创建一个新的 `Comments.tsx` React 组件：\n\n```tsx file=src/components/Comments.tsx\nimport Giscus, { type Theme } from \"@giscus/react\";\nimport { GISCUS } from \"@/constants\";\nimport { useEffect, useState } from \"react\";\n\ninterface CommentsProps {\n  lightTheme?: Theme;\n  darkTheme?: Theme;\n}\n\nexport default function Comments({\n  lightTheme = \"light\",\n  darkTheme = \"dark\",\n}: CommentsProps) {\n  const [theme, setTheme] = useState(() => {\n    const currentTheme = localStorage.getItem(\"theme\");\n    const browserTheme = window.matchMedia(\"(prefers-color-scheme: dark)\")\n      .matches\n      ? \"dark\"\n      : \"light\";\n\n    return currentTheme || browserTheme;\n  });\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n    const handleChange = ({ matches }: MediaQueryListEvent) => {\n      setTheme(matches ? \"dark\" : \"light\");\n    };\n\n    mediaQuery.addEventListener(\"change\", handleChange);\n\n    return () => mediaQuery.removeEventListener(\"change\", handleChange);\n  }, []);\n\n  useEffect(() => {\n    const themeButton = document.querySelector(\"#theme-btn\");\n    const handleClick = () => {\n      setTheme(prevTheme => (prevTheme === \"dark\" ? \"light\" : \"dark\"));\n    };\n\n    themeButton?.addEventListener(\"click\", handleClick);\n\n    return () => themeButton?.removeEventListener(\"click\", handleClick);\n  }, []);\n\n  return (\n    \u003Cdiv className=\"mt-8\">\n      \u003CGiscus theme={theme === \"light\" ? lightTheme : darkTheme} {...GISCUS} />\n    \u003C/div>\n  );\n}\n```\n\n这个 _React_ 组件不仅包装了原生的 _Giscus_ 组件，还引入了额外的 props，即 `lightTheme` 和 `darkTheme`。利用两个事件监听器，_Giscus_ 评论将与网站主题保持一致，在网站或浏览器主题更改时动态切换深色和浅色主题。\n\n我们还需要定义 `GISCUS` 配置，最佳位置是在 `constants.ts` 中：\n\n```ts file=src/constants.ts\nimport type { GiscusProps } from \"@giscus/react\";\n\n...\n\nexport const GISCUS: GiscusProps = {\n  repo: \"[在此输入仓库地址]\",\n  repoId: \"[在此输入仓库 ID]\",\n  category: \"[在此输入分类名称]\",\n  categoryId: \"[在此输入分类 ID]\",\n  mapping: \"pathname\",\n  reactionsEnabled: \"0\",\n  emitMetadata: \"0\",\n  inputPosition: \"bottom\",\n  lang: \"en\",\n  loading: \"lazy\",\n};\n```\n\n注意，在这里指定 `theme` 将覆盖 `lightTheme` 和 `darkTheme` props，导致主题设置变为静态，类似于之前用 `\u003Cscript>` 标签嵌入 _Giscus_ 的方式。\n\n最后，将新的 Comments 组件添加到 `PostDetails.astro` 中（替换上一步的 `script` 标签）。\n\n```jsx file=src/layouts/PostDetails.astro\n// [!code ++:1]\nimport Comments from \"@/components/Comments\";\n\n\u003CShareLinks />\n\n// [!code ++:1]\n\u003CComments client:only=\"react\" />\n\n\u003Chr class=\"my-6 border-dashed\" />\n\n\u003CFooter />\n```\n\n完成了！","src/data/blog/how-to-integrate-giscus-comments.md","8dd3b5db84195b85",{"html":435,"metadata":436},"\u003Cp>在像 \u003Ca href=\"https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site\">GitHub Pages\u003C/a> 这样的平台上托管轻量级静态博客有很多优点，但也会削弱一些互动性。幸运的是，\u003Ca href=\"https://giscus.app/\">Giscus\u003C/a> 的出现提供了一种在静态网站上嵌入用户评论的方式。\u003C/p>\n\u003Ch2 id=\"目录\">目录\u003C/h2>\n\u003Ch2 id=\"giscus-的工作原理\">\u003Cem>Giscus\u003C/em> 的工作原理\u003C/h2>\n\u003Cp>\u003Ca href=\"https://github.com/giscus/giscus?tab=readme-ov-file#how-it-works\">Giscus 使用 GitHub API\u003C/a> 来读取和存储 \u003Cem>GitHub\u003C/em> 用户在仓库关联的 \u003Ccode>Discussions\u003C/code> 中发表的评论。\u003C/p>\n\u003Cp>在你的网站上嵌入 \u003Cem>Giscus\u003C/em> 客户端脚本包，配置正确的仓库 URL，用户就可以在登录 \u003Cem>GitHub\u003C/em> 后查看和撰写评论。\u003C/p>\n\u003Cp>这种方法是无服务器的，因为评论存储在 \u003Cem>GitHub\u003C/em> 上，并在客户端从那里动态加载，因此非常适合像 \u003Cem>AstroPaper\u003C/em> 这样的静态博客。\u003C/p>\n\u003Ch2 id=\"设置-giscus\">设置 \u003Cem>Giscus\u003C/em>\u003C/h2>\n\u003Cp>\u003Cem>Giscus\u003C/em> 可以很容易地在 \u003Ca href=\"https://giscus.app/\">giscus.app\u003C/a> 上设置，但我还是会简要概述一下过程。\u003C/p>\n\u003Ch3 id=\"前提条件\">前提条件\u003C/h3>\n\u003Cp>让 \u003Cem>Giscus\u003C/em> 工作的前提条件包括：\u003C/p>\n\u003Cul>\n\u003Cli>仓库是\u003Ca href=\"https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/managing-repository-settings/setting-repository-visibility#making-a-repository-public\">公开的\u003C/a>\u003C/li>\n\u003Cli>已安装 \u003Ca href=\"https://github.com/apps/giscus\">Giscus 应用\u003C/a>\u003C/li>\n\u003Cli>已为你的仓库开启 \u003Ca href=\"https://docs.github.com/en/github/administering-a-repository/managing-repository-settings/enabling-or-disabling-github-discussions-for-a-repository\">Discussions\u003C/a> 功能\u003C/li>\n\u003C/ul>\n\u003Cp>如果由于任何原因无法满足这些条件，很遗憾，\u003Cem>Giscus\u003C/em> 无法集成。\u003C/p>\n\u003Ch3 id=\"配置-giscus\">配置 \u003Cem>Giscus\u003C/em>\u003C/h3>\n\u003Cp>接下来，需要配置 \u003Cem>Giscus\u003C/em>。在大多数情况下，预设的默认值已经适用，只有在你特定原因且知道自己在做什么时才应修改它们。不必过于担心做错选择；你以后随时可以调整配置。\u003C/p>\n\u003Cp>不过，你需要：\u003C/p>\n\u003Cul>\n\u003Cli>选择正确的 UI 语言\u003C/li>\n\u003Cli>指定要连接的 \u003Cem>GitHub\u003C/em> 仓库，通常是你在 \u003Cem>GitHub Pages\u003C/em> 上托管静态 \u003Cem>AstroPaper\u003C/em> 博客的仓库\u003C/li>\n\u003Cli>如果你想确保没有人能在 \u003Cem>GitHub\u003C/em> 上直接创建随机评论，则创建一个 \u003Ccode>Announcement\u003C/code> 类型的讨论并设置\u003C/li>\n\u003Cli>定义颜色方案\u003C/li>\n\u003C/ul>\n\u003Cp>配置设置后，\u003Cem>Giscus\u003C/em> 会为你提供一个生成的 \u003Ccode><script>\u003C/code> 标签，你将在接下来的步骤中用到。\u003C/p>\n\u003Ch2 id=\"简单的-script-标签\">简单的 script 标签\u003C/h2>\n\u003Cp>现在你应该有一个看起来像这样的脚本标签：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">script\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  src\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">https://giscus.app/client.js\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  data-repo\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">[在此输入仓库地址]\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  data-repo-id\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">[在此输入仓库 ID]\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  data-category\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">[在此输入分类名称]\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  data-category-id\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">[在此输入分类 ID]\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  data-mapping\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">pathname\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  data-strict\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">0\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  data-reactions-enabled\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">1\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  data-emit-metadata\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">0\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  data-input-position\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">bottom\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  data-theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">preferred_color_scheme\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  data-lang\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">en\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  crossorigin\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">anonymous\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">  async\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">script\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>只需将其添加到网站的源代码中。如果你使用 \u003Cem>AstroPaper\u003C/em> 并希望在文章中启用评论，请导航到 \u003Ccode>PostDetails.astro\u003C/code>，将其粘贴到你希望评论出现的位置，比如在”分享此文章到：“按钮下方。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl has-diff mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"astro\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\">Layout\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"> {\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">...\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">layoutProps\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">}>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">  <\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">main\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">    <\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\">ShareLinks\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"> />\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line diff add\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">    <\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">script\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff add\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">      src\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">https://giscus.app/client.js\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff add\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">      data-repo\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">[在此输入仓库地址]\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff add\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">      data-repo-id\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">[在此输入仓库 ID]\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff add\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">      data-category\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">[在此输入分类名称]\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line diff add\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">      data-category-id\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">[在此输入分类 ID]\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">script\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">  </\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">main\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">  <\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\">Footer\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"> />\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"></\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\">Layout\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/layouts/PostDetails.astro\u003C/span>\u003C/pre>\n\u003Cp>大功告成！你已成功在 \u003Cem>AstroPaper\u003C/em> 中集成了评论功能！\u003C/p>\n\u003Ch2 id=\"支持浅色深色主题的-react-组件\">支持浅色/深色主题的 React 组件\u003C/h2>\n\u003Cp>布局中嵌入的脚本标签是相当静态的，\u003Cem>Giscus\u003C/em> 配置（包括 \u003Ccode>theme\u003C/code>）被硬编码在布局中。鉴于 \u003Cem>AstroPaper\u003C/em> 具有浅色/深色主题切换功能，让评论能够无缝地在浅色和深色主题之间切换将是很好的。为了实现这一点，我们需要一种更复杂的方法来嵌入 \u003Cem>Giscus\u003C/em>。\u003C/p>\n\u003Cp>首先，我们将安装 \u003Cem>Giscus\u003C/em> 的 \u003Ca href=\"https://www.npmjs.com/package/@giscus/react\">React 组件\u003C/a>：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">npm\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> i\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> @giscus/react\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\"> &&\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> npx\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> astro\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> add\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> react\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>然后，在 \u003Ccode>src/components\u003C/code> 中创建一个新的 \u003Ccode>Comments.tsx\u003C/code> React 组件：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"tsx\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> Giscus\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> { \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">type\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> Theme } \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">@giscus/react\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> { GISCUS } \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">@/constants\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> { useEffect\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> useState } \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">react\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">interface\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#D6DEEB\"> CommentsProps\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  lightTheme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">?:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#FFCB8B\"> Theme\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  darkTheme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">?:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#FFCB8B\"> Theme\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">export\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\"> default\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> function\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> Comments\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D9F5DD\">(\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">{\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D7DBE0\">  lightTheme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">light\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D7DBE0\">  darkTheme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">dark\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#FFCB8B\"> CommentsProps\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D9F5DD\">)\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">  const\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\"> [\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">theme\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> setTheme\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">]\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> useState\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D9F5DD\">()\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =>\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">    const\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> currentTheme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> localStorage\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">getItem\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">theme\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">)\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">    const\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> browserTheme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> window\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">matchMedia\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">(prefers-color-scheme: dark)\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">)\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">      .\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#BAEBE2;--shiki-dark-font-style:italic\">matches\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">      ?\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">dark\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">      :\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">light\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">    return\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> currentTheme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> ||\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> browserTheme\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">  }\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">  useEffect\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D9F5DD\">()\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =>\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">    const\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> mediaQuery\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> window\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">matchMedia\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">(prefers-color-scheme: dark)\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">    const\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> handleChange\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D9F5DD\"> (\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">{\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D7DBE0;--shiki-dark-font-style:italic\"> matches\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\"> }\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#FFCB8B;--shiki-dark-font-style:italic\"> MediaQueryListEvent\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D9F5DD\">)\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =>\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">      setTheme\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">matches\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> ?\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">dark\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> :\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">light\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">)\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">    }\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#D6DEEB\">    mediaQuery\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">addEventListener\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">change\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> handleChange);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">    return\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D9F5DD\"> ()\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =>\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#D6DEEB\"> mediaQuery\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">removeEventListener\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">change\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> handleChange);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> []);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">  useEffect\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D9F5DD\">()\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =>\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">    const\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> themeButton\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\"> document\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">querySelector\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">#theme-btn\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">    const\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> handleClick\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D9F5DD\"> ()\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =>\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">      setTheme\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D7DBE0;--shiki-dark-font-style:italic\">prevTheme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =>\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> (\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#D6DEEB;--shiki-dark-font-style:italic\">prevTheme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> ===\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">dark\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> ?\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">light\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> :\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">dark\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">))\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">    }\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#D6DEEB\">    themeButton\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">?.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">addEventListener\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">click\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> handleClick);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">    return\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D9F5DD\"> ()\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =>\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#D6DEEB\"> themeButton\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">?.\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">removeEventListener\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">(\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">click\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> handleClick);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#5F7E97\">,\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> []);\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  return\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> (\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">    <\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">div\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\"> className\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">mt-8\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">      <\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\">Giscus\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\"> theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D3423E\">{\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> ===\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">light\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> ?\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> lightTheme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> :\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> darkTheme\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D3423E\">}\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D3423E\"> {\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">...\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#82AAFF\">GISCUS\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D3423E\">}\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"> />\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">    </\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">div\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  );\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/components/Comments.tsx\u003C/span>\u003C/pre>\n\u003Cp>这个 \u003Cem>React\u003C/em> 组件不仅包装了原生的 \u003Cem>Giscus\u003C/em> 组件，还引入了额外的 props，即 \u003Ccode>lightTheme\u003C/code> 和 \u003Ccode>darkTheme\u003C/code>。利用两个事件监听器，\u003Cem>Giscus\u003C/em> 评论将与网站主题保持一致，在网站或浏览器主题更改时动态切换深色和浅色主题。\u003C/p>\n\u003Cp>我们还需要定义 \u003Ccode>GISCUS\u003C/code> 配置，最佳位置是在 \u003Ccode>constants.ts\u003C/code> 中：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"ts\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\"> type\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> { GiscusProps } \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">@giscus/react\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">...\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">export\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> const\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\"> GISCUS\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#FFCB8B;--shiki-dark-font-style:italic\"> GiscusProps\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  repo\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">[在此输入仓库地址]\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  repoId\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">[在此输入仓库 ID]\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  category\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">[在此输入分类名称]\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  categoryId\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">[在此输入分类 ID]\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  mapping\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">pathname\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  reactionsEnabled\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">0\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  emitMetadata\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">0\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  inputPosition\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">bottom\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  lang\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">en\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">  loading\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">lazy\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">}\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/constants.ts\u003C/span>\u003C/pre>\n\u003Cp>注意，在这里指定 \u003Ccode>theme\u003C/code> 将覆盖 \u003Ccode>lightTheme\u003C/code> 和 \u003Ccode>darkTheme\u003C/code> props，导致主题设置变为静态，类似于之前用 \u003Ccode><script>\u003C/code> 标签嵌入 \u003Cem>Giscus\u003C/em> 的方式。\u003C/p>\n\u003Cp>最后，将新的 Comments 组件添加到 \u003Ccode>PostDetails.astro\u003C/code> 中（替换上一步的 \u003Ccode>script\u003C/code> 标签）。\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl has-diff mt-8\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"jsx\">\u003Ccode>\u003Cspan class=\"line diff add\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> Comments \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">@/components/Comments\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\">ShareLinks\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"> />\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line diff add\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\">Comments\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\"> client\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#7FDBCA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">only\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">react\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"> />\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">hr\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">my-6 border-dashed\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"> />\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\">Footer\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"> />\u003C/span>\u003C/span>\u003C/code>\u003Cspan class=\"absolute py-1 text-foreground text-xs font-medium leading-4 pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2 left-2 top-(--file-name-offset) border rounded-md bg-background\">src/layouts/PostDetails.astro\u003C/span>\u003C/pre>\n\u003Cp>完成了！\u003C/p>",{"headings":437,"localImagePaths":456,"remoteImagePaths":457,"frontmatter":458,"imagePaths":462},[438,439,442,445,447,450,453],{"depth":31,"slug":32,"text":32},{"depth":31,"slug":440,"text":441},"giscus-的工作原理","Giscus 的工作原理",{"depth":31,"slug":443,"text":444},"设置-giscus","设置 Giscus",{"depth":45,"slug":446,"text":446},"前提条件",{"depth":45,"slug":448,"text":449},"配置-giscus","配置 Giscus",{"depth":31,"slug":451,"text":452},"简单的-script-标签","简单的 script 标签",{"depth":31,"slug":454,"text":455},"支持浅色深色主题的-react-组件","支持浅色/深色主题的 React 组件",[],[],{"author":424,"pubDatetime":459,"modDatetime":460,"title":427,"slug":421,"featured":18,"draft":18,"tags":461,"description":430},["Date","2024-07-25T11:11:53.000Z"],["Date","2025-03-12T12:28:53.000Z"],[429,9,20],[],"astro-paper-v3",{"id":463,"data":465,"body":471,"filePath":472,"assetImports":473,"digest":476,"rendered":477},{"author":14,"pubDatetime":466,"title":467,"featured":18,"tags":468,"ogImage":469,"description":470},["Date","2023-09-25T10:25:54.547Z"],"AstroPaper 3.0",[21],"__ASTRO_IMAGE_https://github.com/satnaing/astro-paper/assets/53733092/1ef0cf03-8137-4d67-ac81-84a032119e3a","AstroPaper Version 3: Elevating Your Web Experience with Astro v3 and Seamless View Transitions","We're excited to announce the release of AstroPaper v3, packed with new features, enhancements, and bug fixes to elevate your web development experience. Let's dive into the highlights of this release:\n\n![AstroPaper v3](@/assets/images/AstroPaper-v3.png)\n\n## Table of contents\n\n## Features & Changes\n\n### Astro v3 Integration\n\n\u003Cvideo autoplay loop=\"loop\" muted=\"muted\" plays-inline=\"true\">\n  \u003Csource src=\"https://github.com/satnaing/astro-paper/assets/53733092/18fdb604-1ca3-41a0-8372-1367759091ff\" type=\"video/mp4\">\n  \u003C!-- \u003Csource src=\"/assets/docs/astro-paper-v3-view-transitions-demo.mp4\" type=\"video/mp4\"> -->\n\u003C/video>\n\nAstroPaper now fully supports [Astro v3](https://astro.build/blog/astro-3/), offering improved performance and rendering speed.\n\nBesides, we've added support for Astro's [ViewTransitions API](https://docs.astro.build/en/guides/view-transitions/), allowing you to create captivating and dynamic transitions between views.\n\nIn the \"Recent Section\", only non-featured posts will be displayed to avoid duplications and better support for ViewTransitions API.\n\n### Update OG Image Generation Logic\n\n![Example OG Image](https://user-images.githubusercontent.com/40914272/269252964-a0dc6735-80f7-41ed-8e74-4d4d70f96891.png)\n\nWe've updated the logic for automatic OG image generation, making it even more reliable and efficient. Besides, it now supports special characters in post titles, ensuring accurate, flexible and eye-catching social media previews.\n\n`SITE.ogImage` is now optional. If it is not specified, AstroPaper will automatically generate an OG image using `SITE.title`, `SITE.desc` and `SITE.website`\n\n### Theme meta tag\n\nThe theme-color meta tag has been added to dynamically adapt to theme switches, ensuring a seamless user experience.\n\n> Notice the difference at the top\n\n**_AstroPaper v2 theme switch_**\n\n\u003Cvideo autoplay loop=\"loop\" muted=\"muted\" plays-inline=\"true\">\n  \u003Csource src=\"https://github.com/satnaing/astro-paper/assets/53733092/3ab5a1e8-1891-4264-a5bb-0ded69143c1a\" type=\"video/mp4\">\n\u003C/video>\n\n**_AstroPaper v3 theme switch_**\n\n\u003Cvideo autoplay loop=\"loop\" muted=\"muted\" plays-inline=\"true\">\n  \u003Csource src=\"https://github.com/satnaing/astro-paper/assets/53733092/8ac9deb8-d1f8-4029-86bd-6aa0def380b4\" type=\"video/mp4\">\n\u003C/video>\n\n## Other Changes\n\n### Astro Prettier Plugin\n\nAstro Prettier Plugin is installed out-of-the-box in order to keep the project tidy and organized.\n\n### Minor Style Changes\n\nThe single-line code block wrapping issue has been solved, making your code snippets look pristine.\n\nUpdate nav style CSS to allow adding more nav links to the navigation.\n\n## Upgrade to AstroPaper v3\n\n> This section is only for those who want to upgrade AstroPaper v3 from the older versions.\n\nThis section will help you migrate from AstroPaper v2 to AstroPaper v3.\n\nBefore reading the rest of the section, you might also want to check [this article](https://astro-paper.pages.dev/posts/how-to-update-dependencies/) for upgrading dependencies and AstroPaper.\n\n## Option 1: Fresh Restart (recommended)\n\nIn this release, a lot of changes have been made\\_ replacing old Astro APIs with newer APIs, bug fixes, new features etc. Thus, if you are someone who didn't make customization very much, you should follow this approach.\n\n**_Step 1: Keep all your updated files_**\n\nIt's important to keep all the files which have been already updated. These files include\n\n- `/src/config.ts` (didn't touch in v3)\n- `/src/styles/base.css` (minor changes in v3; mentioned below)\n- `/src/assets/` (didn't touch in v3)\n- `/public/assets/` (didn't touch in v3)\n- `/content/blog/` (it's your blog content directory 🤷🏻‍♂️)\n- Any other customizations you've made.\n\n```css\n/* file: /src/styles/base.css */\n@layer base {\n  /* Other Codes */\n  ::-webkit-scrollbar-thumb:hover {\n    @apply bg-skin-card-muted;\n  }\n\n  /* Old code\n  code {\n    white-space: pre;\n    overflow: scroll;\n  } \n  */\n\n  /* New code */\n  code,\n  blockquote {\n    word-wrap: break-word;\n  }\n  pre > code {\n    white-space: pre;\n  }\n}\n\n@layer components {\n  /* other codes */\n}\n```\n\n**_Step 1: Replace everything else with AstroPaper v3_**\n\nIn this step, replace everything\\_ except above files/directories (plus your customized files/directories)\\_ with AstroPaper v3.\n\n**_Step 3: Schema Updates_**\n\nKeep in mind that `/src/content/_schemas.ts` has been replaced with `/src/content/config.ts`.\n\nBesides, there is no longer `BlogFrontmatter` type exported from `/src/content/config.ts`.\n\nTherefore, all the `BlogFrontmatter` type inside files need to be updated with `CollectionEntry\u003C\"blog\">[\"data\"]`.\n\nFor example: `src/components/Card.tsx`\n\n```ts\n// AstroPaper v2\nimport type { BlogFrontmatter } from \"@content/_schemas\";\n\nexport interface Props {\n  href?: string;\n  frontmatter: BlogFrontmatter;\n  secHeading?: boolean;\n}\n```\n\n```ts\n// AstroPaper v3\nimport type { CollectionEntry } from \"astro:content\";\n\nexport interface Props {\n  href?: string;\n  frontmatter: CollectionEntry\u003C\"blog\">[\"data\"];\n  secHeading?: boolean;\n}\n```\n\n## Option 2: Upgrade using Git\n\nThis approach is not recommended for most users. You should do the \"Option 1\" if you can. Only do this if you know how to resolve merge conflicts and you know what you're doing.\n\nActually, I've already written a blog post for this case and you can check out [here](https://astro-paper.pages.dev/posts/how-to-update-dependencies/#updating-astropaper-using-git).\n\n## Outro\n\nReady to explore the exciting new features and improvements in AstroPaper v3? Start [using AstroPaper](https://github.com/satnaing/astro-paper) now.\n\nFor other bug fixes and integration updates, check out the [release notes](https://github.com/satnaing/astro-paper/releases/tag/v3.0.0) to learn more.\n\nIf you encounter any bugs or face difficulties during the upgrade process, please feel free to open an issue or start a discussion on [GitHub](https://github.com/satnaing/astro-paper).","src/data/blog/_releases/astro-paper-3.md",[474,475],"@/assets/images/AstroPaper-v3.png","https://github.com/satnaing/astro-paper/assets/53733092/1ef0cf03-8137-4d67-ac81-84a032119e3a","e788234d29e1c779",{"html":478,"metadata":479},"\u003Cp>We’re excited to announce the release of AstroPaper v3, packed with new features, enhancements, and bug fixes to elevate your web development experience. Let’s dive into the highlights of this release:\u003C/p>\n\u003Cp>\u003Cimg __ASTRO_IMAGE_=\"{"src":"@/assets/images/AstroPaper-v3.png","alt":"AstroPaper v3","index":0}\">\u003C/p>\n\u003Ch2 id=\"table-of-contents\">Table of contents\u003C/h2>\n\u003Cp>\u003C/p>\u003Cdetails>\u003Csummary>Open Table of contents\u003C/summary>\u003Cp>\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ca href=\"#features--changes\">Features & Changes\u003C/a>\n\u003Cul>\n\u003Cli>\u003Ca href=\"#astro-v3-integration\">Astro v3 Integration\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#update-og-image-generation-logic\">Update OG Image Generation Logic\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#theme-meta-tag\">Theme meta tag\u003C/a>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\u003Ca href=\"#other-changes\">Other Changes\u003C/a>\n\u003Cul>\n\u003Cli>\u003Ca href=\"#astro-prettier-plugin\">Astro Prettier Plugin\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#minor-style-changes\">Minor Style Changes\u003C/a>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\u003Ca href=\"#upgrade-to-astropaper-v3\">Upgrade to AstroPaper v3\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#option-1-fresh-restart-recommended\">Option 1: Fresh Restart (recommended)\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#option-2-upgrade-using-git\">Option 2: Upgrade using Git\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#outro\">Outro\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Cp>\u003C/p>\u003C/details>\u003Cp>\u003C/p>\n\u003Ch2 id=\"features--changes\">Features & Changes\u003C/h2>\n\u003Ch3 id=\"astro-v3-integration\">Astro v3 Integration\u003C/h3>\n\u003Cvideo autoplay loop muted plays-inline=\"true\">\n  \u003Csource src=\"https://github.com/satnaing/astro-paper/assets/53733092/18fdb604-1ca3-41a0-8372-1367759091ff\" type=\"video/mp4\">\n  \u003C!-- \u003Csource src=\"/assets/docs/astro-paper-v3-view-transitions-demo.mp4\" type=\"video/mp4\"> -->\n\u003C/video>\n\u003Cp>AstroPaper now fully supports \u003Ca href=\"https://astro.build/blog/astro-3/\">Astro v3\u003C/a>, offering improved performance and rendering speed.\u003C/p>\n\u003Cp>Besides, we’ve added support for Astro’s \u003Ca href=\"https://docs.astro.build/en/guides/view-transitions/\">ViewTransitions API\u003C/a>, allowing you to create captivating and dynamic transitions between views.\u003C/p>\n\u003Cp>In the “Recent Section”, only non-featured posts will be displayed to avoid duplications and better support for ViewTransitions API.\u003C/p>\n\u003Ch3 id=\"update-og-image-generation-logic\">Update OG Image Generation Logic\u003C/h3>\n\u003Cp>\u003Cimg src=\"https://user-images.githubusercontent.com/40914272/269252964-a0dc6735-80f7-41ed-8e74-4d4d70f96891.png\" alt=\"Example OG Image\">\u003C/p>\n\u003Cp>We’ve updated the logic for automatic OG image generation, making it even more reliable and efficient. Besides, it now supports special characters in post titles, ensuring accurate, flexible and eye-catching social media previews.\u003C/p>\n\u003Cp>\u003Ccode>SITE.ogImage\u003C/code> is now optional. If it is not specified, AstroPaper will automatically generate an OG image using \u003Ccode>SITE.title\u003C/code>, \u003Ccode>SITE.desc\u003C/code> and \u003Ccode>SITE.website\u003C/code>\u003C/p>\n\u003Ch3 id=\"theme-meta-tag\">Theme meta tag\u003C/h3>\n\u003Cp>The theme-color meta tag has been added to dynamically adapt to theme switches, ensuring a seamless user experience.\u003C/p>\n\u003Cblockquote>\n\u003Cp>Notice the difference at the top\u003C/p>\n\u003C/blockquote>\n\u003Cp>\u003Cstrong>\u003Cem>AstroPaper v2 theme switch\u003C/em>\u003C/strong>\u003C/p>\n\u003Cvideo autoplay loop muted plays-inline=\"true\">\n  \u003Csource src=\"https://github.com/satnaing/astro-paper/assets/53733092/3ab5a1e8-1891-4264-a5bb-0ded69143c1a\" type=\"video/mp4\">\n\u003C/video>\n\u003Cp>\u003Cstrong>\u003Cem>AstroPaper v3 theme switch\u003C/em>\u003C/strong>\u003C/p>\n\u003Cvideo autoplay loop muted plays-inline=\"true\">\n  \u003Csource src=\"https://github.com/satnaing/astro-paper/assets/53733092/8ac9deb8-d1f8-4029-86bd-6aa0def380b4\" type=\"video/mp4\">\n\u003C/video>\n\u003Ch2 id=\"other-changes\">Other Changes\u003C/h2>\n\u003Ch3 id=\"astro-prettier-plugin\">Astro Prettier Plugin\u003C/h3>\n\u003Cp>Astro Prettier Plugin is installed out-of-the-box in order to keep the project tidy and organized.\u003C/p>\n\u003Ch3 id=\"minor-style-changes\">Minor Style Changes\u003C/h3>\n\u003Cp>The single-line code block wrapping issue has been solved, making your code snippets look pristine.\u003C/p>\n\u003Cp>Update nav style CSS to allow adding more nav links to the navigation.\u003C/p>\n\u003Ch2 id=\"upgrade-to-astropaper-v3\">Upgrade to AstroPaper v3\u003C/h2>\n\u003Cblockquote>\n\u003Cp>This section is only for those who want to upgrade AstroPaper v3 from the older versions.\u003C/p>\n\u003C/blockquote>\n\u003Cp>This section will help you migrate from AstroPaper v2 to AstroPaper v3.\u003C/p>\n\u003Cp>Before reading the rest of the section, you might also want to check \u003Ca href=\"https://astro-paper.pages.dev/posts/how-to-update-dependencies/\">this article\u003C/a> for upgrading dependencies and AstroPaper.\u003C/p>\n\u003Ch2 id=\"option-1-fresh-restart-recommended\">Option 1: Fresh Restart (recommended)\u003C/h2>\n\u003Cp>In this release, a lot of changes have been made_ replacing old Astro APIs with newer APIs, bug fixes, new features etc. Thus, if you are someone who didn’t make customization very much, you should follow this approach.\u003C/p>\n\u003Cp>\u003Cstrong>\u003Cem>Step 1: Keep all your updated files\u003C/em>\u003C/strong>\u003C/p>\n\u003Cp>It’s important to keep all the files which have been already updated. These files include\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ccode>/src/config.ts\u003C/code> (didn’t touch in v3)\u003C/li>\n\u003Cli>\u003Ccode>/src/styles/base.css\u003C/code> (minor changes in v3; mentioned below)\u003C/li>\n\u003Cli>\u003Ccode>/src/assets/\u003C/code> (didn’t touch in v3)\u003C/li>\n\u003Cli>\u003Ccode>/public/assets/\u003C/code> (didn’t touch in v3)\u003C/li>\n\u003Cli>\u003Ccode>/content/blog/\u003C/code> (it’s your blog content directory 🤷🏻‍♂️)\u003C/li>\n\u003Cli>Any other customizations you’ve made.\u003C/li>\n\u003C/ul>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">/* file: /src/styles/base.css */\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">@\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">layer\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> base {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  /* Other Codes */\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#C5E478\">  ::\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">-webkit-scrollbar-thumb\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#C5E478\">:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">hover\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    @\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#80CBC4\">apply\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#80CBC4\"> bg-skin-card-muted\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  }\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  /* Old code\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  code {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">    white-space: pre;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">    overflow: scroll;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  } \u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  */\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  /* New code */\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">  code\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">  blockquote\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#80CBC4\">    word-wrap\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FF6363\"> break-word\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  }\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">  pre\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\"> >\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\"> code\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#80CBC4\">    white-space\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FF6363\"> pre\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  }\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\">@\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">layer\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> components {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  /* other codes */\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>\u003Cstrong>\u003Cem>Step 1: Replace everything else with AstroPaper v3\u003C/em>\u003C/strong>\u003C/p>\n\u003Cp>In this step, replace everything_ except above files/directories (plus your customized files/directories)_ with AstroPaper v3.\u003C/p>\n\u003Cp>\u003Cstrong>\u003Cem>Step 3: Schema Updates\u003C/em>\u003C/strong>\u003C/p>\n\u003Cp>Keep in mind that \u003Ccode>/src/content/_schemas.ts\u003C/code> has been replaced with \u003Ccode>/src/content/config.ts\u003C/code>.\u003C/p>\n\u003Cp>Besides, there is no longer \u003Ccode>BlogFrontmatter\u003C/code> type exported from \u003Ccode>/src/content/config.ts\u003C/code>.\u003C/p>\n\u003Cp>Therefore, all the \u003Ccode>BlogFrontmatter\u003C/code> type inside files need to be updated with \u003Ccode>CollectionEntry<\"blog\">[\"data\"]\u003C/code>.\u003C/p>\n\u003Cp>For example: \u003Ccode>src/components/Card.tsx\u003C/code>\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"ts\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">// AstroPaper v2\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\"> type\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> { BlogFrontmatter } \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">@content/_schemas\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">export\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> interface\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#D6DEEB\"> Props\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  href\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">?:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  frontmatter\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#FFCB8B\"> BlogFrontmatter\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  secHeading\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">?:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> boolean\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"ts\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">// AstroPaper v3\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\"> type\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> { CollectionEntry } \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">astro:content\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">export\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> interface\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#D6DEEB\"> Props\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  href\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">?:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> string\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  frontmatter\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#FFCB8B\"> CollectionEntry\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">blog\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">>[\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">data\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">];\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  secHeading\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">?:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\"> boolean\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch2 id=\"option-2-upgrade-using-git\">Option 2: Upgrade using Git\u003C/h2>\n\u003Cp>This approach is not recommended for most users. You should do the “Option 1” if you can. Only do this if you know how to resolve merge conflicts and you know what you’re doing.\u003C/p>\n\u003Cp>Actually, I’ve already written a blog post for this case and you can check out \u003Ca href=\"https://astro-paper.pages.dev/posts/how-to-update-dependencies/#updating-astropaper-using-git\">here\u003C/a>.\u003C/p>\n\u003Ch2 id=\"outro\">Outro\u003C/h2>\n\u003Cp>Ready to explore the exciting new features and improvements in AstroPaper v3? Start \u003Ca href=\"https://github.com/satnaing/astro-paper\">using AstroPaper\u003C/a> now.\u003C/p>\n\u003Cp>For other bug fixes and integration updates, check out the \u003Ca href=\"https://github.com/satnaing/astro-paper/releases/tag/v3.0.0\">release notes\u003C/a> to learn more.\u003C/p>\n\u003Cp>If you encounter any bugs or face difficulties during the upgrade process, please feel free to open an issue or start a discussion on \u003Ca href=\"https://github.com/satnaing/astro-paper\">GitHub\u003C/a>.\u003C/p>",{"headings":480,"localImagePaths":513,"remoteImagePaths":514,"frontmatter":515,"imagePaths":518},[481,482,483,486,489,492,495,498,501,504,507,510],{"depth":31,"slug":76,"text":77},{"depth":31,"slug":79,"text":80},{"depth":45,"slug":484,"text":485},"astro-v3-integration","Astro v3 Integration",{"depth":45,"slug":487,"text":488},"update-og-image-generation-logic","Update OG Image Generation Logic",{"depth":45,"slug":490,"text":491},"theme-meta-tag","Theme meta tag",{"depth":31,"slug":493,"text":494},"other-changes","Other Changes",{"depth":45,"slug":496,"text":497},"astro-prettier-plugin","Astro Prettier Plugin",{"depth":45,"slug":499,"text":500},"minor-style-changes","Minor Style Changes",{"depth":31,"slug":502,"text":503},"upgrade-to-astropaper-v3","Upgrade to AstroPaper v3",{"depth":31,"slug":505,"text":506},"option-1-fresh-restart-recommended","Option 1: Fresh Restart (recommended)",{"depth":31,"slug":508,"text":509},"option-2-upgrade-using-git","Option 2: Upgrade using Git",{"depth":31,"slug":511,"text":512},"outro","Outro",[474],[],{"author":14,"pubDatetime":516,"title":467,"slug":463,"featured":18,"ogImage":475,"tags":517,"description":470},["Date","2023-09-25T10:25:54.547Z"],[21],[474],"astro-paper-v4",{"id":519,"data":521,"body":527,"filePath":528,"assetImports":529,"digest":532,"rendered":533},{"author":14,"pubDatetime":522,"title":523,"featured":18,"tags":524,"ogImage":525,"description":526},["Date","2024-01-04T09:30:41.816Z"],"AstroPaper 4.0",[21],"__ASTRO_IMAGE_../../../assets/images/AstroPaper-v4.png","AstroPaper v4: ensuring a smoother and more feature-rich blogging experience.","Hello everyone! Wishing you a happy New Year 🎉 and all the best for 2024! We're excited to announce the release of AstroPaper v4, a significant update that introduces a range of new features, improvements, and bug fixes to elevate your blogging experience. A big thank you to all the contributors for their valuable input and efforts in making version 4 possible!\n\n![AstroPaper v4](@/assets/images/AstroPaper-v4.png)\n\n## Table of contents\n\n## Major Changes\n\n### Upgrade to Astro v4 [#202](https://github.com/satnaing/astro-paper/pull/202)\n\nAstroPaper now leverages the power and capabilities of Astro v4. However, it’s a subtle upgrade and won’t break most Astro users.\n\n![Astro v4](https://astro.build/_astro/header-astro-4.YunweN9V_OmV0l.webp)\n\n### Replace `postSlug` with Astro Content `slug` [#197](https://github.com/satnaing/astro-paper/pull/197)\n\nThe `postSlug` in the blog content schema is no longer available in AstroPaper v4. Initially Astro doesn't have a `slug` mechanism and thus we have to figure it out on our own. Since Astro v3, it supports content collection and slug features. Now, we believe it's time to adopt Astro's out-of-the-box `slug` feature.\n\n**_file: src/content/blog/astro-paper-4.md_**\n\n```bash\n---\nauthor: Sat Naing\npubDatetime: 2024-01-01T04:35:33.428Z\ntitle: AstroPaper 4.0\nslug: \"astro-paper-v4\" # if slug is not specified, it will be 'astro-paper-4' (file name).\n# slug: \"\" ❌ cannot be an empty string\n---\n```\n\nThe behavior of the `slug` is slightly different now. In the previous versions of AstroPaper, if the `postSlug` is not specified in a blog post (markdown file), the title of that blog post would be slugified and used as the `slug`. However, in AstroPaper v4, if the `slug` field is not specified, the markdown file name will be used as the `slug`. One thing to keep in mind is that the `slug` field can be omitted, but it cannot be an empty string (slug: \"\" ❌).\n\nIf you're upgrading AstroPaper from v3 to v4, make sure to replace `postSlug` in your `src/content/blog/*.md` files with `slug`.\n\n## New Features\n\n### Add code-snippets for content creation [#206](https://github.com/satnaing/astro-paper/pull/206)\n\nAstroPaper now includes VSCode snippets for new blog posts, eliminating the need for manual copy/pasting of the frontmatter and content structure (table of contents, heading, excerpt, etc.).\n\nRead more about VSCode Snippets [here](https://code.visualstudio.com/docs/editor/userdefinedsnippets#:~:text=In%20Visual%20Studio%20Code%2C%20snippets,Snippet%20in%20the%20Command%20Palette).\n\n\u003Cvideo autoplay muted=\"muted\" controls plays-inline=\"true\" class=\"border border-skin-line\">\n  \u003Csource src=\"https://github.com/satnaing/astro-paper/assets/53733092/136f1903-bade-40a2-b6bb-285a3c726350\" type=\"video/mp4\">\n\u003C/video>\n\n### Add Modified Datetime in Blog Posts [#195](https://github.com/satnaing/astro-paper/pull/195)\n\nKeep readers informed about the latest updates by displaying the modified datetime in blog posts. This not only instills user trust in the freshness of the articles but also contributes to improved SEO for the blog.\n\n![Last Modified Date feature in AstroPaper](https://github.com/satnaing/astro-paper/assets/53733092/cc89585e-148e-444d-9da1-0d496e867175)\n\nYou can add a `modDatetime` to your blog post if you've made modifications. Now, the sorting behavior of the posts is slightly different. All posts are sorted by both `pubDatetime` and `modDatetime`. If a post has both a `pubDatetime` and `modDatetime`, its sorting position will be determined by the `modDatetime`. If not, only `pubDatetime` will be considered to determine the post's sorting order.\n\n### Implement Back-to-Top Button [#188](https://github.com/satnaing/astro-paper/pull/188)\n\nEnhance user navigation on your blog detail post with the newly implemented back-to-top button.\n\n![Back to top button in AstroPaper](https://github.com/satnaing/astro-paper/assets/53733092/79854957-7877-4f19-936e-ad994b772074)\n\n### Add Pagination in Tag Posts [#201](https://github.com/satnaing/astro-paper/pull/201)\n\nImprove content organization and navigation with the addition of pagination in tag posts, making it easier for users to explore related content. This ensures that if a tag has many posts, readers won't be overwhelmed by all the tag-related posts.\n\n\u003Cvideo autoplay loop=\"loop\" muted=\"muted\" plays-inline=\"true\" class=\"border border-skin-line\">\n  \u003Csource src=\"https://github.com/satnaing/astro-paper/assets/53733092/9bad87f5-dcf5-4b79-b67a-d6c7244cd616\" type=\"video/mp4\">\n\u003C/video>\n\n### Dynamically Generate robots.txt [#130](https://github.com/satnaing/astro-paper/pull/130)\n\nAstroPaper v4 now dynamically generates the robots.txt file, giving you more control over search engine indexing and web crawling. Besides, sitemap URL will also be added inside `robot.txt` file.\n\n### Add Docker-Compose File [#174](https://github.com/satnaing/astro-paper/pull/174)\n\nManaging your AstroPaper environment is now easier than ever with the addition of a Docker-Compose file, simplifying deployment and configuration.\n\n## Refactoring & Bug Fixes\n\n### Replace Slugified Title with Unslugified Tag Name [#198](https://github.com/satnaing/astro-paper/pull/198)\n\nTo improve clarity, user experience and SEO, titles (`Tag: some-tag`) in tag page are no longer slugified (`Tag: Some Tag`).\n\n![Unslugified Tag Names](https://github.com/satnaing/astro-paper/assets/53733092/2fe90d6e-ec52-467b-9c44-95009b3ae0b7)\n\n### Implement 100svh for Min-Height ([79d569d](https://github.com/satnaing/astro-paper/commit/79d569d053036f2113519f41b0d257523d035b76))\n\nWe've updated the min-height on the body to use 100svh, offering a better UX for mobile users.\n\n### Update Site URL as Single Source of Truth [#143](https://github.com/satnaing/astro-paper/pull/143)\n\nThe site URL is now a single source of truth, streamlining configuration and avoiding inconsistencies. Read more at this [PR](https://github.com/satnaing/astro-paper/pull/143) and its related issue(s).\n\n### Solve Invisible Text Code Block Issue in Light Mode [#163](https://github.com/satnaing/astro-paper/pull/163)\n\nWe've fixed the invisible text code block issue in light mode.\n\n### Decode Unicode Tag Characters in Breadcrumb [#175](https://github.com/satnaing/astro-paper/pull/175)\n\nThe last part of Tag in the breadcrumb is now decoded, making non-English Unicode characters display better.\n\n### Update LOCALE Config to Cover Overall Locales ([cd02b04](https://github.com/satnaing/astro-paper/commit/cd02b047d2b5e3b4a2940c0ff30568cdebcec0b8))\n\nThe LOCALE configuration has been updated to cover a broader range of locales, catering to a more diverse audience.\n\n## Outtro\n\nWe believe these updates will significantly elevate your AstroPaper experience. Thank you to everyone who contributed, solved issues, and gave stars to AstroPaper. We look forward to seeing the amazing content you create with AstroPaper v4!\n\nHappy Blogging!\n\n[Sat Naing](https://satnaing.dev) \u003Cbr/>\nCreator of AstroPaper","src/data/blog/_releases/astro-paper-4.md",[530,531],"@/assets/images/AstroPaper-v4.png","../../../assets/images/AstroPaper-v4.png","50501d95070a77d3",{"html":534,"metadata":535},"\u003Cp>Hello everyone! Wishing you a happy New Year 🎉 and all the best for 2024! We’re excited to announce the release of AstroPaper v4, a significant update that introduces a range of new features, improvements, and bug fixes to elevate your blogging experience. A big thank you to all the contributors for their valuable input and efforts in making version 4 possible!\u003C/p>\n\u003Cp>\u003Cimg __ASTRO_IMAGE_=\"{"src":"@/assets/images/AstroPaper-v4.png","alt":"AstroPaper v4","index":0}\">\u003C/p>\n\u003Ch2 id=\"table-of-contents\">Table of contents\u003C/h2>\n\u003Cp>\u003C/p>\u003Cdetails>\u003Csummary>Open Table of contents\u003C/summary>\u003Cp>\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ca href=\"#major-changes\">Major Changes\u003C/a>\n\u003Cul>\n\u003Cli>\u003Ca href=\"#upgrade-to-astro-v4-202\">Upgrade to Astro v4 #202\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#replace-postslug-with-astro-content-slug-197\">Replace \u003Ccode>postSlug\u003C/code> with Astro Content \u003Ccode>slug\u003C/code> #197\u003C/a>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\u003Ca href=\"#new-features\">New Features\u003C/a>\n\u003Cul>\n\u003Cli>\u003Ca href=\"#add-code-snippets-for-content-creation-206\">Add code-snippets for content creation #206\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#add-modified-datetime-in-blog-posts-195\">Add Modified Datetime in Blog Posts #195\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#implement-back-to-top-button-188\">Implement Back-to-Top Button #188\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#add-pagination-in-tag-posts-201\">Add Pagination in Tag Posts #201\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#dynamically-generate-robotstxt-130\">Dynamically Generate robots.txt #130\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#add-docker-compose-file-174\">Add Docker-Compose File #174\u003C/a>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\u003Ca href=\"#refactoring--bug-fixes\">Refactoring & Bug Fixes\u003C/a>\n\u003Cul>\n\u003Cli>\u003Ca href=\"#replace-slugified-title-with-unslugified-tag-name-198\">Replace Slugified Title with Unslugified Tag Name #198\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#implement-100svh-for-min-height-79d569d\">Implement 100svh for Min-Height (79d569d)\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#update-site-url-as-single-source-of-truth-143\">Update Site URL as Single Source of Truth #143\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#solve-invisible-text-code-block-issue-in-light-mode-163\">Solve Invisible Text Code Block Issue in Light Mode #163\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#decode-unicode-tag-characters-in-breadcrumb-175\">Decode Unicode Tag Characters in Breadcrumb #175\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#update-locale-config-to-cover-overall-locales-cd02b04\">Update LOCALE Config to Cover Overall Locales (cd02b04)\u003C/a>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\u003Ca href=\"#outtro\">Outtro\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Cp>\u003C/p>\u003C/details>\u003Cp>\u003C/p>\n\u003Ch2 id=\"major-changes\">Major Changes\u003C/h2>\n\u003Ch3 id=\"upgrade-to-astro-v4-202\">Upgrade to Astro v4 \u003Ca href=\"https://github.com/satnaing/astro-paper/pull/202\">#202\u003C/a>\u003C/h3>\n\u003Cp>AstroPaper now leverages the power and capabilities of Astro v4. However, it’s a subtle upgrade and won’t break most Astro users.\u003C/p>\n\u003Cp>\u003Cimg src=\"https://astro.build/_astro/header-astro-4.YunweN9V_OmV0l.webp\" alt=\"Astro v4\">\u003C/p>\n\u003Ch3 id=\"replace-postslug-with-astro-content-slug-197\">Replace \u003Ccode>postSlug\u003C/code> with Astro Content \u003Ccode>slug\u003C/code> \u003Ca href=\"https://github.com/satnaing/astro-paper/pull/197\">#197\u003C/a>\u003C/h3>\n\u003Cp>The \u003Ccode>postSlug\u003C/code> in the blog content schema is no longer available in AstroPaper v4. Initially Astro doesn’t have a \u003Ccode>slug\u003C/code> mechanism and thus we have to figure it out on our own. Since Astro v3, it supports content collection and slug features. Now, we believe it’s time to adopt Astro’s out-of-the-box \u003Ccode>slug\u003C/code> feature.\u003C/p>\n\u003Cp>\u003Cstrong>\u003Cem>file: src/content/blog/astro-paper-4.md\u003C/em>\u003C/strong>\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"bash\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">---\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">author:\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> Sat\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> Naing\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">pubDatetime:\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> 2024-01-01T04:35:33.428Z\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">title:\u003C/span>\u003Cspan style=\"--shiki-light:#2B5581;--shiki-dark:#ECC48D\"> AstroPaper\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> 4.0\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">slug:\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">astro-paper-v4\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"> # if slug is not specified, it will be 'astro-paper-4' (file name).\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\"># slug: \"\" ❌ cannot be an empty string\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#82AAFF;--shiki-dark-font-style:italic\">---\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>The behavior of the \u003Ccode>slug\u003C/code> is slightly different now. In the previous versions of AstroPaper, if the \u003Ccode>postSlug\u003C/code> is not specified in a blog post (markdown file), the title of that blog post would be slugified and used as the \u003Ccode>slug\u003C/code>. However, in AstroPaper v4, if the \u003Ccode>slug\u003C/code> field is not specified, the markdown file name will be used as the \u003Ccode>slug\u003C/code>. One thing to keep in mind is that the \u003Ccode>slug\u003C/code> field can be omitted, but it cannot be an empty string (slug: \"\" ❌).\u003C/p>\n\u003Cp>If you’re upgrading AstroPaper from v3 to v4, make sure to replace \u003Ccode>postSlug\u003C/code> in your \u003Ccode>src/content/blog/*.md\u003C/code> files with \u003Ccode>slug\u003C/code>.\u003C/p>\n\u003Ch2 id=\"new-features\">New Features\u003C/h2>\n\u003Ch3 id=\"add-code-snippets-for-content-creation-206\">Add code-snippets for content creation \u003Ca href=\"https://github.com/satnaing/astro-paper/pull/206\">#206\u003C/a>\u003C/h3>\n\u003Cp>AstroPaper now includes VSCode snippets for new blog posts, eliminating the need for manual copy/pasting of the frontmatter and content structure (table of contents, heading, excerpt, etc.).\u003C/p>\n\u003Cp>Read more about VSCode Snippets \u003Ca href=\"https://code.visualstudio.com/docs/editor/userdefinedsnippets#:~:text=In%20Visual%20Studio%20Code%2C%20snippets,Snippet%20in%20the%20Command%20Palette\">here\u003C/a>.\u003C/p>\n\u003Cvideo autoplay muted controls plays-inline=\"true\" class=\"border border-skin-line\">\n  \u003Csource src=\"https://github.com/satnaing/astro-paper/assets/53733092/136f1903-bade-40a2-b6bb-285a3c726350\" type=\"video/mp4\">\n\u003C/video>\n\u003Ch3 id=\"add-modified-datetime-in-blog-posts-195\">Add Modified Datetime in Blog Posts \u003Ca href=\"https://github.com/satnaing/astro-paper/pull/195\">#195\u003C/a>\u003C/h3>\n\u003Cp>Keep readers informed about the latest updates by displaying the modified datetime in blog posts. This not only instills user trust in the freshness of the articles but also contributes to improved SEO for the blog.\u003C/p>\n\u003Cp>\u003Cimg src=\"https://github.com/satnaing/astro-paper/assets/53733092/cc89585e-148e-444d-9da1-0d496e867175\" alt=\"Last Modified Date feature in AstroPaper\">\u003C/p>\n\u003Cp>You can add a \u003Ccode>modDatetime\u003C/code> to your blog post if you’ve made modifications. Now, the sorting behavior of the posts is slightly different. All posts are sorted by both \u003Ccode>pubDatetime\u003C/code> and \u003Ccode>modDatetime\u003C/code>. If a post has both a \u003Ccode>pubDatetime\u003C/code> and \u003Ccode>modDatetime\u003C/code>, its sorting position will be determined by the \u003Ccode>modDatetime\u003C/code>. If not, only \u003Ccode>pubDatetime\u003C/code> will be considered to determine the post’s sorting order.\u003C/p>\n\u003Ch3 id=\"implement-back-to-top-button-188\">Implement Back-to-Top Button \u003Ca href=\"https://github.com/satnaing/astro-paper/pull/188\">#188\u003C/a>\u003C/h3>\n\u003Cp>Enhance user navigation on your blog detail post with the newly implemented back-to-top button.\u003C/p>\n\u003Cp>\u003Cimg src=\"https://github.com/satnaing/astro-paper/assets/53733092/79854957-7877-4f19-936e-ad994b772074\" alt=\"Back to top button in AstroPaper\">\u003C/p>\n\u003Ch3 id=\"add-pagination-in-tag-posts-201\">Add Pagination in Tag Posts \u003Ca href=\"https://github.com/satnaing/astro-paper/pull/201\">#201\u003C/a>\u003C/h3>\n\u003Cp>Improve content organization and navigation with the addition of pagination in tag posts, making it easier for users to explore related content. This ensures that if a tag has many posts, readers won’t be overwhelmed by all the tag-related posts.\u003C/p>\n\u003Cvideo autoplay loop muted plays-inline=\"true\" class=\"border border-skin-line\">\n  \u003Csource src=\"https://github.com/satnaing/astro-paper/assets/53733092/9bad87f5-dcf5-4b79-b67a-d6c7244cd616\" type=\"video/mp4\">\n\u003C/video>\n\u003Ch3 id=\"dynamically-generate-robotstxt-130\">Dynamically Generate robots.txt \u003Ca href=\"https://github.com/satnaing/astro-paper/pull/130\">#130\u003C/a>\u003C/h3>\n\u003Cp>AstroPaper v4 now dynamically generates the robots.txt file, giving you more control over search engine indexing and web crawling. Besides, sitemap URL will also be added inside \u003Ccode>robot.txt\u003C/code> file.\u003C/p>\n\u003Ch3 id=\"add-docker-compose-file-174\">Add Docker-Compose File \u003Ca href=\"https://github.com/satnaing/astro-paper/pull/174\">#174\u003C/a>\u003C/h3>\n\u003Cp>Managing your AstroPaper environment is now easier than ever with the addition of a Docker-Compose file, simplifying deployment and configuration.\u003C/p>\n\u003Ch2 id=\"refactoring--bug-fixes\">Refactoring & Bug Fixes\u003C/h2>\n\u003Ch3 id=\"replace-slugified-title-with-unslugified-tag-name-198\">Replace Slugified Title with Unslugified Tag Name \u003Ca href=\"https://github.com/satnaing/astro-paper/pull/198\">#198\u003C/a>\u003C/h3>\n\u003Cp>To improve clarity, user experience and SEO, titles (\u003Ccode>Tag: some-tag\u003C/code>) in tag page are no longer slugified (\u003Ccode>Tag: Some Tag\u003C/code>).\u003C/p>\n\u003Cp>\u003Cimg src=\"https://github.com/satnaing/astro-paper/assets/53733092/2fe90d6e-ec52-467b-9c44-95009b3ae0b7\" alt=\"Unslugified Tag Names\">\u003C/p>\n\u003Ch3 id=\"implement-100svh-for-min-height-79d569d\">Implement 100svh for Min-Height (\u003Ca href=\"https://github.com/satnaing/astro-paper/commit/79d569d053036f2113519f41b0d257523d035b76\">79d569d\u003C/a>)\u003C/h3>\n\u003Cp>We’ve updated the min-height on the body to use 100svh, offering a better UX for mobile users.\u003C/p>\n\u003Ch3 id=\"update-site-url-as-single-source-of-truth-143\">Update Site URL as Single Source of Truth \u003Ca href=\"https://github.com/satnaing/astro-paper/pull/143\">#143\u003C/a>\u003C/h3>\n\u003Cp>The site URL is now a single source of truth, streamlining configuration and avoiding inconsistencies. Read more at this \u003Ca href=\"https://github.com/satnaing/astro-paper/pull/143\">PR\u003C/a> and its related issue(s).\u003C/p>\n\u003Ch3 id=\"solve-invisible-text-code-block-issue-in-light-mode-163\">Solve Invisible Text Code Block Issue in Light Mode \u003Ca href=\"https://github.com/satnaing/astro-paper/pull/163\">#163\u003C/a>\u003C/h3>\n\u003Cp>We’ve fixed the invisible text code block issue in light mode.\u003C/p>\n\u003Ch3 id=\"decode-unicode-tag-characters-in-breadcrumb-175\">Decode Unicode Tag Characters in Breadcrumb \u003Ca href=\"https://github.com/satnaing/astro-paper/pull/175\">#175\u003C/a>\u003C/h3>\n\u003Cp>The last part of Tag in the breadcrumb is now decoded, making non-English Unicode characters display better.\u003C/p>\n\u003Ch3 id=\"update-locale-config-to-cover-overall-locales-cd02b04\">Update LOCALE Config to Cover Overall Locales (\u003Ca href=\"https://github.com/satnaing/astro-paper/commit/cd02b047d2b5e3b4a2940c0ff30568cdebcec0b8\">cd02b04\u003C/a>)\u003C/h3>\n\u003Cp>The LOCALE configuration has been updated to cover a broader range of locales, catering to a more diverse audience.\u003C/p>\n\u003Ch2 id=\"outtro\">Outtro\u003C/h2>\n\u003Cp>We believe these updates will significantly elevate your AstroPaper experience. Thank you to everyone who contributed, solved issues, and gave stars to AstroPaper. We look forward to seeing the amazing content you create with AstroPaper v4!\u003C/p>\n\u003Cp>Happy Blogging!\u003C/p>\n\u003Cp>\u003Ca href=\"https://satnaing.dev\">Sat Naing\u003C/a> \u003Cbr>\nCreator of AstroPaper\u003C/p>",{"headings":536,"localImagePaths":592,"remoteImagePaths":593,"frontmatter":594,"imagePaths":597},[537,538,541,544,547,550,553,556,559,562,565,568,571,574,577,580,583,586,589],{"depth":31,"slug":76,"text":77},{"depth":31,"slug":539,"text":540},"major-changes","Major Changes",{"depth":45,"slug":542,"text":543},"upgrade-to-astro-v4-202","Upgrade to Astro v4 #202",{"depth":45,"slug":545,"text":546},"replace-postslug-with-astro-content-slug-197","Replace postSlug with Astro Content slug #197",{"depth":31,"slug":548,"text":549},"new-features","New Features",{"depth":45,"slug":551,"text":552},"add-code-snippets-for-content-creation-206","Add code-snippets for content creation #206",{"depth":45,"slug":554,"text":555},"add-modified-datetime-in-blog-posts-195","Add Modified Datetime in Blog Posts #195",{"depth":45,"slug":557,"text":558},"implement-back-to-top-button-188","Implement Back-to-Top Button #188",{"depth":45,"slug":560,"text":561},"add-pagination-in-tag-posts-201","Add Pagination in Tag Posts #201",{"depth":45,"slug":563,"text":564},"dynamically-generate-robotstxt-130","Dynamically Generate robots.txt #130",{"depth":45,"slug":566,"text":567},"add-docker-compose-file-174","Add Docker-Compose File #174",{"depth":31,"slug":569,"text":570},"refactoring--bug-fixes","Refactoring & Bug Fixes",{"depth":45,"slug":572,"text":573},"replace-slugified-title-with-unslugified-tag-name-198","Replace Slugified Title with Unslugified Tag Name #198",{"depth":45,"slug":575,"text":576},"implement-100svh-for-min-height-79d569d","Implement 100svh for Min-Height (79d569d)",{"depth":45,"slug":578,"text":579},"update-site-url-as-single-source-of-truth-143","Update Site URL as Single Source of Truth #143",{"depth":45,"slug":581,"text":582},"solve-invisible-text-code-block-issue-in-light-mode-163","Solve Invisible Text Code Block Issue in Light Mode #163",{"depth":45,"slug":584,"text":585},"decode-unicode-tag-characters-in-breadcrumb-175","Decode Unicode Tag Characters in Breadcrumb #175",{"depth":45,"slug":587,"text":588},"update-locale-config-to-cover-overall-locales-cd02b04","Update LOCALE Config to Cover Overall Locales (cd02b04)",{"depth":31,"slug":590,"text":591},"outtro","Outtro",[530],[],{"author":14,"pubDatetime":595,"title":523,"slug":519,"featured":18,"ogImage":531,"tags":596,"description":526},["Date","2024-01-04T09:30:41.816Z"],[21],[530],"astro-paper-v5",{"id":598,"data":600,"body":607,"filePath":608,"assetImports":609,"digest":612,"rendered":613},{"author":601,"pubDatetime":602,"title":603,"featured":292,"tags":604,"ogImage":605,"description":606},"Bernard",["Date","2025-03-08T08:18:19.693Z"],"AstroPaper 5.0",[21],"__ASTRO_IMAGE_../../../assets/images/AstroPaper-v5.png","AstroPaper v5: keep the clean look, updates under the hood.","At last, the long-awaited AstroPaper v5 is finally here. AstroPaper v5 keeps the same minimal & clean look, but comes with significant updates under the hood.\n\n![AstroPaper v5](@/assets/images/AstroPaper-v5.png)\n\n## Table of contents\n\n## Major Changes\n\n### Upgrade to Astro v5 [#455](https://github.com/satnaing/astro-paper/pull/455)\n\nAstroPaper now comes with Astro v5, bringing all the new features and improvements that come with it.\n\n### Tailwind v4\n\nAstroPaper has been upgraded to Tailwind v4, which includes many style changes under the hood. The `tailwind.config.js` file has been removed, and now all the configuration is located within the `src/styles/global.css` file. Typography-related styles have been extracted and moved to `src/styles/typography.css`.\n\nDue to the new behavior in TailwindCSS v4, styles inside `\u003Cstyle>` blocks within components have been removed and replaced with inline Tailwind classes.\n\nAdditionally, the color palette across the UI has been updated. The new palette now consists of only five colors:\n\n```css\n:root,\nhtml[data-theme=\"light\"] {\n  --background: #fdfdfd;\n  --foreground: #282728;\n  --accent: #006cac;\n  --muted: #e6e6e6;\n  --border: #ece9e9;\n}\n\nhtml[data-theme=\"dark\"] {\n  --background: #212737;\n  --foreground: #eaedf3;\n  --accent: #ff6b01;\n  --muted: #343f60bf;\n  --border: #ab4b08;\n}\n```\n\n### Remove React + Fuse.js in favor of Pagefind search\n\nIn previous versions, React.js and Fuse.js were used for search functionality and OG image generation. In AstroPaper v5, React.js has been removed and replaced with [Pagefind](https://pagefind.app/), a static site search tool.\n\nThe search experience is almost identical to previous versions, but now all contents, not just titles and descriptions, are indexed and searchable, thanks to Pagefind.\n\nThe idea of using Pagefind in dev mode was inspired by [this blog post](https://chrispennington.blog/blog/pagefind-static-search-for-astro-sites/).\n\n### Updated import alias\n\nThe import alias has been updated from `@directory` to `@/directory`, which means you now have to import like this:\n\n```astro\n---\nimport { slugifyStr } from \"@/utils/slugify\";\nimport IconHash from \"@/assets/icons/IconHash.svg\";\n---\n```\n\n### Move to `pnpm`\n\nAstroPaper has switched from `npm` to `pnpm`, which offers faster and more efficient package management.\n\n### Replace icons/svg with Astro's Svg Component\n\nAstroPaper v5 replaces inline SVGs with Astro’s experimental [SVG Component](https://docs.astro.build/en/reference/experimental-flags/svg/). This update reduces the need for predefined SVG code in the `socialIcons` object, making the codebase cleaner and more maintainable.\n\n### Separate Constants and Config\n\nThe project structure has been reorganized. The `src/config.ts` file now only contains the `SITE` object, which holds the main configuration for the project. All constants, such as `LOCALE`, `SOCIALS`, and `SHARE_LINKS`, have been moved to the `src/constants.ts` file.\n\n## Other notable changes\n\n- The blog posts directory has been updated from `src/content/blog/` to `src/data/blog/`.\n- Collection definitions file (`src/content/config.ts`) is now replaced with `src/content.config.ts`.\n- Various dependencies have been upgraded for improved performance and security.\n- Removed `IBM Plex Mono` font and switched to the default system mono font.\n- The `Go back` button logic has been updated. Now, instead of triggering the browser's history API, AstroPaper v5 uses the browser session to temporarily store the back URL. If no back URL exists in the session, it will redirect to the homepage.\n- There are some minor styles and layout changes as well.\n\n## Outtro\n\nAstroPaper v5 brings many changes, but the core experience remains the same. Enjoy a smoother, more efficient blogging platform while keeping the clean and minimal design that AstroPaper is known for!\n\nFeel free to explore the changes and share your thoughts. As always, thank you for your support!\n\nIf you enjoy this theme, please consider starring the repo. You can also support me via GitHub Sponsors or you can buy me a coffee if you'd like. However, of course, these actions are entirely optional and not required.\n\nEnjoy!\n\n[Sat Naing](https://satnaing.dev/)","src/data/blog/_releases/astro-paper-5.md",[610,611],"@/assets/images/AstroPaper-v5.png","../../../assets/images/AstroPaper-v5.png","1ecefba3d3735d6c",{"html":614,"metadata":615},"\u003Cp>At last, the long-awaited AstroPaper v5 is finally here. AstroPaper v5 keeps the same minimal & clean look, but comes with significant updates under the hood.\u003C/p>\n\u003Cp>\u003Cimg __ASTRO_IMAGE_=\"{"src":"@/assets/images/AstroPaper-v5.png","alt":"AstroPaper v5","index":0}\">\u003C/p>\n\u003Ch2 id=\"table-of-contents\">Table of contents\u003C/h2>\n\u003Cp>\u003C/p>\u003Cdetails>\u003Csummary>Open Table of contents\u003C/summary>\u003Cp>\u003C/p>\n\u003Cul>\n\u003Cli>\u003Ca href=\"#major-changes\">Major Changes\u003C/a>\n\u003Cul>\n\u003Cli>\u003Ca href=\"#upgrade-to-astro-v5-455\">Upgrade to Astro v5 #455\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#tailwind-v4\">Tailwind v4\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#remove-react--fusejs-in-favor-of-pagefind-search\">Remove React + Fuse.js in favor of Pagefind search\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#updated-import-alias\">Updated import alias\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#move-to-pnpm\">Move to \u003Ccode>pnpm\u003C/code>\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#replace-iconssvg-with-astros-svg-component\">Replace icons/svg with Astro’s Svg Component\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#separate-constants-and-config\">Separate Constants and Config\u003C/a>\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\u003Ca href=\"#other-notable-changes\">Other notable changes\u003C/a>\u003C/li>\n\u003Cli>\u003Ca href=\"#outtro\">Outtro\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Cp>\u003C/p>\u003C/details>\u003Cp>\u003C/p>\n\u003Ch2 id=\"major-changes\">Major Changes\u003C/h2>\n\u003Ch3 id=\"upgrade-to-astro-v5-455\">Upgrade to Astro v5 \u003Ca href=\"https://github.com/satnaing/astro-paper/pull/455\">#455\u003C/a>\u003C/h3>\n\u003Cp>AstroPaper now comes with Astro v5, bringing all the new features and improvements that come with it.\u003C/p>\n\u003Ch3 id=\"tailwind-v4\">Tailwind v4\u003C/h3>\n\u003Cp>AstroPaper has been upgraded to Tailwind v4, which includes many style changes under the hood. The \u003Ccode>tailwind.config.js\u003C/code> file has been removed, and now all the configuration is located within the \u003Ccode>src/styles/global.css\u003C/code> file. Typography-related styles have been extracted and moved to \u003Ccode>src/styles/typography.css\u003C/code>.\u003C/p>\n\u003Cp>Due to the new behavior in TailwindCSS v4, styles inside \u003Ccode><style>\u003C/code> blocks within components have been removed and replaced with inline Tailwind classes.\u003C/p>\n\u003Cp>Additionally, the color palette across the UI has been updated. The new palette now consists of only five colors:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"css\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#C5E478\">:\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">root\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#C792EA\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">html\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">[\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">data-theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">light\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">]\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --background\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">fdfdfd\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --foreground\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">282728\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --accent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">006cac\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --muted\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">e6e6e6\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --border\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">ece9e9\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#FF6363\">html\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">[\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\">data-theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">dark\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C792EA\">]\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --background\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">212737\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --foreground\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">eaedf3\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --accent\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">ff6b01\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --muted\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">343f60bf\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#C5E478\">  --border\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#F78C6C\"> #\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#FFEB95\">ab4b08\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">}\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"remove-react--fusejs-in-favor-of-pagefind-search\">Remove React + Fuse.js in favor of Pagefind search\u003C/h3>\n\u003Cp>In previous versions, React.js and Fuse.js were used for search functionality and OG image generation. In AstroPaper v5, React.js has been removed and replaced with \u003Ca href=\"https://pagefind.app/\">Pagefind\u003C/a>, a static site search tool.\u003C/p>\n\u003Cp>The search experience is almost identical to previous versions, but now all contents, not just titles and descriptions, are indexed and searchable, thanks to Pagefind.\u003C/p>\n\u003Cp>The idea of using Pagefind in dev mode was inspired by \u003Ca href=\"https://chrispennington.blog/blog/pagefind-static-search-for-astro-sites/\">this blog post\u003C/a>.\u003C/p>\n\u003Ch3 id=\"updated-import-alias\">Updated import alias\u003C/h3>\n\u003Cp>The import alias has been updated from \u003Ccode>@directory\u003C/code> to \u003Ccode>@/directory\u003C/code>, which means you now have to import like this:\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"astro\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">---\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> { slugifyStr } \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">@/utils/slugify\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">import\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> IconHash \u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">from\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\"> \"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">@/assets/icons/IconHash.svg\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">;\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">---\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Ch3 id=\"move-to-pnpm\">Move to \u003Ccode>pnpm\u003C/code>\u003C/h3>\n\u003Cp>AstroPaper has switched from \u003Ccode>npm\u003C/code> to \u003Ccode>pnpm\u003C/code>, which offers faster and more efficient package management.\u003C/p>\n\u003Ch3 id=\"replace-iconssvg-with-astros-svg-component\">Replace icons/svg with Astro’s Svg Component\u003C/h3>\n\u003Cp>AstroPaper v5 replaces inline SVGs with Astro’s experimental \u003Ca href=\"https://docs.astro.build/en/reference/experimental-flags/svg/\">SVG Component\u003C/a>. This update reduces the need for predefined SVG code in the \u003Ccode>socialIcons\u003C/code> object, making the codebase cleaner and more maintainable.\u003C/p>\n\u003Ch3 id=\"separate-constants-and-config\">Separate Constants and Config\u003C/h3>\n\u003Cp>The project structure has been reorganized. The \u003Ccode>src/config.ts\u003C/code> file now only contains the \u003Ccode>SITE\u003C/code> object, which holds the main configuration for the project. All constants, such as \u003Ccode>LOCALE\u003C/code>, \u003Ccode>SOCIALS\u003C/code>, and \u003Ccode>SHARE_LINKS\u003C/code>, have been moved to the \u003Ccode>src/constants.ts\u003C/code> file.\u003C/p>\n\u003Ch2 id=\"other-notable-changes\">Other notable changes\u003C/h2>\n\u003Cul>\n\u003Cli>The blog posts directory has been updated from \u003Ccode>src/content/blog/\u003C/code> to \u003Ccode>src/data/blog/\u003C/code>.\u003C/li>\n\u003Cli>Collection definitions file (\u003Ccode>src/content/config.ts\u003C/code>) is now replaced with \u003Ccode>src/content.config.ts\u003C/code>.\u003C/li>\n\u003Cli>Various dependencies have been upgraded for improved performance and security.\u003C/li>\n\u003Cli>Removed \u003Ccode>IBM Plex Mono\u003C/code> font and switched to the default system mono font.\u003C/li>\n\u003Cli>The \u003Ccode>Go back\u003C/code> button logic has been updated. Now, instead of triggering the browser’s history API, AstroPaper v5 uses the browser session to temporarily store the back URL. If no back URL exists in the session, it will redirect to the homepage.\u003C/li>\n\u003Cli>There are some minor styles and layout changes as well.\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"outtro\">Outtro\u003C/h2>\n\u003Cp>AstroPaper v5 brings many changes, but the core experience remains the same. Enjoy a smoother, more efficient blogging platform while keeping the clean and minimal design that AstroPaper is known for!\u003C/p>\n\u003Cp>Feel free to explore the changes and share your thoughts. As always, thank you for your support!\u003C/p>\n\u003Cp>If you enjoy this theme, please consider starring the repo. You can also support me via GitHub Sponsors or you can buy me a coffee if you’d like. However, of course, these actions are entirely optional and not required.\u003C/p>\n\u003Cp>Enjoy!\u003C/p>\n\u003Cp>\u003Ca href=\"https://satnaing.dev/\">Sat Naing\u003C/a>\u003C/p>",{"headings":616,"localImagePaths":644,"remoteImagePaths":645,"frontmatter":646,"imagePaths":649},[617,618,619,622,625,628,631,634,637,640,643],{"depth":31,"slug":76,"text":77},{"depth":31,"slug":539,"text":540},{"depth":45,"slug":620,"text":621},"upgrade-to-astro-v5-455","Upgrade to Astro v5 #455",{"depth":45,"slug":623,"text":624},"tailwind-v4","Tailwind v4",{"depth":45,"slug":626,"text":627},"remove-react--fusejs-in-favor-of-pagefind-search","Remove React + Fuse.js in favor of Pagefind search",{"depth":45,"slug":629,"text":630},"updated-import-alias","Updated import alias",{"depth":45,"slug":632,"text":633},"move-to-pnpm","Move to pnpm",{"depth":45,"slug":635,"text":636},"replace-iconssvg-with-astros-svg-component","Replace icons/svg with Astro’s Svg Component",{"depth":45,"slug":638,"text":639},"separate-constants-and-config","Separate Constants and Config",{"depth":31,"slug":641,"text":642},"other-notable-changes","Other notable changes",{"depth":31,"slug":590,"text":591},[610],[],{"pubDatetime":647,"title":603,"slug":598,"featured":292,"ogImage":611,"tags":648,"description":606},["Date","2025-03-08T08:18:19.693Z"],[21],[610],"example-draft-post",{"id":650,"data":652,"body":659,"filePath":660,"digest":661,"rendered":662},{"author":14,"pubDatetime":653,"title":654,"featured":18,"draft":292,"tags":655,"description":658},["Date","2022-06-06T04:06:31.000Z"],"示例草稿文章",[656,657],"TypeScript","Astro","Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est","用户无法看到这篇文章，因为它处于草稿状态。\n\n## 动机\n\n记录 1","src/data/blog/examples/example-draft-post.md","892a694081d10119",{"html":663,"metadata":664},"\u003Cp>用户无法看到这篇文章，因为它处于草稿状态。\u003C/p>\n\u003Ch2 id=\"动机\">动机\u003C/h2>\n\u003Cp>记录 1\u003C/p>",{"headings":665,"localImagePaths":668,"remoteImagePaths":669,"frontmatter":670,"imagePaths":673},[666],{"depth":31,"slug":667,"text":667},"动机",[],[],{"title":654,"author":14,"pubDatetime":671,"slug":650,"featured":18,"draft":292,"tags":672,"description":658},["Date","2022-06-06T04:06:31.000Z"],[656,657],[],"how-do-i-develop-my-portfolio-and-blog",{"id":674,"data":676,"body":686,"filePath":687,"digest":688,"rendered":689},{"author":14,"pubDatetime":677,"title":678,"featured":18,"draft":18,"tags":679,"description":684,"timezone":685},["Date","2022-03-25T16:55:12.000Z"],"如何开发我的作品集网站与博客",[680,681,682,683],"NextJS","TailwindCSS","HeadlessCMS","Blog","示例文章：关于使用 NextJS 和无头 CMS 开发我的第一个作品集网站和博客的经验。","Asia/Yangon","> 本文原文来自我的[博客文章](https://satnaing.dev/blog/posts/how-do-i-develop-my-portfolio-and-blog)。我放置这篇文章是为了演示如何使用 AstroPaper 主题撰写博客文章/文章。\n\n关于使用 NextJS 和无头 CMS 开发我的第一个作品集网站和博客的经验。\n\n![构建作品集](https://satnaing.dev/_ipx/w_2048,q_75/https%3A%2F%2Fres.cloudinary.com%2Fnoezectz%2Fimage%2Fupload%2Fv1653050141%2FSatNaing%2Fblog_at_cafe_ei1wf4.jpg?url=https%3A%2F%2Fres.cloudinary.com%2Fnoezectz%2Fimage%2Fupload%2Fv1653050141%2FSatNaing%2Fblog_at_cafe_ei1wf4.jpg&w=2048&q=75)\n\n## 动机\n\n从我的大学生活开始，我就一直想用我的自定义域名（**satnaing.dev**）推出自己的网站。但直到这个项目之前，这从未实现。我做过几个关于 Web 应用程序开发的项目和工作，但我没有努力去做这件事。\n\n那么，\"博客呢？\"你可能会问。是的，博客也在我的项目清单上有一段时间了。我一直想用一些最新的技术做一个博客项目。然而，我一直忙于我的工作和其他项目，所以博客项目一直没有开始。\n\n最近，我倾向于以质量而非数量为重点来开发自己的项目。项目完成后，我通常会在 GitHub 仓库中放置一个合适的 readme 文件。但 GitHub 仓库的 readme 只适合技术方面（这只是我的想法）。我想写下我的经验和挑战。因此，我决定创建自己的博客。另外，在这一点上，我有足够的经验和信心来开发这个项目。\n\n## 技术栈\n\n对于前端，我想使用 [React](https://reactjs.org/ \"React 官网\")。但仅靠 React 不足以做好 SEO；而且我还必须考虑许多因素，如路由、图片优化等。因此，我选择了 [NextJS](https://nextjs.org/ \"NextJS 官网\")作为我的主要前端技术栈。当然还有 TypeScript 用于类型检查。（据说当你习惯了 TypeScript 后，你会爱上它 😉）\n\n对于样式，我使用 [TailwindCSS](https://tailwindcss.com/ \"Tailwind CSS 官网\")。这是因为我喜欢 Tailwind 提供的开发者体验，而且与其他组件 UI 库（如 MUI 或 React Bootstrap）相比，它具有很大的灵活性。\n\n该项目的所有内容都存放在 GitHub 仓库中。我所有的博客文章（包括这篇）都是用 Markdown 文件格式编写的，因为我很习惯这种格式。但是为了轻松地编写 Markdown 及其前置元数据，我使用了 [Forestry](https://forestry.io/ \"Forestry 官网\") 无头 CMS。它是一个基于 git 的 CMS，可以提供 Markdown 和其他内容。正因为如此，我既可以使用 Markdown 也可以使用所见即所得的编辑器来编写内容。此外，用它编写前置元数据也非常轻松。\n\n图片和资源上传并存储在 [Cloudinary](https://cloudinary.com/ \"Cloudinary 官网\")中。我通过 Forestry 连接 Cloudinary，并直接在仪表板中进行管理。\n\n总之，以下是我在这个项目中使用的技术栈。\n\n- 前端：NextJS (TypeScript)\n- 样式：TailwindCSS\n- 动画：GSAP\n- CMS：Forestry Headless CMS\n- 部署：Vercel\n\n## 功能\n\n以下是我的作品集和博客的某些功能。\n\n### SEO 友好\n\n整个项目的开发都注重 SEO。我使用了正确的 meta 标签、描述和标题对齐方式。该网站现已收录于 Google。\n\n> 你可以使用关键词如\"sat naing dev\"在 Google 上搜索这个网站。\n\n![在 Google 上搜索 satnaing.dev](https://res.cloudinary.com/noezectz/image/upload/v1648231400/SatNaing/satnaing-on-google_asflq6.png \"satnaing.dev 已被收录\")\n\n此外，由于正确使用了 meta 标签，该网站在分享到社交媒体时会显示良好。\n\n![分享到 Facebook 时的 satnaing.dev 卡片布局](https://res.cloudinary.com/noezectz/image/upload/v1653106955/SatNaing/satnaing-dev-share-on-facebook_1_zjoehx.png \"分享到 Facebook 时的卡片布局\")\n\n### 动态站点地图\n\n站点地图在 SEO 中扮演着重要角色。因此，该网站的每个页面都应包含在 sitemap.xml 中。每当我创建新内容、标签或分类时，网站都会自动生成站点地图。\n\n### 浅色与深色主题\n\n由于近年来的深色主题趋势，许多网站现在都默认包含深色主题。当然，我的网站也支持浅色和深色主题。\n\n### 完全可访问\n\n该网站完全可访问。你只需使用键盘就可以浏览。我实施了所有 a11y 增强最佳实践，例如在所有图片中包含 alt 文本、不跳过标题、使用语义化 HTML 标签、正确使用 aria 属性。\n\n### 搜索框、分类与标签\n\n所有博客内容都可以通过搜索框搜索。此外，内容可以按分类和标签进行筛选。这样，博客读者可以搜索并阅读他们真正想读的内容。\n\n### 性能与 Lighthouse 分数\n\n得益于正确的开发方法和最佳实践，该网站获得了非常好的性能和 Lighthouse 分数。以下是该网站的 Lighthouse 分数。\n\n![satnaing.dev Lighthouse 分数](https://user-images.githubusercontent.com/53733092/159957822-7082e459-11e9-4616-8f1e-49d0881f7cbb.png \"satnaing.dev Lighthouse 分数\")\n\n### 动画\n\n最初我使用 [Framer Motion](https://www.framer.com/motion/ \"Framer Motion\") 为这个网站添加动画和微交互。但是，当我尝试使用一些复杂的动画和视差效果时，我发现它与 Framer Motion 的集成不便（也许我不太擅长也不习惯使用它）。因此，我决定使用 [GSAP](https://greensock.com/ \"GSAP 动画库\") 来处理我所有的动画。它是最流行的动画库之一，能够进行复杂的动画制作。你可以在该网站的几乎每个页面上看到动画和微交互。\n\n![satnaing.dev 的动画](https://res.cloudinary.com/noezectz/image/upload/v1653108324/SatNaing/ezgif.com-gif-maker_2_hehtlm.gif \"satnaing.dev 网站\")\n\n## 结语\n\n总之，这个项目给了我很多关于开发博客网站（SSG）的经验和信心。现在，我获得了关于基于 git 的 CMS 以及它如何与 NextJS 交互的知识。我还学习了 SEO、动态站点地图生成和 Google 收录流程。我将来会做出更好的项目。所以，敬请期待！✌🏻\n\n最后但同样重要的是，我想对我的朋友 Swann Fevian Kyaw（@ToonHa）说声\"谢谢\"，他为我网站的 hero 区域画了一幅漂亮的插画。\n\n## 项目链接\n\n- 网站：[https://satnaing.dev/](https://satnaing.dev/ \"https://satnaing.dev/\")\n- 博客：[https://satnaing.dev/blog](https://satnaing.dev/blog \"https://satnaing.dev/blog\")\n- 仓库：[https://github.com/satnaing/my-portfolio](https://github.com/satnaing/my-portfolio \"https://github.com/satnaing/my-portfolio\")","src/data/blog/examples/portfolio-website-development.md","234ba99a297b207a",{"html":690,"metadata":691},"\u003Cblockquote>\n\u003Cp>本文原文来自我的\u003Ca href=\"https://satnaing.dev/blog/posts/how-do-i-develop-my-portfolio-and-blog\">博客文章\u003C/a>。我放置这篇文章是为了演示如何使用 AstroPaper 主题撰写博客文章/文章。\u003C/p>\n\u003C/blockquote>\n\u003Cp>关于使用 NextJS 和无头 CMS 开发我的第一个作品集网站和博客的经验。\u003C/p>\n\u003Cp>\u003Cimg src=\"https://satnaing.dev/_ipx/w_2048,q_75/https%3A%2F%2Fres.cloudinary.com%2Fnoezectz%2Fimage%2Fupload%2Fv1653050141%2FSatNaing%2Fblog_at_cafe_ei1wf4.jpg?url=https%3A%2F%2Fres.cloudinary.com%2Fnoezectz%2Fimage%2Fupload%2Fv1653050141%2FSatNaing%2Fblog_at_cafe_ei1wf4.jpg&w=2048&q=75\" alt=\"构建作品集\">\u003C/p>\n\u003Ch2 id=\"动机\">动机\u003C/h2>\n\u003Cp>从我的大学生活开始，我就一直想用我的自定义域名（\u003Cstrong>satnaing.dev\u003C/strong>）推出自己的网站。但直到这个项目之前，这从未实现。我做过几个关于 Web 应用程序开发的项目和工作，但我没有努力去做这件事。\u003C/p>\n\u003Cp>那么，“博客呢？“你可能会问。是的，博客也在我的项目清单上有一段时间了。我一直想用一些最新的技术做一个博客项目。然而，我一直忙于我的工作和其他项目，所以博客项目一直没有开始。\u003C/p>\n\u003Cp>最近，我倾向于以质量而非数量为重点来开发自己的项目。项目完成后，我通常会在 GitHub 仓库中放置一个合适的 readme 文件。但 GitHub 仓库的 readme 只适合技术方面（这只是我的想法）。我想写下我的经验和挑战。因此，我决定创建自己的博客。另外，在这一点上，我有足够的经验和信心来开发这个项目。\u003C/p>\n\u003Ch2 id=\"技术栈\">技术栈\u003C/h2>\n\u003Cp>对于前端，我想使用 \u003Ca href=\"https://reactjs.org/\" title=\"React 官网\">React\u003C/a>。但仅靠 React 不足以做好 SEO；而且我还必须考虑许多因素，如路由、图片优化等。因此，我选择了 \u003Ca href=\"https://nextjs.org/\" title=\"NextJS 官网\">NextJS\u003C/a>作为我的主要前端技术栈。当然还有 TypeScript 用于类型检查。（据说当你习惯了 TypeScript 后，你会爱上它 😉）\u003C/p>\n\u003Cp>对于样式，我使用 \u003Ca href=\"https://tailwindcss.com/\" title=\"Tailwind CSS 官网\">TailwindCSS\u003C/a>。这是因为我喜欢 Tailwind 提供的开发者体验，而且与其他组件 UI 库（如 MUI 或 React Bootstrap）相比，它具有很大的灵活性。\u003C/p>\n\u003Cp>该项目的所有内容都存放在 GitHub 仓库中。我所有的博客文章（包括这篇）都是用 Markdown 文件格式编写的，因为我很习惯这种格式。但是为了轻松地编写 Markdown 及其前置元数据，我使用了 \u003Ca href=\"https://forestry.io/\" title=\"Forestry 官网\">Forestry\u003C/a> 无头 CMS。它是一个基于 git 的 CMS，可以提供 Markdown 和其他内容。正因为如此，我既可以使用 Markdown 也可以使用所见即所得的编辑器来编写内容。此外，用它编写前置元数据也非常轻松。\u003C/p>\n\u003Cp>图片和资源上传并存储在 \u003Ca href=\"https://cloudinary.com/\" title=\"Cloudinary 官网\">Cloudinary\u003C/a>中。我通过 Forestry 连接 Cloudinary，并直接在仪表板中进行管理。\u003C/p>\n\u003Cp>总之，以下是我在这个项目中使用的技术栈。\u003C/p>\n\u003Cul>\n\u003Cli>前端：NextJS (TypeScript)\u003C/li>\n\u003Cli>样式：TailwindCSS\u003C/li>\n\u003Cli>动画：GSAP\u003C/li>\n\u003Cli>CMS：Forestry Headless CMS\u003C/li>\n\u003Cli>部署：Vercel\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"功能\">功能\u003C/h2>\n\u003Cp>以下是我的作品集和博客的某些功能。\u003C/p>\n\u003Ch3 id=\"seo-友好\">SEO 友好\u003C/h3>\n\u003Cp>整个项目的开发都注重 SEO。我使用了正确的 meta 标签、描述和标题对齐方式。该网站现已收录于 Google。\u003C/p>\n\u003Cblockquote>\n\u003Cp>你可以使用关键词如”sat naing dev”在 Google 上搜索这个网站。\u003C/p>\n\u003C/blockquote>\n\u003Cp>\u003Cimg src=\"https://res.cloudinary.com/noezectz/image/upload/v1648231400/SatNaing/satnaing-on-google_asflq6.png\" alt=\"在 Google 上搜索 satnaing.dev\" title=\"satnaing.dev 已被收录\">\u003C/p>\n\u003Cp>此外，由于正确使用了 meta 标签，该网站在分享到社交媒体时会显示良好。\u003C/p>\n\u003Cp>\u003Cimg src=\"https://res.cloudinary.com/noezectz/image/upload/v1653106955/SatNaing/satnaing-dev-share-on-facebook_1_zjoehx.png\" alt=\"分享到 Facebook 时的 satnaing.dev 卡片布局\" title=\"分享到 Facebook 时的卡片布局\">\u003C/p>\n\u003Ch3 id=\"动态站点地图\">动态站点地图\u003C/h3>\n\u003Cp>站点地图在 SEO 中扮演着重要角色。因此，该网站的每个页面都应包含在 sitemap.xml 中。每当我创建新内容、标签或分类时，网站都会自动生成站点地图。\u003C/p>\n\u003Ch3 id=\"浅色与深色主题\">浅色与深色主题\u003C/h3>\n\u003Cp>由于近年来的深色主题趋势，许多网站现在都默认包含深色主题。当然，我的网站也支持浅色和深色主题。\u003C/p>\n\u003Ch3 id=\"完全可访问\">完全可访问\u003C/h3>\n\u003Cp>该网站完全可访问。你只需使用键盘就可以浏览。我实施了所有 a11y 增强最佳实践，例如在所有图片中包含 alt 文本、不跳过标题、使用语义化 HTML 标签、正确使用 aria 属性。\u003C/p>\n\u003Ch3 id=\"搜索框分类与标签\">搜索框、分类与标签\u003C/h3>\n\u003Cp>所有博客内容都可以通过搜索框搜索。此外，内容可以按分类和标签进行筛选。这样，博客读者可以搜索并阅读他们真正想读的内容。\u003C/p>\n\u003Ch3 id=\"性能与-lighthouse-分数\">性能与 Lighthouse 分数\u003C/h3>\n\u003Cp>得益于正确的开发方法和最佳实践，该网站获得了非常好的性能和 Lighthouse 分数。以下是该网站的 Lighthouse 分数。\u003C/p>\n\u003Cp>\u003Cimg src=\"https://user-images.githubusercontent.com/53733092/159957822-7082e459-11e9-4616-8f1e-49d0881f7cbb.png\" alt=\"satnaing.dev Lighthouse 分数\" title=\"satnaing.dev Lighthouse 分数\">\u003C/p>\n\u003Ch3 id=\"动画\">动画\u003C/h3>\n\u003Cp>最初我使用 \u003Ca href=\"https://www.framer.com/motion/\" title=\"Framer Motion\">Framer Motion\u003C/a> 为这个网站添加动画和微交互。但是，当我尝试使用一些复杂的动画和视差效果时，我发现它与 Framer Motion 的集成不便（也许我不太擅长也不习惯使用它）。因此，我决定使用 \u003Ca href=\"https://greensock.com/\" title=\"GSAP 动画库\">GSAP\u003C/a> 来处理我所有的动画。它是最流行的动画库之一，能够进行复杂的动画制作。你可以在该网站的几乎每个页面上看到动画和微交互。\u003C/p>\n\u003Cp>\u003Cimg src=\"https://res.cloudinary.com/noezectz/image/upload/v1653108324/SatNaing/ezgif.com-gif-maker_2_hehtlm.gif\" alt=\"satnaing.dev 的动画\" title=\"satnaing.dev 网站\">\u003C/p>\n\u003Ch2 id=\"结语\">结语\u003C/h2>\n\u003Cp>总之，这个项目给了我很多关于开发博客网站（SSG）的经验和信心。现在，我获得了关于基于 git 的 CMS 以及它如何与 NextJS 交互的知识。我还学习了 SEO、动态站点地图生成和 Google 收录流程。我将来会做出更好的项目。所以，敬请期待！✌🏻\u003C/p>\n\u003Cp>最后但同样重要的是，我想对我的朋友 Swann Fevian Kyaw（@ToonHa）说声”谢谢”，他为我网站的 hero 区域画了一幅漂亮的插画。\u003C/p>\n\u003Ch2 id=\"项目链接\">项目链接\u003C/h2>\n\u003Cul>\n\u003Cli>网站：\u003Ca href=\"https://satnaing.dev/\" title=\"https://satnaing.dev/\">https://satnaing.dev/\u003C/a>\u003C/li>\n\u003Cli>博客：\u003Ca href=\"https://satnaing.dev/blog\" title=\"https://satnaing.dev/blog\">https://satnaing.dev/blog\u003C/a>\u003C/li>\n\u003Cli>仓库：\u003Ca href=\"https://github.com/satnaing/my-portfolio\" title=\"https://github.com/satnaing/my-portfolio\">https://github.com/satnaing/my-portfolio\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":692,"localImagePaths":719,"remoteImagePaths":720,"frontmatter":721,"imagePaths":724},[693,694,696,698,701,703,705,707,710,713,715,717],{"depth":31,"slug":667,"text":667},{"depth":31,"slug":695,"text":695},"技术栈",{"depth":31,"slug":697,"text":697},"功能",{"depth":45,"slug":699,"text":700},"seo-友好","SEO 友好",{"depth":45,"slug":702,"text":702},"动态站点地图",{"depth":45,"slug":704,"text":704},"浅色与深色主题",{"depth":45,"slug":706,"text":706},"完全可访问",{"depth":45,"slug":708,"text":709},"搜索框分类与标签","搜索框、分类与标签",{"depth":45,"slug":711,"text":712},"性能与-lighthouse-分数","性能与 Lighthouse 分数",{"depth":45,"slug":714,"text":714},"动画",{"depth":31,"slug":716,"text":716},"结语",{"depth":31,"slug":718,"text":718},"项目链接",[],[],{"title":678,"author":14,"pubDatetime":722,"slug":674,"featured":18,"draft":18,"tags":723,"description":684,"timezone":685},["Date","2022-03-25T16:55:12.000Z"],[680,681,682,683],[],"examples/tailwind-typography",{"id":725,"data":727,"body":732,"filePath":733,"digest":734,"rendered":735},{"author":14,"pubDatetime":728,"title":729,"featured":18,"draft":18,"tags":730,"description":731},["Date","2022-07-05T02:05:51.000Z"],"Tailwind Typography 插件",[656,657],"示例文章：关于 Tailwind Typography 插件以及如何有效使用它。","> 本文来自 [TailwindLabs](https://tailwindcss-typography.vercel.app/)。我放置这篇文章是为了演示如何使用 AstroPaper 主题撰写博客文章/文章。\n\n默认情况下，Tailwind 会移除段落、标题、列表等所有默认的浏览器样式。这对于构建应用程序 UI 来说非常有用，因为你花更少的时间来撤销用户代理样式，但是当你真正需要样式化来自 CMS 或 markdown 文件的富文本内容时，这可能会令人惊讶和不直观。\n\n实际上我们收到了很多关于这个问题的投诉，人们经常问我们：\n\n> 为什么 Tailwind 要移除我 `h1` 元素的默认样式？我该如何禁用它？你是说我也会失去所有其他基础样式吗？\n> 我们听到了你的声音，但我们不相信简单地禁用我们的基础样式就是你真正想要的。你不希望在使用的每个 `p` 元素时都必须移除烦人的边距。而且我怀疑你也不希望你的博客文章使用用户代理样式——你希望它们看起来_很棒_，而不是糟糕。\n\n`@tailwindcss/typography` 插件是我们尝试给你你_真正_想要的东西，而没有任何做蠢事（比如禁用我们的基础样式）的缺点。\n\n它添加了一个新的 `prose` 类，你可以将其应用于任何纯 HTML 内容块，并将其变成一个美观、格式良好的文档：\n\n```html\n\u003Carticle class=\"prose\">\n  \u003Ch1>大蒜面包配芝士：科学告诉我们什么\u003C/h1>\n  \u003Cp>\n    多年来，家长们一直向孩子们宣扬吃大蒜面包配芝士对健康的好处，这种食物在我们的文化中获得了如此标志性的地位，以至于孩子们经常会在万圣节装扮成温暖、芝士味的面包。\n  \u003C/p>\n  \u003Cp>\n    但最近一项研究表明，这种广受欢迎的开胃菜可能与全国各地爆发的狂犬病病例有关。\n  \u003C/p>\n  \u003C!-- ... -->\n\u003C/article>\n```\n\n有关如何使用该插件及其包含的功能的更多信息，请[阅读文档](https://github.com/tailwindcss/typography/blob/master/README.md)。\n\n---\n\n## 接下来会看到什么\n\n接下来的内容只是我为了测试插件本身而写的一堆毫无意义的废话。它包括我能想到的所有合理的排版元素，如**粗体文本**、无序列表、有序列表、代码块、块引用、_甚至斜体_。\n\n涵盖所有这些用例很重要，原因有几个：\n\n1. 我们希望所有内容开箱即用看起来很美观。\n2. 实际上就是第一个原因，这就是插件的全部意义所在。\n3. 这里是第三个假装的原因，虽然三个项目的列表看起来比两个项目的列表更真实。\n\n现在我们将尝试另一种标题样式。\n\n### 排版应该简单\n\n这是一个标题——如果运气好的话，如果我们做好了工作，它看起来会相当合理。\n\n一位智者曾经告诉我关于排版的事情：\n\n> 排版非常重要，如果你不想让你的东西看起来像垃圾。把它做好，就不会糟糕。\n> 默认情况下图片看起来也应该没问题，这可能很重要：\n\n\u003Cfigure>\n  \u003Cimg\n    src=\"https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80\"\n    alt=\"\"\n  />\n  \u003Cfigcaption>\n    与普遍看法相反，Lorem Ipsum 并不是简单的随机文本。它起源于公元前 45 年的古典拉丁文学，已有 2000 多年的历史。\n  \u003C/figcaption>\n\u003C/figure>\n\n现在我将向你展示一个无序列表示例，以确保它看起来也不错：\n\n- 这是此列表中的第一项。\n- 在这个例子中，我们保持项目简短。\n- 稍后，我们将使用更长、更复杂的列表项。\n\n这就是这一节的结尾。\n\n## 如果我们堆叠标题会怎样？\n\n### 我们应该确保这看起来也不错。\n\n有时你会让标题直接相互紧挨着。在这些情况下，你通常需要取消第二个标题的上边距，因为让标题靠得更近通常看起来比段落后面跟着标题更好。\n\n### 当标题出现在段落后面时……\n\n当标题出现在段落后面时，我们需要更多的空间，就像我上面已经提到的。现在让我们看看一个更复杂的列表会是什么样子。\n\n- **我经常做列表项包含标题这种事。**\n\n  出于某种原因，我觉得这看起来很酷，但这很不幸，因为要让样式正确非常烦人。\n\n  我经常在这些列表项中放两三个段落，所以难点在于让段落之间、列表项标题和各个列表项之间的间距都合理。说实话非常困难，你可以提出一个强有力的论点，认为你根本不应该这样写。\n\n- **既然这是一个列表，我至少需要两个项目。**\n\n  我已经在上一个列表项中解释了我正在做什么，但如果只有一个项目，列表就不是列表了，我们真的希望这看起来真实。这就是为什么我添加了第二个列表项，这样我在编写样式时确实有东西可以看。\n\n- **添加第三项也不是个坏主意。**\n\n  我认为只用两个项目可能也还好，但三个肯定不会更差，而且既然我似乎能毫不费力地编造出任意内容来输入，我不妨也加上它。\n\n在这种列表之后，我通常有一个结束语或段落，因为直接跳到标题看起来有点奇怪。\n\n## 代码默认应该看起来不错。\n\n我认为大多数人会使用 [highlight.js](https://highlightjs.org/) 或 [Prism](https://prismjs.com/) 之类的东西来样式化代码块，但即使在没有任何语法高亮的情况下，让它们开箱即用看起来_还可以_也不会有什么坏处。\n\n以下是撰写本文时默认的 `tailwind.config.js` 文件的样子：\n\n```js\nmodule.exports = {\n  purge: [],\n  theme: {\n    extend: {},\n  },\n  variants: {},\n  plugins: [],\n};\n```\n\n希望这看起来足够好。\n\n### 嵌套列表呢？\n\n嵌套列表基本上总是看起来很糟糕，这就是为什么像 Medium 这样的编辑器甚至不允许你这样做，但我想既然你们中有些人会这样做，我们不得不承担至少让它能工作的负担。\n\n1. **嵌套列表很少是个好主意。**\n   - 你可能觉得自己很\"有条理\"之类的，但你只是在屏幕上创建了一个难以阅读的难看形状。\n   - UI 中的嵌套导航也是个坏主意，尽可能保持扁平。\n   - 在源代码中嵌套大量文件夹也没有帮助。\n2. **既然我们需要更多项目，这是另一个。**\n   - 我不确定我们是否会费心去样式化超过两层的嵌套。\n   - 两层已经太多了，三层肯定是个坏主意。\n   - 如果你嵌套四层，你该进监狱了。\n3. **两个项目不算真正的列表，三个就还好。**\n   - 再说一次，如果你希望人们真正阅读你的内容，请不要嵌套列表。\n   - 没人想看这个。\n   - 我很沮丧我们甚至需要费心去样式化这个。\n\nMarkdown 中列表最烦人的事情是，`\u003Cli>` 元素只有在列表项中有多个段落时才被赋予子 `\u003Cp>` 标签。这意味着我还必须担心样式化那个烦人的情况。\n\n- **例如，这里是另一个嵌套列表。**\n\n  但这次有第二段。\n  - 这些列表项不会有 `\u003Cp>` 标签\n  - 因为它们各自只有一行\n\n- **但在第二个顶级列表项中，它们会有。**\n\n  这特别烦人，因为这段的间距问题。\n  - 正如你在这里看到的，因为我添加了第二行，这个列表项现在有了一个 `\u003Cp>` 标签。\n\n    顺便说一下，这就是我说的第二行。\n\n  - 最后是另一个列表项，这样它更像一个列表。\n\n- 一个结束的列表项，但没有嵌套列表，为什么不呢？\n\n最后用一个句子来结束这一节。\n\n## 还有其他元素需要样式化\n\n我几乎忘了提链接，比如[这个到 Tailwind CSS 网站的链接](https://tailwindcss.com)。我们差点把它们做成蓝色的，但那太老套了，所以我们用了深灰色，感觉更前卫。\n\n我们甚至包含了表格样式，看看吧：\n\n| 摔角手                    | 家乡           | 终结技              |\n| ------------------------- | -------------- | ------------------- |\n| Bret \"The Hitman\" Hart    | Calgary, AB    | Sharpshooter        |\n| Stone Cold Steve Austin   | Austin, TX     | Stone Cold Stunner  |\n| Randy Savage              | Sarasota, FL   | Elbow Drop          |\n| Vader                     | Boulder, CO    | Vader Bomb          |\n| Razor Ramon               | Chuluota, FL   | Razor's Edge        |\n\n我们还需要确保行内代码看起来不错，比如如果我想谈论 `\u003Cspan>` 元素或告诉你关于 `@tailwindcss/typography` 的好消息。\n\n### 有时我甚至在标题中使用 `code`\n\n尽管这可能是个坏主意，而且历史上我很难让它看起来好看。不过这种\"用反引号包裹代码块\"的技巧实际上效果很好。\n\n我过去做的另一件事是在链接中放置 `code` 标签，比如如果我想告诉你关于 [`tailwindcss/docs`](https://github.com/tailwindcss/docs) 仓库的事情。我不喜欢反引号下方有下划线，但绝对不值得为了避免它而陷入疯狂。\n\n#### 我们还没有用过 `h4`\n\n但现在我们用了。请不要在你的内容中使用 `h5` 或 `h6`，Medium 只支持两个标题级别是有原因的，你们这些家伙。我真的考虑过使用 `before` 伪元素来在你使用 `h5` 或 `h6` 时对你尖叫。\n\n我们默认不会对它们进行任何样式设置，因为 `h4` 元素已经很小了，和正文一样大。对于 `h5` 我们该做什么，让它比正文还_小_？不了谢谢。\n\n### 但我们仍然需要考虑堆叠标题。\n\n#### 让我们确保也不会搞砸 `h4` 元素。\n\n呼，运气好的话，我们已经样式化了这段文字上方的标题，它们看起来还不错。\n\n让我们在这里添加一个结束段落，这样文章就以一个大小适中的文本块结束。我无法解释为什么我希望事情这样结束，但我必须假设是因为如果标题太靠近文档末尾，东西看起来会奇怪或不平衡。\n\n我在这里写的内容可能已经够长了，但加上这最后一句话也无妨。","src/data/blog/examples/tailwind-typography.md","a430c44a7ee50479",{"html":736,"metadata":737},"\u003Cblockquote>\n\u003Cp>本文来自 \u003Ca href=\"https://tailwindcss-typography.vercel.app/\">TailwindLabs\u003C/a>。我放置这篇文章是为了演示如何使用 AstroPaper 主题撰写博客文章/文章。\u003C/p>\n\u003C/blockquote>\n\u003Cp>默认情况下，Tailwind 会移除段落、标题、列表等所有默认的浏览器样式。这对于构建应用程序 UI 来说非常有用，因为你花更少的时间来撤销用户代理样式，但是当你真正需要样式化来自 CMS 或 markdown 文件的富文本内容时，这可能会令人惊讶和不直观。\u003C/p>\n\u003Cp>实际上我们收到了很多关于这个问题的投诉，人们经常问我们：\u003C/p>\n\u003Cblockquote>\n\u003Cp>为什么 Tailwind 要移除我 \u003Ccode>h1\u003C/code> 元素的默认样式？我该如何禁用它？你是说我也会失去所有其他基础样式吗？\n我们听到了你的声音，但我们不相信简单地禁用我们的基础样式就是你真正想要的。你不希望在使用的每个 \u003Ccode>p\u003C/code> 元素时都必须移除烦人的边距。而且我怀疑你也不希望你的博客文章使用用户代理样式——你希望它们看起来_很棒_，而不是糟糕。\u003C/p>\n\u003C/blockquote>\n\u003Cp>\u003Ccode>@tailwindcss/typography\u003C/code> 插件是我们尝试给你你_真正_想要的东西，而没有任何做蠢事（比如禁用我们的基础样式）的缺点。\u003C/p>\n\u003Cp>它添加了一个新的 \u003Ccode>prose\u003C/code> 类，你可以将其应用于任何纯 HTML 内容块，并将其变成一个美观、格式良好的文档：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"html\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"><\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">article\u003C/span>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-light-font-style:inherit;--shiki-dark:#C5E478;--shiki-dark-font-style:italic\"> class\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#7FDBCA\">=\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#ECC48D\">prose\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#D9F5DD\">\"\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">  <\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">h1\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">大蒜面包配芝士：科学告诉我们什么\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">h1\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">  <\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">p\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    多年来，家长们一直向孩子们宣扬吃大蒜面包配芝士对健康的好处，这种食物在我们的文化中获得了如此标志性的地位，以至于孩子们经常会在万圣节装扮成温暖、芝士味的面包。\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">  </\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">p\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">  <\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">p\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    但最近一项研究表明，这种广受欢迎的开胃菜可能与全国各地爆发的狂犬病病例有关。\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">  </\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">p\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#C2C3C5;--shiki-light-font-style:inherit;--shiki-dark:#637777;--shiki-dark-font-style:italic\">  <!-- ... -->\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\"></\u003C/span>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#CAECE6\">article\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#7FDBCA\">>\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>有关如何使用该插件及其包含的功能的更多信息，请\u003Ca href=\"https://github.com/tailwindcss/typography/blob/master/README.md\">阅读文档\u003C/a>。\u003C/p>\n\u003Chr>\n\u003Ch2 id=\"接下来会看到什么\">接下来会看到什么\u003C/h2>\n\u003Cp>接下来的内容只是我为了测试插件本身而写的一堆毫无意义的废话。它包括我能想到的所有合理的排版元素，如\u003Cstrong>粗体文本\u003C/strong>、无序列表、有序列表、代码块、块引用、\u003Cem>甚至斜体\u003C/em>。\u003C/p>\n\u003Cp>涵盖所有这些用例很重要，原因有几个：\u003C/p>\n\u003Col>\n\u003Cli>我们希望所有内容开箱即用看起来很美观。\u003C/li>\n\u003Cli>实际上就是第一个原因，这就是插件的全部意义所在。\u003C/li>\n\u003Cli>这里是第三个假装的原因，虽然三个项目的列表看起来比两个项目的列表更真实。\u003C/li>\n\u003C/ol>\n\u003Cp>现在我们将尝试另一种标题样式。\u003C/p>\n\u003Ch3 id=\"排版应该简单\">排版应该简单\u003C/h3>\n\u003Cp>这是一个标题——如果运气好的话，如果我们做好了工作，它看起来会相当合理。\u003C/p>\n\u003Cp>一位智者曾经告诉我关于排版的事情：\u003C/p>\n\u003Cblockquote>\n\u003Cp>排版非常重要，如果你不想让你的东西看起来像垃圾。把它做好，就不会糟糕。\n默认情况下图片看起来也应该没问题，这可能很重要：\u003C/p>\n\u003C/blockquote>\n\u003Cfigure>\n  \u003Cimg src=\"https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80\" alt=\"\">\n  \u003Cfigcaption>\n    与普遍看法相反，Lorem Ipsum 并不是简单的随机文本。它起源于公元前 45 年的古典拉丁文学，已有 2000 多年的历史。\n  \u003C/figcaption>\n\u003C/figure>\n\u003Cp>现在我将向你展示一个无序列表示例，以确保它看起来也不错：\u003C/p>\n\u003Cul>\n\u003Cli>这是此列表中的第一项。\u003C/li>\n\u003Cli>在这个例子中，我们保持项目简短。\u003C/li>\n\u003Cli>稍后，我们将使用更长、更复杂的列表项。\u003C/li>\n\u003C/ul>\n\u003Cp>这就是这一节的结尾。\u003C/p>\n\u003Ch2 id=\"如果我们堆叠标题会怎样\">如果我们堆叠标题会怎样？\u003C/h2>\n\u003Ch3 id=\"我们应该确保这看起来也不错\">我们应该确保这看起来也不错。\u003C/h3>\n\u003Cp>有时你会让标题直接相互紧挨着。在这些情况下，你通常需要取消第二个标题的上边距，因为让标题靠得更近通常看起来比段落后面跟着标题更好。\u003C/p>\n\u003Ch3 id=\"当标题出现在段落后面时\">当标题出现在段落后面时……\u003C/h3>\n\u003Cp>当标题出现在段落后面时，我们需要更多的空间，就像我上面已经提到的。现在让我们看看一个更复杂的列表会是什么样子。\u003C/p>\n\u003Cul>\n\u003Cli>\n\u003Cp>\u003Cstrong>我经常做列表项包含标题这种事。\u003C/strong>\u003C/p>\n\u003Cp>出于某种原因，我觉得这看起来很酷，但这很不幸，因为要让样式正确非常烦人。\u003C/p>\n\u003Cp>我经常在这些列表项中放两三个段落，所以难点在于让段落之间、列表项标题和各个列表项之间的间距都合理。说实话非常困难，你可以提出一个强有力的论点，认为你根本不应该这样写。\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>\u003Cstrong>既然这是一个列表，我至少需要两个项目。\u003C/strong>\u003C/p>\n\u003Cp>我已经在上一个列表项中解释了我正在做什么，但如果只有一个项目，列表就不是列表了，我们真的希望这看起来真实。这就是为什么我添加了第二个列表项，这样我在编写样式时确实有东西可以看。\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>\u003Cstrong>添加第三项也不是个坏主意。\u003C/strong>\u003C/p>\n\u003Cp>我认为只用两个项目可能也还好，但三个肯定不会更差，而且既然我似乎能毫不费力地编造出任意内容来输入，我不妨也加上它。\u003C/p>\n\u003C/li>\n\u003C/ul>\n\u003Cp>在这种列表之后，我通常有一个结束语或段落，因为直接跳到标题看起来有点奇怪。\u003C/p>\n\u003Ch2 id=\"代码默认应该看起来不错\">代码默认应该看起来不错。\u003C/h2>\n\u003Cp>我认为大多数人会使用 \u003Ca href=\"https://highlightjs.org/\">highlight.js\u003C/a> 或 \u003Ca href=\"https://prismjs.com/\">Prism\u003C/a> 之类的东西来样式化代码块，但即使在没有任何语法高亮的情况下，让它们开箱即用看起来_还可以_也不会有什么坏处。\u003C/p>\n\u003Cp>以下是撰写本文时默认的 \u003Ccode>tailwind.config.js\u003C/code> 文件的样子：\u003C/p>\n\u003Cpre class=\"astro-code astro-code-themes min-light night-owl\" style=\"--shiki-light:#24292eff;--shiki-dark:#d6deeb;--shiki-light-bg:#ffffff;--shiki-dark-bg:#011627; overflow-x: auto;--file-name-offset: -0.75rem;\" tabindex=\"0\" data-language=\"js\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\">module\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-light-font-style:inherit;--shiki-dark:#C792EA;--shiki-dark-font-style:italic\">.\u003C/span>\u003Cspan style=\"--shiki-light:#1976D2;--shiki-dark:#C5E478\">exports\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#C792EA\"> =\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  purge\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> []\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  theme\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">    extend\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {}\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  }\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  variants\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> {}\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">  plugins\u003C/span>\u003Cspan style=\"--shiki-light:#D32F2F;--shiki-dark:#D6DEEB\">:\u003C/span>\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\"> []\u003C/span>\u003Cspan style=\"--shiki-light:#212121;--shiki-dark:#D6DEEB\">,\u003C/span>\u003C/span>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292EFF;--shiki-dark:#D6DEEB\">};\u003C/span>\u003C/span>\u003C/code>\u003C/pre>\n\u003Cp>希望这看起来足够好。\u003C/p>\n\u003Ch3 id=\"嵌套列表呢\">嵌套列表呢？\u003C/h3>\n\u003Cp>嵌套列表基本上总是看起来很糟糕，这就是为什么像 Medium 这样的编辑器甚至不允许你这样做，但我想既然你们中有些人会这样做，我们不得不承担至少让它能工作的负担。\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>嵌套列表很少是个好主意。\u003C/strong>\n\u003Cul>\n\u003Cli>你可能觉得自己很”有条理”之类的，但你只是在屏幕上创建了一个难以阅读的难看形状。\u003C/li>\n\u003Cli>UI 中的嵌套导航也是个坏主意，尽可能保持扁平。\u003C/li>\n\u003Cli>在源代码中嵌套大量文件夹也没有帮助。\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\u003Cstrong>既然我们需要更多项目，这是另一个。\u003C/strong>\n\u003Cul>\n\u003Cli>我不确定我们是否会费心去样式化超过两层的嵌套。\u003C/li>\n\u003Cli>两层已经太多了，三层肯定是个坏主意。\u003C/li>\n\u003Cli>如果你嵌套四层，你该进监狱了。\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\u003Cstrong>两个项目不算真正的列表，三个就还好。\u003C/strong>\n\u003Cul>\n\u003Cli>再说一次，如果你希望人们真正阅读你的内容，请不要嵌套列表。\u003C/li>\n\u003Cli>没人想看这个。\u003C/li>\n\u003Cli>我很沮丧我们甚至需要费心去样式化这个。\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ol>\n\u003Cp>Markdown 中列表最烦人的事情是，\u003Ccode><li>\u003C/code> 元素只有在列表项中有多个段落时才被赋予子 \u003Ccode><p>\u003C/code> 标签。这意味着我还必须担心样式化那个烦人的情况。\u003C/p>\n\u003Cul>\n\u003Cli>\n\u003Cp>\u003Cstrong>例如，这里是另一个嵌套列表。\u003C/strong>\u003C/p>\n\u003Cp>但这次有第二段。\u003C/p>\n\u003Cul>\n\u003Cli>这些列表项不会有 \u003Ccode><p>\u003C/code> 标签\u003C/li>\n\u003Cli>因为它们各自只有一行\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\n\u003Cp>\u003Cstrong>但在第二个顶级列表项中，它们会有。\u003C/strong>\u003C/p>\n\u003Cp>这特别烦人，因为这段的间距问题。\u003C/p>\n\u003Cul>\n\u003Cli>\n\u003Cp>正如你在这里看到的，因为我添加了第二行，这个列表项现在有了一个 \u003Ccode><p>\u003C/code> 标签。\u003C/p>\n\u003Cp>顺便说一下，这就是我说的第二行。\u003C/p>\n\u003C/li>\n\u003Cli>\n\u003Cp>最后是另一个列表项，这样它更像一个列表。\u003C/p>\n\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\n\u003Cp>一个结束的列表项，但没有嵌套列表，为什么不呢？\u003C/p>\n\u003C/li>\n\u003C/ul>\n\u003Cp>最后用一个句子来结束这一节。\u003C/p>\n\u003Ch2 id=\"还有其他元素需要样式化\">还有其他元素需要样式化\u003C/h2>\n\u003Cp>我几乎忘了提链接，比如\u003Ca href=\"https://tailwindcss.com\">这个到 Tailwind CSS 网站的链接\u003C/a>。我们差点把它们做成蓝色的，但那太老套了，所以我们用了深灰色，感觉更前卫。\u003C/p>\n\u003Cp>我们甚至包含了表格样式，看看吧：\u003C/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>摔角手\u003C/th>\u003Cth>家乡\u003C/th>\u003Cth>终结技\u003C/th>\u003C/tr>\u003C/thead>\u003Ctbody>\u003Ctr>\u003Ctd>Bret “The Hitman” Hart\u003C/td>\u003Ctd>Calgary, AB\u003C/td>\u003Ctd>Sharpshooter\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Stone Cold Steve Austin\u003C/td>\u003Ctd>Austin, TX\u003C/td>\u003Ctd>Stone Cold Stunner\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Randy Savage\u003C/td>\u003Ctd>Sarasota, FL\u003C/td>\u003Ctd>Elbow Drop\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Vader\u003C/td>\u003Ctd>Boulder, CO\u003C/td>\u003Ctd>Vader Bomb\u003C/td>\u003C/tr>\u003Ctr>\u003Ctd>Razor Ramon\u003C/td>\u003Ctd>Chuluota, FL\u003C/td>\u003Ctd>Razor’s Edge\u003C/td>\u003C/tr>\u003C/tbody>\u003C/table>\n\u003Cp>我们还需要确保行内代码看起来不错，比如如果我想谈论 \u003Ccode><span>\u003C/code> 元素或告诉你关于 \u003Ccode>@tailwindcss/typography\u003C/code> 的好消息。\u003C/p>\n\u003Ch3 id=\"有时我甚至在标题中使用-code\">有时我甚至在标题中使用 \u003Ccode>code\u003C/code>\u003C/h3>\n\u003Cp>尽管这可能是个坏主意，而且历史上我很难让它看起来好看。不过这种”用反引号包裹代码块”的技巧实际上效果很好。\u003C/p>\n\u003Cp>我过去做的另一件事是在链接中放置 \u003Ccode>code\u003C/code> 标签，比如如果我想告诉你关于 \u003Ca href=\"https://github.com/tailwindcss/docs\">\u003Ccode>tailwindcss/docs\u003C/code>\u003C/a> 仓库的事情。我不喜欢反引号下方有下划线，但绝对不值得为了避免它而陷入疯狂。\u003C/p>\n\u003Ch4 id=\"我们还没有用过-h4\">我们还没有用过 \u003Ccode>h4\u003C/code>\u003C/h4>\n\u003Cp>但现在我们用了。请不要在你的内容中使用 \u003Ccode>h5\u003C/code> 或 \u003Ccode>h6\u003C/code>，Medium 只支持两个标题级别是有原因的，你们这些家伙。我真的考虑过使用 \u003Ccode>before\u003C/code> 伪元素来在你使用 \u003Ccode>h5\u003C/code> 或 \u003Ccode>h6\u003C/code> 时对你尖叫。\u003C/p>\n\u003Cp>我们默认不会对它们进行任何样式设置，因为 \u003Ccode>h4\u003C/code> 元素已经很小了，和正文一样大。对于 \u003Ccode>h5\u003C/code> 我们该做什么，让它比正文还_小_？不了谢谢。\u003C/p>\n\u003Ch3 id=\"但我们仍然需要考虑堆叠标题\">但我们仍然需要考虑堆叠标题。\u003C/h3>\n\u003Ch4 id=\"让我们确保也不会搞砸-h4-元素\">让我们确保也不会搞砸 \u003Ccode>h4\u003C/code> 元素。\u003C/h4>\n\u003Cp>呼，运气好的话，我们已经样式化了这段文字上方的标题，它们看起来还不错。\u003C/p>\n\u003Cp>让我们在这里添加一个结束段落，这样文章就以一个大小适中的文本块结束。我无法解释为什么我希望事情这样结束，但我必须假设是因为如果标题太靠近文档末尾，东西看起来会奇怪或不平衡。\u003C/p>\n\u003Cp>我在这里写的内容可能已经够长了，但加上这最后一句话也无妨。\u003C/p>",{"headings":738,"localImagePaths":772,"remoteImagePaths":773,"frontmatter":774,"imagePaths":777},[739,741,743,746,749,752,755,758,760,763,766,769],{"depth":31,"slug":740,"text":740},"接下来会看到什么",{"depth":45,"slug":742,"text":742},"排版应该简单",{"depth":31,"slug":744,"text":745},"如果我们堆叠标题会怎样","如果我们堆叠标题会怎样？",{"depth":45,"slug":747,"text":748},"我们应该确保这看起来也不错","我们应该确保这看起来也不错。",{"depth":45,"slug":750,"text":751},"当标题出现在段落后面时","当标题出现在段落后面时……",{"depth":31,"slug":753,"text":754},"代码默认应该看起来不错","代码默认应该看起来不错。",{"depth":45,"slug":756,"text":757},"嵌套列表呢","嵌套列表呢？",{"depth":31,"slug":759,"text":759},"还有其他元素需要样式化",{"depth":45,"slug":761,"text":762},"有时我甚至在标题中使用-code","有时我甚至在标题中使用 code",{"depth":144,"slug":764,"text":765},"我们还没有用过-h4","我们还没有用过 h4",{"depth":45,"slug":767,"text":768},"但我们仍然需要考虑堆叠标题","但我们仍然需要考虑堆叠标题。",{"depth":144,"slug":770,"text":771},"让我们确保也不会搞砸-h4-元素","让我们确保也不会搞砸 h4 元素。",[],[],{"title":729,"author":14,"pubDatetime":775,"featured":18,"draft":18,"tags":776,"description":731},["Date","2022-07-05T02:05:51.000Z"],[656,657],[],"how-do-i-develop-my-terminal-portfolio-website-with-react",{"id":778,"data":780,"body":789,"filePath":790,"digest":791,"rendered":792},{"author":14,"pubDatetime":781,"title":782,"featured":18,"draft":18,"tags":783,"description":788,"timezone":685},["Date","2022-06-09T03:42:51.000Z"],"如何使用 React 开发我的终端风格作品集网站",[784,785,786,787,656],"JavaScript","ReactJS","ContextAPI","Styled-Components","示例文章：使用 ReactJS、TypeScript 和 Styled-Components 开发终端风格网站。 包括自动补全、多主题、命令提示等功能。","> 本文原文来自我的[博客文章](https://satnaing.dev/blog/posts/how-do-i-develop-my-terminal-portfolio-website-with-react)。我放置这篇文章是为了演示如何使用 AstroPaper 主题撰写博客文章/文章。\n\n使用 ReactJS、TypeScript 和 Styled-Components 开发一个终端风格网站。包括自动补全、多主题、命令提示等功能。\n\n![Sat Naing 的终端作品集](https://satnaing.dev/_ipx/w_2048,q_75/https%3A%2F%2Fres.cloudinary.com%2Fnoezectz%2Fimage%2Fupload%2Fv1654754125%2FSatNaing%2Fterminal-screenshot_gu3kkc.png?url=https%3A%2F%2Fres.cloudinary.com%2Fnoezectz%2Fimage%2Fupload%2Fv1654754125%2FSatNaing%2Fterminal-screenshot_gu3kkc.png&w=2048&q=75)\n\n## 目录\n\n## 引言\n\n最近，我开发并发布了我的作品集 + 博客。我很高兴得到了一些好的反馈。今天，我想介绍我的新终端风格作品集网站。它是用 ReactJS、TypeScript 开发的。这个想法来自 CodePen 和 YouTube。\n\n## 技术栈\n\n这个项目是一个前端项目，没有任何后端代码。UI/UX 部分在 Figma 中设计。对于前端用户界面，我选择了 React 而不是普通的 JavaScript 和 NextJS。为什么？\n\n- 首先，我想编写声明式代码。用 JavaScript 命令式地管理 HTML DOM 非常繁琐。\n- 其次，因为它是 React！！！它快速且可靠。\n- 最后，我不太需要 NextJS 提供的 SEO 功能、路由和图片优化。\n\n当然，还有 TypeScript 用于类型检查。\n\n在样式方面，我采取了一种与往常不同的方法。我没有选择 Pure CSS、Sass 或 TailwindCSS 等工具类 CSS 框架，而是选择了 CSS-in-JS 方式（Styled-Components）。虽然我知道 Styled-Components 已经有一段时间了，但我从未尝试过。因此，该项目中 Styled-Components 的编写风格和结构可能不是很有条理或很好。\n\n这个项目不需要非常复杂的状态管理。我只在这个项目中使用了 ContextAPI 来实现多主题和避免 prop drilling。\n\n以下是技术栈的快速总结。\n\n- 前端：[ReactJS](https://reactjs.org/ \"React 官网\")、[TypeScript](https://www.typescriptlang.org/ \"TypeScript 官网\")\n- 样式：[Styled-Components](https://styled-components.com/ \"Styled-Components 官网\")\n- UI/UX：[Figma](https://figma.com/ \"Figma 官网\")\n- 状态管理：[ContextAPI](https://reactjs.org/docs/context.html \"React ContextAPI\")\n- 部署：[Netlify](https://www.netlify.com/ \"Netlify 官网\")\n\n## 功能\n\n以下是该项目的一些功能。\n\n### 多主题\n\n用户可以切换多种主题。在撰写本文时，有 5 个主题；未来可能还会添加更多主题。选定的主题保存在本地存储中，以便页面刷新时主题不会改变。\n\n![设置不同主题](https://i.ibb.co/fSTCnWB/terminal-portfolio-multiple-themes.gif)\n\n### 命令行补全\n\n为了在外观和感觉上尽可能接近真实的终端，我添加了一个命令行补全功能，只需按下\"Tab\"或\"Ctrl + i\"即可自动填充部分输入的命令。\n\n![演示命令行补全](https://i.ibb.co/CQTGGLF/terminal-autocomplete.gif)\n\n### 上一条命令\n\n用户可以通过按上、下箭头键返回到上一条命令或浏览之前输入的命令。\n\n![使用上箭头返回到之前的命令](https://i.ibb.co/vD1pSRv/terminal-up-down.gif)\n\n### 查看/清除命令历史\n\n通过输入\"history\"可以查看之前输入的命令。所有命令历史和终端屏幕可以通过输入\"clear\"或按\"Ctrl + l\"清除。\n\n![使用\"clear\"或\"Ctrl + L\"命令清除终端](https://i.ibb.co/SJBy8Rr/terminal-clear.gif)\n\n## 结语\n\n这是一个非常有趣的项目，该项目的一个特别之处在于，我必须专注于逻辑而不是用户界面（尽管这算是一个前端项目）。\n\n## 项目链接\n\n- 网站：[https://terminal.satnaing.dev/](https://terminal.satnaing.dev/ \"https://terminal.satnaing.dev/\")\n- 仓库：[https://github.com/satnaing/terminal-portfolio](https://github.com/satnaing/terminal-portfolio \"https://github.com/satnaing/terminal-portfolio\")","src/data/blog/examples/terminal-development.md","46e7f8a78bda7e7b",{"html":793,"metadata":794},"\u003Cblockquote>\n\u003Cp>本文原文来自我的\u003Ca href=\"https://satnaing.dev/blog/posts/how-do-i-develop-my-terminal-portfolio-website-with-react\">博客文章\u003C/a>。我放置这篇文章是为了演示如何使用 AstroPaper 主题撰写博客文章/文章。\u003C/p>\n\u003C/blockquote>\n\u003Cp>使用 ReactJS、TypeScript 和 Styled-Components 开发一个终端风格网站。包括自动补全、多主题、命令提示等功能。\u003C/p>\n\u003Cp>\u003Cimg src=\"https://satnaing.dev/_ipx/w_2048,q_75/https%3A%2F%2Fres.cloudinary.com%2Fnoezectz%2Fimage%2Fupload%2Fv1654754125%2FSatNaing%2Fterminal-screenshot_gu3kkc.png?url=https%3A%2F%2Fres.cloudinary.com%2Fnoezectz%2Fimage%2Fupload%2Fv1654754125%2FSatNaing%2Fterminal-screenshot_gu3kkc.png&w=2048&q=75\" alt=\"Sat Naing 的终端作品集\">\u003C/p>\n\u003Ch2 id=\"目录\">目录\u003C/h2>\n\u003Ch2 id=\"引言\">引言\u003C/h2>\n\u003Cp>最近，我开发并发布了我的作品集 + 博客。我很高兴得到了一些好的反馈。今天，我想介绍我的新终端风格作品集网站。它是用 ReactJS、TypeScript 开发的。这个想法来自 CodePen 和 YouTube。\u003C/p>\n\u003Ch2 id=\"技术栈\">技术栈\u003C/h2>\n\u003Cp>这个项目是一个前端项目，没有任何后端代码。UI/UX 部分在 Figma 中设计。对于前端用户界面，我选择了 React 而不是普通的 JavaScript 和 NextJS。为什么？\u003C/p>\n\u003Cul>\n\u003Cli>首先，我想编写声明式代码。用 JavaScript 命令式地管理 HTML DOM 非常繁琐。\u003C/li>\n\u003Cli>其次，因为它是 React！！！它快速且可靠。\u003C/li>\n\u003Cli>最后，我不太需要 NextJS 提供的 SEO 功能、路由和图片优化。\u003C/li>\n\u003C/ul>\n\u003Cp>当然，还有 TypeScript 用于类型检查。\u003C/p>\n\u003Cp>在样式方面，我采取了一种与往常不同的方法。我没有选择 Pure CSS、Sass 或 TailwindCSS 等工具类 CSS 框架，而是选择了 CSS-in-JS 方式（Styled-Components）。虽然我知道 Styled-Components 已经有一段时间了，但我从未尝试过。因此，该项目中 Styled-Components 的编写风格和结构可能不是很有条理或很好。\u003C/p>\n\u003Cp>这个项目不需要非常复杂的状态管理。我只在这个项目中使用了 ContextAPI 来实现多主题和避免 prop drilling。\u003C/p>\n\u003Cp>以下是技术栈的快速总结。\u003C/p>\n\u003Cul>\n\u003Cli>前端：\u003Ca href=\"https://reactjs.org/\" title=\"React 官网\">ReactJS\u003C/a>、\u003Ca href=\"https://www.typescriptlang.org/\" title=\"TypeScript 官网\">TypeScript\u003C/a>\u003C/li>\n\u003Cli>样式：\u003Ca href=\"https://styled-components.com/\" title=\"Styled-Components 官网\">Styled-Components\u003C/a>\u003C/li>\n\u003Cli>UI/UX：\u003Ca href=\"https://figma.com/\" title=\"Figma 官网\">Figma\u003C/a>\u003C/li>\n\u003Cli>状态管理：\u003Ca href=\"https://reactjs.org/docs/context.html\" title=\"React ContextAPI\">ContextAPI\u003C/a>\u003C/li>\n\u003Cli>部署：\u003Ca href=\"https://www.netlify.com/\" title=\"Netlify 官网\">Netlify\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"功能\">功能\u003C/h2>\n\u003Cp>以下是该项目的一些功能。\u003C/p>\n\u003Ch3 id=\"多主题\">多主题\u003C/h3>\n\u003Cp>用户可以切换多种主题。在撰写本文时，有 5 个主题；未来可能还会添加更多主题。选定的主题保存在本地存储中，以便页面刷新时主题不会改变。\u003C/p>\n\u003Cp>\u003Cimg src=\"https://i.ibb.co/fSTCnWB/terminal-portfolio-multiple-themes.gif\" alt=\"设置不同主题\">\u003C/p>\n\u003Ch3 id=\"命令行补全\">命令行补全\u003C/h3>\n\u003Cp>为了在外观和感觉上尽可能接近真实的终端，我添加了一个命令行补全功能，只需按下”Tab”或”Ctrl + i”即可自动填充部分输入的命令。\u003C/p>\n\u003Cp>\u003Cimg src=\"https://i.ibb.co/CQTGGLF/terminal-autocomplete.gif\" alt=\"演示命令行补全\">\u003C/p>\n\u003Ch3 id=\"上一条命令\">上一条命令\u003C/h3>\n\u003Cp>用户可以通过按上、下箭头键返回到上一条命令或浏览之前输入的命令。\u003C/p>\n\u003Cp>\u003Cimg src=\"https://i.ibb.co/vD1pSRv/terminal-up-down.gif\" alt=\"使用上箭头返回到之前的命令\">\u003C/p>\n\u003Ch3 id=\"查看清除命令历史\">查看/清除命令历史\u003C/h3>\n\u003Cp>通过输入”history”可以查看之前输入的命令。所有命令历史和终端屏幕可以通过输入”clear”或按”Ctrl + l”清除。\u003C/p>\n\u003Cp>\u003Cimg src=\"https://i.ibb.co/SJBy8Rr/terminal-clear.gif\" alt=\"使用"clear"或"Ctrl + L"命令清除终端\">\u003C/p>\n\u003Ch2 id=\"结语\">结语\u003C/h2>\n\u003Cp>这是一个非常有趣的项目，该项目的一个特别之处在于，我必须专注于逻辑而不是用户界面（尽管这算是一个前端项目）。\u003C/p>\n\u003Ch2 id=\"项目链接\">项目链接\u003C/h2>\n\u003Cul>\n\u003Cli>网站：\u003Ca href=\"https://terminal.satnaing.dev/\" title=\"https://terminal.satnaing.dev/\">https://terminal.satnaing.dev/\u003C/a>\u003C/li>\n\u003Cli>仓库：\u003Ca href=\"https://github.com/satnaing/terminal-portfolio\" title=\"https://github.com/satnaing/terminal-portfolio\">https://github.com/satnaing/terminal-portfolio\u003C/a>\u003C/li>\n\u003C/ul>",{"headings":795,"localImagePaths":812,"remoteImagePaths":813,"frontmatter":814,"imagePaths":817},[796,797,799,800,801,803,805,807,810,811],{"depth":31,"slug":32,"text":32},{"depth":31,"slug":798,"text":798},"引言",{"depth":31,"slug":695,"text":695},{"depth":31,"slug":697,"text":697},{"depth":45,"slug":802,"text":802},"多主题",{"depth":45,"slug":804,"text":804},"命令行补全",{"depth":45,"slug":806,"text":806},"上一条命令",{"depth":45,"slug":808,"text":809},"查看清除命令历史","查看/清除命令历史",{"depth":31,"slug":716,"text":716},{"depth":31,"slug":718,"text":718},[],[],{"title":782,"author":14,"pubDatetime":815,"slug":778,"featured":18,"draft":18,"tags":816,"description":788,"timezone":685},["Date","2022-06-09T03:42:51.000Z"],[784,785,786,787,656],[]]