@sugarat/theme 0.3.4 → 0.3.6

package/node.d.ts

@@ -1,8 +1,9 @@
-import { DefaultTheme, UserConfig } from 'vitepress';
+import { Route, DefaultTheme, UserConfig } from 'vitepress';
 import { ElButton } from 'element-plus';
 import { RSSOptions } from 'vitepress-plugin-rss';
 import { Repo, Mapping } from '@giscus/vue';
 import { Options } from 'oh-my-live2d';
+import { Ref } from 'vue';
 export { tabsMarkdownPlugin } from 'vitepress-plugin-tabs';
 
 type RSSPluginOptions = RSSOptions;
@@ -231,6 +232,11 @@ declare namespace Theme {
          * @default true
          */
         reopen?: boolean;
+        /**
+         * 是否打开闪烁提示，通常需要和 reopen 搭配使用
+         * @default true
+         */
+        twinkle?: boolean;
         /**
          * 设置展示图标，svg
          * @recommend https://iconbuddy.app/search?q=fire
@@ -241,6 +247,11 @@ declare namespace Theme {
          * @recommend https://iconbuddy.app/search?q=fire
          */
         closeIcon?: string;
+        /**
+         * 自定义展示策略
+         * @param to 切换到的目标路由
+         */
+        onRouteChanged?: (to: Route, show: Ref<boolean>) => void;
     }
     interface FriendLink {
         nickname: string;

package/node.js

@@ -40,7 +40,7 @@ module.exports = __toCommonJS(node_exports);
 // src/utils/node/mdPlugins.ts
 var import_module = require("module");
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.1.4_@algolia+client-search@4.19.1_@types+node@20.6.3__scid7oqqpyg2qxcz73ypk7jzz4/node_modules/vitepress-plugin-tabs/dist/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.2.2_@algolia+client-search@4.19.1_@types+node@20.6.3__yypdqxhxkwwat3gkog3hzzeasy/node_modules/vitepress-plugin-tabs/dist/index.js
 var tabsMarker = "=tabs";
 var tabsMarkerLen = tabsMarker.length;
 var ruleBlockTabs = (state, startLine, endLine, silent) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -46,23 +46,23 @@
     "gray-matter": "^4.0.3",
     "markdown-it-task-checkbox": "^1.0.6",
     "mermaid": "^10.9.0",
-    "oh-my-live2d": "^0.17.0",
+    "oh-my-live2d": "^0.19.3",
     "swiper": "^11.1.1",
     "vitepress-markdown-timeline": "^1.2.1",
     "vitepress-plugin-mermaid": "2.0.13",
     "vitepress-plugin-tabs": "0.2.0",
-    "vitepress-plugin-pagefind": "0.2.14",
-    "vitepress-plugin-rss": "0.2.4"
+    "vitepress-plugin-pagefind": "0.3.3",
+    "vitepress-plugin-rss": "0.2.6"
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "artalk": "^2.8.5",
     "element-plus": "^2.7.2",
-    "pagefind": "1.1.0",
+    "pagefind": "^1.1.0",
     "sass": "^1.76.0",
     "typescript": "^5.4.5",
     "vite": "^5.2.11",
-    "vitepress": "1.1.4",
+    "vitepress": "1.2.2",
     "vue": "^3.4.26"
   },
   "scripts": {

package/src/components/BlogApp.vue

@@ -3,7 +3,6 @@ import Theme from 'vitepress/theme'
 import { useData } from 'vitepress'
 import { computed } from 'vue'
 import { useDarkTransition } from '../hooks/useDarkTransition'
-import { useOml2d } from '../hooks/useOml2d'
 import { useBlogThemeMode, useDarkTransitionConfig } from '../composables/config/blog'
 import BlogHomeInfo from './BlogHomeInfo.vue'
 import BlogHomeBanner from './BlogHomeBanner.vue'
@@ -17,6 +16,7 @@ import BlogFooter from './BlogFooter.vue'
 import BlogHomeHeaderAvatar from './BlogHomeHeaderAvatar.vue'
 import BlogBackToTop from './BlogBackToTop.vue'
 import CommentGiscus from './CommentGiscus.vue'
+import BlogOml2d from './BlogOml2d.vue'
 
 import CommentArtalk from './CommentArtalk.vue'
 import BlogButtonAfterArticle from './BlogButtonAfterArticle.vue'
@@ -27,8 +27,6 @@ const layout = computed(() => frontmatter.value.layout)
 const isBlogTheme = useBlogThemeMode()
 const { Layout } = Theme
 
-// oh-my-live2d 扩展
-useOml2d()
 // 切换深色模式过渡
 // https://vitepress.dev/zh/guide/extending-default-theme#on-appearance-toggle
 useDarkTransition()
@@ -40,6 +38,7 @@ const openTransition = useDarkTransitionConfig()
     <template #layout-top>
       <slot name="layout-top" />
       <ClientOnly>
+        <BlogOml2d />
         <BlogAlert />
         <BlogPopover />
       </ClientOnly>

package/src/components/BlogList.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed, watch } from 'vue'
 import { ElPagination } from 'element-plus'
-import { useData, useRouter } from 'vitepress'
-import { useBrowserLocation } from '@vueuse/core'
+import { useData, useRoute, useRouter } from 'vitepress'
 import {
   useActiveTag,
   useArticles,
@@ -54,12 +53,12 @@ const currentWikiData = computed(() => {
 })
 
 const router = useRouter()
-const location = useBrowserLocation()
 const queryPageNumKey = 'pageNum'
 function handleUpdatePageNum(current: number) {
   if (currentPage.value === current) {
     return
   }
+  currentPage.value = current
   const { searchParams } = new URL(window.location.href!)
   searchParams.delete(queryPageNumKey)
   searchParams.append(queryPageNumKey, String(current))
@@ -69,25 +68,26 @@ function handleUpdatePageNum(current: number) {
   )
 }
 
-function refreshCurrentPage(search?: string) {
-  if (location.value?.href) {
-    const searchParams = new URLSearchParams(search || location.value.search)
-    const pageNum = Number(searchParams.get(queryPageNumKey)) || 1
-    if (pageNum !== currentPage.value) {
-      currentPage.value = pageNum
-    }
+const route = useRoute()
+
+function refreshCurrentPage() {
+  if (typeof window === 'undefined')
+    return
+  const search = window.location.search.slice(1)
+  const searchParams = new URLSearchParams(search)
+  const pageNum = Number(searchParams.get(queryPageNumKey)) || 1
+  if (pageNum !== currentPage.value) {
+    currentPage.value = pageNum
   }
 }
-router.onBeforeRouteChange = (to) => {
-  refreshCurrentPage(to.slice(to.indexOf('?') + 1))
-}
-// 未覆盖的场景处理
-router.onAfterRouteChanged = (to) => {
-  refreshCurrentPage(to.slice(to.indexOf('?') + 1))
-}
-onMounted(() => {
+watch(route, () => {
   refreshCurrentPage()
-})
+}, { immediate: true })
+
+// 未覆盖的场景处理 左上回到首页
+router.onAfterRouteChanged = () => {
+  refreshCurrentPage()
+}
 </script>
 
 <template>

package/src/components/BlogOml2d.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import { useOml2d } from '../hooks/useOml2d'
+
+// oh-my-live2d 扩展
+useOml2d()
+</script>
+
+<template>
+  <div id="oh-my-live2d" style="display: none;" />
+</template>

package/src/components/BlogPopover.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import { ElButton, ElIcon } from 'element-plus'
 import { CircleCloseFilled } from '@element-plus/icons-vue'
-import { computed, h, onMounted, ref } from 'vue'
+import { computed, h, onMounted, ref, watch } from 'vue'
 import type { BlogPopover } from '@sugarat/theme'
 import { parseStringStyle } from '@vue/shared'
-import { useWindowSize } from '@vueuse/core'
+import { useDebounceFn, useWindowSize } from '@vueuse/core'
+import { useRoute, useRouter } from 'vitepress'
 import { useBlogConfig } from '../composables/config/blog'
 import { vOuterHtml } from '../directives'
 
@@ -24,7 +25,8 @@ const closeFlag = `${storageKey}-close`
 
 // 移动端最小化
 const { width } = useWindowSize()
-
+const router = useRouter()
+const route = useRoute()
 onMounted(() => {
   if (!popoverProps?.title) {
     return
@@ -65,6 +67,12 @@ onMounted(() => {
   }
 })
 
+const onAfterRouteChanged = useDebounceFn(() => {
+  popoverProps?.onRouteChanged?.(route, show)
+}, 10)
+
+watch(route, onAfterRouteChanged, { immediate: true })
+
 function handleClose() {
   show.value = false
   if (popoverProps?.duration === -1) {
@@ -105,7 +113,12 @@ function PopoverValue(props: { key: number; item: BlogPopover.Value },
       {
         type: 'primary',
         onClick: () => {
-          window.open(item.link, '_self')
+          if (/^\s*http(s)?:\/\//.test(item.link)) {
+            window.open(item.link)
+          }
+          else {
+            router.go(item.link)
+          }
         },
         style: parseStringStyle(item.style || ''),
         ...item.props
@@ -129,9 +142,7 @@ function PopoverValue(props: { key: number; item: BlogPopover.Value },
       <div class="title-wrapper">
         <ElIcon size="20px">
           <i v-if="popoverProps?.icon" v-outer-html="popoverProps.icon" />
-          <svg v-else width="512" height="512" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-            <path fill="currentColor" d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.6c-3.7 11.6-5.6 23.9-5.6 36.4c0 65.9 53.8 119.5 120 119.5c55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3c16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112M344 762.3c-26.5 0-48-21.4-48-47.8c0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1" />
-          </svg>
+          <svg v-else t="1716085184855" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4274" width="200" height="200"><path d="M660.48 872.448q6.144 0-3.584 15.36t-29.696 33.792-47.104 33.792-57.856 15.36q-27.648 0-53.248-15.36t-45.056-33.792-29.696-33.792-6.144-15.36l272.384 0zM914.432 785.408q7.168 9.216 6.656 17.92t-4.608 14.848-10.24 9.728-12.288 3.584l-747.52 0q-14.336 0-20.992-11.776t4.608-29.184q17.408-30.72 40.96-68.608t44.544-81.408 36.352-92.16 15.36-101.888q0-51.2 14.336-92.16t37.376-71.68 53.248-52.224 62.976-32.768q-16.384-26.624-16.384-55.296 0-41.984 28.672-70.656t70.656-28.672 70.656 28.672 28.672 70.656q0 14.336-4.096 28.16t-11.264 25.088q34.816 11.264 66.048 32.768t54.272 53.248 36.864 72.704 13.824 91.136q0 51.2 15.36 100.864t36.864 94.208 45.568 81.408 43.52 63.488zM478.208 142.336q0 16.384 11.264 28.16t27.648 11.776l2.048 0q16.384-1.024 27.648-12.288t11.264-27.648q0-17.408-11.264-28.672t-28.672-11.264-28.672 11.264-11.264 28.672z" p-id="4275" /></svg>
         </ElIcon>
         <span class="title">{{ popoverProps?.title }}</span>
       </div>
@@ -154,13 +165,12 @@ function PopoverValue(props: { key: number; item: BlogPopover.Value },
   </div>
   <div
     v-show="!show && (popoverProps?.reopen ?? true) && popoverProps?.title" class="theme-blog-popover-close"
+    :class="{ twinkle: !show && (popoverProps?.twinkle ?? true) }"
     @click="show = true"
   >
     <ElIcon>
       <i v-if="popoverProps?.icon" v-outer-html="popoverProps.icon" />
-      <svg v-else width="512" height="512" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
-        <path fill="currentColor" d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.6c-3.7 11.6-5.6 23.9-5.6 36.4c0 65.9 53.8 119.5 120 119.5c55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3c16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112M344 762.3c-26.5 0-48-21.4-48-47.8c0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1" />
-      </svg>
+      <svg v-else t="1716085184855" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4274" width="200" height="200"><path d="M660.48 872.448q6.144 0-3.584 15.36t-29.696 33.792-47.104 33.792-57.856 15.36q-27.648 0-53.248-15.36t-45.056-33.792-29.696-33.792-6.144-15.36l272.384 0zM914.432 785.408q7.168 9.216 6.656 17.92t-4.608 14.848-10.24 9.728-12.288 3.584l-747.52 0q-14.336 0-20.992-11.776t4.608-29.184q17.408-30.72 40.96-68.608t44.544-81.408 36.352-92.16 15.36-101.888q0-51.2 14.336-92.16t37.376-71.68 53.248-52.224 62.976-32.768q-16.384-26.624-16.384-55.296 0-41.984 28.672-70.656t70.656-28.672 70.656 28.672 28.672 70.656q0 14.336-4.096 28.16t-11.264 25.088q34.816 11.264 66.048 32.768t54.272 53.248 36.864 72.704 13.824 91.136q0 51.2 15.36 100.864t36.864 94.208 45.568 81.408 43.52 63.488zM478.208 142.336q0 16.384 11.264 28.16t27.648 11.776l2.048 0q16.384-1.024 27.648-12.288t11.264-27.648q0-17.408-11.264-28.672t-28.672-11.264-28.672 11.264-11.264 28.672z" p-id="4275" /></svg>
     </ElIcon>
   </div>
 </template>
@@ -262,4 +272,19 @@ function PopoverValue(props: { key: number; item: BlogPopover.Value },
   display: flex;
   flex-direction: column;
 }
+.theme-blog-popover-close.twinkle {
+  animation: twinkle 1s ease-in-out infinite;
+}
+
+@keyframes twinkle {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
 </style>

package/src/components/CommentGiscus.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useData, useRoute } from 'vitepress'
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import Giscus from '@giscus/vue'
 import { useBlogConfig } from '../composables/config/blog'
 
@@ -23,14 +23,14 @@ const commentConfig = computed(() => {
 const { isDark } = useData()
 
 const route = useRoute()
-const showComment = ref(true)
+const showComment = ref(false)
 watch(
-  () => route.path,
+  route,
   () => {
     showComment.value = false
-    setTimeout(() => {
+    nextTick(() => {
       showComment.value = true
-    }, 200)
+    })
   },
   {
     immediate: true
@@ -40,7 +40,7 @@ watch(
 
 <template>
   <Giscus
-    v-if="commentConfig" :repo="commentConfig.repo" :repo-id="commentConfig.repoId"
+    v-if="commentConfig && showComment" :repo="commentConfig.repo" :repo-id="commentConfig.repoId"
     :category="commentConfig.category" :category-id="commentConfig.categoryId"
     :mapping="commentConfig.mapping || 'pathname'" reactions-enabled="1" emit-metadata="0"
     :input-position="commentConfig.inputPosition || 'top'" :theme="isDark ? 'dark' : 'light'"

package/src/composables/config/index.ts

@@ -1,9 +1,10 @@
 /* eslint-disable ts/no-namespace */
 import type { ElButton } from 'element-plus'
-import type { DefaultTheme } from 'vitepress'
+import type { DefaultTheme, Route } from 'vitepress'
 import type { RSSOptions } from 'vitepress-plugin-rss'
 import type { Mapping, Repo } from '@giscus/vue'
 import type { Options as Oml2dOptions } from 'oh-my-live2d'
+import type { Ref } from 'vue'
 
 type RSSPluginOptions = RSSOptions
 
@@ -243,6 +244,11 @@ export namespace Theme {
      * @default true
      */
     reopen?: boolean
+    /**
+     * 是否打开闪烁提示，通常需要和 reopen 搭配使用
+     * @default true
+     */
+    twinkle?: boolean
     /**
      * 设置展示图标，svg
      * @recommend https://iconbuddy.app/search?q=fire
@@ -253,6 +259,11 @@ export namespace Theme {
      * @recommend https://iconbuddy.app/search?q=fire
      */
     closeIcon?: string
+    /**
+     * 自定义展示策略
+     * @param to 切换到的目标路由
+     */
+    onRouteChanged?: (to: Route, show: Ref<boolean>) => void
   }
   export interface FriendLink {
     nickname: string