@sugarat/theme 0.1.49 → 0.2.0

package/src/components/BlogHomeOverview.vue

@@ -1,22 +1,3 @@
-<template>
-  <div class="card overview-data">
-    <div class="overview-item">
-      <span class="count">{{ notHiddenArticles.length }}</span>
-      <span class="label">博客文章</span>
-    </div>
-    <div class="split"></div>
-    <div class="overview-item">
-      <span class="count">+{{ currentMonth?.length }}</span>
-      <span class="label">本月更新</span>
-    </div>
-    <div class="split"></div>
-    <div class="overview-item">
-      <span class="count">+{{ currentWeek?.length }}</span>
-      <span class="label">本周更新</span>
-    </div>
-  </div>
-</template>
-
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { isCurrentWeek } from '../utils/client'
@@ -24,7 +5,7 @@ import { useArticles } from '../composables/config/blog'
 
 const docs = useArticles()
 const notHiddenArticles = computed(() => {
-  return docs.value.filter((v) => v.meta?.publish !== false)
+  return docs.value.filter(v => v.meta?.publish !== false)
 })
 const nowMonth = new Date().getMonth()
 const nowYear = new Date().getFullYear()
@@ -43,6 +24,25 @@ const currentWeek = computed(() => {
 })
 </script>
 
+<template>
+  <div class="card overview-data">
+    <div class="overview-item">
+      <span class="count">{{ notHiddenArticles.length }}</span>
+      <span class="label">博客文章</span>
+    </div>
+    <div class="split" />
+    <div class="overview-item">
+      <span class="count">+{{ currentMonth?.length }}</span>
+      <span class="label">本月更新</span>
+    </div>
+    <div class="split" />
+    <div class="overview-item">
+      <span class="count">+{{ currentWeek?.length }}</span>
+      <span class="label">本周更新</span>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .card {
   position: relative;

package/src/components/BlogHomeTags.vue

@@ -1,38 +1,3 @@
-<template>
-  <div class="card tags" v-if="tags.length" data-pagefind-ignore="all">
-    <!-- 头部 -->
-    <div class="card-header">
-      <span class="title svg-icon"><svg t="1695048840129" class="icon" viewBox="0 0 1024 1024" version="1.1"
-          xmlns="http://www.w3.org/2000/svg" p-id="4290" width="200" height="200">
-          <path
-            d="M810.88 245.888a118.432 118.432 0 1 0 0 236.864 118.432 118.432 0 0 0 0-236.864z m-151.008 118.432a151.008 151.008 0 1 1 302.016 0 151.008 151.008 0 0 1-302.016 0z"
-            fill="#D3D3D3" p-id="4291"></path>
-          <path
-            d="M774.08 565.6l61.76-160.64c6.4-16.64 2.56-35.84-10.24-48.64l-151.04-151.04c-12.8-12.8-31.68-16.64-48.64-10.24l-160.64 61.76c-12.16 4.8-23.36 11.84-32.64 21.12l-355.2 355.2c-17.92 17.92-17.92 46.72 0 64.32l256 256c17.92 17.92 46.72 17.92 64.32 0l355.2-355.2c9.28-9.28 16.32-20.16 21.12-32.64z m-159.36-149.12c-22.08-22.08-22.08-57.6 0-79.68 22.08-22.08 57.6-22.08 79.68 0 22.08 22.08 22.08 57.6 0 79.68-22.08 21.76-57.92 21.76-79.68 0z"
-            fill="#FCD53F" p-id="4292"></path>
-          <path
-            d="M654.4 320.48c14.4 0 28.8 5.44 39.68 16.64 22.08 22.08 22.08 57.6 0 79.68-10.88 10.88-25.28 16.64-39.68 16.64-14.4 0-28.8-5.44-39.68-16.64-22.08-22.08-22.08-57.6 0-79.68 10.88-11.2 25.28-16.64 39.68-16.64z m0-30.08c-23.04 0-44.8 8.96-61.12 25.28a86.72 86.72 0 0 0 0 122.24c16.32 16.32 38.08 25.28 61.12 25.28s44.8-8.96 61.12-25.28a86.72 86.72 0 0 0 0-122.24c-16.32-16.32-38.08-25.28-61.12-25.28z"
-            fill="#F8312F" p-id="4293"></path>
-          <path
-            d="M676.16 348.032c8.992 0 16.288 7.296 16.288 16.288a118.144 118.144 0 0 0 64.288 105.44h0.064c22.24 11.296 47.36 15.264 71.68 11.84a16.288 16.288 0 0 1 4.48 32.32 154.24 154.24 0 0 1-90.848-15.04 150.72 150.72 0 0 1-82.24-134.56c0-8.992 7.296-16.288 16.288-16.288z"
-            fill="#D3D3D3" p-id="4294"></path>
-        </svg> 标签</span>
-      <el-tag v-if="activeTag.label" :type="(activeTag.type as any)" :effect="colorMode" closable @close="handleCloseTag">
-        {{ activeTag.label }}
-      </el-tag>
-    </div>
-    <!-- 标签列表 -->
-    <ul class="tag-list">
-      <li v-for="(tag, idx) in tags" :key="tag">
-        <el-tag :type="tagType[idx % tagType.length]" @click="handleTagClick(tag, tagType[idx % tagType.length])"
-          :effect="colorMode">
-          {{ tag }}
-        </el-tag>
-      </li>
-    </ul>
-  </div>
-</template>
-
 <script lang="ts" setup>
 import { computed, watch } from 'vue'
 import { ElTag } from 'element-plus'
@@ -47,7 +12,7 @@ import {
 const docs = useArticles()
 
 const tags = computed(() => {
-  return [...new Set(docs.value.map((v) => v.meta.tag || []).flat(3))]
+  return [...new Set(docs.value.map(v => v.meta.tag || []).flat(3))]
 })
 
 const activeTag = useActiveTag()
@@ -60,18 +25,18 @@ const colorMode = computed(() => (isDark.value ? 'light' : 'dark'))
 
 const tagType: any = ['', 'info', 'success', 'warning', 'danger']
 const currentPage = useCurrentPageNum()
+const router = useRouter()
 
-const handleCloseTag = () => {
+function handleCloseTag() {
   activeTag.value.label = ''
   activeTag.value.type = ''
   currentPage.value = 1
   router.go(`${window.location.origin}${router.route.path}`)
 }
 
-const router = useRouter()
 const location = useBrowserLocation()
 
-const handleTagClick = (tag: string, type: string) => {
+function handleTagClick(tag: string, type: string) {
   if (tag === activeTag.value.label) {
     handleCloseTag()
     return
@@ -99,6 +64,49 @@ watch(
 )
 </script>
 
+<template>
+  <div v-if="tags.length" class="card tags" data-pagefind-ignore="all">
+    <!-- 头部 -->
+    <div class="card-header">
+      <span class="title svg-icon"><svg
+        t="1695048840129" class="icon" viewBox="0 0 1024 1024" version="1.1"
+        xmlns="http://www.w3.org/2000/svg" p-id="4290" width="200" height="200"
+      >
+        <path
+          d="M810.88 245.888a118.432 118.432 0 1 0 0 236.864 118.432 118.432 0 0 0 0-236.864z m-151.008 118.432a151.008 151.008 0 1 1 302.016 0 151.008 151.008 0 0 1-302.016 0z"
+          fill="#D3D3D3" p-id="4291"
+        />
+        <path
+          d="M774.08 565.6l61.76-160.64c6.4-16.64 2.56-35.84-10.24-48.64l-151.04-151.04c-12.8-12.8-31.68-16.64-48.64-10.24l-160.64 61.76c-12.16 4.8-23.36 11.84-32.64 21.12l-355.2 355.2c-17.92 17.92-17.92 46.72 0 64.32l256 256c17.92 17.92 46.72 17.92 64.32 0l355.2-355.2c9.28-9.28 16.32-20.16 21.12-32.64z m-159.36-149.12c-22.08-22.08-22.08-57.6 0-79.68 22.08-22.08 57.6-22.08 79.68 0 22.08 22.08 22.08 57.6 0 79.68-22.08 21.76-57.92 21.76-79.68 0z"
+          fill="#FCD53F" p-id="4292"
+        />
+        <path
+          d="M654.4 320.48c14.4 0 28.8 5.44 39.68 16.64 22.08 22.08 22.08 57.6 0 79.68-10.88 10.88-25.28 16.64-39.68 16.64-14.4 0-28.8-5.44-39.68-16.64-22.08-22.08-22.08-57.6 0-79.68 10.88-11.2 25.28-16.64 39.68-16.64z m0-30.08c-23.04 0-44.8 8.96-61.12 25.28a86.72 86.72 0 0 0 0 122.24c16.32 16.32 38.08 25.28 61.12 25.28s44.8-8.96 61.12-25.28a86.72 86.72 0 0 0 0-122.24c-16.32-16.32-38.08-25.28-61.12-25.28z"
+          fill="#F8312F" p-id="4293"
+        />
+        <path
+          d="M676.16 348.032c8.992 0 16.288 7.296 16.288 16.288a118.144 118.144 0 0 0 64.288 105.44h0.064c22.24 11.296 47.36 15.264 71.68 11.84a16.288 16.288 0 0 1 4.48 32.32 154.24 154.24 0 0 1-90.848-15.04 150.72 150.72 0 0 1-82.24-134.56c0-8.992 7.296-16.288 16.288-16.288z"
+          fill="#D3D3D3" p-id="4294"
+        />
+      </svg> 标签</span>
+      <ElTag v-if="activeTag.label" :type="activeTag.type as any" :effect="colorMode" closable @close="handleCloseTag">
+        {{ activeTag.label }}
+      </ElTag>
+    </div>
+    <!-- 标签列表 -->
+    <ul class="tag-list">
+      <li v-for="(tag, idx) in tags" :key="tag">
+        <ElTag
+          :type="tagType[idx % tagType.length]" :effect="colorMode"
+          @click="handleTagClick(tag, tagType[idx % tagType.length])"
+        >
+          {{ tag }}
+        </ElTag>
+      </li>
+    </ul>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .card {
   position: relative;
@@ -145,4 +153,5 @@ watch(
     margin-bottom: 10px;
     cursor: pointer;
   }
-}</style>
+}
+</style>

package/src/components/BlogHotArticle.vue

@@ -1,40 +1,11 @@
-<template>
-  <div class="card recommend" v-if="recommendList.length || empty" data-pagefind-ignore="all">
-    <!-- 头部 -->
-    <div class="card-header">
-      <span class="title" v-html="title"></span>
-      <el-button v-if="showChangeBtn" size="small" type="primary" text @click="changePage">{{ nextText }}</el-button>
-    </div>
-    <!-- 文章列表 -->
-    <ol class="recommend-container" v-if="currentWikiData.length">
-      <li v-for="(v, idx) in currentWikiData" :key="v.route">
-        <!-- 序号 -->
-        <i class="num">{{ idx + 1 }}</i>
-        <!-- 简介 -->
-        <div class="des">
-          <!-- title -->
-          <el-link type="info" class="title" :href="withBase(v.route)">{{
-            v.meta.title
-          }}</el-link>
-          <!-- 描述信息 -->
-          <div class="suffix">
-            <!-- 日期 -->
-            <span class="tag">{{ formatShowDate(v.meta.date) }}</span>
-          </div>
-        </div>
-      </li>
-    </ol>
-    <div class="empty-text" v-else>{{ empty }}</div>
-  </div>
-</template>
-
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 import { ElButton, ElLink } from 'element-plus'
 import { withBase } from 'vitepress'
 import { useArticles, useBlogConfig } from '../composables/config/blog'
 import { formatShowDate } from '../utils/client'
 import { fireSVG } from '../constants/svg'
+
 const { hotArticle } = useBlogConfig()
 const title = computed(() => hotArticle?.title || (`<span class="svg-icon">${fireSVG}</span>` + ' 精选文章'))
 const nextText = computed(() => hotArticle?.nextText || '换一组')
@@ -44,15 +15,15 @@ const empty = computed(() => hotArticle?.empty ?? '暂无精选内容')
 const docs = useArticles()
 
 const recommendList = computed(() => {
-  const data = docs.value.filter((v) => v.meta.sticky)
+  const data = docs.value.filter(v => v.meta.sticky)
   data.sort((a, b) => b.meta.sticky! - a.meta.sticky!)
   return [...data]
 })
 
 const currentPage = ref(1)
-const changePage = () => {
-  const newIdx =
-    currentPage.value % Math.ceil(recommendList.value.length / pageSize.value)
+function changePage() {
+  const newIdx
+    = currentPage.value % Math.ceil(recommendList.value.length / pageSize.value)
   currentPage.value = newIdx + 1
 }
 
@@ -67,6 +38,42 @@ const showChangeBtn = computed(() => {
 })
 </script>
 
+<template>
+  <div v-if="recommendList.length || empty" class="card recommend" data-pagefind-ignore="all">
+    <!-- 头部 -->
+    <div class="card-header">
+      <span class="title" v-html="title" />
+      <ElButton v-if="showChangeBtn" size="small" type="primary" text @click="changePage">
+        {{ nextText }}
+      </ElButton>
+    </div>
+    <!-- 文章列表 -->
+    <ol v-if="currentWikiData.length" class="recommend-container">
+      <li v-for="(v, idx) in currentWikiData" :key="v.route">
+        <!-- 序号 -->
+        <i class="num">{{ idx + 1 }}</i>
+        <!-- 简介 -->
+        <div class="des">
+          <!-- title -->
+          <ElLink type="info" class="title" :href="withBase(v.route)">
+            {{
+              v.meta.title
+            }}
+          </ElLink>
+          <!-- 描述信息 -->
+          <div class="suffix">
+            <!-- 日期 -->
+            <span class="tag">{{ formatShowDate(v.meta.date) }}</span>
+          </div>
+        </div>
+      </li>
+    </ol>
+    <div v-else class="empty-text">
+      {{ empty }}
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .card {
   position: relative;
@@ -170,4 +177,4 @@ const showChangeBtn = computed(() => {
   font-size: 14px;
   text-align: center;
 }
-</style>
+</style>

package/src/components/BlogImagePreview.vue

@@ -10,15 +10,15 @@ const previewImageInfo = reactive<{ url: string; list: string[]; idx: number }>(
     idx: 0
   }
 )
-const previewImage = (e: Event) => {
+function previewImage(e: Event) {
   const target = e.target as HTMLElement
   const currentTarget = e.currentTarget as HTMLElement
   if (target.tagName.toLowerCase() === 'img') {
     const imgs = currentTarget.querySelectorAll<HTMLImageElement>(
       '.content-container .main img'
     )
-    const idx = Array.from(imgs).findIndex((el) => el === target)
-    const urls = Array.from(imgs).map((el) => el.src)
+    const idx = Array.from(imgs).findIndex(el => el === target)
+    const urls = Array.from(imgs).map(el => el.src)
 
     const url = target.getAttribute('src')
     previewImageInfo.url = url!
@@ -45,6 +45,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <ElImageViewer :infinite="false" hide-on-click-modal teleported @close="show = false" :url-list="previewImageInfo.list"
-    :initial-index="previewImageInfo.idx" v-if="show" />
+  <ElImageViewer
+    v-if="show" :infinite="false" hide-on-click-modal teleported :url-list="previewImageInfo.list"
+    :initial-index="previewImageInfo.idx" @close="show = false"
+  />
 </template>

package/src/components/BlogItem.vue

@@ -1,51 +1,9 @@
-<template>
-  <a class="blog-item" :href="withBase(route)">
-    <i class="pin" v-if="!!pin"></i>
-    <!-- 标题 -->
-    <p class="title" v-if="inMobile">{{ title }}</p>
-    <div class="info-container">
-      <!-- 左侧信息 -->
-      <div class="info-part">
-        <!-- 标题 -->
-        <p class="title" v-if="!inMobile">{{ title }}</p>
-        <!-- 简短描述 -->
-        <p class="description" v-if="!descriptionHTML && !!description">
-          {{ description }}
-        </p>
-        <template v-if="descriptionHTML">
-          <div class="description-html" v-html="descriptionHTML"></div>
-        </template>
-        <!-- 底部补充描述 -->
-        <div class="badge-list" v-if="!inMobile">
-          <span class="split" v-if="author">{{ author }}</span>
-          <span class="split">{{ showTime }}</span>
-          <span class="split" v-if="tag?.length">{{ tag.join(' · ') }}</span>
-        </div>
-      </div>
-      <!-- 右侧封面图 -->
-      <div
-        v-if="cover"
-        class="cover-img"
-        :style="`background-image: url(${cover});`"
-      ></div>
-    </div>
-    <!-- 底部补充描述 -->
-    <div class="badge-list" v-if="inMobile">
-      <span class="split" v-if="author">{{ author }}</span>
-      <span class="split">{{ showTime }}</span>
-      <span class="split" v-if="tag?.length">{{ tag.join(' · ') }}</span>
-    </div>
-  </a>
-</template>
-
 <script lang="ts" setup>
 import { withBase } from 'vitepress'
 import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 import { formatShowDate } from '../utils/client'
 
-const { width } = useWindowSize()
-const inMobile = computed(() => width.value <= 500)
 const props = defineProps<{
   route: string
   title: string
@@ -58,7 +16,8 @@ const props = defineProps<{
   cover?: string | boolean
   pin?: number
 }>()
-
+const { width } = useWindowSize()
+const inMobile = computed(() => width.value <= 500)
 const showTime = computed(() => {
   return formatShowDate(props.date)
 })
@@ -77,6 +36,46 @@ const showTime = computed(() => {
 // }
 </script>
 
+<template>
+  <a class="blog-item" :href="withBase(route)">
+    <i v-if="!!pin" class="pin" />
+    <!-- 标题 -->
+    <p v-if="inMobile" class="title">{{ title }}</p>
+    <div class="info-container">
+      <!-- 左侧信息 -->
+      <div class="info-part">
+        <!-- 标题 -->
+        <p v-if="!inMobile" class="title">{{ title }}</p>
+        <!-- 简短描述 -->
+        <p v-if="!descriptionHTML && !!description" class="description">
+          {{ description }}
+        </p>
+        <template v-if="descriptionHTML">
+          <div class="description-html" v-html="descriptionHTML" />
+        </template>
+        <!-- 底部补充描述 -->
+        <div v-if="!inMobile" class="badge-list">
+          <span v-if="author" class="split">{{ author }}</span>
+          <span class="split">{{ showTime }}</span>
+          <span v-if="tag?.length" class="split">{{ tag.join(' · ') }}</span>
+        </div>
+      </div>
+      <!-- 右侧封面图 -->
+      <div
+        v-if="cover"
+        class="cover-img"
+        :style="`background-image: url(${cover});`"
+      />
+    </div>
+    <!-- 底部补充描述 -->
+    <div v-if="inMobile" class="badge-list">
+      <span v-if="author" class="split">{{ author }}</span>
+      <span class="split">{{ showTime }}</span>
+      <span v-if="tag?.length" class="split">{{ tag.join(' · ') }}</span>
+    </div>
+  </a>
+</template>
+
 <style lang="scss" scoped>
 .blog-item .pin {
   position: absolute;

package/src/components/BlogList.vue

@@ -1,49 +1,16 @@
-<template>
-  <ul data-pagefind-ignore="all">
-    <li v-for="v in currentWikiData" :key="v.route">
-      <blog-item
-        :route="v.route"
-        :title="v.meta.title"
-        :description="v.meta.description"
-        :description-h-t-m-l="v.meta.descriptionHTML"
-        :date="v.meta.date"
-        :tag="v.meta.tag"
-        :cover="v.meta.cover"
-        :author="v.meta.author || globalAuthor"
-        :pin="v.meta.top"
-      />
-    </li>
-  </ul>
-  <!-- 解决element-ui bug -->
-  <ClientOnly>
-    <div class="el-pagination-wrapper">
-      <el-pagination
-        v-if="wikiList.length >= pageSize"
-        small
-        background
-        :default-current-page="1"
-        :current-page="currentPage"
-        @update:current-page="handleUpdatePageNum"
-        :page-size="pageSize"
-        :total="filterData.length"
-        layout="prev, pager, next, jumper"
-      />
-    </div>
-  </ClientOnly>
-</template>
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import { ElPagination } from 'element-plus'
 import { useData, useRouter } from 'vitepress'
 import { useBrowserLocation } from '@vueuse/core'
-import BlogItem from './BlogItem.vue'
 import {
-  useArticles,
   useActiveTag,
+  useArticles,
   useBlogConfig,
   useCurrentPageNum
 } from '../composables/config/blog'
-import { Theme } from '../composables/config'
+import type { Theme } from '../composables/config'
+import BlogItem from './BlogItem.vue'
 
 const { theme, frontmatter } = useData<Theme.Config>()
 const globalAuthor = computed(() => theme.value.blog?.author || '')
@@ -54,22 +21,23 @@ const activeTag = useActiveTag()
 const activeTagLabel = computed(() => activeTag.value.label)
 
 const wikiList = computed(() => {
-  const topList = docs.value.filter((v) => !v.meta.hidden && !!v.meta.top)
+  const topList = docs.value.filter(v => !v.meta.hidden && !!v.meta.top)
   topList.sort((a, b) => {
     const aTop = a?.meta?.top
     const bTop = b?.meta.top
     return Number(aTop) - Number(bTop)
   })
   const data = docs.value.filter(
-    (v) => v.meta.date && v.meta.title && !v.meta.top && !v.meta.hidden
+    v => v.meta.date && v.meta.title && !v.meta.top && !v.meta.hidden
   )
   data.sort((a, b) => +new Date(b.meta.date) - +new Date(a.meta.date))
   return topList.concat(data)
 })
 
 const filterData = computed(() => {
-  if (!activeTagLabel.value) return wikiList.value
-  return wikiList.value.filter((v) =>
+  if (!activeTagLabel.value)
+    return wikiList.value
+  return wikiList.value.filter(v =>
     v.meta?.tag?.includes(activeTagLabel.value)
   )
 })
@@ -88,7 +56,7 @@ const currentWikiData = computed(() => {
 const router = useRouter()
 const location = useBrowserLocation()
 const queryPageNumKey = 'pageNum'
-const handleUpdatePageNum = (current: number) => {
+function handleUpdatePageNum(current: number) {
   if (currentPage.value === current) {
     return
   }
@@ -108,7 +76,8 @@ watch(
       const { searchParams } = new URL(location.value.href)
       if (searchParams.has(queryPageNumKey)) {
         currentPage.value = Number(searchParams.get(queryPageNumKey))
-      } else {
+      }
+      else {
         currentPage.value = 1
       }
     }
@@ -118,6 +87,41 @@ watch(
   }
 )
 </script>
+
+<template>
+  <ul data-pagefind-ignore="all">
+    <li v-for="v in currentWikiData" :key="v.route">
+      <BlogItem
+        :route="v.route"
+        :title="v.meta.title"
+        :description="v.meta.description"
+        :description-h-t-m-l="v.meta.descriptionHTML"
+        :date="v.meta.date"
+        :tag="v.meta.tag"
+        :cover="v.meta.cover"
+        :author="v.meta.author || globalAuthor"
+        :pin="v.meta.top"
+      />
+    </li>
+  </ul>
+  <!-- 解决element-ui bug -->
+  <ClientOnly>
+    <div class="el-pagination-wrapper">
+      <ElPagination
+        v-if="wikiList.length >= pageSize"
+        small
+        background
+        :default-current-page="1"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        :total="filterData.length"
+        layout="prev, pager, next, jumper"
+        @update:current-page="handleUpdatePageNum"
+      />
+    </div>
+  </ClientOnly>
+</template>
+
 <style lang="scss" scoped>
 .el-pagination-wrapper {
   :deep(.el-pagination li.is-active.number) {

package/src/components/BlogPopover.vue

@@ -1,39 +1,7 @@
-<template>
-  <div class="theme-blog-popover" v-show="show" data-pagefind-ignore="all">
-    <div class="header">
-      <div class="title-wrapper">
-        <el-icon size="20px"><Flag /></el-icon>
-        <span class="title">{{ popoverProps?.title }}</span>
-      </div>
-      <el-icon @click="show = false" class="close-icon" size="20px"
-        ><CircleCloseFilled
-      /></el-icon>
-    </div>
-    <div class="body content" v-if="bodyContent.length">
-      <PopoverValue v-for="(v, idx) in bodyContent" :key="idx" :item="v">
-        {{ v.type !== 'image' ? v.content : '' }}
-      </PopoverValue>
-      <hr v-if="footerContent.length" />
-    </div>
-    <div class="footer content">
-      <PopoverValue v-for="(v, idx) in footerContent" :key="idx" :item="v">
-        {{ v.type !== 'image' ? v.content : '' }}
-      </PopoverValue>
-    </div>
-  </div>
-  <div
-    class="theme-blog-popover-close"
-    v-show="!show && (popoverProps?.reopen ?? true) && popoverProps?.title"
-    @click="show = true"
-  >
-    <el-icon size="20px"><Flag /></el-icon>
-  </div>
-</template>
-
 <script lang="ts" setup>
-import { ElIcon, ElButton } from 'element-plus'
-import { Flag, CircleCloseFilled } from '@element-plus/icons-vue'
-import { computed, onMounted, ref, h } from 'vue'
+import { ElButton, ElIcon } from 'element-plus'
+import { CircleCloseFilled, Flag } from '@element-plus/icons-vue'
+import { computed, h, onMounted, ref } from 'vue'
 import type { BlogPopover } from '@sugarat/theme'
 import { parseStringStyle } from '@vue/shared'
 import { useBlogConfig } from '../composables/config/blog'
@@ -77,10 +45,8 @@ onMounted(() => {
   }
 })
 
-const PopoverValue = (
-  props: { key: number; item: BlogPopover.Value },
-  { slots }: any
-) => {
+function PopoverValue(props: { key: number; item: BlogPopover.Value },
+  { slots }: any) {
   const { key, item } = props
   if (item.type === 'title') {
     return h(
@@ -130,6 +96,42 @@ const PopoverValue = (
 }
 </script>
 
+<template>
+  <div v-show="show" class="theme-blog-popover" data-pagefind-ignore="all">
+    <div class="header">
+      <div class="title-wrapper">
+        <ElIcon size="20px">
+          <Flag />
+        </ElIcon>
+        <span class="title">{{ popoverProps?.title }}</span>
+      </div>
+      <ElIcon class="close-icon" size="20px" @click="show = false">
+        <CircleCloseFilled />
+      </ElIcon>
+    </div>
+    <div v-if="bodyContent.length" class="body content">
+      <PopoverValue v-for="(v, idx) in bodyContent" :key="idx" :item="v">
+        {{ v.type !== 'image' ? v.content : '' }}
+      </PopoverValue>
+      <hr v-if="footerContent.length">
+    </div>
+    <div class="footer content">
+      <PopoverValue v-for="(v, idx) in footerContent" :key="idx" :item="v">
+        {{ v.type !== 'image' ? v.content : '' }}
+      </PopoverValue>
+    </div>
+  </div>
+  <div
+    v-show="!show && (popoverProps?.reopen ?? true) && popoverProps?.title"
+    class="theme-blog-popover-close"
+    @click="show = true"
+  >
+    <ElIcon size="20px">
+      <Flag />
+    </ElIcon>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .theme-blog-popover {
   width: 258px;