@sugarat/theme 0.4.13 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.4.13",
+  "version": "0.5.1",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -20,6 +20,8 @@
   "exports": {
     "./node": {
       "types": "./node.d.ts",
+      "import": "./node.mjs",
+      "require": "./node.js",
       "default": "./node.js"
     },
     "./package.json": "./package.json",
@@ -29,6 +31,7 @@
   "files": [
     "node.d.ts",
     "node.js",
+    "node.mjs",
     "src",
     "types"
   ],
@@ -42,29 +45,29 @@
     "@mermaid-js/mermaid-mindmap": "^9.3.0",
     "@vue/shared": "^3.4.26",
     "@vueuse/core": "^9.13.0",
-    "fast-glob": "^3.3.2",
     "markdown-it-task-checkbox": "^1.0.6",
     "mermaid": "^10.9.0",
     "oh-my-live2d": "^0.19.3",
     "swiper": "^11.1.1",
     "vitepress-markdown-timeline": "^1.2.1",
+    "vitepress-plugin-group-icons": "^1.2.4",
     "vitepress-plugin-mermaid": "2.0.13",
     "vitepress-plugin-tabs": "0.2.0",
-    "@sugarat/theme-shared": "0.0.2",
-    "vitepress-plugin-rss": "0.2.10",
-    "vitepress-plugin-announcement": "0.1.1",
-    "vitepress-plugin-pagefind": "0.4.10"
+    "@sugarat/theme-shared": "0.0.3",
+    "vitepress-plugin-pagefind": "0.4.10",
+    "vitepress-plugin-announcement": "0.1.3",
+    "vitepress-plugin-rss": "0.3.0"
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "artalk": "^2.8.5",
     "element-plus": "^2.7.2",
-    "pagefind": "^1.1.0",
+    "pagefind": "^1.1.1",
     "sass": "^1.77.8",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
-    "vitepress": "1.3.4",
-    "vue": "^3.4.26",
+    "vite": "^5.4.9",
+    "vitepress": "1.4.1",
+    "vue": "^3.5.12",
     "vitepress-plugin-51la": "0.1.0"
   },
   "scripts": {

package/src/components/BlogAlert.vue

@@ -1,30 +1,31 @@
 <script lang="ts" setup>
 import { ElAlert } from 'element-plus'
 import { onMounted, ref } from 'vue'
-import { useBlogConfig } from '../composables/config/blog'
+import { useAlertConfig } from '../composables/config/blog'
 
-const { alert: alertProps } = useBlogConfig()
+// TODO：拆分插件，对标公告插件
+const alertProps = useAlertConfig()
 const show = ref(false)
 const storageKey = 'theme-blog-alert'
 const closeFlag = `${storageKey}-close`
 onMounted(() => {
   // 取旧值
   const oldValue = localStorage.getItem(storageKey)
-  const newValue = JSON.stringify(alertProps)
+  const newValue = JSON.stringify(alertProps.value)
   localStorage.setItem(storageKey, newValue)
 
   // >= 0 每次都展示，区别是否自动消失
-  if (Number(alertProps?.duration) >= 0) {
+  if (Number(alertProps?.value?.duration) >= 0) {
     show.value = true
-    if (alertProps?.duration) {
+    if (alertProps?.value?.duration) {
       setTimeout(() => {
         show.value = false
-      }, alertProps?.duration)
+      }, alertProps?.value?.duration)
     }
     return
   }
 
-  if (oldValue !== newValue && alertProps?.duration === -1) {
+  if (oldValue !== newValue && alertProps?.value?.duration === -1) {
     // 当做新值处理
     show.value = true
     localStorage.removeItem(closeFlag)
@@ -32,14 +33,14 @@ onMounted(() => {
   }
 
   // 新旧相等，判断是否点击过close，没点击关闭依然展示
-  if (oldValue === newValue && alertProps?.duration === -1 && !localStorage.getItem(closeFlag)) {
+  if (oldValue === newValue && alertProps?.value?.duration === -1 && !localStorage.getItem(closeFlag)) {
     show.value = true
   }
 })
 
 function handleClose() {
   show.value = false
-  if (alertProps?.duration === -1) {
+  if (alertProps?.value?.duration === -1) {
     localStorage.setItem(closeFlag, `${+new Date()}`)
   }
 }

package/src/components/BlogArticleAnalyze.vue

@@ -11,14 +11,14 @@ import {
   EditPen,
   UserFilled
 } from '@element-plus/icons-vue'
-import { useAnalyzeTitles, useBlogConfig, useCurrentArticle, useDocMetaInsertPosition, useDocMetaInsertSelector, useFormatShowDate } from '../composables/config/blog'
+import { useAnalyzeTitles, useArticleConfig, useAuthorList, useCurrentArticle, useDocMetaInsertPosition, useDocMetaInsertSelector, useFormatShowDate, useGlobalAuthor } from '../composables/config/blog'
 import countWord, { formatDate } from '../utils/client'
-import type { Theme } from '../composables/config'
 import BlogDocCover from './BlogDocCover.vue'
 
 const formatShowDate = useFormatShowDate()
-const { article, authorList } = useBlogConfig()
-const readingTimePosition = article?.readingTimePosition || 'inline'
+const article = useArticleConfig()
+const authorList = useAuthorList()
+const readingTimePosition = computed(() => article?.value?.readingTimePosition || 'inline')
 
 const { frontmatter } = useData()
 const tags = computed(() => {
@@ -33,7 +33,7 @@ const tags = computed(() => {
   ]
 })
 const showAnalyze = computed(
-  () => frontmatter.value?.readingTime ?? article?.readingTime ?? true
+  () => frontmatter.value?.readingTime ?? article?.value?.readingTime ?? true
 )
 
 const wordCount = ref(0)
@@ -102,7 +102,7 @@ onMounted(() => {
 
 const currentArticle = useCurrentArticle()
 const publishDate = computed(() => {
-  return formatShowDate(currentArticle.value?.meta?.date || '')
+  return formatShowDate.value(currentArticle.value?.meta?.date || '')
 })
 
 const hoverDate = computed(() => {
@@ -111,15 +111,14 @@ const hoverDate = computed(() => {
 
 const hiddenTime = computed(() => frontmatter.value.date === false)
 
-const { theme } = useData<Theme.Config>()
-const globalAuthor = computed(() => theme.value.blog?.author || '')
+const globalAuthor = useGlobalAuthor()
 const author = computed(
   () =>
     (frontmatter.value.author || currentArticle.value?.meta.author)
     ?? globalAuthor.value
 )
 const currentAuthorInfo = computed(() =>
-  authorList?.find(v => author.value === v.nickname)
+  authorList?.value?.find(v => author.value === v.nickname)
 )
 const hiddenAuthor = computed(() => frontmatter.value.author === false)
 

package/src/components/BlogAuthor.vue

@@ -1,20 +1,21 @@
 <script setup>
 import { useData, withBase } from 'vitepress'
 import { computed } from 'vue'
-import { useBlogConfig } from '../composables/config/blog'
+import { useBlogConfig, useGlobalAuthor, useHomeConfig } from '../composables/config/blog'
 
-const { home } = useBlogConfig()
+const home = useHomeConfig()
 const { frontmatter, site } = useData()
+const globalAuthor = useGlobalAuthor()
 const author = computed(() =>
   frontmatter.value.author
   ?? frontmatter.value?.blog?.author
-  ?? home?.author
-  ?? site.value.themeConfig?.blog?.author
+  ?? home?.value?.author
+  ?? globalAuthor?.value
 )
 const logo = computed(() =>
   frontmatter.value?.logo
   ?? frontmatter.value?.blog?.logo
-  ?? home?.logo
+  ?? home?.value?.logo
   ?? site.value?.themeConfig?.logo
   ?? '/logo.png'
 )

package/src/components/BlogBackToTop.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import { useElementSize, useScroll } from '@vueuse/core'
-import { ElIcon } from 'element-plus'
 import { computed, ref } from 'vue'
-import { vOuterHtml } from '../directives'
-import { useBackToTopConfig } from '../composables/config/blog'
+import { useBackToTopConfig, useOpenBackToTop } from '../composables/config/blog'
+import Icon from './Icon.vue'
 
 function handleBackRoTop() {
   window.scrollTo({ top: 0, behavior: 'smooth' })
@@ -15,29 +14,28 @@ const { width } = useElementSize(el)
 const docWidth = computed(() => `${width.value}px`)
 
 const backToTopConfig = useBackToTopConfig()
-const open = computed(() => !!(backToTopConfig ?? true))
+const open = useOpenBackToTop()
 
 const { y } = useScroll(window)
 const defaultTriggerHeight = 450
-const triggerTop = computed(() => (typeof backToTopConfig === 'boolean' ? undefined : backToTopConfig?.top) ?? defaultTriggerHeight)
+const triggerTop = computed(() => backToTopConfig.value?.top ?? defaultTriggerHeight)
 
 const show = computed(() => width && y.value > triggerTop.value)
 
-const iconSVGStr = computed(() => typeof backToTopConfig === 'boolean' ? '' : backToTopConfig?.icon)
+const iconSVGStr = computed(() => backToTopConfig?.value?.icon)
 </script>
 
 <template>
   <div v-if="open" v-show="show" class="back-to-top">
     <span class="icon-wrapper" @click="handleBackRoTop">
-      <ElIcon :size="20">
-        <i v-if="iconSVGStr" v-outer-html="iconSVGStr" />
-        <svg v-else width="512" height="512" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <Icon :size="20" :icon="iconSVGStr">
+        <svg width="512" height="512" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path
             fill="currentColor"
             d="m20 22l-3.86-1.55c.7-1.53 1.2-3.11 1.51-4.72zM7.86 20.45L4 22l2.35-6.27c.31 1.61.81 3.19 1.51 4.72M12 2s5 2 5 10c0 3.1-.75 5.75-1.67 7.83A2 2 0 0 1 13.5 21h-3a2 2 0 0 1-1.83-1.17C7.76 17.75 7 15.1 7 12c0-8 5-10 5-10m0 10c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2s.9 2 2 2"
           />
         </svg>
-      </ElIcon>
+      </Icon>
     </span>
   </div>
 </template>

package/src/components/BlogButtonAfterArticle.vue

@@ -1,31 +1,22 @@
 <script lang="ts" setup>
 import { ElButton } from 'element-plus'
 import { computed, ref, watch } from 'vue'
-import { useData } from 'vitepress'
-import { useBlogConfig } from '../composables/config/blog'
+import { useButtonAfterConfig } from '../composables/config/blog'
 import { aliPaySVG, weChatPaySVG } from '../constants/svg'
 
-const { buttonAfterArticle: _buttonAfterArticle } = useBlogConfig()
-const { frontmatter } = useData()
-const frontmatterConfig = computed(() => frontmatter.value.buttonAfterArticle)
-
-const buttonAfterArticleConfig = computed(() => {
-  if (frontmatterConfig.value === false || (!frontmatterConfig.value && !_buttonAfterArticle)) {
-    return false
-  }
-
-  return { ..._buttonAfterArticle, ...frontmatterConfig.value }
-})
+const buttonAfterArticleConfig = useButtonAfterConfig()
 
 const showContent = ref(false)
 
 watch(buttonAfterArticleConfig, () => {
-  showContent.value = !!buttonAfterArticleConfig.value?.expand
+  showContent.value = buttonAfterArticleConfig.value !== false && !!buttonAfterArticleConfig.value?.expand
 }, {
   immediate: true
 })
 
 const svg = computed(() => {
+  if (buttonAfterArticleConfig.value === false)
+    return ''
   const icon = buttonAfterArticleConfig.value?.icon
   if (icon === 'aliPay') {
     return aliPaySVG

package/src/components/BlogCommentWrapper.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { useElementSize, useElementVisibility, useWindowSize } from '@vueuse/core'
-import { useData } from 'vitepress'
-import { computed, h, ref } from 'vue'
-import { ElIcon } from 'element-plus'
+import { computed, ref } from 'vue'
 import { Comment } from '@element-plus/icons-vue'
-import { useBlogConfig } from '../composables/config/blog'
+import { useCommentConfig, useOpenCommentConfig } from '../composables/config/blog'
+import Icon from './Icon.vue'
 
-const { frontmatter } = useData()
 const commentEl = ref(null)
 const commentIsVisible = useElementVisibility(commentEl)
 
@@ -17,28 +15,13 @@ function handleScrollToComment() {
   })
 }
 
-const { comment: _comment } = useBlogConfig()
-const commentConfig = computed(() =>
-  _comment === false ? undefined : _comment
-)
+const commentConfig = useCommentConfig()
 
-const show = computed(() => {
-  return _comment && frontmatter.value.comment !== false
-})
+const show = useOpenCommentConfig()
 
 const { width } = useWindowSize()
 const mobileMinify = computed(() => width.value < 768 && (commentConfig.value?.mobileMinify ?? true))
 
-const CommentIcon = commentConfig.value?.icon
-  ? h('i', {
-    onVnodeMounted(vnode) {
-      if (vnode.el) {
-        vnode.el.outerHTML = commentConfig.value?.icon
-      }
-    },
-  })
-  : h(Comment)
-
 const $vpDoc = document.querySelector('.vp-doc')
 const el = ref<any>($vpDoc)
 const { width: _docWidth } = useElementSize(el)
@@ -54,17 +37,17 @@ const labelText = computed(() => {
     <slot />
     <div v-show="!commentIsVisible" class="comment-btn-wrapper">
       <span v-if="!mobileMinify && labelText" class="icon-wrapper-text" @click="handleScrollToComment">
-        <ElIcon :size="20">
-          <CommentIcon />
-        </ElIcon>
+        <Icon :size="20" :icon="commentConfig?.icon">
+          <Comment />
+        </Icon>
         <span class="text">
           {{ labelText }}
         </span>
       </span>
       <span v-else class="icon-wrapper" @click="handleScrollToComment">
-        <ElIcon :size="20">
-          <CommentIcon />
-        </ElIcon>
+        <Icon :size="20" :icon="commentConfig?.icon">
+          <Comment />
+        </Icon>
       </span>
     </div>
   </div>

package/src/components/BlogDocCover.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useData } from 'vitepress'
 import { computed } from 'vue'
-import { useBlogConfig, useCurrentArticle } from '../composables/config/blog'
+import { useArticleConfig, useCurrentArticle } from '../composables/config/blog'
 
 const { frontmatter } = useData()
 const cover = computed(() => frontmatter.value.cover)
@@ -9,9 +9,9 @@ const cover = computed(() => frontmatter.value.cover)
 const currentArticle = useCurrentArticle()
 const realCover = computed<string>(() => import.meta.env.DEV ? cover.value : currentArticle.value?.meta?.cover)
 
-const { article } = useBlogConfig()
+const article = useArticleConfig()
 const hiddenCover = computed(
-  () => frontmatter.value?.hiddenCover ?? article?.hiddenCover ?? false
+  () => frontmatter.value?.hiddenCover ?? article?.value?.hiddenCover ?? false
 )
 </script>
 

package/src/components/BlogFooter.vue

@@ -5,9 +5,10 @@ import packageJSON from '../../package.json'
 import { copyrightSVG, icpSVG, themeSVG } from '../constants/svg'
 import { vOuterHtml } from '../directives'
 
-const footerData = useHomeFooterConfig()
+const footerConfig = useHomeFooterConfig()
 
 const renderData = computed(() => {
+  const footerData = footerConfig.value
   if (!footerData) {
     return []
   }
@@ -104,6 +105,7 @@ const renderData = computed(() => {
             </a>
             <span v-else>{{ item.name }}</span>
           </span>
+          <!-- TODO: 理论上存在问题，待优化 -->
           <span v-else v-outer-html="item" />
         </template>
       </p>

package/src/components/BlogFriendLink.vue

@@ -3,7 +3,7 @@ import { ElAvatar } from 'element-plus'
 import { useDark, useIntervalFn } from '@vueuse/core'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import Swiper from 'swiper'
-import { useBlogConfig } from '../composables/config/blog'
+import { useFriendData } from '../composables/config/blog'
 import { getImageUrl, shuffleArray } from '../utils/client'
 import type { Theme } from '../'
 import { friendLinkSvgStr } from '../constants/svg'
@@ -12,13 +12,13 @@ const isDark = useDark({
   storageKey: 'vitepress-theme-appearance'
 })
 
-const { friend } = useBlogConfig()
+const friendData = useFriendData()
 const friendConfig = computed<Theme.FriendConfig>(() => ({
   list: [],
   random: false,
   limit: Number.MAX_SAFE_INTEGER,
   title: `${friendLinkSvgStr}友情链接`,
-  ...(Array.isArray(friend) ? { list: friend } : friend)
+  ...(Array.isArray(friendData.value) ? { list: friendData.value } : friendData.value)
 }))
 
 const limit = computed(() => {
@@ -89,6 +89,7 @@ onMounted(() => {
   }
 })
 
+// TODO: SSR渲染支持
 onUnmounted(() => {
   pause()
 })

package/src/components/BlogHomeBanner.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useData } from 'vitepress'
-import { useBlogConfig } from '../composables/config/blog'
+import { useHomeConfig } from '../composables/config/blog'
 
 const { site, frontmatter } = useData()
-const { home } = useBlogConfig()
+const home = useHomeConfig()
 
 const name = computed(
-  () => (frontmatter.value.blog?.name ?? site.value.title) || home?.name || ''
+  () => (frontmatter.value.blog?.name ?? site.value.title) || home?.value?.name || ''
 )
-const motto = computed(() => frontmatter.value.blog?.motto || home?.motto || '')
+const motto = computed(() => frontmatter.value.blog?.motto || home?.value?.motto || '')
 
 const inspiring = ref('')
 const inspiringList = computed<string[]>(() => {
   return [
     ...new Set(
-      [frontmatter.value.blog?.inspiring, home?.inspiring]
+      [frontmatter.value.blog?.inspiring, home?.value?.inspiring]
         .flat()
         .filter(v => !!v)
     )
@@ -23,7 +23,7 @@ const inspiringList = computed<string[]>(() => {
 })
 const inspiringIndex = ref<number>(-1)
 const inspiringTimeout = computed<number>(
-  () => frontmatter.value.blog?.inspiringTimeout || home?.inspiringTimeout || 0
+  () => frontmatter.value.blog?.inspiringTimeout || home?.value?.inspiringTimeout || 0
 )
 
 watch(inspiringTimeout, () => {
@@ -50,6 +50,7 @@ onUnmounted(() => {
   }
 })
 
+// TODO：SSR 支持
 async function changeSlogan() {
   // 顺手启动定时器
   startTimer()

package/src/components/BlogHomeHeaderAvatar.vue

@@ -1,14 +1,14 @@
 <script  setup lang="ts">
 import { useData, withBase } from 'vitepress'
 import { computed } from 'vue'
-import { useBlogConfig } from '../composables/config/blog'
+import { useHomeConfig } from '../composables/config/blog'
 
-const { home } = useBlogConfig()
+const home = useHomeConfig()
 const { frontmatter, site } = useData()
 const logo = computed(() =>
   frontmatter.value.logo
     ?? frontmatter.value?.blog?.logo
-    ?? home?.logo
+    ?? home?.value?.logo
     ?? site.value.themeConfig?.logo
     ?? '/logo.png'
 )

package/src/components/BlogHomeOverview.vue

@@ -2,12 +2,12 @@
 import { computed } from 'vue'
 import { useData } from 'vitepress'
 import { isCurrentWeek } from '../utils/client'
-import { useArticles, useBlogConfig, useHomeAnalysis } from '../composables/config/blog'
+import { useArticles, useHomeAnalysis, useHomeConfig } from '../composables/config/blog'
 import BlogAuthor from './BlogAuthor.vue'
 
-const { home } = useBlogConfig()
+const home = useHomeConfig()
 const { frontmatter } = useData()
-const avatarMode = computed(() => frontmatter.value?.blog?.avatarMode || home?.avatarMode || 'card')
+const avatarMode = computed(() => frontmatter.value?.blog?.avatarMode || home?.value?.avatarMode || 'card')
 
 const showCardAvatar = computed(() => avatarMode.value === 'card')
 const showSplitCard = computed(() => avatarMode.value === 'split')
@@ -33,7 +33,7 @@ const currentWeek = computed(() => {
 })
 
 const analysis = useHomeAnalysis()
-const titles = computed(() => (frontmatter.value?.blog?.analysis?.articles?.title || analysis?.articles?.title || []))
+const titles = computed(() => (frontmatter.value?.blog?.analysis?.articles?.title || analysis?.value?.articles?.title || []))
 </script>
 
 <template>

package/src/components/BlogHomeTags.vue

@@ -6,18 +6,18 @@ import { useRoute, useRouter } from 'vitepress'
 import {
   useActiveTag,
   useArticles,
-  useConfig,
   useCurrentPageNum,
+  useHomeTagsConfig,
 } from '../composables/config/blog'
 import { tagsSvgStr } from '../constants/svg'
 
 const route = useRoute()
 const docs = useArticles()
-const homeTagsConfig = useConfig()?.config?.blog?.homeTags
-const showTags = computed(() => !!(homeTagsConfig ?? true))
-const title = computed(() => (typeof homeTagsConfig === 'boolean' || !homeTagsConfig?.title)
+const homeTagsConfig = useHomeTagsConfig()
+const showTags = computed(() => !!(homeTagsConfig.value ?? true))
+const title = computed(() => (typeof homeTagsConfig.value === 'boolean' || !homeTagsConfig.value?.title)
   ? `${tagsSvgStr}标签`
-  : homeTagsConfig?.title
+  : homeTagsConfig.value?.title
 )
 const tags = computed(() => {
   return [...new Set(docs.value.map(v => v.meta.tag || []).flat(3))]

package/src/components/BlogHotArticle.vue

@@ -2,17 +2,14 @@
 import { computed, ref } from 'vue'
 import { ElButton } from 'element-plus'
 import { useRouter, withBase } from 'vitepress'
-import { useArticles, useBlogConfig, useCleanUrls, useFormatShowDate } from '../composables/config/blog'
+import { useArticles, useCleanUrls, useFormatShowDate, useHotArticleConfig, useShowHotArticle } from '../composables/config/blog'
 import { wrapperCleanUrls } from '../utils/client'
 import { fireSVG } from '../constants/svg'
 
 const formatShowDate = useFormatShowDate()
 
-const { hotArticle: _hotArticle } = useBlogConfig()
-
-const hotArticle = computed(() =>
-  _hotArticle === false ? undefined : _hotArticle
-)
+const hotArticle = useHotArticleConfig()
+const show = useShowHotArticle()
 
 const title = computed(() => hotArticle.value?.title || `${fireSVG}精选文章`)
 const nextText = computed(() => hotArticle.value?.nextText || '换一组')
@@ -56,7 +53,7 @@ const showChangeBtn = computed(() => {
 
 <template>
   <div
-    v-if="_hotArticle !== false && (recommendList.length || empty)" class="card recommend"
+    v-if="show && (recommendList.length || empty)" class="card recommend"
     data-pagefind-ignore="all"
   >
     <!-- 头部 -->

package/src/components/BlogItem.vue

@@ -20,7 +20,7 @@ const props = defineProps<{
 const formatShowDate = useFormatShowDate()
 
 const showTime = computed(() => {
-  return formatShowDate(props.date)
+  return formatShowDate.value(props.date)
 })
 const cleanUrls = useCleanUrls()
 const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route)))
@@ -30,14 +30,15 @@ function handleSkipDoc() {
   router.go(link.value)
 }
 
-const { coverPreview } = useImageStyle()
+const imageStyle = useImageStyle()
+const coverPreview = computed(() => imageStyle.value.coverPreview)
 
 const resultCover = computed(() => {
   if (!props.cover) {
     return ''
   }
   const baseCover = withBase(props.cover)
-  const coverRule = [coverPreview]
+  const coverRule = [coverPreview.value]
     .flat()
     .filter(v => !!v)
     .find((coverRule) => {

package/src/components/BlogList.vue

@@ -5,14 +5,15 @@ import { useData, useRoute, useRouter } from 'vitepress'
 import {
   useActiveTag,
   useArticles,
-  useBlogConfig,
-  useCurrentPageNum
+  useCurrentPageNum,
+  useGlobalAuthor,
+  useHomeConfig
 } from '../composables/config/blog'
 import type { Theme } from '../composables/config'
 import BlogItem from './BlogItem.vue'
 
-const { theme, frontmatter } = useData<Theme.Config>()
-const globalAuthor = computed(() => theme.value.blog?.author || '')
+const { frontmatter } = useData<Theme.Config>()
+const globalAuthor = useGlobalAuthor()
 const docs = useArticles()
 
 const activeTag = useActiveTag()
@@ -41,9 +42,9 @@ const filterData = computed(() => {
   )
 })
 
-const { home } = useBlogConfig()
+const home = useHomeConfig()
 const pageSize = computed(
-  () => frontmatter.value.blog?.pageSize || home?.pageSize || 6
+  () => frontmatter.value.blog?.pageSize || home?.value?.pageSize || 6
 )
 const currentPage = useCurrentPageNum()
 const currentWikiData = computed(() => {