---
title: 博客
author: pengzhanbo
icon: material-symbols:article-outline
createTime: 2024/03/04 19:16:40
permalink: /guide/blog/
tags:
  - 指南
  - 快速开始
---

<script setup lang="ts">
import VPBlogProfile from 'vuepress-theme-plume/components/Blog/VPBlogProfile.vue'
</script>

## 概述

主题默认启用 博客功能，通常您无需进行额外的配置。

主题默认会将 `{sourceDir}` 目录下的，除了特定的目录（如 `notes` 目录将作为笔记所在目录），
所有 md 文件作为博客文章。

主题还会根据 md 文件 所在的 文件目录结构，以 **目录名** 作为 博客文章所属的 **分类**。

主题默认会生成一个 链接地址为 `/blog/` 的 博客文章列表页。
展示所有的博客文章，以及 博主的相关信息。

## 国际化支持

如果启用了 国际化，那么博客列表页将会 根据 不同的语言，展示对应语言目录下的博客列表。
即 每个语言下的 文章列表 都是保持独立的。

## 博主信息

主题支持展示博主的基本信息。

<div
  style="width: 310px;margin: 0 auto;padding: 20px 20px 1px;text-align:center;border-radius: 4px;
  background-color: var(--vp-c-bg-soft);transition: background-color var(--t-color);"
>
  <VPBlogProfile />
</div>

### 配置

你可以通过 `profile` 属性来设置博主头像等相关信息。

::: code-tabs
@tab .vuepress/config.ts

```ts
export default defineUserConfig({
  theme: plumeTheme({
    profile: {
      name: '你的名字',
      description: '描述文字',
      avatar: '/blogger.png',
      circle: true, // 是否为圆形头像
    }
  })
})
```

:::

## 文章元数据

你可以配置展示博客文章的元数据，如标题、作者、日期、标签等。这些数据通过 `frontmatter` 配置。

```md
---
title: 文章标题
createTime: 2024/01/01 00:00:00
tags:
  - tag1
  - tag2
---
```

其中，`title` / `createTime` 会在新建 md 文件时由主题自动填充，你可以随意修改它们。

以下是在 博客文章中可用的 `frontmatter` 属性。

| 属性       | 类型                | 默认值                      | 说明                                         |
| ---------- | ------------------- | --------------------------- | -------------------------------------------- |
| title      | `string`            | 默认自动填入文件名          | 文章标题                                     |
| createTime | `string`            | 当前时间                    | 文章创建时间                                 |
| tags       | `string[]`          | `[]`                        | 文章标签                                     |
| sticky     | `boolean \| number` | false                       | 是否置顶, 如果为数字，则数字越大，置顶越靠前 |
| draft      | `boolean`           | false                       | 是否为草稿，草稿文章不会被展示               |

除了以上的字段，你还可以使用 [通用 frontmatter 配置](../config/frontmatter/basic.md) 中的字段，
灵活的控制当前页面的行为。

## 文章摘要

如果你想要为文章添加摘要，你可以使用 `<!-- more -->` 注释来标记它。任何在此注释之前的内容会被视为摘要。

***示例：**

```md
---
title: 标题
---

这里的内容会被作为摘要

<!-- more -->

这里的内容不会被作为摘要
```

## 标签页，分类页和归档页

主题除了自动生成 **博客文章列表页** 以外，还会自动生成 **标签页**，**分类页** 和 **归档页**。

标签页 可以根据 标签 筛选并展示 博客文章， 默认地址为 `/blog/tags/`

分类页 可以根据 原始目录结构 分类展示 博客文章, 默认地址为 `/blog/categories/`

归档页根据文章的创建时间进行归, 默认地址为 `/blog/archives/`

## 设置博客为主页

默认情况下，主题 将 **首页** 与 **博客页** 分离。

但对于 希望只建立一个 博客站点 的用户而言，可能直接将 博客页 作为 **首页** 是个更好的选择。

主题提供了两种方式来设置博客为主页，满足不同的需求场景：

- **方式一：配置 主页的 `pageLayout` 属性为 `blog`**

::: code-tabs
@tab docs/README.md

```md
---
pageLayout: blog
---
```

:::

此配置会直接将页面应用 博客布局，显示博客文章列表。

这是将主页修改为 博客页的 最简单的方式，但缺点是 缺少灵活性。

- **方式二：配置 主页的 `pageLayout` 属性为 `home`, 添加 `type: blog` 的首页区域类型**

::: code-tabs

@tab docs/README.md

```md
---
pageLayout: home
config:
  - type: blog
---
```

:::

使用这种方式，你不仅可以在首页中添加 博客文章列表，还可以灵活的在页面的其他区域添加不同的内容。

比如，配置首屏为 `banner`，然后紧跟着 博客文章列表：

::: code-tabs

@tab docs/README.md

```md
---
pageLayout: home
config:
  - type: banner
  - type: blog
---
```

:::

更多自定义配置，请参考 [自定义首页](./自定义首页.md)。

当使用以上两种方式 将首页配置为 博客页后，由于主题默认依然会生成 地址为`/blog/` 的博客文章列表页，
这导致存在了重复功能的页面，为此，你需要 [主题配置 > 博客配置](../config/主题配置.md#blog) 中，
**关闭自动生成博客文章列表页**：

（还可以在重新修改 分类页/标签页/归档页的链接地址）

```ts
import { plumeTheme } from 'vuepress-theme-plume'
import { defineUserConfig } from 'vuepress'

export default defineUserConfig({
  theme: plumeTheme({
    blog: {
      postList: false, // 禁止生成博客文章列表页
      // tagsLink: '/blog/tags/',
      // categoriesLink: '/blog/categories/',
      // archiveLink: '/blog/archives/',
    }
  })
})
```