@sugarat/theme 0.5.5 → 0.5.6

package/node.d.ts

@@ -181,6 +181,11 @@ declare namespace Theme {
          * 首页数据分析卡片
          */
         analysis?: HomeAnalysis;
+        /**
+         * 首页博客信息卡片是否在移动端折叠展示
+         * @default false
+         */
+        blogInfoCollapsible?: boolean;
     }
     interface ArticleConfig {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -54,8 +54,8 @@
     "vitepress-plugin-mermaid": "2.0.13",
     "vitepress-plugin-tabs": "0.2.0",
     "@sugarat/theme-shared": "0.0.5",
-    "vitepress-plugin-pagefind": "0.4.14",
     "vitepress-plugin-announcement": "0.1.5",
+    "vitepress-plugin-pagefind": "0.4.14",
     "vitepress-plugin-rss": "0.3.1"
   },
   "devDependencies": {

package/src/components/BlogApp.vue

@@ -3,7 +3,7 @@ import Theme from 'vitepress/theme'
 import { useData } from 'vitepress'
 import { computed } from 'vue'
 import { useDarkTransition } from '../hooks/useDarkTransition'
-import { useBlogThemeMode, useDarkTransitionConfig } from '../composables/config/blog'
+import { useBlogInfoCollapsible, useBlogThemeMode, useDarkTransitionConfig } from '../composables/config/blog'
 import BlogHomeInfo from './BlogHomeInfo.vue'
 import BlogHomeBanner from './BlogHomeBanner.vue'
 import BlogList from './BlogList.vue'
@@ -26,6 +26,8 @@ const layout = computed(() => frontmatter.value.layout)
 const isBlogTheme = useBlogThemeMode()
 const { Layout } = Theme
 
+const blogInfoCollapsible = useBlogInfoCollapsible()
+
 // 切换深色模式过渡
 // https://vitepress.dev/zh/guide/extending-default-theme#on-appearance-toggle
 useDarkTransition()
@@ -67,7 +69,11 @@ const openTransition = useDarkTransitionConfig()
           <div class="blog-list-wrapper">
             <BlogList />
           </div>
-          <div class="blog-info-wrapper">
+          <div
+            :class="{
+              'normal-mode': blogInfoCollapsible,
+            }" class="blog-info-wrapper"
+          >
             <BlogHomeInfo />
           </div>
         </div>
@@ -108,6 +114,9 @@ const openTransition = useDarkTransitionConfig()
       <slot name="nav-screen-content-before" />
     </template>
     <template #nav-screen-content-after>
+      <div v-if="blogInfoCollapsible" class="minify-mode blog-info-wrapper">
+        <BlogHomeInfo />
+      </div>
       <slot name="nav-screen-content-after" />
     </template>
 
@@ -226,6 +235,24 @@ const openTransition = useDarkTransitionConfig()
     margin: 20px 0;
     width: 100%;
   }
+
+  .normal-mode {
+    display: none;
+  }
+
+  .minify-mode {
+    display: block;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .minify-mode {
+    display: none;
+  }
+
+  .normal-mode {
+    display: block;
+  }
 }
 </style>
 

package/src/components/BlogArticleAnalyze.vue

@@ -131,24 +131,25 @@ const timeTitle = computed(() =>
 <template>
   <div v-if="showAnalyze && readingTimePosition === 'top'" class="doc-analyze" data-pagefind-ignore="all">
     <span>
-      <ElIcon><EditPen /></ElIcon>
+      <ElIcon>
+        <EditPen />
+      </ElIcon>
       {{ topWordCount }}
     </span>
     <span>
-      <ElIcon><AlarmClock /></ElIcon>
+      <ElIcon>
+        <AlarmClock />
+      </ElIcon>
       {{ topReadTime }}
     </span>
   </div>
   <div id="hack-article-des" ref="$des" class="meta-des">
     <!-- TODO：是否需要原创？转载等标签，理论上可以添加标签解决，可以参考 charles7c -->
     <span v-if="author && !hiddenAuthor" class="author" :title="authorTitle">
-      <ElIcon><UserFilled /></ElIcon>
-      <a
-        v-if="currentAuthorInfo"
-        class="link"
-        :href="currentAuthorInfo.url"
-        :title="currentAuthorInfo.des"
-      >
+      <ElIcon>
+        <UserFilled />
+      </ElIcon>
+      <a v-if="currentAuthorInfo" class="link" :href="currentAuthorInfo.url" :title="currentAuthorInfo.des">
         {{ currentAuthorInfo.nickname }}
       </a>
       <template v-else>
@@ -156,36 +157,48 @@ const timeTitle = computed(() =>
       </template>
     </span>
     <span v-if="publishDate && !hiddenTime" class="publishDate" :title="timeTitle + hoverDate">
-      <ElIcon><Clock /></ElIcon>
+      <ElIcon>
+        <Clock />
+      </ElIcon>
       {{ publishDate }}
     </span>
-    <span v-if="tags.length" class="tags" :title="tagTitle">
-      <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="wordCountTitle">
-        <ElIcon><EditPen /></ElIcon>
+        <ElIcon>
+          <EditPen />
+        </ElIcon>
         {{ inlineWordCount }}
       </span>
       <span :title="readTimeTitle">
-        <ElIcon><AlarmClock /></ElIcon>
+        <ElIcon>
+          <AlarmClock />
+        </ElIcon>
         {{ inlineReadTime }}
       </span>
     </template>
     <template v-if="readingTimePosition === 'newLine' && showAnalyze">
       <div style="width: 100%;" class="new-line-meta-des">
         <span :title="wordCountTitle">
-          <ElIcon><EditPen /></ElIcon>
+          <ElIcon>
+            <EditPen />
+          </ElIcon>
           {{ inlineWordCount }}
         </span>
         <span :title="readTimeTitle">
-          <ElIcon><AlarmClock /></ElIcon>
+          <ElIcon>
+            <AlarmClock />
+          </ElIcon>
           {{ inlineReadTime }}
         </span>
       </div>
     </template>
+    <span v-if="tags.length" class="tags" :title="tagTitle">
+      <ElIcon>
+        <CollectionTag />
+      </ElIcon>
+      <a v-for="tag in tags" :key="tag" class="link" :href="`/?tag=${tag}`">{{ tag }}
+      </a>
+    </span>
     <!-- 封面展示 -->
     <ClientOnly>
       <BlogDocCover />
@@ -200,26 +213,33 @@ const timeTitle = computed(() =>
   margin-bottom: 20px;
   display: flex;
   justify-content: center;
+
   span {
     margin-right: 16px;
     display: flex;
     align-items: center;
+
     .el-icon {
       margin-right: 4px;
     }
   }
 }
-.meta-des,.new-line-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 {
     margin-right: 16px;
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
+
     .el-icon {
       margin-right: 4px;
     }
@@ -227,12 +247,14 @@ const timeTitle = computed(() =>
 
   .link {
     color: var(--vp-c-text-2);
+
     &:hover {
       color: var(--vp-c-brand-1);
       cursor: pointer;
     }
   }
 }
+
 .tags {
   a.link:not(:last-child) {
     &::after {

package/src/composables/config/blog.ts

@@ -186,6 +186,10 @@ export function useBlogThemeMode() {
   return inject(configSymbol)!.value?.blog?.blog ?? true
 }
 
+export function useBlogInfoCollapsible() {
+  return inject(configSymbol)!.value?.blog?.home?.blogInfoCollapsible ?? false
+}
+
 export function useArticles() {
   const blogConfig = useConfig()
   const { localeIndex, site } = useData()
@@ -357,7 +361,7 @@ export function useHomeAnalysis() {
 }
 
 export function useAnalyzeTitles(wordCount: Ref<number>, readTime: ComputedRef<number>) {
-  const article = computed(() => useConfig()?.value.blog?.article)
+  const article = useArticleConfig()
 
   const topWordCount = computed(() =>
     replaceValue(article.value?.analyzeTitles?.topWordCount || '字数：{{value}} 个字', wordCount.value)

package/src/composables/config/index.ts

@@ -186,6 +186,11 @@ export namespace Theme {
      * 首页数据分析卡片
      */
     analysis?: HomeAnalysis
+    /**
+     * 首页博客信息卡片是否在移动端折叠展示
+     * @default false
+     */
+    blogInfoCollapsible?: boolean
   }
 
   export interface ArticleConfig {