@sugarat/theme 0.2.23 → 0.2.25

package/node.d.ts

@@ -61,7 +61,7 @@ declare namespace Theme {
         /**
          * 手动控制相关文章列表的顺序
          */
-        recommend?: number | false;
+        recommend?: number | false | string | string[] | [...string[], number];
         /**
          * TODO: 待开发
          * 时间线
@@ -168,6 +168,11 @@ declare namespace Theme {
     }
     interface ArticleConfig {
         readingTime?: boolean;
+        /**
+         * 阅读时间分析展示位置
+         * @default 'inline'
+         */
+        readingTimePosition?: 'inline' | 'newLine' | 'top';
         hiddenCover?: boolean;
     }
     interface Alert {
@@ -403,7 +408,7 @@ declare namespace Theme {
     type RSSOptions = RSSPluginOptions;
     interface Footer {
         /**
-         * 自定义补充信息
+         * 自定义补充信息（支持配置为HTML）
          */
         message?: string | string[];
         /**

package/node.js

@@ -39,7 +39,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.0.0-rc.43_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.45_vue@3.4.21/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.23",
+  "version": "0.2.25",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -45,7 +45,7 @@
     "swiper": "^11.0.5",
     "vitepress-markdown-timeline": "^1.2.1",
     "vitepress-plugin-mermaid": "2.0.13",
-    "vitepress-plugin-pagefind": "0.2.12",
+    "vitepress-plugin-pagefind": "0.2.13",
     "vitepress-plugin-rss": "0.2.2",
     "vitepress-plugin-tabs": "0.2.0"
   },
@@ -56,8 +56,8 @@
     "pagefind": "1.0.3",
     "sass": "^1.56.1",
     "typescript": "^4.8.2",
-    "vitepress": "1.0.0-rc.43",
-    "vue": "^3.3.4"
+    "vitepress": "1.0.0-rc.45",
+    "vue": "^3.4.21"
   },
   "scripts": {
     "dev": "npm run build:node && npm run dev:docs",

package/src/components/BlogArticleAnalyze.vue

@@ -17,6 +17,8 @@ import type { Theme } from '../composables/config'
 import BlogDocCover from './BlogDocCover.vue'
 
 const { article, authorList } = useBlogConfig()
+const readingTimePosition = article?.readingTimePosition || 'inline'
+
 const { frontmatter } = useData()
 const tags = computed(() => {
   const { tag, tags, categories } = frontmatter.value
@@ -136,7 +138,7 @@ watch(
 </script>
 
 <template>
-  <div v-if="showAnalyze" class="doc-analyze" data-pagefind-ignore="all">
+  <div v-if="showAnalyze && readingTimePosition === 'top'" class="doc-analyze" data-pagefind-ignore="all">
     <span>
       <ElIcon><EditPen /></ElIcon>
       字数：{{ wordCount }} 个字
@@ -148,8 +150,8 @@ watch(
   </div>
   <div id="hack-article-des" ref="$des" class="meta-des">
     <!-- TODO：是否需要原创？转载等标签，理论上可以添加标签解决，可以参考 charles7c -->
-    <span v-if="author && !hiddenAuthor" class="author">
-      <ElIcon title="本文作者"><UserFilled /></ElIcon>
+    <span v-if="author && !hiddenAuthor" class="author" title="本文作者">
+      <ElIcon><UserFilled /></ElIcon>
       <a
         v-if="currentAuthorInfo"
         class="link"
@@ -162,15 +164,37 @@ watch(
         {{ author }}
       </template>
     </span>
-    <span v-if="publishDate && !hiddenTime" class="publishDate">
-      <ElIcon :title="timeTitle"><Clock /></ElIcon>
+    <span v-if="publishDate && !hiddenTime" class="publishDate" :title="timeTitle">
+      <ElIcon><Clock /></ElIcon>
       {{ publishDate }}
     </span>
-    <span v-if="tags.length" class="tags">
-      <ElIcon :title="timeTitle"><CollectionTag /></ElIcon>
+    <span v-if="tags.length" class="tags" title="标签">
+      <ElIcon><CollectionTag /></ElIcon>
       <a v-for="tag in tags" :key="tag" class="link" :href="`/?tag=${tag}`">{{ tag }}
       </a>
     </span>
+    <template v-if="readingTimePosition === 'inline' && showAnalyze">
+      <span title="文章字数">
+        <ElIcon><EditPen /></ElIcon>
+        {{ wordCount }} 个字
+      </span>
+      <span title="预计阅读时间">
+        <ElIcon><AlarmClock /></ElIcon>
+        {{ readTime }} 分钟
+      </span>
+    </template>
+    <template v-if="readingTimePosition === 'newLine' && showAnalyze">
+      <div style="width: 100%;" class="new-line-meta-des">
+        <span title="文章字数">
+          <ElIcon><EditPen /></ElIcon>
+          {{ wordCount }} 个字
+        </span>
+        <span title="预计阅读时间">
+          <ElIcon><AlarmClock /></ElIcon>
+          {{ readTime }} 分钟
+        </span>
+      </div>
+    </template>
     <!-- 封面展示 -->
     <ClientOnly>
       <BlogDocCover />
@@ -194,14 +218,14 @@ watch(
     }
   }
 }
-.meta-des {
+.meta-des,.new-line-meta-des {
   text-align: left;
   color: var(--vp-c-text-2);
   font-size: 14px;
   margin-top: 6px;
   display: flex;
   flex-wrap: wrap;
-  span {
+  >span {
     margin-right: 16px;
     display: flex;
     align-items: center;

package/src/components/BlogRecommendArticle.vue

@@ -5,6 +5,7 @@ import { ElButton, ElLink } from 'element-plus'
 import { formatShowDate } from '../utils/client'
 import { useArticles, useBlogConfig } from '../composables/config/blog'
 import { recommendSVG } from '../constants/svg'
+import type { Theme } from '../composables/config/index'
 
 const { recommend: _recommend } = useBlogConfig()
 
@@ -27,18 +28,47 @@ const docs = useArticles()
 
 const route = useRoute()
 
+function getRecommendCategory(page?: Theme.PageData): string[] {
+  if (!page)
+    return []
+  const { meta } = page
+  if (Array.isArray(meta.recommend)) {
+    return meta.recommend.filter(v => typeof v === 'string') as string[]
+  }
+  if (typeof meta.recommend === 'string') {
+    return [meta.recommend]
+  }
+  return []
+}
+
+function getRecommendValue(page?: Theme.PageData) {
+  return Array.isArray(page?.meta?.recommend) ? page.meta.recommend[page.meta.recommend.length - 1] : page?.meta.recommend
+}
+
+function hasIntersection(arr1: any[], arr2: any[]) {
+  return arr1.some(item => arr2.includes(item))
+}
+
 const recommendList = computed(() => {
   // 中文支持
   const paths = decodeURIComponent(route.path).split('/')
-
+  const currentPage = docs.value.find(v => isCurrentDoc(v.route))
+  const currentRecommendCategory = getRecommendCategory(currentPage)
   const origin = docs.value
     .map(v => ({ ...v, route: withBase(v.route) }))
-    // 过滤出公共路由前缀
-    // 限制为同路由前缀
     .filter(
-      v =>
-        v.route.split('/').length === paths.length
+      (v) => {
+        // 筛选出类别有交集的
+        if (currentRecommendCategory.length) {
+          return hasIntersection(currentRecommendCategory, getRecommendCategory(v))
+        }
+        // 如果没有自定义归类则保持原逻辑
+        // 过滤出公共路由前缀
+        // 限制为同路由前缀
+        return v.route.split('/').length === paths.length
         && v.route.startsWith(paths.slice(0, paths.length - 1).join('/'))
+      }
+
     )
     // 过滤出带标题的
     .filter(v => !!v.meta.title)
@@ -50,12 +80,16 @@ const recommendList = computed(() => {
     )
     // 过滤掉不需要展示的
     .filter(v => v.meta.recommend !== false)
+    // 自定义过滤
     .filter(v => recommend.value?.filter?.(v) ?? true)
 
-  const topList = origin.filter(v => v.meta?.recommend)
-  topList.sort((a, b) => Number(a.meta.recommend) - Number(b.meta.recommend))
+  const topList = origin.filter((v) => {
+    const value = getRecommendValue(v)
+    return typeof value === 'number'
+  })
+  topList.sort((a, b) => Number(getRecommendValue(a)) - Number(getRecommendValue(b)))
 
-  const normalList = origin.filter(v => !v.meta?.recommend)
+  const normalList = origin.filter(v => typeof getRecommendValue(v) !== 'number')
 
   // 排序
   const sortMode = recommend.value?.sort ?? 'date'
@@ -104,19 +138,12 @@ const showChangeBtn = computed(() => {
 })
 
 onMounted(() => {
-  const checkHaveActive = () => {
-    const have = currentWikiData.value.some(v => isCurrentDoc(v.route))
-    if (have) {
-      return
-    }
-    if (currentPage.value >= changePage()) {
-      return
-    }
-
-    // TODO：存在理论闪烁情况，未来优化
-    setTimeout(checkHaveActive)
-  }
-  checkHaveActive()
+  // 更新当前页，确保访问页面在列表中
+  const currentPageIndex = recommendList.value.findIndex(v => isCurrentDoc(v.route))
+  if (currentPageIndex === -1)
+    return
+  const currentPageNum = Math.floor(currentPageIndex / pageSize.value) + 1
+  currentPage.value = currentPageNum
 })
 </script>
 

package/src/composables/config/index.ts

@@ -66,7 +66,7 @@ export namespace Theme {
     /**
      * 手动控制相关文章列表的顺序
      */
-    recommend?: number | false
+    recommend?: number | false | string | string[] | [...string[], number]
     /**
      * TODO: 待开发
      * 时间线
@@ -178,6 +178,11 @@ export namespace Theme {
 
   export interface ArticleConfig {
     readingTime?: boolean
+    /**
+     * 阅读时间分析展示位置
+     * @default 'inline'
+     */
+    readingTimePosition?: 'inline' | 'newLine' | 'top'
     hiddenCover?: boolean
   }
   export interface Alert {
@@ -440,7 +445,7 @@ export namespace Theme {
 
   export interface Footer {
     /**
-     * 自定义补充信息
+     * 自定义补充信息（支持配置为HTML）
      */
     message?: string | string[]
     /**