@sugarat/theme 0.2.28 → 0.2.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.2.28",
+  "version": "0.2.29",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",

package/src/components/BlogHotArticle.vue

@@ -2,8 +2,8 @@
 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 { useArticles, useBlogConfig, useCleanUrls } from '../composables/config/blog'
+import { formatShowDate, wrapperCleanUrls } from '../utils/client'
 import { fireSVG } from '../constants/svg'
 
 const { hotArticle } = useBlogConfig()
@@ -27,10 +27,14 @@ function changePage() {
   currentPage.value = newIdx + 1
 }
 
+const cleanUrls = useCleanUrls()
 const currentWikiData = computed(() => {
   const startIdx = (currentPage.value - 1) * pageSize.value
   const endIdx = startIdx + pageSize.value
-  return recommendList.value.slice(startIdx, endIdx)
+  return recommendList.value.slice(startIdx, endIdx).map(v => ({
+    ...v,
+    route: wrapperCleanUrls(cleanUrls, v.route)
+  }))
 })
 
 const showChangeBtn = computed(() => {

package/src/components/BlogItem.vue

@@ -2,7 +2,8 @@
 import { withBase } from 'vitepress'
 import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
-import { formatShowDate } from '../utils/client'
+import { formatShowDate, wrapperCleanUrls } from '../utils/client'
+import { useCleanUrls } from '../composables/config/blog'
 
 const props = defineProps<{
   route: string
@@ -22,22 +23,12 @@ const showTime = computed(() => {
   return formatShowDate(props.date)
 })
 
-// function isWrappedWithPreventDefault(element: HTMLElement) {
-//   let parent = element.parentElement
-
-//   while (parent) {
-//     if (parent.hasAttribute('preventDefault')) {
-//       return true
-//     }
-//     parent = parent.parentElement
-//   }
-
-//   return false
-// }
+const cleanUrls = useCleanUrls()
+const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route)))
 </script>
 
 <template>
-  <a class="blog-item" :href="withBase(route)">
+  <a class="blog-item" :href="link">
     <i v-if="!!pin" class="pin" />
     <!-- 标题 -->
     <p v-if="inMobile" class="title">{{ title }}</p>

package/src/components/BlogRecommendArticle.vue

@@ -2,8 +2,8 @@
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, withBase } from 'vitepress'
 import { ElButton, ElLink } from 'element-plus'
-import { formatShowDate } from '../utils/client'
-import { useArticles, useBlogConfig } from '../composables/config/blog'
+import { formatShowDate, wrapperCleanUrls } from '../utils/client'
+import { useArticles, useBlogConfig, useCleanUrls } from '../composables/config/blog'
 import { recommendSVG } from '../constants/svg'
 import type { Theme } from '../composables/config/index'
 
@@ -145,6 +145,8 @@ onMounted(() => {
   const currentPageNum = Math.floor(currentPageIndex / pageSize.value) + 1
   currentPage.value = currentPageNum
 })
+
+const cleanUrls = useCleanUrls()
 </script>
 
 <template>
@@ -170,7 +172,7 @@ onMounted(() => {
           <ElLink
             type="info" class="title" :class="{
               current: isCurrentDoc(v.route),
-            }" :href="v.route"
+            }" :href="wrapperCleanUrls(cleanUrls, v.route)"
           >
             {{ v.meta.title }}
           </ElLink>

package/src/composables/config/blog.ts

@@ -225,3 +225,8 @@ export function useHomeFooterConfig() {
 export function useBackToTopConfig() {
   return useBlogConfig().backToTop
 }
+
+export function useCleanUrls() {
+  const { site } = useData()
+  return !!site.value.cleanUrls
+}

package/src/index.ts

@@ -31,7 +31,9 @@ export const BlogTheme: Theme = {
     DefaultTheme.enhanceApp(ctx)
     ctx.app.component('TimelinePage', TimelinePage)
     ctx.app.component('UserWorksPage', UserWorksPage)
-    ctx.app.component('Mermaid', Mermaid as any)
+    if (!ctx.app.component('Mermaid')) {
+      ctx.app.component('Mermaid', Mermaid as any)
+    }
   }
 }
 

package/src/utils/client/index.ts

@@ -172,3 +172,8 @@ export function getImageUrl(
   } // 如果 ThemeableImage 类型不是上述情况，则返回空字符串
   return ''
 }
+
+export function wrapperCleanUrls(cleanUrls: boolean, route: string) {
+  const tempUrl = route.replace(/\.html$/, '')
+  return cleanUrls ? tempUrl : `${tempUrl}.html`
+}