@sugarat/theme 0.3.2 → 0.3.4

package/node.d.ts

@@ -91,7 +91,10 @@ declare namespace Theme {
     }
     interface activeTag {
         label: string;
-        type: string;
+        /**
+         * @type {string}
+         */
+        type: any;
     }
     type CommentConfig = ((GiscusOption & CommentCommonConfig) | GiscusConfig | ArtalkConfig);
     interface CommentCommonConfig {
@@ -412,6 +415,10 @@ declare namespace Theme {
          * @default true
          */
         darkTransition?: boolean;
+        /**
+         * 渲染时替换图片地址
+         */
+        imageStyle?: ImageStyleConfig;
     }
     interface BackToTop {
         /**
@@ -507,6 +514,26 @@ declare namespace Theme {
          */
         expand?: boolean;
     }
+    interface ReplaceRule {
+        /**
+         * 匹配规则
+         */
+        rule: string | RegExp;
+        /**
+         * 直接追加后缀
+         */
+        suffix?: string;
+        /**
+         * 替换函数或字符串(优先级高于 suffix)
+         */
+        replace?: string | ((match: string) => string);
+    }
+    interface ImageStyleConfig {
+        /**
+         * 首页封面预览图
+         */
+        coverPreview?: ReplaceRule | ReplaceRule[];
+    }
 }
 
 /**

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__ee2wap4ljxfukruj47sfuqlmqq/node_modules/vitepress-plugin-tabs/dist/index.js
+// ../../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
 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.2",
+  "version": "0.3.4",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -32,35 +32,38 @@
     "src",
     "types"
   ],
+  "peerDependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "element-plus": "^2.7"
+  },
   "dependencies": {
-    "@giscus/vue": "^2.3.0",
-    "@mdit-vue/shared": "^0.12.0",
+    "@giscus/vue": "^2.4.0",
+    "@mdit-vue/shared": "^0.12.1",
     "@mermaid-js/mermaid-mindmap": "^9.3.0",
-    "@vue/shared": "^3.2.45",
-    "@vueuse/core": "^9.6.0",
-    "fast-glob": "^3.2.12",
+    "@vue/shared": "^3.4.26",
+    "@vueuse/core": "^9.13.0",
+    "fast-glob": "^3.3.2",
     "gray-matter": "^4.0.3",
     "markdown-it-task-checkbox": "^1.0.6",
-    "mermaid": "^10.2.4",
-    "oh-my-live2d": "^0.15.2",
-    "swiper": "^11.0.5",
+    "mermaid": "^10.9.0",
+    "oh-my-live2d": "^0.17.0",
+    "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.2",
-    "vitepress-plugin-tabs": "0.2.0"
+    "vitepress-plugin-rss": "0.2.4"
   },
   "devDependencies": {
-    "@element-plus/icons-vue": "^2.1.0",
-    "artalk": "^2.8.3",
-    "element-plus": "^2.3.4",
-    "javascript-stringify": "^2.1.0",
-    "pagefind": "1.0.3",
-    "sass": "^1.56.1",
-    "typescript": "^4.8.2",
-    "vite": "^5",
+    "@element-plus/icons-vue": "^2.3.1",
+    "artalk": "^2.8.5",
+    "element-plus": "^2.7.2",
+    "pagefind": "1.1.0",
+    "sass": "^1.76.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
     "vitepress": "1.1.4",
-    "vue": "^3.4.21"
+    "vue": "^3.4.26"
   },
   "scripts": {
     "dev": "npm run build:node && npm run dev:docs",

package/src/components/BlogHomeTags.vue

@@ -102,7 +102,7 @@ watch(
           fill="#D3D3D3" p-id="4294"
         />
       </svg> 标签</span>
-      <ElTag v-if="activeTag.label" :type="activeTag.type as any" :effect="colorMode" closable @close="handleCloseTag">
+      <ElTag v-if="activeTag.label" :type="activeTag.type || 'primary'" :effect="colorMode" closable @close="handleCloseTag">
         {{ activeTag.label }}
       </ElTag>
     </div>
@@ -110,7 +110,7 @@ watch(
     <ul class="tag-list">
       <li v-for="(tag, idx) in tags" :key="tag">
         <ElTag
-          :type="tagType[idx % tagType.length]" :effect="colorMode"
+          :type="tagType[idx % tagType.length] || 'primary'" :effect="colorMode"
           @click="handleTagClick(tag, tagType[idx % tagType.length])"
         >
           {{ tag }}

package/src/components/BlogItem.vue

@@ -2,7 +2,7 @@
 import { useRouter, withBase } from 'vitepress'
 import { computed } from 'vue'
 import { formatShowDate, wrapperCleanUrls } from '../utils/client'
-import { useCleanUrls } from '../composables/config/blog'
+import { useCleanUrls, useImageStyle } from '../composables/config/blog'
 
 const props = defineProps<{
   route: string
@@ -13,7 +13,7 @@ const props = defineProps<{
   descriptionHTML?: string
   tag?: string[]
   author?: string
-  cover?: string | boolean
+  cover?: string | false
   pin?: number
 }>()
 const showTime = computed(() => {
@@ -26,6 +26,40 @@ const router = useRouter()
 function handleSkipDoc() {
   router.go(link.value)
 }
+
+const { coverPreview } = useImageStyle()
+
+const resultCover = computed(() => {
+  if (!props.cover) {
+    return ''
+  }
+  const baseCover = withBase(props.cover)
+  const coverRule = [coverPreview]
+    .flat()
+    .filter(v => !!v)
+    .find((coverRule) => {
+      if (!coverRule) {
+        return false
+      }
+      return coverRule.rule instanceof RegExp ? coverRule.rule.test(baseCover) : baseCover.includes(coverRule.rule)
+    })
+
+  if (!coverRule) {
+    return baseCover
+  }
+  const { suffix, replace, rule } = coverRule
+  if (!replace && suffix) {
+    return `${baseCover}${suffix}`
+  }
+  if (typeof replace === 'function') {
+    return replace(baseCover)
+  }
+  if (typeof replace === 'string') {
+    return baseCover.replace(rule, replace)
+  }
+
+  return baseCover
+})
 </script>
 
 <template>
@@ -62,7 +96,7 @@ function handleSkipDoc() {
         </div>
       </div>
       <!-- 右侧封面图 -->
-      <div v-show="cover" class="cover-img" :style="`background-image: url(${withBase(`${cover}`)});`" />
+      <div v-show="cover" class="cover-img" :style="`background-image: url(${resultCover});`" />
     </div>
     <!-- 底部补充描述 -->
     <div class="badge-list mobile-visible">

package/src/components/BlogList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, watch } from 'vue'
+import { computed, onMounted } from 'vue'
 import { ElPagination } from 'element-plus'
 import { useData, useRouter } from 'vitepress'
 import { useBrowserLocation } from '@vueuse/core'
@@ -60,32 +60,34 @@ 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))
+  window.scrollTo({ top: 0, behavior: 'auto' })
   router.go(
-    `${location.value.origin}${router.route.path}?${searchParams.toString()}`
+    `${router.route.path}?${searchParams.toString()}`
   )
 }
 
-watch(
-  location,
-  () => {
-    if (location.value.href) {
-      const { searchParams } = new URL(location.value.href)
-      if (searchParams.has(queryPageNumKey)) {
-        currentPage.value = Number(searchParams.get(queryPageNumKey))
-      }
-      else {
-        currentPage.value = 1
-      }
+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
     }
-  },
-  {
-    immediate: true
   }
-)
+}
+router.onBeforeRouteChange = (to) => {
+  refreshCurrentPage(to.slice(to.indexOf('?') + 1))
+}
+// 未覆盖的场景处理
+router.onAfterRouteChanged = (to) => {
+  refreshCurrentPage(to.slice(to.indexOf('?') + 1))
+}
+onMounted(() => {
+  refreshCurrentPage()
+})
 </script>
 
 <template>

package/src/composables/config/blog.ts

@@ -229,3 +229,7 @@ export function useCleanUrls() {
   const { site } = useData()
   return !!site.value.cleanUrls
 }
+
+export function useImageStyle() {
+  return inject(configSymbol)?.value?.blog?.imageStyle || {} as Theme.ImageStyleConfig
+}

package/src/composables/config/index.ts

@@ -97,7 +97,10 @@ export namespace Theme {
   }
   export interface activeTag {
     label: string
-    type: string
+    /**
+     * @type {string}
+     */
+    type: any
   }
 
   export type CommentConfig = ((GiscusOption & CommentCommonConfig) | GiscusConfig | ArtalkConfig)
@@ -446,6 +449,10 @@ export namespace Theme {
      * @default true
      */
     darkTransition?: boolean
+    /**
+     * 渲染时替换图片地址
+     */
+    imageStyle?: ImageStyleConfig
   }
 
   export interface BackToTop {
@@ -547,4 +554,25 @@ export namespace Theme {
      */
     expand?: boolean
   }
+
+  export interface ReplaceRule {
+    /**
+     * 匹配规则
+     */
+    rule: string | RegExp
+    /**
+     * 直接追加后缀
+     */
+    suffix?: string
+    /**
+     * 替换函数或字符串(优先级高于 suffix)
+     */
+    replace?: string | ((match: string) => string)
+  }
+  export interface ImageStyleConfig {
+    /**
+     * 首页封面预览图
+     */
+    coverPreview?: ReplaceRule | ReplaceRule[]
+  }
 }

package/src/index.ts

@@ -2,7 +2,18 @@
 import './styles/index.scss'
 
 // element-ui
-import 'element-plus/dist/index.css'
+// import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/base.css'
+import 'element-plus/theme-chalk/el-button.css'
+import 'element-plus/theme-chalk/el-tag.css'
+import 'element-plus/theme-chalk/el-icon.css'
+import 'element-plus/theme-chalk/el-avatar.css'
+import 'element-plus/theme-chalk/el-image.css'
+import 'element-plus/theme-chalk/el-image-viewer.css'
+import 'element-plus/theme-chalk/el-pagination.css'
+import 'element-plus/theme-chalk/el-carousel.css'
+import 'element-plus/theme-chalk/el-carousel-item.css'
+import 'element-plus/theme-chalk/el-alert.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 
 // 引入时间线组件样式
@@ -12,6 +23,7 @@ import DefaultTheme from 'vitepress/theme'
 import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
 
 // 图表渲染组件
+// @ts-expect-error
 import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue'
 import BlogApp from './components/BlogApp.vue'
 import { withConfigProvider } from './composables/config/blog'

package/src/styles/index.scss

@@ -192,4 +192,9 @@ span.svg-icon {
     font-weight: bold;
     background-color: var(--vp-c-brand-1);
   }
+}
+
+.VPImage.logo{
+  width: 24px;
+  height: 24px;
 }