yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

fix(theme): fix the calculation error in the post cover ratio and add link to cover, close #863 (#865)

Browse Source
This commit is contained in:
pengzhanbo 2026-03-05 14:41:30 +08:00 committed by GitHub
parent f11e8501d0
commit ca51a345fb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 65 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
docs/en/guide/quick-start/collection-post.md
View File

@ -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:
<VPPostItem
: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 } }"
lang:'en-US', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing', coverStyle: { layout: 'left', ratio: '16/9', width: 300 } }"
:index="1"
/>
</div>
@ -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"
/>
</div>
@ -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"
/>
</div>
@ -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"
/>
<VPPostItem
: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="1"
/>
<VPPostItem
: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="2"
/>
</div>

37
docs/guide/quick-start/collection-post.md
View File

@ -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:
<VPPostItem
: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 } }"
lang:'zh-CN', excerpt:'', cover: 'https://api.pengzhanbo.cn/wallpaper/bing', coverStyle: { layout: 'left', ratio: '16/9', width: 300 } }"
:index="1"
/>
</div>
@ -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"
/>
</div>
@ -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"
/>
</div>
@ -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"
/>
<VPPostItem
: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="1"
/>
<VPPostItem
: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="2"
/>
</div>

15
theme/src/client/components/Posts/VPPostItem.vue
View File

@ -77,7 +77,7 @@ const cover = computed<PostsCoverStyle | null>(() => {
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"
>
<img :src="withBase(post.cover)" :alt="post.title" loading="lazy">
<VPLink :href="post.path">
<img :src="withBase(post.cover)" :alt="post.title" loading="lazy">
</VPLink>
</div>
<div class="post-item-content">
<h3>
@ -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;