Github 仓库 / 作者的博客

下载仓库

通过 git，或直接在 GitHub 上下载仓库到本地。

Terminal window
git repo clone https://github.com/dogxii/astro-doge-theme.git

下载后，在终端执行 npm install / bun install 安装依赖，更推荐 Bun 作为包管理器。

修改常量

有以下几处需要更改，

  1. astro.config.mjs，将其修改为以后的部署域名：
astro.config.mjs
export default defineConfig({
  site: 'https://blog.dogxi.me/',
  integrations: [
    astroExpressiveCode({
      themes: ['github-dark'],
    }),
    mdx(),
    sitemap(),
    tailwind(),
  ],
  markdown: {
    remarkPlugins: [
      remarkGithubAlerts,
      remarkDemoteH1ToH2,
      [remarkExternalLinks, { allowHostnames: ['blog.dogxi.me'] }],
    ],
  },
})
  1. src/consts.ts，根据需要进行修改：
src/consts.ts
export const SITE: Site = {
  NAME: 'Dogxi 的狗窝',
  EMAIL: 'hi@dogxi.me',
  DESCRIPTION: '一个简洁轻量的个人博客.',
  NUM_POSTS_ON_HOMEPAGE: 4,
  NUM_THOUGHTS_ON_HOMEPAGE: 2,
  NUM_PROJECTS_ON_HOMEPAGE: 3,
  NUM_RELATED_POSTS_ON_POST: 5,
}


export const HOME: Metadata = {
  TITLE: '主页',
  DESCRIPTION: '一个简洁轻量的个人博客.',
}


// ...
  1. src/components/Header.astro，定义了网站顶部导航栏：
src/components/Header.astro
<nav class="flex items-center gap-2">
  <Link href="/posts"> 文章 </Link>
  <span>
    {`/`}
  </span>
  <Link href="/thoughts"> 碎碎念 </Link>
  <span>
    {`/`}
  </span>
  <Link href="/projects"> 项目 </Link>
  <span>
    {`/`}
  </span>
  <Link href="/about"> 关于 </Link>
  <div class="ml-1">
    <ThemeToggle />
  </div>
</nav>
  1. src/components/Footer.astro，定义了网站底部内容：
src/components/Footer.astro
<footer class="animate">
  <Container>
    <hr />
    <div class="mt-6 flex items-center justify-between">
      <div>&copy; 2025-PRESENT Dogxi.</div>
      <div class="flex gap-4">
        <Link href="https://github.com/dogxii" external>Github↗</Link>
        <Link href="https://blog.dogxi.me/rss.xml" external>RSS↗</Link>
      </div>
    </div>
  </Container>
</footer>

创建文章与碎碎念

文章

Note
手输字段很麻烦，所以主题提供了快速创建的命令：

bun new:blog my-blog，下面会有详细讲解

在 src/content/posts 目录下存放的就是博客文章，只需要新建 Markdown 文件，就可以进行写作。

如不知道 Markdown 是什么，或不熟练如何编写见 Markdown 速通

如果手动创建 Markdown 文件并运行后，终端会发生报错。因为空的文件中没有必要的 frontmatter 元数据，你需要在开头填入它，比如这篇文章的 frontmatter 为：

blog-theme-start.md
---
title: Astro Doge 主题 - 快速开始
description: 快速上手指南 🧭
date: 2025-12-01T12:30:02+08:00
slug: blog-theme-start
draft: false
---
字段值类型作用
title字符串文章标题
description字符串文章描述
dateISO 8601 格式发布时间
slug?字符串文章标识
drafttrue / false是否发布

  • 其中 date 需要为 ISO 8601 格式：在 2025-12-01T12:30:02+08:00 中 T 用于分割日期和时间，末尾的 +08:00 表示时间偏移正八小时，即中国标准时间。

  • slug 为可选参数，用于文章链接，不填入则为文件名。推荐手动设置，能缩短链接，如这篇文章链接为 /blog-theme-start。

手动输入这些需要花费时间，所以主题提供了 bun new:blog <slug> 命令，用于快速创建新博客。它执行了 scripts/new-blog.ts 这个脚本，会获取 slug 参数作为 title，description 以及 slug 的值。

扩展

自定义博客页面及主题：

src/components/Head.astro，最底部定义了 Meting API

src/components/Head.astro
<!-- Meting APlayer -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/dogxi-meting@latest/APlayer.min.css"
/>
<script
  transition:persist="aplayer"
  src="https://cdn.jsdelivr.net/npm/dogxi-meting@latest/APlayer.min.js"
></script>


<script is:inline>
  window.meting_api =
    'https://meting.dogxi.me/api?server=:server&type=:type&id=:id&auth=:auth&r=:r'
</script>


<script
  transition:persist="meting"
  src="https://cdn.jsdelivr.net/npm/dogxi-meting@latest/Meting.min.js"></script>