From ca51a345fb8b680804555b4b96fdae1d894c6264 Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Thu, 5 Mar 2026 14:41:30 +0800 Subject: [PATCH] fix(theme): fix the calculation error in the post cover ratio and add link to cover, close #863 (#865) --- docs/en/guide/quick-start/collection-post.md | 38 +++++++++++++------ docs/guide/quick-start/collection-post.md | 37 ++++++++++++------ .../client/components/Posts/VPPostItem.vue | 15 ++++++-- 3 files changed, 65 insertions(+), 25 deletions(-) diff --git a/docs/en/guide/quick-start/collection-post.md b/docs/en/guide/quick-start/collection-post.md index 125f5298..5bbef99e 100644 --- a/docs/en/guide/quick-start/collection-post.md +++ b/docs/en/guide/quick-start/collection-post.md @@ -595,7 +595,7 @@ title: Article Title cover: /images/cover.jpg coverStyle: layout: left - ratio: 16:9 + ratio: 16/9 width: 300 --- ``` @@ -606,7 +606,7 @@ Display effect: @@ -621,7 +621,7 @@ title: Article Title cover: /images/cover.jpg coverStyle: layout: left - ratio: 16:9 + ratio: 16/9 width: 300 compact: true --- @@ -634,7 +634,7 @@ Display effect: :post="{ path: '/article/ecxnxxd0/', title: 'Article Title', categoryList: [{id:'65f30c',sort:4,name:'Tutorial'}], createTime: '2024/09/18 09:19:36', lang:'en-US', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing', - coverStyle: { layout: 'left', ratio: '16:9', width: 300, compact: true } }" + coverStyle: { layout: 'left', ratio: '16/9', width: 300, compact: true } }" :index="1" /> @@ -650,7 +650,7 @@ title: Article Title cover: /images/cover.jpg coverStyle: layout: top - ratio: 16:9 + ratio: 16/9 width: 300 --- ``` @@ -662,7 +662,7 @@ Display effect: :post="{ path: '/article/ecxnxxd0/', title: 'Article Title', categoryList: [{id:'65f30c',sort:4,name:'Tutorial'}], createTime: '2024/09/18 09:19:36', lang:'en-US', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing', - coverStyle: { layout: 'top', ratio: '16:9', width: 300 } }" + coverStyle: { layout: 'top', ratio: '16/9', width: 300 } }" :index="1" /> @@ -684,7 +684,7 @@ export default defineUserConfig({ title: 'Blog', postCover: { layout: 'left', - ratio: '16:9', + ratio: '16/9', width: 300, compact: true } @@ -701,12 +701,28 @@ type PostCoverLayout = 'left' | 'right' | 'odd-left' | 'odd-right' | 'top' interface PostCoverStyle { layout?: PostCoverLayout // Layout position - ratio?: number | `${number}:${number}` // Aspect ratio, default '4:3' + ratio?: number | `${number}/${number}` | `${number}:${number}` // Aspect ratio, default '4/3' width?: number // Width (effective for left/right layouts), default 240 compact?: boolean // Compact mode, default false } ``` +:::warning Known Issue: Parsing Problem with `ratio` in Markdown Frontmatter + +When defining `ratio` in markdown frontmatter, using the `:` separator may cause parsing errors. +It is recommended to use the `/` separator instead. + +If you still prefer to use `:`, you can wrap it with `''`. Example: + +```md '16:9' +--- +coverStyle: + ratio: '16:9' # instead of ratio: 16:9 +--- +``` + +::: + Special layout modes: - `odd-left` - Odd items left, even items right @@ -719,21 +735,21 @@ Special layout modes: :post="{ path: '/article/ecxnxxd0/', title: 'Article Title', categoryList: [{id:'65f30c',sort:4,name:'Tutorial'}], createTime: '2024/09/18 09:19:36', lang:'en-US', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing', - coverStyle: { layout: 'odd-left', ratio: '16:9', width: 300, compact: true } }" + coverStyle: { layout: 'odd-left', ratio: '16/9', width: 300, compact: true } }" :index="0" /> diff --git a/docs/guide/quick-start/collection-post.md b/docs/guide/quick-start/collection-post.md index b51276a0..ba493988 100644 --- a/docs/guide/quick-start/collection-post.md +++ b/docs/guide/quick-start/collection-post.md @@ -589,7 +589,7 @@ title: 文章标题 cover: /images/cover.jpg coverStyle: layout: left - ratio: 16:9 + ratio: 16/9 width: 300 --- ``` @@ -600,7 +600,7 @@ coverStyle: @@ -615,7 +615,7 @@ title: 文章标题 cover: /images/cover.jpg coverStyle: layout: left - ratio: 16:9 + ratio: 16/9 width: 300 compact: true --- @@ -628,7 +628,7 @@ coverStyle: :post="{ path: '/article/ecxnxxd0/', title: '文章标题', categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36', lang:'zh-CN', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing', - coverStyle: { layout: 'left', ratio: '16:9', width: 300, compact: true } }" + coverStyle: { layout: 'left', ratio: '16/9', width: 300, compact: true } }" :index="1" /> @@ -644,7 +644,7 @@ title: 文章标题 cover: /images/cover.jpg coverStyle: layout: top - ratio: 16:9 + ratio: 16/9 width: 300 --- ``` @@ -656,7 +656,7 @@ coverStyle: :post="{ path: '/article/ecxnxxd0/', title: '文章标题', categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36', lang:'zh-CN', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing', - coverStyle: { layout: 'top', ratio: '16:9', width: 300 } }" + coverStyle: { layout: 'top', ratio: '16/9', width: 300 } }" :index="1" /> @@ -678,7 +678,7 @@ export default defineUserConfig({ title: '博客', postCover: { layout: 'left', - ratio: '16:9', + ratio: '16/9', width: 300, compact: true } @@ -695,12 +695,27 @@ type PostCoverLayout = 'left' | 'right' | 'odd-left' | 'odd-right' | 'top' interface PostCoverStyle { layout?: PostCoverLayout // 布局位置 - ratio?: number | `${number}:${number}` // 宽高比，默认 '4:3' + ratio?: number | `${number}/${number}` | `${number}:${number}` // 宽高比，默认 '4/3' width?: number // 宽度（左右布局生效），默认 240 compact?: boolean // 紧凑模式，默认 false } ``` +:::warning 已知问题: `ratio` 在 markdown frontmatter 下解析问题 + +在 markdown frontmatter 中定义 `ratio` 时，使用 `:` 分隔符会导致解析错误，建议使用 `/` 分隔符。 + +如果您依然期望使用 `:` ，可以使用 `''` 包裹起来。示例： + +```md /'16:9'/ +--- +coverStyle: + ratio: '16:9' # 而不是 ratio: 16:9 +--- +``` + +::: + 特殊布局模式： - `odd-left` - 奇数项居左，偶数项居右 @@ -713,21 +728,21 @@ interface PostCoverStyle { :post="{ path: '/article/ecxnxxd0/', title: '文章标题', categoryList: [{id:'65f30c',sort:4,name:'教程'}], createTime: '2024/09/18 09:19:36', lang:'zh-CN', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing', - coverStyle: { layout: 'odd-left', ratio: '16:9', width: 300, compact: true } }" + coverStyle: { layout: 'odd-left', ratio: '16/9', width: 300, compact: true } }" :index="0" /> diff --git a/theme/src/client/components/Posts/VPPostItem.vue b/theme/src/client/components/Posts/VPPostItem.vue index c3cc04ea..1a7236cb 100644 --- a/theme/src/client/components/Posts/VPPostItem.vue +++ b/theme/src/client/components/Posts/VPPostItem.vue @@ -77,7 +77,7 @@ const cover = computed(() => { return null const opt = collection.value?.postCover ?? 'right' const options = typeof opt === 'string' ? { layout: opt } : opt - return { layout: 'right', ratio: '4:3', ...options, ...post.coverStyle } + return { layout: 'right', ratio: '4/3', ...options, ...post.coverStyle } }) const coverLayout = computed(() => { @@ -101,6 +101,7 @@ const coverCompact = computed(() => { const coverStyles = computed(() => { if (!cover.value) return null + let ratio: number if (typeof cover.value.ratio === 'number') { ratio = cover.value.ratio @@ -127,7 +128,9 @@ const coverStyles = computed(() => { v-if="post.cover" class="post-cover" data-allow-mismatch :class="{ compact: coverCompact }" :style="coverStyles" > - + + +

@@ -230,10 +233,16 @@ const coverStyles = computed(() => { } } -.post-cover img { +.post-cover :deep(.vp-link) { position: absolute; top: 0; left: 0; + display: inline-block; + width: 100%; + height: 100%; +} + +.post-cover img { width: 100%; height: 100%; object-fit: cover;