Logo

博客配置

Hakubot 2026年2月28日
 # 帮助 

Haku 的所有配置文件都在 src/config.ts 这里，建议下载 VSCode 方便编辑。（需要安装中文补丁）

首先，在命令行将仓库克隆（也就是复制）到本地。（假设你的仓库在 https://github.com/username/MyBlog）

git clone https://github.com/username/MyBlog

进入这个文件夹，用 VSCode 打开它。（通常右键 -> 通过 Code 打开）

打开 src/config.ts 这个文件，接着就可以开始配置了。源文件的注释是英文的，下面有中文版。

基础设置

config.ts
  site: {
    // 网站标题
    title: "Haku",
    // 网站副标题
    subtitle: "A simple astro theme",
    // 网站描述
    description: "A demo",
    // 网站作者，会展示在页脚
    author: "Hakubot",
    // 你网站的根目录，通常填上 "/" 即可
    base: "/",
    // 你网站的 URL
    // 假如用 Netlify 部署，Netlify 会给你分配一个形如 *.netlify.app 的 URL，填那个就行
    url: "https://haku.karlbaey.top",
    // 你网站的 favicon，就是标签页上那个小小的方形图片
    // 放在 public/favicon.png
    favicon: "/favicon.png",
  },

public/ 目录内的文件可以直接通过访问根目录获得，例如 public/favicon.png 就会放在 example.com/favicon.png。

下方是有关国际化和格式化的配置。

config.ts
  global: {
    // 网站语言，现在是中文
    // 以后会添加 i18n
    lang: "zh", // "zh" | "de" | "en" | "es" | "fr" | "ja" | "ko" | "pl" | "pt" | "ru" | "zh-tw"
    // 是否展示目录
    toc: true,
    // 日期格式化，现在的格式是 2026年2月28日
    dateFmt: "YYYY MMM D", // 'YYYY-MM-DD' | 'MM-DD-YYYY' | 'DD-MM-YYYY' | 'MMM D YYYY' | 'D MMM YYYY'
    // 对照表
    // MM-DD-YYYY: 02-28-2026
    // DD-MM-YYYY: 28-02-2026
    // MMM D YYYY: Feb 28 2026
    // D MMM YYYY: 28 Feb 2026
    // YYYY MMM D: 2026年2月28日
    // 假如不填就保留原样
  },

主题

配置网站主题。

config.ts
color: {
    // 默认有三种格式
    mode: "light", // light | dark | auto
  },

评论

评论，目前仅提供 Giscus 和 Waline。

Giscus 配置

前往 https://giscus.app/zh-CN 配置。此处不再赘述填写过程。最后 Giscus 会提供这样的一段 <script> 脚本。

giscus.html
<script src="https://giscus.app/client.js"
        data-repo="Karlbaey/Haku"
        data-repo-id="R_kgDOQWi63Q"
        data-category="Announcements"
        data-category-id="DIC_kwDOQWi63c4CyFMJ"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

如果你没有开启懒加载，就将 loading 改为 eager。

将它转换为配置如下。

config.ts
  comments: {
    // 您可以使用 Giscus 或 Waline，也可以两者兼用
    providers: ["giscus", "waline"],
    // Giscus 设置
    // 参见 https://haku.karlbaey.top/articles/configuration#giscus-配置
    giscus: {
      enabled: true,
      host: "https://giscus.app",
      repo: "Karlbaey/Haku",
      repoID: "R_kgDOQWi63Q",
      category: "Announcements",
      categoryID: "DIC_kwDOQWi63c4CyFMJ",
      mapping: "pathname",
      strict: "0",
      reactionsEnabled: "1",
      emitMetadata: "0",
      inputPosition: "top",
      theme: "preferred_color_scheme",
      lang: "zh-CN",
      loading: "lazy",
    },

同时前往 giscus.json。以下是我的配置。

giscus.json
{
  "origins": [
    "https://re.karlbaey.top",
    "https://karlbaey.top",
    "https://haku.karlbaey.top",
    "https://astro-theme-haku.netlify.app"
  ],
  "defaultCommentOrder": "newest"
}
  • origins：防盗链，评论请求只能从这个组中列出的域名来，防止有人拿了你的 giscus 配置，蹭你的仓库用。
  • defaultCommentOrder：两个选项：newest 和 oldest，分别表示最新评论在前和最旧评论在前。

还有一个 originsRegex，那是用正则表达式匹配域名，这里没必要就不写了。

Waline 配置

Waline 配置请前往快速上手 | Waline。

serverURL 改为你设置的服务端地址。

requiredMeta 表示必填项。nick 表示昵称，mail 表示邮箱（从 Gravatar 获取头像用），link 表示个人网站或页面。

config.ts
    // Waline 设置
    // 参见 https://haku.karlbaey.top/articles/configuration#waline-配置
    waline: {
      // 是否启用
      enabled: true,
      // 填入你的 Waline 服务端地址
      serverURL: "",
      // 语言
      // https://waline.js.org/guide/features/i18n.html
      lang: "zh",
      // 浏览量计数
      // https://waline.js.org/guide/features/pageview.html
      pageview: true,
      // 是否开启评论
      comment: true,
      // 是否开启表情包
      // https://waline.js.org/guide/features/search.html#%E8%87%AA%E5%AE%9A%E4%B9%89
      search: false,
      // 是否开启登录
      // https://waline.js.org/guide/get-started/server.html#%E7%A4%BE%E4%BA%A4%E7%99%BB%E5%BD%95
      login: "enable",
      dark: "html.dark",
      // 必填信息
      requiredMeta: ["nick", "mail"],
      // 表情包
      // https://waline.js.org/guide/features/emoji.html#%E9%A2%84%E8%AE%BE
      emoji: [],
    },

社交平台分享

目前只提供 Twitter、QQ 还有 Mastodon，在 providers 中填入即可。

  socialShare: {
    activated: true,
    providers: ["twitter", "qq", "mastodon"],
  },

网站数据分析

可使用 Google Analytics 还有 Umami。

  // 如果不想使用网站分析，请将其留空
  analytics: {
    // 创建自己的 Google Analytics ID
    // https://analytics.google.com/analytics/web/
    googleAnalyticsID: "",
    // 创建自己的 Umami Analytics ID
    // https://cloud.umami.is/analytics/us/websites/
    umamiWebsiteID: "",
    // 除非自部署 Umami，否则请勿编辑
    umamiScriptSrc: "https://cloud.umami.is/script.js",
  },

预览

在命令行执行命令。

npm link

（这是为了使用我编写的命令行）

然后使用命令 haku dev，等待，就能在浏览器打开 http://localhost:4321/ 查看自己的网页了。

更新

haku update

它会从 GitHub 获取最近的一次更新，然后与你的本地仓库合并。

关于如何写博客，请前往写自己的博客。

返回文章页面

分享

评论区