@sugarat/theme 0.1.29 → 0.1.31

package/node.d.ts

@@ -27,6 +27,14 @@ declare namespace BlogPopover {
     }
     type Value = Title | Text | Image | Button;
 }
+type ThemeableImage = string | {
+    src: string;
+    alt?: string;
+} | {
+    light: string;
+    dark: string;
+    alt?: string;
+};
 declare namespace Theme {
     interface PageMeta {
         title: string;
@@ -51,10 +59,12 @@ declare namespace Theme {
          */
         recommend?: number | false;
         /**
+         * TODO: 待开发
          * 时间线
          */
         timeline: string;
         /**
+         * TODO: 待开发
          * 专栏&合集
          */
         album: string;
@@ -140,7 +150,37 @@ declare namespace Theme {
         nickname: string;
         des: string;
         url: string;
-        avatar: string;
+        avatar: ThemeableImage;
+    }
+    interface UserWork {
+        title: string;
+        description: string;
+        time: string | {
+            start: string;
+            end?: string;
+            lastupdate?: string;
+        };
+        status?: {
+            text: string;
+            type?: 'tip' | 'warning' | 'danger';
+        };
+        url?: string;
+        github?: string | {
+            owner: string;
+            repo: string;
+            branch?: string;
+            path?: string;
+        };
+        cover?: string | string[] | {
+            urls: string[];
+            layout?: 'swiper' | 'list';
+        };
+        links?: {
+            title: string;
+            url: string;
+        }[];
+        tags?: string[];
+        top?: number;
     }
     type SearchConfig = boolean | 'pagefind' | {
         btnPlaceholder?: string;
@@ -153,6 +193,12 @@ declare namespace Theme {
         heading?: string;
         mode?: boolean | 'pagefind';
     };
+    interface UserWorks {
+        title: string;
+        description?: string;
+        topTitle?: string;
+        list: UserWork[];
+    }
     interface BlogConfig {
         blog?: false;
         pagesData: PageData[];
@@ -172,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
@@ -185,7 +234,8 @@ declare namespace Theme {
          * 启用 [vitepress-plugin-tabs](https://www.npmjs.com/package/vitepress-plugin-tabs)
          * @default false
          */
-        tabs: boolean;
+        tabs?: boolean;
+        works?: UserWorks;
     }
     interface Config extends DefaultTheme.Config {
         blog?: BlogConfig;

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.29",
+  "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/BlogFriendLink.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="card friend-wrapper" v-if="friend?.length">
+  <div class="card friend-wrapper" v-if="friendList?.length">
     <!-- 头部 -->
     <div class="card-header">
       <span class="title">🤝 友情链接</span>
     </div>
     <!-- 文章列表 -->
     <ol class="friend-list">
-      <li v-for="v in friend" :key="v.nickname">
+      <li v-for="v in friendList" :key="v.nickname">
         <a :href="v.url" target="_blank">
-          <el-avatar :size="50" :src="v.avatar" />
+          <el-avatar :size="50" :src="v.avatar" :alt="v.alt" />
           <div>
             <span class="nickname">{{ v.nickname }}</span>
             <p class="des">{{ v.des }}</p>
@@ -21,9 +21,32 @@
 
 <script lang="ts" setup>
 import { ElAvatar } from 'element-plus'
+import { useDark } from '@vueuse/core'
+import { computed } from 'vue'
 import { useBlogConfig } from '../composables/config/blog'
+import { getImageUrl } from '../utils'
+
+const isDark = useDark({
+  storageKey: 'vitepress-theme-appearance'
+})
 
 const { friend } = useBlogConfig()
+const friendList = computed(() => {
+  return friend?.map((v) => {
+    const { avatar, nickname } = v
+    const avatarUrl = getImageUrl(avatar, isDark.value)
+    let alt = nickname
+    if (typeof avatar !== 'string') {
+      alt = avatar.alt || ''
+    }
+
+    return {
+      ...v,
+      avatar: avatarUrl,
+      alt
+    }
+  })
+})
 </script>
 
 <style lang="scss" scoped>

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/TimelinePage.vue

@@ -1,7 +1,3 @@
 <template>
   <div>时间线页面</div>
 </template>
-
-<script lang="ts" setup></script>
-
-<style lang="scss"></style>

package/src/components/UserWorks.vue

@@ -0,0 +1,545 @@
+<template>
+  <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">
+        <!-- 大日期标题 -->
+        <h2 :id="`work_${work.year}`" v-if="work.year">
+          <a :href="`#work_${work.year}`">{{ work.year }}</a>
+        </h2>
+        <!-- 作品标题 -->
+        <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">
+          <!-- times -->
+          <div class="times">
+            <span class="icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                viewBox="0 0 24 24"
+              >
+                <title>上线时间</title>
+                <path
+                  d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8zm-.22-13h-.06c-.4 0-.72.32-.72.72v4.72c0 .35.18.68.49.86l4.15 2.49c.34.2.78.1.98-.24a.71.71 0 0 0-.25-.99l-3.87-2.3V7.72c0-.4-.32-.72-.72-.72z"
+                  fill="currentColor"
+                ></path>
+              </svg>
+            </span>
+            <span>{{ work.startTime }}</span>
+            <span v-if="work.endTime"> - {{ work.endTime }}</span>
+          </div>
+          <!-- GitHub links-->
+          <div class="links" v-if="work.github">
+            <a
+              class="github-link"
+              v-if="work.github"
+              :href="(work.github as string)"
+              target="_blank"
+              rel="noopener"
+            >
+              <i class="icon">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  viewBox="0 0 496 512"
+                >
+                  <path
+                    d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9c1.6 2.3 4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2z"
+                    fill="currentColor"
+                  ></path>
+                </svg>
+              </i>
+              <span class="lastupdate" v-if="work.lastUpdate"
+                >最后更新时间：{{ work.lastUpdate }}</span
+              >
+            </a>
+          </div>
+          <!-- 其它自定义链接 -->
+          <div class="links" v-if="work.links?.length">
+            <i class="icon" v-if="work.links?.length">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                viewBox="0 0 24 24"
+              >
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path
+                    d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5"
+                  ></path>
+                  <path
+                    d="M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5"
+                  ></path>
+                </g>
+              </svg>
+            </i>
+            <a
+              class="link"
+              v-for="link in work.links || []"
+              :href="link.url"
+              :key="link.url"
+              :title="link.title"
+              target="_blank"
+              rel="noopener"
+            >
+              {{ 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" 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 v-if="work.coverLayout === 'list'" class="list-mode">
+            <el-image
+              v-for="(url, idx) in work.covers"
+              :key="url"
+              :src="url"
+              loading="lazy"
+              :preview-src-list="work.covers"
+              :initial-index="idx"
+              hide-on-click-modal
+            />
+          </div>
+        </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, 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,
+  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 & {
+    year?: string | undefined
+    startTime: string
+    lastUpdate?: string
+    endTime?: string
+    covers?: string[]
+    coverLayout?: string
+  })[]
+>([])
+
+// 格式化数据
+watch(
+  works,
+  (val) => {
+    const sortDate = [...val.list].map((v) => {
+      const { time } = v
+
+      // 格式化时间
+      const metaInfo =
+        typeof time === 'string'
+          ? {
+              startTime: time,
+              endTime: '',
+              lastUpdate: ''
+            }
+          : {
+              startTime: time.start,
+              endTime: time.end,
+              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,
+        covers,
+        coverLayout
+      }
+    })
+    // 过滤出置顶数据
+    const topDate = sortDate.filter((v) => v.top !== undefined)
+    const normalDate = sortDate.filter((v) => v.top === undefined)
+    // 数据排序
+    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 = normalDate.reduce((prev, cur) => {
+      const { startTime } = cur
+      const year = new Date(startTime).getFullYear()
+      const data = { ...cur }
+      if (!prev[year]) {
+        prev[year] = []
+        // 第一项数据加上year属性
+        // @ts-ignore
+        data.year = year
+      }
+      prev[year].push(data)
+      return prev
+    }, {} as Record<string, (Theme.UserWork & { year?: string; startTime: string })[]>)
+    workList.push(...topDate, ...Object.values(groupDate).reverse().flat())
+  },
+  { immediate: true }
+)
+
+const init = ref(true)
+// 更新时间信息
+watchEffect(() => {
+  if (workList.length && init.value) {
+    init.value = false
+    workList.forEach((data) => {
+      // 接口获取最后更新时间
+      if (!data.lastUpdate && data.github) {
+        data.lastUpdate = '获取中...'
+        const { github } = data
+        if (typeof github === 'string') {
+          getGithubUpdateTime(github)
+            .then((time) => {
+              data.lastUpdate = formatDate(time, 'yyyy-MM-dd')
+            })
+            .catch(() => {
+              data.lastUpdate = '地址解析失败'
+            })
+        } else {
+          const { owner, repo, path, branch } = github
+          // 拼接Github链接
+          let githubUrl = `https://github.com/${owner}/${repo}`
+          if (path) {
+            githubUrl += `/tree/${branch || 'master'}/${path}`
+          } else if (branch) {
+            githubUrl += `/tree/${branch}`
+          }
+          data.github = githubUrl
+          getGithubDirUpdateTime(owner, repo, path ?? '', branch)
+            .then((time) => {
+              data.lastUpdate = formatDate(time, 'yyyy-MM-dd')
+            })
+            .catch(() => {
+              data.lastUpdate = '地址解析失败'
+            })
+        }
+      }
+    })
+  }
+})
+
+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 {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin: 20px auto;
+  padding: 16px;
+  h1 {
+    font-size: 32px;
+    font-weight: bold;
+  }
+  .description {
+    margin-top: 16px;
+    color: #999;
+    font-size: 16px;
+  }
+  a {
+    font-weight: 500;
+    color: var(--vp-c-brand);
+  }
+}
+.works-container {
+  display: flex;
+  justify-content: center;
+}
+.work {
+  max-width: 900px;
+
+  h2 {
+    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;
+    font-size: 14px;
+    margin-top: 10px;
+    flex-wrap: wrap;
+  }
+  .links,
+  .times,
+  .tags {
+    display: flex;
+    align-items: center;
+    .icon {
+      color: var(--vp-c-text-1);
+      display: block;
+      width: 20px;
+      height: 20px;
+      margin-right: 6px;
+    }
+  }
+  .times {
+    margin-right: 18px;
+  }
+  .links {
+    a {
+      display: flex;
+      align-items: center;
+    }
+    a.github-link {
+      margin-right: 10px;
+    }
+    a.link {
+      margin-right: 0;
+      &::after {
+        content: ',';
+        color: var(--vp-c-text-1);
+        margin-right: 6px;
+        margin-left: 2px;
+      }
+      &:last-child::after {
+        content: '';
+      }
+    }
+  }
+  .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 {
+  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;
+  width: 1px;
+  height: 8px;
+  margin: 0 10px;
+  background-color: #4e5969;
+}
+</style>

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')
@@ -19,6 +23,8 @@ 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')
 
+const userWorks: InjectionKey<Ref<Theme.UserWorks>> = Symbol('user-works')
+
 export function withConfigProvider(App: Component) {
   return defineComponent({
     name: 'ConfigProvider',
@@ -34,6 +40,16 @@ export function withConfigProvider(App: Component) {
       const { theme } = useData()
       const config = computed(() => resolveConfig(theme.value))
       provide(configSymbol, config)
+      provide(
+        userWorks,
+        ref(
+          config.value.blog?.works || {
+            title: '',
+            description: '',
+            list: []
+          }
+        )
+      )
 
       const activeTag = ref<Theme.activeTag>({
         label: '',
@@ -43,7 +59,6 @@ export function withConfigProvider(App: Component) {
 
       const pageNum = ref(1)
       provide(currentPageNum, pageNum)
-
       return () => h(App, null, slots)
     }
   })
@@ -105,6 +120,9 @@ export function useCurrentArticle() {
   return currentArticle
 }
 
+export function useUserWorks() {
+  return inject(userWorks)!
+}
 function resolveConfig(config: Theme.Config): Theme.Config {
   return {
     ...config,
@@ -114,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

@@ -1,5 +1,5 @@
 import type { ElButton } from 'element-plus'
-import { DefaultTheme } from 'vitepress'
+import type { DefaultTheme } from 'vitepress'
 
 export namespace BlogPopover {
   export interface Title {
@@ -31,6 +31,11 @@ export namespace BlogPopover {
   export type Value = Title | Text | Image | Button
 }
 
+export type ThemeableImage =
+  | string
+  | { src: string; alt?: string }
+  | { light: string; dark: string; alt?: string }
+
 export namespace Theme {
   export interface PageMeta {
     title: string
@@ -55,12 +60,13 @@ export namespace Theme {
      * 手动控制相关文章列表的顺序
      */
     recommend?: number | false
-    // TODO: 待开发
     /**
+     * TODO: 待开发
      * 时间线
      */
     timeline: string
     /**
+     * TODO: 待开发
      * 专栏&合集
      */
     album: string
@@ -151,7 +157,45 @@ export namespace Theme {
     nickname: string
     des: string
     url: string
-    avatar: string
+    avatar: ThemeableImage
+  }
+
+  export interface UserWork {
+    title: string
+    description: string
+    time:
+      | string
+      | {
+          start: string
+          end?: string
+          lastupdate?: string
+        }
+    status?: {
+      text: string
+      type?: 'tip' | 'warning' | 'danger'
+    }
+    url?: string
+    github?:
+      | string
+      | {
+          owner: string
+          repo: string
+          branch?: string
+          path?: string
+        }
+    cover?:
+      | string
+      | string[]
+      | {
+          urls: string[]
+          layout?: 'swiper' | 'list'
+        }
+    links?: {
+      title: string
+      url: string
+    }[]
+    tags?: string[]
+    top?: number
   }
   export type SearchConfig =
     | boolean
@@ -168,6 +212,12 @@ export namespace Theme {
         mode?: boolean | 'pagefind'
       }
 
+  export interface UserWorks {
+    title: string
+    description?: string
+    topTitle?: string
+    list: UserWork[]
+  }
   export interface BlogConfig {
     blog?: false
     pagesData: PageData[]
@@ -187,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
@@ -200,7 +253,8 @@ export namespace Theme {
      * 启用 [vitepress-plugin-tabs](https://www.npmjs.com/package/vitepress-plugin-tabs)
      * @default false
      */
-    tabs: boolean
+    tabs?: boolean
+    works?: UserWorks
   }
 
   export interface Config extends DefaultTheme.Config {

package/src/index.ts

@@ -12,13 +12,16 @@ import { withConfigProvider } from './composables/config/blog'
 
 // page
 import TimelinePage from './components/TimelinePage.vue'
+import UserWorksPage from './components/UserWorks.vue'
 
 export const BlogTheme: Theme = {
   ...DefaultTheme,
   Layout: withConfigProvider(BlogApp),
   enhanceApp(ctx) {
-    // TODO: 优化到自定义组件中注册
+    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: [
               {

package/src/utils/index.ts

@@ -1,3 +1,5 @@
+import type { ThemeableImage } from '../composables/config'
+
 export function formatDate(d: any, fmt = 'yyyy-MM-dd hh:mm:ss') {
   if (!(d instanceof Date)) {
     d = new Date(d)
@@ -89,3 +91,75 @@ export function chineseSearchOptimize(input: string) {
     .replace(/\s+/g, ' ')
     .trim()
 }
+
+/**
+ * 根据Github地址跨域获取最后更新时间
+ * @param url
+ * @returns
+ */
+export function getGithubUpdateTime(url: string) {
+  // 提取Github url中的用户名和仓库名
+  const match = url.match(/github.com\/(.+)/)
+  if (!match?.[1]) {
+    return Promise.reject(new Error('Github地址格式错误'))
+  }
+  const [owner, repo] = match[1].split('/')
+  return fetch(`https://api.github.com/repos/${owner}/${repo}`)
+    .then((res) => res.json())
+    .then((res) => {
+      return res.updated_at
+    })
+}
+
+/**
+ * 跨域获取某个Github仓库的指定目录最后更新时间
+ */
+export function getGithubDirUpdateTime(
+  owner: string,
+  repo: string,
+  dir?: string,
+  branch?: string
+) {
+  let baseUrl = `https://api.github.com/repos/${owner}/${repo}/commits`
+  if (branch) {
+    baseUrl += `/${branch}`
+  }
+  if (dir) {
+    baseUrl += `?path=${dir}`
+  }
+  return fetch(baseUrl)
+    .then((res) => res.json())
+    .then((res) => {
+      return [res].flat()[0].commit.committer.date
+    })
+}
+
+// 解析页面获取最后更新时间（跨域）
+// export async function getGithubUpdateTime(url: string) {
+//   const res = await fetch(url)
+//   const html = await res.text()
+//   const match = html.match(/<relative-time datetime="(.+?)"/)
+//   if (match) {
+//     return match[1]
+//   }
+//   return ''
+// }
+
+export function getImageUrl(
+  image: ThemeableImage,
+  isDarkMode: boolean
+): string {
+  if (typeof image === 'string') {
+    // 如果 ThemeableImage 类型为 string，则直接返回字符串
+    return image
+  }
+  if ('src' in image) {
+    // 如果 ThemeableImage 类型是一个对象，并且对象有 src 属性，则返回 src 属性对应的字符串
+    return image.src
+  }
+  if ('light' in image && 'dark' in image) {
+    // 如果 ThemeableImage 类型是一个对象，并且对象同时有 light 和 dark 属性，则根据 isDarkMode 返回对应的 URL
+    return isDarkMode ? image.dark : image.light
+  } // 如果 ThemeableImage 类型不是上述情况，则返回空字符串
+  return ''
+}