@sugarat/theme 0.1.30 → 0.1.31

package/node.d.ts

@@ -59,10 +59,12 @@ declare namespace Theme {
          */
         recommend?: number | false;
         /**
+         * TODO: 待开发
          * 时间线
          */
         timeline: string;
         /**
+         * TODO: 待开发
          * 专栏&合集
          */
         album: string;
@@ -158,8 +160,9 @@ declare namespace Theme {
             end?: string;
             lastupdate?: string;
         };
-        status?: 'active' | 'negative' | 'off' | {
+        status?: {
             text: string;
+            type?: 'tip' | 'warning' | 'danger';
         };
         url?: string;
         github?: string | {
@@ -170,7 +173,7 @@ declare namespace Theme {
         };
         cover?: string | string[] | {
             urls: string[];
-            layout?: 'swiper' | 'list' | 'card';
+            layout?: 'swiper' | 'list';
         };
         links?: {
             title: string;
@@ -193,6 +196,7 @@ declare namespace Theme {
     interface UserWorks {
         title: string;
         description?: string;
+        topTitle?: string;
         list: UserWork[];
     }
     interface BlogConfig {
@@ -214,7 +218,10 @@ declare namespace Theme {
          * power by https://giscus.app/zh-CN
          */
         comment?: GiscusConfig | false;
-        recommend?: RecommendArticle;
+        /**
+         * 阅读文章左侧的推荐文章（替代默认的sidebar）
+         */
+        recommend?: RecommendArticle | false;
         article?: ArticleConfig;
         /**
          * el-alert

package/node.js

@@ -41,7 +41,7 @@ var import_fs = __toESM(require("fs"));
 var import_child_process = require("child_process");
 var import_path = __toESM(require("path"));
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.0-alpha.75_vue@3.2.45/node_modules/vitepress-plugin-tabs/dist/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.0-beta.2_vue@3.2.45/node_modules/vitepress-plugin-tabs/dist/index.js
 var tabsMarker = "=tabs";
 var tabsMarkerLen = tabsMarker.length;
 var ruleBlockTabs = (state, startLine, endLine, silent) => {
@@ -352,7 +352,7 @@ function getThemeConfig(cfg) {
         pagesData: data,
         ...cfg
       },
-      ...cfg?.blog !== false ? {
+      ...cfg?.blog !== false && cfg?.recommend !== false ? {
         sidebar: [
           {
             text: "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "main": "src/index.ts",
   "exports": {
@@ -33,6 +33,7 @@
     "url": "https://github.com/ATQQ/sugar-blog/issues"
   },
   "dependencies": {
+    "@mdit-vue/shared": "^0.12.0",
     "@vue/shared": "^3.2.45",
     "@vueuse/core": "^9.6.0",
     "fast-glob": "^3.2.12",
@@ -46,9 +47,9 @@
     "sass": "^1.56.1",
     "tsup": " ^6.5.0",
     "typescript": "^4.8.2",
-    "vitepress": "1.0.0-alpha.75",
-    "vue": "^3.2.45",
-    "vitepress-plugin-tabs": "^0.2.0"
+    "vitepress": "1.0.0-beta.2",
+    "vitepress-plugin-tabs": "^0.2.0",
+    "vue": "^3.2.45"
   },
   "scripts": {
     "dev": "npm run build:node && npm run dev:docs",

package/src/components/BlogRecommendArticle.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="card recommend"
-    v-if="recommendList.length || emptyText"
+    v-if="_recommend !== false && (recommendList.length || emptyText)"
     data-pagefind-ignore="all"
   >
     <!-- 头部 -->
@@ -52,11 +52,15 @@ import { useRoute, withBase } from 'vitepress'
 import { formatShowDate } from '../utils/index'
 import { useArticles, useBlogConfig } from '../composables/config/blog'
 
-const { recommend } = useBlogConfig()
-const title = computed(() => recommend?.title || '🔍 相关文章')
-const pageSize = computed(() => recommend?.pageSize || 9)
-const nextText = computed(() => recommend?.nextText || '换一组')
-const emptyText = computed(() => recommend?.empty ?? '暂无推荐文章')
+const { recommend: _recommend } = useBlogConfig()
+
+const recommend = computed(() =>
+  _recommend === false ? undefined : _recommend
+)
+const title = computed(() => recommend.value?.title || '🔍 相关文章')
+const pageSize = computed(() => recommend.value?.pageSize || 9)
+const nextText = computed(() => recommend.value?.nextText || '换一组')
+const emptyText = computed(() => recommend.value?.empty ?? '暂无推荐文章')
 
 const docs = useArticles()
 
@@ -80,12 +84,12 @@ const recommendList = computed(() => {
     // 过滤掉自己
     .filter(
       (v) =>
-        (recommend?.showSelf ?? true) ||
+        (recommend.value?.showSelf ?? true) ||
         v.route !== decodeURIComponent(route.path).replace(/.html$/, '')
     )
     // 过滤掉不需要展示的
     .filter((v) => v.meta.recommend !== false)
-    .filter((v) => recommend?.filter?.(v) ?? true)
+    .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))

package/src/components/UserWorks.vue

@@ -1,28 +1,36 @@
 <template>
-  <div class="user-works-page">
-    <h1>{{ works.title }}</h1>
-    <p v-if="works.description" class="description">{{ works.description }}</p>
-    <!-- TODO：侧导筛选时间 -->
-    <!-- 过滤，可吸顶 -->
-    <div class="filter">
-      <!-- 时间： -->
-      <div></div>
-      <!-- TODO: tags -->
-      <div></div>
+  <div class="user-works-page VPDoc">
+    <div class="aside-container">
+      <!-- TODO:过滤，可吸顶 -->
+      <div class="filter">
+        <!-- 时间： -->
+        <div></div>
+        <!-- TODO: tags -->
+        <div></div>
+      </div>
     </div>
     <!-- 作品列表 -->
     <div class="works">
+      <h1>{{ works.title }}</h1>
+      <p v-if="works.description" class="description">
+        {{ works.description }}
+      </p>
       <!-- 标题，描述信息，时间，线上链接，代码仓库，示例图片（几张，多种展示样式支持） -->
       <div class="work" v-for="(work, idx) in workList" :key="idx">
         <!-- 大日期标题 -->
-        <!-- TODO: 支持锚点 -->
-        <h2 v-if="work.year">{{ work.year }}</h2>
+        <h2 :id="`work_${work.year}`" v-if="work.year">
+          <a :href="`#work_${work.year}`">{{ work.year }}</a>
+        </h2>
         <!-- 作品标题 -->
-        <h3 class="title">
+        <h3 class="title" :id="slugify(work.title)">
+          <a class="pin" :href="'#' + slugify(work.title)"></a>
           <a v-if="work.url" rel="noopener" target="_blank" :href="work.url">{{
             work.title
           }}</a>
           <span v-else>{{ work.title }}</span>
+          <Badge v-if="work.status" :type="work.status?.type || 'tip'">{{
+            work.status.text
+          }}</Badge>
         </h3>
         <!-- 补充信息 -->
         <div class="info">
@@ -70,7 +78,7 @@
               >
             </a>
           </div>
-          <!-- 其它链接 -->
+          <!-- 其它自定义链接 -->
           <div class="links" v-if="work.links?.length">
             <i class="icon" v-if="work.links?.length">
               <svg
@@ -106,41 +114,118 @@
               {{ link.title }}
             </a>
           </div>
+          <!-- tags -->
+          <div class="tags" v-if="work.tags?.length">
+            <i class="icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 1024 1024"
+                data-v-d328c40a=""
+              >
+                <path
+                  fill="currentColor"
+                  d="M256 128v698.88l196.032-156.864a96 96 0 0 1 119.936 0L768 826.816V128H256zm-32-64h576a32 32 0 0 1 32 32v797.44a32 32 0 0 1-51.968 24.96L531.968 720a32 32 0 0 0-39.936 0L243.968 918.4A32 32 0 0 1 192 893.44V96a32 32 0 0 1 32-32z"
+                ></path>
+              </svg>
+            </i>
+            <span
+              @click="handleChooseTag(tag)"
+              class="tag"
+              v-for="tag in work.tags"
+              :key="tag"
+              >{{ tag }}
+            </span>
+          </div>
         </div>
         <!-- 封面图 -->
-        <div class="images">
+        <div class="images" v-if="work.covers?.length">
           <!-- swiper -->
+          <div v-if="work.coverLayout === 'swiper'" class="swiper-mode">
+            <el-carousel
+              autoplay
+              height="260px"
+              :type="isCardMode && work.covers.length >= 3 ? 'card' : ''"
+            >
+              <el-carousel-item
+                style="text-align: center"
+                v-for="(url, idx) in work.covers"
+                :key="url"
+              >
+                <el-image
+                  preview-teleported
+                  :key="url"
+                  :src="url"
+                  loading="lazy"
+                  :preview-src-list="work.covers"
+                  :initial-index="idx"
+                  hide-on-click-modal
+                  :alt="work.title + '-' + idx"
+                />
+              </el-carousel-item>
+            </el-carousel>
+          </div>
           <!-- list -->
-          <div class="list-mode">
+          <div v-if="work.coverLayout === 'list'" class="list-mode">
             <el-image
-              v-for="(url, idx) in covers"
+              v-for="(url, idx) in work.covers"
               :key="url"
               :src="url"
               loading="lazy"
-              :preview-src-list="covers"
+              :preview-src-list="work.covers"
               :initial-index="idx"
               hide-on-click-modal
             />
           </div>
-          <!-- card -->
         </div>
         <div class="description" v-html="work.description"></div>
       </div>
     </div>
+    <div class="aside-container">
+      <div class="aside-outline-container">
+        <VPDocAsideOutline />
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ElImage } from 'element-plus'
-import { reactive, ref, watch, watchEffect } from 'vue'
+import { ElImage, ElCarousel, ElCarouselItem, ElMessage } from 'element-plus'
+import VPDocAsideOutline from 'vitepress/dist/client/theme-default/components/VPDocAsideOutline.vue'
+import { computed, reactive, ref, watch, watchEffect } from 'vue'
+import { slugify } from '@mdit-vue/shared'
+import { useWindowSize } from '@vueuse/core'
 import {
   getGithubUpdateTime,
   formatDate,
   getGithubDirUpdateTime
 } from '../utils'
-import { useUserWorks } from '../composables/config/blog'
+import {
+  useUserWorks,
+  useActiveAnchor,
+  useAutoUpdateAnchor
+} from '../composables/config/blog'
 import { Theme } from '../composables/config'
 
+const currentAnchor = useAutoUpdateAnchor()
+// 更新锚点的时候更新 url 中的 hash
+watch(
+  () => currentAnchor.id,
+  (val) => {
+    if (val) {
+      window.history.replaceState(null, '', `#${val}`)
+    }
+  }
+)
+const mountActiveAnchorEl = useActiveAnchor()
+watch(mountActiveAnchorEl, () => {
+  const { value } = mountActiveAnchorEl
+  if (value) {
+    value.scroll({
+      behavior: 'smooth'
+    })
+  }
+})
+
 const works = useUserWorks()
 const workList = reactive<
   (Theme.UserWork & {
@@ -148,6 +233,8 @@ const workList = reactive<
     startTime: string
     lastUpdate?: string
     endTime?: string
+    covers?: string[]
+    coverLayout?: string
   })[]
 >([])
 
@@ -157,6 +244,8 @@ watch(
   (val) => {
     const sortDate = [...val.list].map((v) => {
       const { time } = v
+
+      // 格式化时间
       const metaInfo =
         typeof time === 'string'
           ? {
@@ -170,16 +259,37 @@ watch(
               lastUpdate: time.lastupdate
             }
 
+      // 格式化封面信息
+      const covers: string[] = []
+      let coverLayout = 'swiper'
+
+      if (typeof v.cover === 'string') {
+        covers.push(v.cover)
+      } else if (Array.isArray(v.cover)) {
+        covers.push(...v.cover)
+      } else if (typeof v.cover === 'object') {
+        covers.push(...v.cover.urls)
+        coverLayout = v.cover.layout ?? coverLayout
+      }
       return {
         ...v,
-        ...metaInfo
+        ...metaInfo,
+        covers,
+        coverLayout
       }
     })
+    // 过滤出置顶数据
+    const topDate = sortDate.filter((v) => v.top !== undefined)
+    const normalDate = sortDate.filter((v) => v.top === undefined)
     // 数据排序
-    sortDate.sort((a, b) => +new Date(b.startTime) - +new Date(a.startTime))
-
+    topDate.sort((a, b) => a.top! - b.top!)
+    normalDate.sort((a, b) => +new Date(b.startTime) - +new Date(a.startTime))
+    if (topDate.length) {
+      // @ts-ignore
+      topDate[0].year = works.value.topTitle ?? '置顶'
+    }
     // 数据分组
-    const groupDate = sortDate.reduce((prev, cur) => {
+    const groupDate = normalDate.reduce((prev, cur) => {
       const { startTime } = cur
       const year = new Date(startTime).getFullYear()
       const data = { ...cur }
@@ -192,7 +302,7 @@ watch(
       prev[year].push(data)
       return prev
     }, {} as Record<string, (Theme.UserWork & { year?: string; startTime: string })[]>)
-    workList.push(...Object.values(groupDate).reverse().flat())
+    workList.push(...topDate, ...Object.values(groupDate).reverse().flat())
   },
   { immediate: true }
 )
@@ -221,7 +331,7 @@ watchEffect(() => {
           let githubUrl = `https://github.com/${owner}/${repo}`
           if (path) {
             githubUrl += `/tree/${branch || 'master'}/${path}`
-          } else {
+          } else if (branch) {
             githubUrl += `/tree/${branch}`
           }
           data.github = githubUrl
@@ -238,20 +348,21 @@ watchEffect(() => {
   }
 })
 
-const covers = [
-  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
-  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
-  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
-  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
-  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
-  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
-]
+const { width } = useWindowSize()
+const isCardMode = computed(() => width.value > 768)
+const handleChooseTag = (tag: string) => {
+  ElMessage({
+    message: `点击了${tag}标签，标签过滤功能开发中ing...`,
+    type: 'warning'
+  })
+}
 </script>
 
 <style lang="scss" scoped>
 .user-works-page {
-  max-width: 900px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
   margin: 20px auto;
   padding: 16px;
   h1 {
@@ -259,7 +370,7 @@ const covers = [
     font-weight: bold;
   }
   .description {
-    margin-top: 10px;
+    margin-top: 16px;
     color: #999;
     font-size: 16px;
   }
@@ -268,16 +379,58 @@ const covers = [
     color: var(--vp-c-brand);
   }
 }
+.works-container {
+  display: flex;
+  justify-content: center;
+}
 .work {
+  max-width: 900px;
+
   h2 {
-    padding-top: 24px;
+    margin-top: 6px;
+    padding-top: 18px;
     line-height: 32px;
     font-size: 24px;
+    border-top: 1px solid var(--vp-c-divider);
+    a {
+      color: inherit;
+    }
+    &:hover {
+      a {
+        &::before {
+          opacity: 1;
+        }
+      }
+    }
+    a {
+      position: relative;
+      &::before {
+        position: absolute;
+        left: -16px;
+        opacity: 0;
+        content: var(--vp-header-anchor-symbol);
+      }
+    }
   }
   h3 {
     margin: 32px 0 0;
     line-height: 28px;
     font-size: 20px;
+    position: relative;
+    &.title > a.pin {
+      position: absolute;
+      left: -16px;
+      &::before {
+        left: -16px;
+        opacity: 0;
+        content: var(--vp-header-anchor-symbol);
+      }
+    }
+    &:hover > a.pin {
+      &::before {
+        opacity: 1;
+      }
+    }
   }
   .info {
     display: flex;
@@ -286,7 +439,8 @@ const covers = [
     flex-wrap: wrap;
   }
   .links,
-  .times {
+  .times,
+  .tags {
     display: flex;
     align-items: center;
     .icon {
@@ -321,14 +475,65 @@ const covers = [
       }
     }
   }
+  .tags {
+    span.tag {
+      cursor: pointer;
+    }
+    span.tag:not(:last-child) {
+      &::after {
+        content: '·';
+        display: inline-block;
+        padding: 0 4px;
+      }
+    }
+  }
+}
+.aside-container {
+  display: none;
+  flex: 1;
+  padding-left: 32px;
+  width: 100%;
+  max-width: 256px;
+}
+@media screen and (min-width: 960px) {
+  .aside-container {
+    display: block;
+  }
+}
+.aside-outline-container {
+  position: sticky;
+  top: calc(
+    var(--vp-nav-height) + var(--vp-layout-top-height, 0px) +
+      var(--vp-doc-top-height, 0px) + 32px
+  );
 }
 .lastupdate {
   color: var(--vp-c-text-1);
 }
+
 .list-mode {
-  height: 360px;
-  margin: 10px auto;
+  max-height: 370px;
   overflow-y: auto;
+  margin: 10px auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  .el-image {
+    :deep(img) {
+      object-fit: contain;
+      // max-height: 360px;
+    }
+  }
+}
+
+.swiper-mode {
+  margin-top: 16px;
+  .el-image {
+    :deep(img) {
+      object-fit: contain;
+      max-height: 260px;
+    }
+  }
 }
 .split {
   display: inline-block;

package/src/composables/config/blog.ts

@@ -7,9 +7,13 @@ import {
   inject,
   InjectionKey,
   provide,
-  ref,
-  Ref
+  Ref,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref
 } from 'vue'
+
 import type { Theme } from './index'
 
 const configSymbol: InjectionKey<Ref<Theme.Config>> = Symbol('theme-config')
@@ -128,3 +132,61 @@ function resolveConfig(config: Theme.Config): Theme.Config {
     }
   }
 }
+
+/**
+ * 页面加载的时候定位到锚点内容
+ */
+export function useActiveAnchor() {
+  const el = ref<HTMLElement | null>(null)
+  onMounted(() => {
+    const { hash } = window.location
+    if (hash) {
+      el.value = document.querySelector(decodeURIComponent(hash))
+    }
+  })
+  return el
+}
+
+/**
+ * 页面滚动的时候自动更新锚点
+ */
+export function useAutoUpdateAnchor() {
+  // 初始化当前锚点
+  const currentAnchor = reactive({
+    id: '',
+    top: -1
+  })
+
+  // 定义计算当前锚点的方法
+  const calculateCurrentAnchor = () => {
+    // 获取页面中所有的锚点元素
+    const anchors = document.querySelectorAll('h1, h2, h3, h4, h5, h6')
+    for (let i = 0; i < anchors.length; i += 1) {
+      const anchor = anchors[i]
+      const rect = anchor.getBoundingClientRect()
+      // 如果当前锚点距离顶部最近，且距离顶部小于等于100，则将其设置为当前锚点
+      if (rect.top <= 100 && anchor.id !== currentAnchor.id) {
+        currentAnchor.id = anchor.id
+        currentAnchor.top = rect.top
+      }
+    }
+  }
+
+  // 监听 window 对象的滚动事件
+  const onScroll = () => {
+    calculateCurrentAnchor()
+  }
+
+  // 在组件挂载时启动监听滚动事件
+  onMounted(() => {
+    window.addEventListener('scroll', onScroll)
+  })
+
+  // 在组件卸载时移除监听滚动事件
+  onUnmounted(() => {
+    window.removeEventListener('scroll', onScroll)
+  })
+
+  // 返回当前锚点的响应式对象
+  return currentAnchor
+}

package/src/composables/config/index.ts

@@ -60,12 +60,13 @@ export namespace Theme {
      * 手动控制相关文章列表的顺序
      */
     recommend?: number | false
-    // TODO: 待开发
     /**
+     * TODO: 待开发
      * 时间线
      */
     timeline: string
     /**
+     * TODO: 待开发
      * 专栏&合集
      */
     album: string
@@ -169,13 +170,10 @@ export namespace Theme {
           end?: string
           lastupdate?: string
         }
-    status?:
-      | 'active'
-      | 'negative'
-      | 'off'
-      | {
-          text: string
-        }
+    status?: {
+      text: string
+      type?: 'tip' | 'warning' | 'danger'
+    }
     url?: string
     github?:
       | string
@@ -190,7 +188,7 @@ export namespace Theme {
       | string[]
       | {
           urls: string[]
-          layout?: 'swiper' | 'list' | 'card'
+          layout?: 'swiper' | 'list'
         }
     links?: {
       title: string
@@ -217,6 +215,7 @@ export namespace Theme {
   export interface UserWorks {
     title: string
     description?: string
+    topTitle?: string
     list: UserWork[]
   }
   export interface BlogConfig {
@@ -238,7 +237,10 @@ export namespace Theme {
      * power by https://giscus.app/zh-CN
      */
     comment?: GiscusConfig | false
-    recommend?: RecommendArticle
+    /**
+     * 阅读文章左侧的推荐文章（替代默认的sidebar）
+     */
+    recommend?: RecommendArticle | false
     article?: ArticleConfig
     /**
      * el-alert

package/src/index.ts

@@ -18,6 +18,7 @@ export const BlogTheme: Theme = {
   ...DefaultTheme,
   Layout: withConfigProvider(BlogApp),
   enhanceApp(ctx) {
+    DefaultTheme.enhanceApp(ctx)
     // @ts-ignore
     ctx.app.component('TimelinePage', TimelinePage)
     ctx.app.component('UserWorksPage', UserWorksPage)

package/src/node.ts

@@ -175,7 +175,7 @@ export function getThemeConfig(cfg?: Partial<Theme.BlogConfig>) {
         pagesData: data as Theme.PageData[],
         ...cfg
       },
-      ...(cfg?.blog !== false
+      ...(cfg?.blog !== false && cfg?.recommend !== false
         ? {
             sidebar: [
               {