@sugarat/theme 0.1.25 → 0.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "main": "src/index.ts",
   "exports": {
@@ -41,12 +41,12 @@
     "vue-command-palette": "^0.1.4"
   },
   "devDependencies": {
-    "@element-plus/icons-vue": "^2.0.10",
-    "element-plus": "^2.2.28",
+    "@element-plus/icons-vue": "^2.1.0",
+    "element-plus": "^2.3.4",
     "sass": "^1.56.1",
     "tsup": " ^6.5.0",
     "typescript": "^4.8.2",
-    "vitepress": "1.0.0-alpha.62",
+    "vitepress": "1.0.0-alpha.74",
     "vue": "^3.2.45"
   },
   "scripts": {

package/src/components/BlogApp.vue

@@ -43,7 +43,9 @@ const { Layout } = Theme
           <BlogHomeBanner />
         </div>
         <div class="content-wrapper">
-          <div class="blog-list-wrapper"><blog-list /></div>
+          <div class="blog-list-wrapper">
+            <BlogList />
+          </div>
           <div class="blog-info-wrapper"><BlogHomeInfo /></div>
         </div>
       </div>

package/src/components/BlogHomeTags.vue

@@ -33,7 +33,11 @@ import { computed, watch } from 'vue'
 import { ElTag } from 'element-plus'
 import { useBrowserLocation, useDark } from '@vueuse/core'
 import { useRouter } from 'vitepress'
-import { useActiveTag, useArticles } from '../composables/config/blog'
+import {
+  useActiveTag,
+  useArticles,
+  useCurrentPageNum
+} from '../composables/config/blog'
 
 const docs = useArticles()
 
@@ -50,14 +54,18 @@ const isDark = useDark({
 const colorMode = computed(() => (isDark.value ? 'light' : 'dark'))
 
 const tagType: any = ['', 'info', 'success', 'warning', 'danger']
+const currentPage = useCurrentPageNum()
 
 const 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) => {
   if (tag === activeTag.value.label) {
     handleCloseTag()
@@ -65,14 +73,14 @@ const handleTagClick = (tag: string, type: string) => {
   }
   activeTag.value.type = type
   activeTag.value.label = tag
-
+  currentPage.value = 1
   router.go(
-    `${window.location.origin}${router.route.path}?tag=${tag}&type=${type}`
+    `${location.value.origin}${router.route.path}?tag=${tag}&type=${type}`
   )
 }
-const location = useBrowserLocation()
+
 watch(
-  () => location.value,
+  location,
   () => {
     if (location.value.href) {
       const url = new URL(location.value.href!)

package/src/components/BlogList.vue

@@ -13,25 +13,32 @@
       />
     </li>
   </ul>
-  <el-pagination
-    v-if="wikiList.length >= pageSize"
-    small
-    background
-    v-model:current-page="currentPage"
-    :page-size="pageSize"
-    :total="filterData.length"
-    layout="prev, pager, next, jumper"
-  />
+  <!-- 解决element-ui bug -->
+  <ClientOnly>
+    <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"
+    />
+  </ClientOnly>
 </template>
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, watch } from 'vue'
 import { ElPagination } from 'element-plus'
-import { useData } from 'vitepress'
+import { useData, useRouter } from 'vitepress'
+import { useBrowserLocation } from '@vueuse/core'
 import BlogItem from './BlogItem.vue'
 import {
   useArticles,
   useActiveTag,
-  useBlogConfig
+  useBlogConfig,
+  useCurrentPageNum
 } from '../composables/config/blog'
 import { Theme } from '../composables/config'
 
@@ -68,11 +75,43 @@ const { home } = useBlogConfig()
 const pageSize = computed(
   () => frontmatter.value.blog?.pageSize || home?.pageSize || 6
 )
-const currentPage = ref(1)
-
+const currentPage = useCurrentPageNum()
 const currentWikiData = computed(() => {
   const startIdx = (currentPage.value - 1) * pageSize.value
   const endIdx = startIdx + pageSize.value
   return filterData.value.slice(startIdx, endIdx)
 })
+
+const router = useRouter()
+const location = useBrowserLocation()
+const queryPageNumKey = 'pageNum'
+const 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))
+  router.go(
+    `${location.value.origin}${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
+      }
+    }
+  },
+  {
+    immediate: true
+  }
+)
 </script>

package/src/composables/config/blog.ts

@@ -16,6 +16,7 @@ const configSymbol: InjectionKey<Ref<Theme.Config>> = Symbol('theme-config')
 
 const activeTagSymbol: InjectionKey<Ref<Theme.activeTag>> = Symbol('active-tag')
 
+const currentPageNum: InjectionKey<Ref<number>> = Symbol('home-page-num')
 const homeConfigSymbol: InjectionKey<Theme.HomeConfig> = Symbol('home-config')
 
 export function withConfigProvider(App: Component) {
@@ -39,6 +40,10 @@ export function withConfigProvider(App: Component) {
         type: ''
       })
       provide(activeTagSymbol, activeTag)
+
+      const pageNum = ref(1)
+      provide(currentPageNum, pageNum)
+
       return () => h(App, null, slots)
     }
   })
@@ -75,6 +80,9 @@ export function useArticles() {
 export function useActiveTag() {
   return inject(activeTagSymbol)!
 }
+export function useCurrentPageNum() {
+  return inject(currentPageNum)!
+}
 
 export function useCurrentArticle() {
   const blogConfig = useConfig()

package/src/components/BlogLazyImage.vue

@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-import { useData, useRoute } from 'vitepress'
-import { computed, onMounted, ref, watch } from 'vue'
-import { useBlogConfig } from '../composables/config/blog'
-
-const routeData = useRoute()
-const { frontmatter } = useData()
-const { article } = useBlogConfig()
-const openLazy = computed(() => {
-  return (frontmatter.value.lazy || article?.lazy) ?? true
-})
-const imageList = ref<HTMLImageElement[]>([])
-const currentObserver = ref<IntersectionObserver>()
-const refresh = () => {
-  if (openLazy.value) {
-    const docDomContainer = window.document.querySelector('#VPContent')
-    const imgs = docDomContainer?.querySelectorAll<HTMLImageElement>(
-      '.content-container .main img'
-    )
-    // 销毁旧的
-    imageList.value.forEach((v) => currentObserver.value?.unobserve(v))
-
-    // 存新的
-    imageList.value = Array.from(imgs as unknown as HTMLImageElement[])
-
-    // 初始化
-    imageList.value.forEach((img) => {
-      const src = img.getAttribute('src')
-      if (src) {
-        img.removeAttribute('src')
-        img.setAttribute('data-src', src)
-      }
-    })
-
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          const img = entry.target
-          const src = img.getAttribute('data-src')
-          if (src) {
-            img.setAttribute('src', src)
-          }
-          observer.unobserve(img)
-
-          console.log('render', src)
-        }
-      })
-    })
-
-    // 监听
-    imageList.value.forEach((img) => {
-      observer.observe(img)
-    })
-  }
-}
-watch(routeData, () => {
-  refresh()
-})
-
-onMounted(() => {
-  refresh()
-})
-</script>