diff --git a/docs/en/guide/quick-start/collection-doc.md b/docs/en/guide/quick-start/collection-doc.md index 5a36ecfc..45965bf1 100644 --- a/docs/en/guide/quick-start/collection-doc.md +++ b/docs/en/guide/quick-start/collection-doc.md @@ -229,6 +229,96 @@ permalink: /guide/a1b2c3d4/ --- ``` +In the collection, the `meta` option allows you to set the display method of article metadata, +This setting will directly affect the display of metadata on both the **article list page** and the **article content page**: + +::: code-tabs#config + +@tab .vuepress/config.ts + +```ts +import { defineUserConfig } from 'vuepress' +import { plumeTheme } from 'vuepress-theme-plume' + +export default defineUserConfig({ + theme: plumeTheme({ + collections: [ + { + type: 'doc', + dir: 'guide', + title: 'Guide', + // [!code hl:11] + meta: { + tags: true, // Whether to display labels + /** + * Whether to display the creation time, or set the time format + * - 'short': Display as `2022-01-01`, default + * - 'long': Display as `2022-01-01 00:00:00` + */ + createTime: true, // boolean | 'short' | 'long' + readingTime: true, // Whether to display the reading time estimate + wordCount: true, // Whether to display the word count + } + } + ] + }) +}) +``` + +@tab .vuepress/plume.config.ts + +``` ts +import { defineThemeConfig } from 'vuepress-theme-plume' + +export default defineThemeConfig({ + collections: [ + { + type: 'doc', + dir: 'guide', + title: 'Guide', + // [!code hl:11] + meta: { + tags: true, // Whether to display labels + /** + * Whether to display the creation time, or set the time format + * - 'short': Display as `2022-01-01`, default + * - 'long': Display as `2022-01-01 00:00:00` + */ + createTime: true, // boolean | 'short' | 'long' + readingTime: true, // Whether to display the reading time estimate + wordCount: true, // Whether to display the word count + } + } + ] +}) +``` + +::: + +In markdown, configure article metadata through frontmatter: + +```md +--- +title: Article Title +createTime: 2024/01/01 00:00:00 +tags: + - tag1 + - tag2 +--- +``` + +`title` and `createTime` are automatically generated when files are created and support manual modification. + +### Available Properties + +| Property | Type | Default | Description | +| ---------- | ---------- | ------------ | ------------- | +| title | `string` | File name | Article title | +| createTime | `string` | Current time | Creation time | +| tags | `string[]` | `[]` | Article tags | + +Also supports all fields from [common frontmatter configuration](../../config/frontmatter/basic.md). + ## Sidebar Configuration Provides flexible sidebar navigation configuration options: diff --git a/docs/en/guide/quick-start/collection-post.md b/docs/en/guide/quick-start/collection-post.md index 73e800e1..125f5298 100644 --- a/docs/en/guide/quick-start/collection-post.md +++ b/docs/en/guide/quick-start/collection-post.md @@ -744,7 +744,75 @@ Automatically switches to `top` layout on narrow-screen devices to ensure displa ## Article Metadata -Configure article metadata through frontmatter: +## 文章元数据 + +In the collection, the `meta` option allows you to set the display method of article metadata, +This setting will directly affect the display of metadata on both the **article list page** and the **article content page**: + +::: code-tabs#config + +@tab .vuepress/config.ts + +```ts +import { defineUserConfig } from 'vuepress' +import { plumeTheme } from 'vuepress-theme-plume' + +export default defineUserConfig({ + theme: plumeTheme({ + collections: [ + { + type: 'post', + dir: 'blog', + title: '博客', + // [!code hl:11] + meta: { + tags: true, // Whether to display labels + /** + * Whether to display the creation time, or set the time format + * - 'short': Display as `2022-01-01`, default + * - 'long': Display as `2022-01-01 00:00:00` + */ + createTime: true, // boolean | 'short' | 'long' + readingTime: true, // Whether to display the reading time estimate + wordCount: true, // Whether to display the word count + } + } + ] + }) +}) +``` + +@tab .vuepress/plume.config.ts + +``` ts +import { defineThemeConfig } from 'vuepress-theme-plume' + +export default defineThemeConfig({ + collections: [ + { + type: 'post', + dir: 'blog', + title: '博客', + // [!code hl:11] + meta: { + tags: true, // Whether to display labels + /** + * Whether to display the creation time, or set the time format + * - 'short': Display as `2022-01-01`, default + * - 'long': Display as `2022-01-01 00:00:00` + */ + createTime: true, // boolean | 'short' | 'long' + readingTime: true, // Whether to display the reading time estimate + wordCount: true, // Whether to display the word count + } + } + ] +}) +``` + +::: + +In markdown, configure article metadata through frontmatter: ```md --- @@ -760,16 +828,16 @@ tags: ### Available Properties -| Property | Type | Default | Description | -| ---------- | ------------------- | ------- | ----------------------------------------- | -| title | `string` | File name | Article title | -| createTime | `string` | Current time | Creation time | -| tags | `string[]` | `[]` | Article tags | -| sticky | `boolean \| number` | false | Sticky flag, higher numbers sort first | -| draft | `boolean` | false | Draft mode, hidden after build | -| cover | `string` | `''` | Cover image path | -| coverStyle | `PostCoverStyle` | `null` | Cover style configuration | -| excerpt | `boolean \| string` | '' | Excerpt content, supports auto-extraction | +| Property | Type | Default | Description | +| ---------- | ------------------- | ------------ | ----------------------------------------- | +| title | `string` | File name | Article title | +| createTime | `string` | Current time | Creation time | +| tags | `string[]` | `[]` | Article tags | +| sticky | `boolean \| number` | false | Sticky flag, higher numbers sort first | +| draft | `boolean` | false | Draft mode, hidden after build | +| cover | `string` | `''` | Cover image path | +| coverStyle | `PostCoverStyle` | `null` | Cover style configuration | +| excerpt | `boolean \| string` | '' | Excerpt content, supports auto-extraction | Also supports all fields from [common frontmatter configuration](../../config/frontmatter/basic.md). diff --git a/docs/guide/quick-start/collection-doc.md b/docs/guide/quick-start/collection-doc.md index 51267046..22d097f5 100644 --- a/docs/guide/quick-start/collection-doc.md +++ b/docs/guide/quick-start/collection-doc.md @@ -228,6 +228,97 @@ permalink: /guide/a1b2c3d4/ --- ``` +## 文章元数据 + +在集合中通过 `meta` 选项，可以设置文章元数据的显示方式： + +::: code-tabs#config + +@tab .vuepress/config.ts + +```ts +import { defineUserConfig } from 'vuepress' +import { plumeTheme } from 'vuepress-theme-plume' + +export default defineUserConfig({ + theme: plumeTheme({ + collections: [ + { + type: 'doc', + dir: 'guide', + title: '指南', + // [!code hl:11] + meta: { + tags: true, // 是否显示标签 + /** + * 是否显示创建时间，或设置时间格式 + * - 'short': 显示为 `2022-01-01`，默认 + * - 'long': 显示为 `2022-01-01 00:00:00` + */ + createTime: true, // boolean | 'short' | 'long' + readingTime: true, // 是否显示阅读时间估算 + wordCount: true, // 是否显示字数统计 + } + } + ] + }) +}) +``` + +@tab .vuepress/plume.config.ts + +``` ts +import { defineThemeConfig } from 'vuepress-theme-plume' + +export default defineThemeConfig({ + collections: [ + { + type: 'doc', + dir: 'guide', + title: '指南', + // [!code hl:11] + meta: { + tags: true, // 是否显示标签 + /** + * 是否显示创建时间，或设置时间格式 + * - 'short': 显示为 `2022-01-01`，默认 + * - 'long': 显示为 `2022-01-01 00:00:00` + */ + createTime: true, // boolean | 'short' | 'long' + readingTime: true, // 是否显示阅读时间估算 + wordCount: true, // 是否显示字数统计 + } + } + ] +}) +``` + +::: + +在 markdown 中，通过 frontmatter 配置文章元数据： + +```md +--- +title: 文章标题 +createTime: 2024/01/01 00:00:00 +tags: + - tag1 + - tag2 +--- +``` + +`title` 和 `createTime` 在文件创建时自动生成，支持手动修改。 + +### 可用属性 + +| 属性 | 类型 | 默认值 | 说明 | +| ---------- | ------------------- | -------- | -------------------------- | +| title | `string` | 文件名 | 文章标题 | +| createTime | `string` | 当前时间 | 创建时间 | +| tags | `string[]` | `[]` | 文章标签 | + +同时支持[通用 frontmatter 配置](../../config/frontmatter/basic.md)中的所有字段。 + ## 侧边栏配置 提供灵活的侧边栏导航配置选项： diff --git a/docs/guide/quick-start/collection-post.md b/docs/guide/quick-start/collection-post.md index 232b77a2..b51276a0 100644 --- a/docs/guide/quick-start/collection-post.md +++ b/docs/guide/quick-start/collection-post.md @@ -738,7 +738,73 @@ interface PostCoverStyle { ## 文章元数据 -通过 frontmatter 配置文章元数据： +在集合中通过 `meta` 选项，可以设置文章元数据的显示方式， +该设置将直接影响 **文章列表页** 和 **文章内容页** 的元数据显示： + +::: code-tabs#config + +@tab .vuepress/config.ts + +```ts +import { defineUserConfig } from 'vuepress' +import { plumeTheme } from 'vuepress-theme-plume' + +export default defineUserConfig({ + theme: plumeTheme({ + collections: [ + { + type: 'post', + dir: 'blog', + title: '博客', + // [!code hl:11] + meta: { + tags: true, // 是否显示标签 + /** + * 是否显示创建时间，或设置时间格式 + * - 'short': 显示为 `2022-01-01`，默认 + * - 'long': 显示为 `2022-01-01 00:00:00` + */ + createTime: true, // boolean | 'short' | 'long' + readingTime: true, // 是否显示阅读时间估算 + wordCount: true, // 是否显示字数统计 + } + } + ] + }) +}) +``` + +@tab .vuepress/plume.config.ts + +``` ts +import { defineThemeConfig } from 'vuepress-theme-plume' + +export default defineThemeConfig({ + collections: [ + { + type: 'post', + dir: 'blog', + title: '博客', + // [!code hl:11] + meta: { + tags: true, // 是否显示标签 + /** + * 是否显示创建时间，或设置时间格式 + * - 'short': 显示为 `2022-01-01`，默认 + * - 'long': 显示为 `2022-01-01 00:00:00` + */ + createTime: true, // boolean | 'short' | 'long' + readingTime: true, // 是否显示阅读时间估算 + wordCount: true, // 是否显示字数统计 + } + } + ] +}) +``` + +::: + +在 markdown 中，通过 frontmatter 配置文章元数据： ```md --- diff --git a/theme/src/client/components/Posts/VPPostItem.vue b/theme/src/client/components/Posts/VPPostItem.vue index 3437146c..fbfc317e 100644 --- a/theme/src/client/components/Posts/VPPostItem.vue +++ b/theme/src/client/components/Posts/VPPostItem.vue @@ -2,6 +2,7 @@ import type { PostsCoverStyle, ThemePostsItem } from '../../../shared/index.js' import VPLink from '@theme/VPLink.vue' import { isMobile as _isMobile } from '@vuepress/helper/client' +import { getReadingTimeLocale, useReadingTimeLocaleConfig } from '@vuepress/plugin-reading-time/client' import { computed, onMounted, ref } from 'vue' import { withBase } from 'vuepress/client' import { useData, useInternalLink, useTagColors } from '../../composables/index.js' @@ -24,9 +25,26 @@ const { collection } = useData<'page', 'post'>() const colors = useTagColors() const { categories: categoriesLink, tags: tagsLink } = useInternalLink() -const createTime = computed(() => post.createTime?.split(/\s|T/)[0].replace(/\//g, '-')) +const metaConfig = computed(() => collection.value?.meta ?? {}) +const createTime = computed(() => { + if (!post.createTime || metaConfig.value.createTime === false) + return '' + + const format = metaConfig.value.createTime === true ? 'short' : metaConfig.value.createTime ?? 'short' + return (format !== 'short' ? post.createTime : post.createTime?.split(/\s|T/)[0]).replace(/\//g, '-') +}) const categoryList = computed(() => post.categoryList ?? []) +const readingTimeLocale = useReadingTimeLocaleConfig() +const readingTime = computed(() => { + const fallback = { time: '', words: '' } + if (!post.readingTime) + return fallback + const res = readingTimeLocale.value ? getReadingTimeLocale(post.readingTime, readingTimeLocale.value) : fallback + res.time = res.time.replace(/^\D+/, '') + return res +}) + const sticky = computed(() => { if (typeof post.sticky === 'boolean') { return post.sticky @@ -122,6 +140,11 @@ const coverStyles = computed(() => { / +
+ + {{ readingTime.words }} + {{ readingTime.time }} +