@velonor/theme 1.0.0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,11 @@
+# @velonor/theme
+
+A Simple & Beautiful Blog Theme, based on @velonor/engine
+
+## Migration
+
+If you were using `@velonor/theme`, it is now deprecated. Please migrate to `@velonor/theme`.
+
+
+[More information](https://vitepress.open17.vip)
+

package/package.json

@@ -0,0 +1,67 @@
+{
+  "type": "module",
+  "types": "./src/types/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "config": [
+        "src/types/theme.d.ts"
+      ]
+    }
+  },
+  "version": "1.0.0",
+  "exports": {
+    ".": "./src/index.ts",
+    "./genFeed": "./src/genFeed.mjs",
+    "./config": "./src/types/theme.d.ts"
+  },
+  "main": "./src/index.ts",
+  "license": "Apache-2.0",
+  "author": "velonor <opensci@163.com>",
+  "name": "@velonor/theme",
+  "homepage": "https://vitepress.open17.vip",
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/open17/velonor.git"
+  },
+  "peerDependencies": {
+    "@giscus/vue": "^3.0.0",
+    "vitepress": "^1.0.1",
+    "unocss": "^66.0.0",
+    "@unocss/vite": "^66.0.0"
+  },
+  "keywords": [
+    "vitepress",
+    "vitepress theme",
+    "vitepress-theme",
+    "vitepress-blog",
+    "vitepress blog"
+  ],
+  "dependencies": {
+    "feed": "^4.2.2",
+    "@velonor/engine": "^0.1.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.14.0",
+    "@types/node": "^22.9.0",
+    "@typescript-eslint/eslint-plugin": "^8.13.0",
+    "@typescript-eslint/parser": "^8.13.0",
+    "eslint": "^9.14.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.30.0",
+    "globals": "^15.12.0",
+    "prettier": "^3.3.3",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.13.0"
+  },
+  "scripts": {
+    "lint": "eslint src --fix",
+    "format": "prettier --write src"
+  }
+}
+

package/src/archive.data.ts

@@ -0,0 +1,4 @@
+import { createArchiveLoader } from '@velonor/engine/loader';
+
+export default createArchiveLoader('posts/**/*.md');
+

package/src/categories.data.ts

@@ -0,0 +1,4 @@
+import { createCategoriesLoader } from '@velonor/engine/loader';
+
+export default createCategoriesLoader('posts/**/*.md');
+

package/src/components/Archive.vue

@@ -0,0 +1,121 @@
+<template>
+  <ThemeLayout>
+    <div
+      class="flex w-full flex-col bg-opacity-90 backdrop-blur-md dark:shadow-none shadow-lg border-2 border-[var(--blog-border-c)] bg-[var(--vp-c-blog-bg)] rounded-2xl py-10 px-6 md:px-10 gap-8">
+      <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
+        <div class="flex flex-col gap-2">
+          <div class="text-3xl md:text-4xl font-bold tracking-tight">{{ archiveTitle }}</div>
+          <div class="text-sm opacity-70">
+            {{ totalPosts }} {{ postsText }} · {{ yearGroups.length }} {{ yearsText }}
+          </div>
+        </div>
+        <div class="flex items-center gap-2 text-xs">
+          <a v-if="blogHomeLink" :href="withBase(blogHomeLink)"
+            class="px-3 py-1 rounded-full border border-[var(--blog-border-c)]/70 bg-[var(--vp-c-bg)]/40 hover:bg-[var(--vp-c-bg)]/60 transition">
+            {{ backToBlogText }}
+          </a>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-10">
+        <div
+          v-for="yearGroup in yearGroups"
+          :key="yearGroup.year"
+          class="rounded-2xl border border-[var(--blog-border-c)]/70 bg-[var(--vp-c-bg)]/30 px-5 md:px-7 py-6">
+          <div class="flex items-center justify-between mb-5">
+            <div class="text-2xl font-bold tracking-tight flex items-center gap-3">
+              <span class="w-1.5 h-6 rounded-full bg-[var(--vp-c-brand-2)]"></span>
+              {{ yearGroup.year }}
+            </div>
+            <div class="text-xs opacity-70">
+              {{ yearGroup.total }} {{ postsText }} · {{ yearGroup.months.length }} {{ monthsText }}
+            </div>
+          </div>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+            <details
+              v-for="monthGroup in yearGroup.months"
+              :key="`${yearGroup.year}-${monthGroup.month}`"
+              class="group rounded-xl border border-dashed border-[var(--blog-border-c)]/60 bg-[var(--vp-c-bg)]/40 p-4 transition hover:-translate-y-0.5 hover:shadow-lg hover:border-solid">
+              <summary class="list-none cursor-pointer">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-2 text-base font-semibold">
+                    <span>{{ monthGroup.monthName }}</span>
+                    <span class="text-xs px-2 py-0.5 rounded-full border border-[var(--blog-border-c)]/70 opacity-70">
+                      {{ monthGroup.posts.length }}
+                    </span>
+                  </div>
+                  <span class="text-xs opacity-60 group-open:rotate-180 transition">⌄</span>
+                </div>
+                <div class="mt-3 flex flex-col gap-1 text-sm opacity-80">
+                  <div v-for="post in monthGroup.posts.slice(0, 3)" :key="post.url" class="truncate">
+                    {{ post.frontmatter.title }}
+                  </div>
+                  <div v-if="monthGroup.posts.length > 3" class="text-xs opacity-60">
+                    +{{ monthGroup.posts.length - 3 }} more
+                  </div>
+                </div>
+              </summary>
+
+              <div class="mt-4 pt-3 border-t border-dashed border-[var(--blog-border-c)]/70">
+                <div
+                  class="px-3 py-2 flex justify-between w-full rounded-lg flex-col md:flex-row gap-1 border border-transparent hover:border-[var(--blog-border-c)] hover:bg-[var(--blog-time-line-text-bg)]/60 hover:text-[var(--blog-time-line-text)] transition"
+                  v-for="post in monthGroup.posts"
+                  :key="post.url">
+                  <a class="text-sm font-medium" :href="withBase(post.url)">
+                    {{ post.frontmatter.title }}
+                  </a>
+                  <div class="text-xs opacity-75 transition duration-150 ease-in-out">
+                    {{ formatMonthDay(post.frontmatter.date) }}
+                  </div>
+                </div>
+              </div>
+            </details>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ThemeLayout>
+</template>
+
+<script setup lang="ts">
+import { data as archiveIndex } from '../archive.data';
+import { withBase, useData } from 'vitepress';
+import ThemeLayout from './ThemeLayout.vue';
+import { type BlogPost, getLocalizedString } from '@velonor/engine';
+import { computed } from 'vue';
+import { data as pageLinks } from '../page-links.data';
+
+interface MonthGroup {
+  month: number;
+  monthName: string;
+  posts: BlogPost[];
+}
+
+interface YearGroup {
+  year: number;
+  months: MonthGroup[];
+  total: number;
+}
+
+const yearGroups = computed(() => (archiveIndex.yearGroups || []) as YearGroup[]);
+const totalPosts = computed(() => archiveIndex.totalPosts ?? 0);
+
+const { lang, theme } = useData();
+const blogHomeLink = computed(() => theme.value.blog?.homePageLink || pageLinks?.blog || '/page/blog');
+const backToBlogText = computed(() => getLocalizedString('backToBlog', lang.value));
+const archiveTitle = computed(() => (lang.value || '').startsWith('zh') ? '归档' : 'Archive');
+const postsText = computed(() => (lang.value || '').startsWith('zh') ? '文章' : 'Posts');
+const yearsText = computed(() => (lang.value || '').startsWith('zh') ? '年份' : 'Years');
+const monthsText = computed(() => (lang.value || '').startsWith('zh') ? '月份' : 'Months');
+
+const formatMonthDay = (value: unknown) => {
+  if (!value) return '';
+  const date = new Date(value as any);
+  if (Number.isNaN(date.getTime())) return String(value).slice(5, 10);
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${month}-${day}`;
+};
+</script>
+

package/src/components/Blog.vue

@@ -0,0 +1,232 @@
+<script setup>
+import { useData, withBase } from 'vitepress';
+import { computed, watch } from 'vue';
+import ThemeLayout from './ThemeLayout.vue';
+import {
+  DEFAULT_PAGE_SIZE,
+  DEFAULT_PAGE_GROUP_SIZE,
+  getLocalizedString,
+  usePagination,
+  formatDate,
+} from '@velonor/engine/client';
+import { useTagFilter } from '../composables/useTagFilter';
+import { useCategories } from '../composables/useCategories';
+
+const { theme, lang } = useData();
+const blogConfig = computed(() => theme.value.blog || {});
+
+const pageSize = computed(
+  () => blogConfig.value.pageSize || theme.value.home?.postsPerPage || DEFAULT_PAGE_SIZE
+);
+const pageGroupSize = computed(
+  () => blogConfig.value.pageGroupSize || DEFAULT_PAGE_GROUP_SIZE
+);
+
+const locale = computed(() => {
+  if (typeof navigator !== 'undefined' && navigator.language) return navigator.language;
+  return lang.value || 'en-US';
+});
+
+const { selectedTags } = useTagFilter();
+const { filterPostsByActiveCategory, activeCategory } = useCategories({
+  otherLabel: getLocalizedString('other', lang.value),
+});
+
+const filteredPosts = computed(() => {
+  const byCategory = filterPostsByActiveCategory(activeCategory.value);
+  if (!selectedTags.value.length) return byCategory;
+  return byCategory.filter((item) => {
+    const tags = item.frontmatter.tags || [];
+    return selectedTags.value.some((tag) => tags.includes(tag));
+  });
+});
+
+const blogTitle = computed(() => (lang.value || '').startsWith('zh') ? '博客' : 'Blog');
+const postsText = computed(() => (lang.value || '').startsWith('zh') ? '文章' : 'Posts');
+
+
+const {
+  currentPage,
+  totalPages,
+  pageRange,
+  paginatedItems,
+  setPage,
+  nextPage,
+  prevPage,
+  jumpInput,
+  jumpToInput,
+} = usePagination(filteredPosts, {
+  pageSize,
+  pageGroupSize: pageGroupSize.value,
+  pageParam: 'page',
+});
+
+watch([selectedTags, activeCategory, pageSize], () => {
+  setPage(1);
+});
+
+const hashString = (value) => {
+  let hash = 0;
+  for (let i = 0; i < value.length; i += 1) {
+    hash = (hash << 5) - hash + value.charCodeAt(i);
+    hash |= 0;
+  }
+  return Math.abs(hash);
+};
+
+const getCoverFallbackStyle = (post) => {
+  const title = post?.frontmatter?.title || post?.title || post?.url || 'post';
+  const hash = hashString(String(title));
+  const hue = hash % 360;
+  const hue2 = (hue + 40 + (hash % 60)) % 360;
+  const hue3 = (hue + 120 + (hash % 90)) % 360;
+  const sat = 30 + (hash % 20);
+  const light = 20 + (hash % 15);
+  const angle = 120 + (hash % 40);
+  const gradient = `linear-gradient(${angle}deg, hsla(${hue}, ${sat}%, ${light + 14}%, 0.42), hsla(${hue2}, ${sat}%, ${light}%, 0.22))`;
+  const dots = `radial-gradient(hsla(${hue2}, ${sat}%, ${light + 20}%, 0.35) 1px, transparent 1px)`;
+  return {
+    backgroundImage: `${gradient}, ${dots}`,
+    backgroundSize: 'cover, 16px 16px',
+    backgroundPosition: 'center, 0 0',
+  };
+};
+
+const changePage = (page) => {
+  setPage(page);
+  if (typeof window !== 'undefined') {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+};
+
+const jumpToPage = () => {
+  jumpToInput();
+  if (typeof window !== 'undefined') {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+};
+</script>
+
+<template>
+  <ThemeLayout :showContent="true">
+    <div class="w-full flex flex-col gap-3 md:gap-4 mb-1">
+      <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
+        <div class="flex flex-col gap-2">
+          <div class="text-3xl md:text-4xl font-bold tracking-tight">{{ blogTitle }}</div>
+          <div class="text-sm opacity-70">
+            {{ filteredPosts.length }} {{ postsText }}
+          </div>
+        </div>
+        <div class="flex items-center gap-2 text-xs flex-wrap">
+          <span v-if="activeCategory"
+            class="px-3 py-1 rounded-full border border-[var(--blog-tag-text-2)] bg-[var(--blog-tag-bg-2)]/90 text-[var(--blog-tag-text-2)]">
+            分类: {{ activeCategory }}
+          </span>
+          <span v-if="selectedTags.length"
+            class="px-3 py-1 rounded-full border border-[var(--blog-tag-text-1)] bg-[var(--blog-tag-bg-1)] text-[var(--blog-tag-text-1)]">
+            标签: {{ selectedTags.join(" / ") }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <!-- 博客文章 -->
+    <div class="w-full flex justify-center items-center relative" v-for="(post, idx) of paginatedItems" :key="post.url">
+      <a :href="withBase(post.url)" class="w-full rounded-2xl">
+        <div
+          class="bg-opacity-90 backdrop-blur-md w-full rounded-2xl flex flex-col md:flex-row dark:shadow-none shadow-lg border-2 border-[var(--blog-border-c)] bg-[var(--vp-c-blog-bg)] relative transition duration-200 hover:-translate-y-0.5 hover:shadow-xl overflow-hidden"
+          :class="idx % 2 === 1 ? 'md:flex-row-reverse' : ''">
+          <!-- 置顶标识 -->
+          <div v-if="post.frontmatter.pin" class=" absolute top-0 left-0 w-0 h-0">
+            <div
+              class="z-20 absolute top-0 left-0 w-0 h-0 border-t-[2rem] border-r-transparent border-r-[2rem] border-[var(--vp-c-blog-bg)] rounded-tl-2xl">
+            </div>
+            <div
+              class="z-10 absolute top-0 left-0 w-0 h-0 border-t-[3rem] border-r-transparent border-r-[3rem] border-[var(--vp-c-brand-2)] rounded-tl-2xl">
+            </div>
+          </div>
+          <!-- 文章图片 -->
+          <div class="w-full md:w-2/5 bg-[var(--vp-c-bg)]/30">
+            <div class="w-full h-48 md:h-full min-h-48 relative overflow-hidden" v-if="post.frontmatter.cover">
+              <img :src="post.frontmatter.cover" alt=""
+                class="w-full h-full object-cover transition duration-300 scale-100 hover:scale-105" />
+            </div>
+            <div v-else class="w-full h-48 md:h-full min-h-48" :style="getCoverFallbackStyle(post)"></div>
+          </div>
+          <div class="w-full md:w-3/5 flex flex-col gap-3 px-6 md:px-8 py-6">
+            <!-- 标题 -->
+            <div class="text-lg md:text-xl font-semibold tracking-tight">
+              <span>{{ post.frontmatter.title }}</span>
+            </div>
+            <!-- 摘要 -->
+            <div v-html="post.excerpt || post.frontmatter.desc" class="text-sm leading-relaxed opacity-80"></div>
+            <!-- 文章信息 -->
+            <div class="flex justify-between w-full items-center flex-wrap text-sm gap-3 mt-auto pt-2">
+              <div class="flex justify-end items-end gap-2 flex-wrap">
+                <div v-for="(tag, idx) in post.frontmatter.tags" :key="`${post.url}-tag-${idx}`"
+                  class="bg-[var(--blog-tag-bg-2)]/90 text-[var(--blog-tag-text-2)] border-[var(--blog-tag-text-2)] px-2.5 py-0.5 rounded-full text-xs">
+                  <span>{{ tag }}</span>
+                </div>
+              </div>
+              <div class="text-xs opacity-75">{{ formatDate(post.frontmatter.date, locale) }}</div>
+            </div>
+          </div>
+        </div>
+      </a>
+    </div>
+    <!-- 分页 -->
+    <div class="flex justify-center items-center gap-2 border-0 flex-row w-full px-5" v-if="totalPages > 1">
+      <!-- 上一页 -->
+      <button @click="prevPage()" :disabled="currentPage <= 1"
+        class="border-2 px-3 h-8 text-center flex justify-center items-center cursor-pointer bg-[var(--vp-c-blog-bg)] rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed">
+        {{ getLocalizedString('prev', lang) }}
+      </button>
+
+      <!-- 页码 -->
+      <div class="flex justify-center items-center gap-2">
+        <!-- 第一页（如果不在范围内） -->
+        <template v-if="pageRange[0] > 1">
+          <div @click="changePage(1)"
+            class="border-2 w-8 h-8 text-center flex justify-center items-center cursor-pointer rounded-md bg-[var(--vp-c-blog-bg)]">
+            1
+          </div>
+          <span v-if="pageRange[0] > 2" class="text-sm">...</span>
+        </template>
+
+        <!-- 页码范围 -->
+        <div @click="changePage(page)" v-for="page in pageRange" :key="page"
+          class="border-2 w-8 h-8 text-center flex justify-center items-center cursor-pointer rounded-md" :class="{
+            'bg-[var(--vp-c-brand-1)] text-white border-[var(--vp-c-brand-1)]': page === currentPage,
+            'bg-[var(--vp-c-blog-bg)]': page !== currentPage,
+          }">
+          {{ page }}
+        </div>
+
+        <!-- 最后一页（如果不在范围内） -->
+        <template v-if="pageRange[pageRange.length - 1] < totalPages">
+          <span v-if="pageRange[pageRange.length - 1] < totalPages - 1" class="text-sm">...</span>
+          <div @click="changePage(totalPages)"
+            class="border-2 w-8 h-8 text-center flex justify-center items-center cursor-pointer rounded-md bg-[var(--vp-c-blog-bg)]">
+            {{ totalPages }}
+          </div>
+        </template>
+      </div>
+
+      <!-- 跳转到页 -->
+      <div class="flex items-center gap-2 ml-2">
+        <input type="number" min="1" :max="totalPages" v-model.trim="jumpInput" @keyup.enter="jumpToPage"
+          class="w-16 h-8 border-2 rounded-md bg-[var(--vp-c-blog-bg)] px-2 text-sm" :placeholder="`${currentPage}/${totalPages}`" />
+        <button @click="jumpToPage"
+          class="border-2 px-3 h-8 text-center flex justify-center items-center cursor-pointer bg-[var(--vp-c-blog-bg)] rounded-md text-sm">
+          跳转
+        </button>
+      </div>
+
+      <!-- 下一页 -->
+      <button @click="nextPage()" :disabled="currentPage >= totalPages"
+        class="border-2 px-3 h-8 text-center flex justify-center items-center cursor-pointer bg-[var(--vp-c-blog-bg)] rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed">
+        {{ getLocalizedString('next', lang) }}
+      </button>
+    </div>
+  </ThemeLayout>
+</template>
+