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:
 <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>
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:
 <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>
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<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;