vuepress-theme-plume/博客.md at 89b2601ec706b75dc438178c4226fa1650cc5aa5

gitea-yuany3721/vuepress-theme-plume

Fork 1

mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-23 10:58:13 +08:00

pengzhanbo 89b2601ec7

docs: improve docs (#192 )

2024-09-18 21:33:41 +08:00

6.1 KiB

Raw Blame History

title, author, icon, createTime, permalink, tags

title

author

icon

createTime

permalink

概述

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

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

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

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

国际化支持

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

博主信息

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

配置

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

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

export default defineUserConfig({
  theme: plumeTheme({
    profile: {
      name: '您的名字',
      description: '描述文字，座右铭/签名',
      avatar: '/blogger.png',
      location: '您的位置',
      organization: '您的组织',
      circle: true, // 是否为圆形头像
      layout: 'right', // 个人信息在左侧还是右侧，'left' | 'right'
    },
    // 社交链接
    social: [
      { icon: 'github', link: 'https://github.com/vuepress-theme-plume' },
      // ... more
    ]
  })
})

:::

文章元数据

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

---
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 配置中的字段，灵活的控制当前页面的行为。

文章摘要

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

*示例：

---
title: 标题
---

这里的内容会被作为摘要

<!-- more -->

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

标签页，分类页和归档页

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

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

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

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

设置博客为主页

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

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

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

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

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

---
pageLayout: blog
---

:::

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

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

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

::: code-tabs

@tab docs/README.md

---
pageLayout: home
config:
  - type: blog
---

:::

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

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

::: code-tabs

@tab docs/README.md

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

:::

更多自定义配置，请参考自定义首页。

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

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

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

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

6.1 KiB Raw Blame History Unescape Escape

概述