@sugarat/theme 0.2.8 → 0.2.10

package/README.md

@@ -18,7 +18,7 @@ npm create @sugarat/theme@latest
 yarn create @sugarat/theme
 
 # With Bun
-bunx @sugarat/create-theme --bun
+bun create @sugarat/theme
 ```
 
 ![](https://img.cdn.sugarat.top/mdImg/MTY4OTQyMDE1NTcxMA==689420155710)
@@ -54,4 +54,5 @@ pnpm serve
 * [charles7c.github.io](https://github.com/Charles7c/charles7c.github.io)
 * [vitepress-blog-zaun](https://github.com/clark-cui/vitepress-blog-zaun)
 * [surmon](https://surmon.me/)
-* [vuejs/blog](https://github.com/vuejs/blog/tree/main)
+* [vuejs/blog](https://github.com/vuejs/blog/tree/main)
+* [列表无限滚动轮播效果](https://code.juejin.cn/pen/7145007064350195748)

package/node.d.ts

@@ -181,6 +181,23 @@ declare namespace Theme {
         url: string;
         avatar: ThemeableImage;
     }
+    interface FriendConfig {
+        list: FriendLink[];
+        /**
+         * 是否随机展示
+         * @default false
+         */
+        random?: boolean;
+        /**
+         * 是否限制展示数量（超出自动切换）
+         */
+        limit?: number;
+        /**
+         * 滚动速度(ms)，设置为 0 不滚动直接截取
+         * @default "动态计算"
+         */
+        scrollSpeed?: number;
+    }
     interface UserWork {
         title: string;
         description: string;
@@ -264,7 +281,7 @@ declare namespace Theme {
          */
         alert?: Alert;
         popover?: Popover;
-        friend?: FriendLink[];
+        friend?: FriendLink[] | FriendConfig;
         authorList?: Omit<FriendLink, 'avatar'>[];
         /**
          * 启用 [vitepress-plugin-tabs](https://www.npmjs.com/package/vitepress-plugin-tabs)

package/node.js

@@ -36,7 +36,7 @@ __export(node_exports, {
 });
 module.exports = __toCommonJS(node_exports);
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.0-rc.29_vue@3.3.4/node_modules/vitepress-plugin-tabs/dist/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.0-rc.32_vue@3.3.4/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.2.8",
+  "version": "0.2.10",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -54,7 +54,7 @@
     "pagefind": "1.0.3",
     "sass": "^1.56.1",
     "typescript": "^4.8.2",
-    "vitepress": "1.0.0-rc.29",
+    "vitepress": "1.0.0-rc.32",
     "vue": "^3.3.4"
   },
   "scripts": {

package/src/components/BlogAlert.vue

@@ -5,9 +5,9 @@ import { useBlogConfig } from '../composables/config/blog'
 
 const { alert: alertProps } = useBlogConfig()
 const show = ref(false)
-
+const storageKey = 'theme-blog-alert'
+const closeFlag = `${storageKey}-close`
 onMounted(() => {
-  const storageKey = 'theme-blog-alert'
   // 取旧值
   const oldValue = localStorage.getItem(storageKey)
   const newValue = JSON.stringify(alertProps)
@@ -21,13 +21,28 @@ onMounted(() => {
         show.value = false
       }, alertProps?.duration)
     }
+    return
   }
 
   if (oldValue !== newValue && alertProps?.duration === -1) {
     // 当做新值处理
     show.value = true
+    localStorage.removeItem(closeFlag)
+    return
+  }
+
+  // 新旧相等，判断是否点击过close，没点击关闭依然展示
+  if (oldValue === newValue && alertProps?.duration === -1 && !localStorage.getItem(closeFlag)) {
+    show.value = true
   }
 })
+
+function handleClose() {
+  show.value = false
+  if (alertProps?.duration === -1) {
+    localStorage.setItem(closeFlag, `${+new Date()}`)
+  }
+}
 </script>
 
 <template>
@@ -40,6 +55,7 @@ onMounted(() => {
       :closable="alertProps?.closable"
       :close-text="alertProps?.closeText"
       :description="alertProps?.description"
+      @close="handleClose"
     >
       <div v-if="alertProps?.html" v-html="alertProps?.html" />
     </ElAlert>

package/src/components/BlogFriendLink.vue

@@ -3,15 +3,48 @@ import { ElAvatar } from 'element-plus'
 import { useDark } from '@vueuse/core'
 import { computed } from 'vue'
 import { useBlogConfig } from '../composables/config/blog'
-import { getImageUrl } from '../utils/client'
+import { getImageUrl, shuffleArray } from '../utils/client'
+import type { Theme } from '../'
 
 const isDark = useDark({
   storageKey: 'vitepress-theme-appearance'
 })
 
 const { friend } = useBlogConfig()
+const friendConfig = computed<Theme.FriendConfig>(() => ({
+  list: [],
+  random: false,
+  limit: Number.MAX_SAFE_INTEGER,
+  ...(Array.isArray(friend) ? { list: friend } : friend)
+}))
+
+// TODO: 待优化
+const limit = computed(() => {
+  const { limit } = friendConfig.value
+  return (!limit || limit <= 0) ? 0 : limit || Number.MAX_SAFE_INTEGER
+})
+
+const scrollSpeed = computed(() => {
+  const { scrollSpeed } = friendConfig.value
+  return (!scrollSpeed || scrollSpeed <= 0) ? (friendConfig.value.list.length - 1) * (friendConfig.value.list.length / limit.value) * 1000 : scrollSpeed
+})
+
+const openScroll = computed(() => {
+  return scrollSpeed.value > 0 && limit.value < friendConfig.value.list.length
+})
+
 const friendList = computed(() => {
-  return friend?.map((v) => {
+  const data = [...friendConfig.value.list]
+  // 简单的随机打乱
+  if (friendConfig.value.random) {
+    data.splice(0, data.length, ...shuffleArray(data))
+  }
+
+  // 展示个数限制，删除多余的
+  if (scrollSpeed.value === 0 && limit.value) {
+    data.splice(limit.value)
+  }
+  const list = data.map((v) => {
     const { avatar, nickname } = v
     const avatarUrl = getImageUrl(avatar, isDark.value)
     let alt = nickname
@@ -25,6 +58,18 @@ const friendList = computed(() => {
       alt
     }
   })
+  return openScroll.value ? [...list, ...list] : list
+})
+
+const cardHeight = 83
+const scrollWrapperHeight = computed(() => {
+  return openScroll.value ? limit.value * cardHeight : 0
+})
+const containerHeight = computed(() => {
+  return scrollWrapperHeight.value ? `${scrollWrapperHeight.value}px` : 'auto'
+})
+const scrollTop = computed(() => {
+  return `-${scrollWrapperHeight.value * 2}px`
 })
 </script>
 
@@ -51,18 +96,30 @@ const friendList = computed(() => {
         />
       </svg> 友情链接</span>
     </div>
-    <!-- 文章列表 -->
-    <ol class="friend-list">
-      <li v-for="v in friendList" :key="v.nickname">
-        <a :href="v.url" target="_blank">
-          <ElAvatar :size="50" :src="v.avatar" :alt="v.alt" />
-          <div>
-            <span class="nickname">{{ v.nickname }}</span>
-            <p class="des">{{ v.des }}</p>
-          </div>
-        </a>
-      </li>
-    </ol>
+    <!-- 友链列表 -->
+    <div
+      class="scroll-wrapper" :style="{
+        height: containerHeight,
+      }"
+    >
+      <ol
+        class="friend-list" :style="{
+          animationPlayState: openScroll ? 'running' : 'paused',
+          animationDuration: `${scrollSpeed / 1000}s`,
+        }
+        "
+      >
+        <li v-for="v in friendList" :key="v.nickname">
+          <a :href="v.url" target="_blank">
+            <ElAvatar :size="50" :src="v.avatar" :alt="v.alt" />
+            <div>
+              <span class="nickname">{{ v.nickname }}</span>
+              <p class="des">{{ v.des }}</p>
+            </div>
+          </a>
+        </li>
+      </ol>
+    </div>
   </div>
 </template>
 
@@ -102,6 +159,20 @@ const friendList = computed(() => {
   flex-direction: column;
 }
 
+@keyframes scrollList {
+  0% {
+    top: 0;
+  }
+  100% {
+    top: v-bind(scrollTop);
+  }
+}
+
+.scroll-wrapper {
+  overflow: hidden;
+  position: relative;
+}
+
 .friend-list {
   display: flex;
   flex-direction: column;
@@ -110,6 +181,16 @@ const friendList = computed(() => {
   padding: 0 10px 0 0px;
   width: 100%;
 
+  position: relative;
+  width: 100%;
+  animation-name: scrollList;
+  animation-timing-function:linear;
+  animation-iteration-count:infinite;
+
+  &:hover {
+    animation-play-state: paused !important;
+  }
+
   li {
     padding: 6px;
     margin-top: 10px;

package/src/components/BlogHomeTags.vue

@@ -1,14 +1,15 @@
 <script lang="ts" setup>
 import { computed, watch } from 'vue'
 import { ElTag } from 'element-plus'
-import { useBrowserLocation, useDark } from '@vueuse/core'
-import { useRouter } from 'vitepress'
+import { useBrowserLocation, useDark, useUrlSearchParams } from '@vueuse/core'
+import { useRouter, useRoute } from 'vitepress'
 import {
   useActiveTag,
   useArticles,
   useCurrentPageNum
 } from '../composables/config/blog'
 
+const route = useRoute()
 const docs = useArticles()
 
 const tags = computed(() => {
@@ -62,6 +63,17 @@ watch(
     immediate: true
   }
 )
+
+watch(
+  route,
+  () => {
+    const params = useUrlSearchParams()
+    if (!params.tag) {
+      activeTag.value.type = ''
+      activeTag.value.label = ''
+    }
+  }
+)
 </script>
 
 <template>

package/src/components/BlogPopover.vue

@@ -17,13 +17,14 @@ const bodyContent = computed(() => {
 const footerContent = computed(() => {
   return popoverProps?.footer || []
 })
+const storageKey = 'theme-blog-popover'
+const closeFlag = `${storageKey}-close`
 
 onMounted(() => {
   if (!popoverProps?.title) {
     return
   }
 
-  const storageKey = 'theme-blog-popover'
   // 取旧值
   const oldValue = localStorage.getItem(storageKey)
   const newValue = JSON.stringify(popoverProps)
@@ -37,14 +38,29 @@ onMounted(() => {
         show.value = false
       }, popoverProps?.duration)
     }
+    return
   }
 
   if (oldValue !== newValue && popoverProps?.duration === -1) {
     // 当做新值处理
     show.value = true
+    localStorage.removeItem(closeFlag)
+    return
+  }
+
+  // 新旧相等，判断是否点击过close，没点击关闭依然展示
+  if (oldValue === newValue && popoverProps?.duration === -1 && !localStorage.getItem(closeFlag)) {
+    show.value = true
   }
 })
 
+function handleClose() {
+  show.value = false
+  if (popoverProps?.duration === -1) {
+    localStorage.setItem(closeFlag, `${+new Date()}`)
+  }
+}
+
 function PopoverValue(props: { key: number; item: BlogPopover.Value },
   { slots }: any) {
   const { key, item } = props
@@ -105,7 +121,7 @@ function PopoverValue(props: { key: number; item: BlogPopover.Value },
         </ElIcon>
         <span class="title">{{ popoverProps?.title }}</span>
       </div>
-      <ElIcon class="close-icon" size="20px" @click="show = false">
+      <ElIcon class="close-icon" size="20px" @click="handleClose">
         <CircleCloseFilled />
       </ElIcon>
     </div>

package/src/composables/config/index.ts

@@ -193,6 +193,24 @@ export namespace Theme {
     avatar: ThemeableImage
   }
 
+  export interface FriendConfig {
+    list: FriendLink[]
+    /**
+     * 是否随机展示
+     * @default false
+     */
+    random?: boolean
+    /**
+     * 是否限制展示数量（超出自动切换）
+     */
+    limit?: number
+    /**
+     * 滚动速度(ms)，设置为 0 不滚动直接截取
+     * @default "动态计算"
+     */
+    scrollSpeed?: number
+  }
+
   export interface UserWork {
     title: string
     description: string
@@ -295,7 +313,7 @@ export namespace Theme {
      */
     alert?: Alert
     popover?: Popover
-    friend?: FriendLink[]
+    friend?: FriendLink[] | FriendConfig
     authorList?: Omit<FriendLink, 'avatar'>[]
     /**
      * 启用 [vitepress-plugin-tabs](https://www.npmjs.com/package/vitepress-plugin-tabs)

package/src/utils/client/index.ts

@@ -1,5 +1,13 @@
 import type { ThemeableImage } from '../../composables/config'
 
+export function shuffleArray(arr: any[]) {
+  const array = [...arr]
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]]
+  }
+  return array
+}
 export function formatDate(d: any, fmt = 'yyyy-MM-dd hh:mm:ss') {
   if (!(d instanceof Date)) {
     d = new Date(d)