@sugarat/theme 0.2.16 → 0.2.18

package/node.d.ts

@@ -92,6 +92,22 @@ declare namespace Theme {
         label: string;
         type: string;
     }
+    interface CommentConfig extends GiscusConfig {
+        /**
+         * @default '评论'
+         */
+        label?: string;
+        /**
+         * 自定义图标，SVG 格式
+         * @recommend https://iconbuddy.app/search?q=fire
+         */
+        icon?: string;
+        /**
+         * 移动端最小化按钮
+         * @default true
+         */
+        mobileMinify?: boolean;
+    }
     interface GiscusConfig {
         repo: Repo;
         repoId: string;
@@ -170,6 +186,9 @@ declare namespace Theme {
         showIcon?: boolean;
         html?: string;
     }
+    /**
+     * 公告
+     */
     interface Popover {
         title: string;
         /**
@@ -178,12 +197,28 @@ declare namespace Theme {
          * 配置改变时，会重新触发展示
          */
         duration: number;
+        /**
+         * 移动端自动最小化
+         * @default false
+         */
+        mobileMinify?: boolean;
         body?: BlogPopover.Value[];
         footer?: BlogPopover.Value[];
         /**
          * 手动重新打开
+         * @default true
          */
         reopen?: boolean;
+        /**
+         * 设置展示图标，svg
+         * @recommend https://iconbuddy.app/search?q=fire
+         */
+        icon?: string;
+        /**
+         * 设置关闭图标，svg
+         * @recommend https://iconbuddy.app/search?q=fire
+         */
+        closeIcon?: string;
     }
     interface FriendLink {
         nickname: string;
@@ -280,7 +315,7 @@ declare namespace Theme {
          * 配置评论
          * power by https://giscus.app/zh-CN
          */
-        comment?: GiscusConfig | false;
+        comment?: CommentConfig | false;
         /**
          * 阅读文章左侧的推荐文章（替代默认的sidebar）
          */
@@ -330,8 +365,32 @@ declare namespace Theme {
         /**
          * 配置内置的 markdown-it-task-checkbox 插件，设置 false 则关闭
          * 详见 https://github.com/linsir/markdown-it-task-checkbox
+         * @default true
          */
         taskCheckbox?: TaskCheckbox | boolean;
+        /**
+         * 支持 markdown 时间线语法，在 vitepress 中使用 markdown 渲染时间线（时间轴）样式。
+         * 详见 https://github.com/HanochMa/vitepress-markdown-timeline
+         * @default true
+         */
+        timeline?: boolean;
+        /**
+         * 回到顶部
+         * @default true
+         */
+        backToTop?: boolean | BackToTop;
+    }
+    interface BackToTop {
+        /**
+         * 距离顶部多少距离出现
+         * @default 450
+         */
+        top?: number;
+        /**
+         * 设置展示图标，svg
+         * @recommend https://iconbuddy.app/search?q=fire
+         */
+        icon?: string;
     }
     interface TaskCheckbox {
         disabled?: boolean;

package/node.js

@@ -36,7 +36,10 @@ __export(node_exports, {
 });
 module.exports = __toCommonJS(node_exports);
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.0-rc.36_vue@3.3.4/node_modules/vitepress-plugin-tabs/dist/index.js
+// src/utils/node/mdPlugins.ts
+var import_module = require("module");
+
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.0-rc.40_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) => {
@@ -200,6 +203,9 @@ var tabsPlugin = (md) => {
   };
 };
 
+// src/utils/node/mdPlugins.ts
+var import_vitepress_markdown_timeline = __toESM(require("vitepress-markdown-timeline"));
+
 // src/utils/node/index.ts
 var import_node_child_process = require("child_process");
 var import_node_path = __toESM(require("path"));
@@ -312,29 +318,30 @@ function getFirstImagURLFromMD(content, route) {
 }
 
 // src/utils/node/mdPlugins.ts
+var import_meta = {};
+function _require(module2) {
+  return (typeof import_meta?.url !== "undefined" ? (0, import_module.createRequire)(import_meta.url) : require)(module2);
+}
 function getMarkdownPlugins(cfg) {
   const markdownPlugin = [];
   if (cfg?.tabs !== false) {
     markdownPlugin.push(tabsPlugin);
   }
-  if (cfg) {
-    cfg.mermaid = cfg?.mermaid ?? true;
-    if (cfg?.mermaid !== false) {
-      const { MermaidMarkdown } = require("vitepress-plugin-mermaid");
-      markdownPlugin.push(MermaidMarkdown);
-    }
+  if (cfg?.mermaid !== false) {
+    const { MermaidMarkdown } = _require("vitepress-plugin-mermaid");
+    markdownPlugin.push(MermaidMarkdown);
   }
-  if (cfg) {
-    cfg.taskCheckbox = cfg?.taskCheckbox ?? true;
-    if (cfg.taskCheckbox !== false) {
-      markdownPlugin.push(taskCheckboxPlugin(cfg.taskCheckbox));
-    }
+  if (cfg.taskCheckbox !== false) {
+    markdownPlugin.push(taskCheckboxPlugin(typeof cfg?.taskCheckbox === "boolean" ? {} : cfg?.taskCheckbox));
+  }
+  if (cfg?.timeline !== false) {
+    markdownPlugin.push(import_vitepress_markdown_timeline.default);
   }
   return markdownPlugin;
 }
 function taskCheckboxPlugin(ops) {
   return (md) => {
-    md.use(require("markdown-it-task-checkbox"), ops);
+    md.use(_require("markdown-it-task-checkbox"), ops);
   };
 }
 function registerMdPlugins(vpCfg, plugins) {
@@ -470,7 +477,7 @@ function getVitePlugins(cfg) {
     );
   }
   if (cfg?.mermaid !== false) {
-    const { MermaidPlugin } = require("vitepress-plugin-mermaid");
+    const { MermaidPlugin } = _require("vitepress-plugin-mermaid");
     plugins.push(MermaidPlugin(cfg?.mermaid === true ? {} : cfg?.mermaid ?? {}));
   }
   if (cfg?.RSS) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -42,6 +42,7 @@
     "gray-matter": "^4.0.3",
     "markdown-it-task-checkbox": "^1.0.6",
     "mermaid": "^10.2.4",
+    "vitepress-markdown-timeline": "^1.2.1",
     "vitepress-plugin-mermaid": "2.0.13",
     "vitepress-plugin-pagefind": "0.2.10",
     "vitepress-plugin-rss": "0.2.1",
@@ -56,7 +57,7 @@
     "pagefind": "1.0.3",
     "sass": "^1.56.1",
     "typescript": "^4.8.2",
-    "vitepress": "1.0.0-rc.36",
+    "vitepress": "1.0.0-rc.40",
     "vue": "^3.3.4"
   },
   "scripts": {

package/src/components/BlogApp.vue

@@ -16,6 +16,7 @@ import BlogAlert from './BlogAlert.vue'
 import BlogPopover from './BlogPopover.vue'
 import BlogFooter from './BlogFooter.vue'
 import BlogHomeHeaderAvatar from './BlogHomeHeaderAvatar.vue'
+import BlogBackToTop from './BlogBackToTop.vue'
 
 const { frontmatter } = useData()
 const layout = computed(() => frontmatter.value.layout)
@@ -36,9 +37,9 @@ const { Layout } = Theme
       <!-- 阅读时间分析 -->
       <ClientOnly>
         <BlogArticleAnalyze />
+        <!-- 图片预览 -->
+        <BlogImagePreview />
       </ClientOnly>
-      <!-- 图片预览 -->
-      <BlogImagePreview />
     </template>
 
     <template #nav-bar-content-before>
@@ -66,10 +67,13 @@ const { Layout } = Theme
       <slot name="sidebar-nav-after" />
       <BlogSidebar />
     </template>
-    <!-- 评论 -->
     <template #doc-after>
       <slot name="doc-after" />
-      <BlogComment />
+      <!-- 评论 -->
+      <ClientOnly>
+        <BlogBackToTop />
+        <BlogComment />
+      </ClientOnly>
     </template>
     <template #layout-bottom>
       <BlogFooter v-if="layout === 'home'" />

package/src/components/BlogBackToTop.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { useElementSize, useScroll } from '@vueuse/core'
+import { ElIcon } from 'element-plus'
+import { computed, ref } from 'vue'
+import { vOuterHtml } from '../directives'
+import { useBackToTopConfig } from '../composables/config/blog'
+
+function handleBackRoTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+const $vpDoc = document.querySelector('.vp-doc')
+const el = ref<any>($vpDoc)
+const { width } = useElementSize(el)
+const docWidth = computed(() => `${width.value}px`)
+
+const backToTopConfig = useBackToTopConfig()
+const open = computed(() => !!(backToTopConfig ?? true))
+
+const { y } = useScroll(window)
+const defaultTriggerHeight = 450
+const triggerTop = computed(() => (typeof backToTopConfig === 'boolean' ? undefined : backToTopConfig?.top) ?? defaultTriggerHeight)
+
+const show = computed(() => width && y.value > triggerTop.value)
+
+const iconSVGStr = computed(() => typeof backToTopConfig === 'boolean' ? '' : backToTopConfig?.icon)
+</script>
+
+<template>
+  <div v-if="open" v-show="show" class="back-to-top">
+    <span class="icon-wrapper" @click="handleBackRoTop">
+      <ElIcon :size="20">
+        <i v-if="iconSVGStr" v-outer-html="iconSVGStr" />
+        <svg v-else width="512" height="512" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill="currentColor"
+            d="m20 22l-3.86-1.55c.7-1.53 1.2-3.11 1.51-4.72zM7.86 20.45L4 22l2.35-6.27c.31 1.61.81 3.19 1.51 4.72M12 2s5 2 5 10c0 3.1-.75 5.75-1.67 7.83A2 2 0 0 1 13.5 21h-3a2 2 0 0 1-1.83-1.17C7.76 17.75 7 15.1 7 12c0-8 5-10 5-10m0 10c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2s.9 2 2 2"
+          />
+        </svg>
+      </ElIcon>
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.back-to-top {
+  position: fixed;
+  width: v-bind(docWidth);
+  text-align: right;
+  bottom: 80px;
+  font-size: 16px;
+  transition: all 0.3s ease-in-out;
+  opacity: 0.6;
+  display: flex;
+  justify-content: right;
+  z-index: 200;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  .icon-wrapper {
+    cursor: pointer;
+    border-radius: 50%;
+    position: relative;
+    right: -80px;
+    background-color: var(--vp-c-bg);
+    box-shadow: var(--box-shadow);
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--vp-c-brand-soft);
+    color: var(--vp-c-brand-1);
+
+    &:hover {
+      box-shadow: var(--box-shadow-hover);
+    }
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .back-to-top .icon-wrapper {
+    border-radius: 50%;
+    position: static;
+  }
+}
+</style>

package/src/components/BlogComment.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useElementVisibility } from '@vueuse/core'
+import { useElementSize, useElementVisibility, useWindowSize } from '@vueuse/core'
 import { useData, useRoute } from 'vitepress'
-import { computed, ref, watch } from 'vue'
-import { ElAffix, ElButton } from 'element-plus'
+import { computed, h, ref, watch } from 'vue'
+import { ElIcon } from 'element-plus'
 import { Comment } from '@element-plus/icons-vue'
 import Giscus from '@giscus/vue'
 import { useGiscusConfig } from '../composables/config/blog'
@@ -20,7 +20,7 @@ function handleScrollToComment() {
 }
 const giscusConfig = useGiscusConfig()
 
-const commentConfig = computed<Theme.GiscusConfig>(() => {
+const commentConfig = computed<Theme.CommentConfig>(() => {
   if (!giscusConfig) {
     return {} as any
   }
@@ -58,87 +58,112 @@ watch(
     immediate: true
   }
 )
+
+const { width } = useWindowSize()
+const mobileMinify = computed(() => width.value < 768 && (commentConfig.value.mobileMinify ?? true))
+
+const CommentIcon = commentConfig.value?.icon
+  ? h('i', {
+    onVnodeMounted(vnode) {
+      if (vnode.el) {
+        vnode.el.outerHTML = commentConfig.value?.icon
+      }
+    },
+  })
+  : h(Comment)
+
+const $vpDoc = document.querySelector('.vp-doc')
+const el = ref<any>($vpDoc)
+const { width: _docWidth } = useElementSize(el)
+const docWidth = computed(() => `${_docWidth.value}px`)
+
+const labelText = computed(() => {
+  return commentConfig.value.label ?? '评论'
+})
 </script>
 
 <template>
-  <div
-    v-if="show"
-    id="giscus-comment"
-    ref="commentEl"
-    class="comment"
-    data-pagefind-ignore="all"
-  >
-    <ElAffix
-      :class="{ hidden: commentIsVisible }"
-      class="comment-btn"
-      target="main"
-      position="bottom"
-      :offset="40"
-    >
-      <ElButton
-        plain
-        :icon="Comment"
-        type="primary"
-        @click="handleScrollToComment"
-      >
-        评论
-      </ElButton>
-    </ElAffix>
+  <div v-if="show && _docWidth" id="giscus-comment" ref="commentEl" class="comment" data-pagefind-ignore="all">
     <Giscus
-      v-if="showComment"
-      :repo="commentConfig.repo"
-      :repo-id="commentConfig.repoId"
-      :category="commentConfig.category"
-      :category-id="commentConfig.categoryId"
-      :mapping="commentConfig.mapping || 'pathname'"
-      reactions-enabled="1"
-      emit-metadata="0"
-      :input-position="commentConfig.inputPosition || 'top'"
-      :theme="isDark ? 'dark' : 'light'"
-      :lang="commentConfig.lang || 'zh-CN'"
-      :loading="commentConfig.loading || 'eager'"
+      v-if="showComment" :repo="commentConfig.repo" :repo-id="commentConfig.repoId"
+      :category="commentConfig.category" :category-id="commentConfig.categoryId"
+      :mapping="commentConfig.mapping || 'pathname'" reactions-enabled="1" emit-metadata="0"
+      :input-position="commentConfig.inputPosition || 'top'" :theme="isDark ? 'dark' : 'light'"
+      :lang="commentConfig.lang || 'zh-CN'" :loading="commentConfig.loading || 'eager'"
     />
+
+    <div v-show="!commentIsVisible" class="comment-btn-wrapper">
+      <span v-if="!mobileMinify && labelText" class="icon-wrapper-text" @click="handleScrollToComment">
+        <ElIcon :size="20">
+          <CommentIcon />
+        </ElIcon>
+        <span class="text">
+          {{ labelText }}
+        </span>
+      </span>
+      <span v-else class="icon-wrapper" @click="handleScrollToComment">
+        <ElIcon :size="20">
+          <CommentIcon />
+        </ElIcon>
+      </span>
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-.comment {
-  width: 100%;
-  text-align: center;
-  padding: 40px 0;
-  :deep(.el-button.el-button--primary:hover) {
-    background-color: var(--vp-c-brand-2);
-    border-color: var(--vp-c-brand-2);
-    color: #fff;
+.comment-btn-wrapper {
+  position: fixed;
+  width: v-bind(docWidth);
+  text-align: right;
+  bottom: 40px;
+  font-size: 16px;
+  transition: all 0.3s ease-in-out;
+  opacity: 0.6;
+  display: flex;
+  justify-content: right;
+  z-index: 200;
+
+  &:hover {
+    opacity: 1;
   }
-  :deep(.el-button.el-button--primary) {
+
+  .icon-wrapper,
+  .icon-wrapper-text {
+    cursor: pointer;
+    border-radius: 50%;
+    position: relative;
+    right: -80px;
+    background-color: var(--vp-c-bg);
+    box-shadow: var(--box-shadow);
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background-color: var(--vp-c-brand-soft);
-    border-color: var(--vp-c-brand-2);
-    color: var(--vp-c-brand-2);
+    color: var(--vp-c-brand-1);
+
+    &:hover {
+      box-shadow: var(--box-shadow-hover);
+    }
   }
-}
 
-.hidden {
-  opacity: 0;
-  pointer-events: none;
-}
-.comment-btn {
-  :deep(.el-affix--fixed) {
-    text-align: right;
-    .el-button {
-      position: relative;
-      right: -100px;
+  .icon-wrapper-text {
+    border-radius: 2px;
+    padding: 2px 6px;
+
+    span.text{
+      font-size: 12px;
+      margin-left: 4px;
     }
   }
 }
 
 @media screen and (max-width: 1200px) {
-  .comment-btn {
-    :deep(.el-affix--fixed) {
-      opacity: 0.7;
-      .el-button {
-        position: static;
-      }
+  .comment-btn-wrapper {
+
+    .icon-wrapper,
+    .icon-wrapper-text {
+      position: static;
     }
   }
 }

package/src/components/BlogPopover.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import { ElButton, ElIcon } from 'element-plus'
-import { CircleCloseFilled, Flag } from '@element-plus/icons-vue'
+import { CircleCloseFilled } from '@element-plus/icons-vue'
 import { computed, h, onMounted, ref } from 'vue'
 import type { BlogPopover } from '@sugarat/theme'
 import { parseStringStyle } from '@vue/shared'
+import { useWindowSize } from '@vueuse/core'
 import { useBlogConfig } from '../composables/config/blog'
+import { vOuterHtml } from '../directives'
 
 const { popover: popoverProps } = useBlogConfig()
 
@@ -20,6 +22,9 @@ const footerContent = computed(() => {
 const storageKey = 'theme-blog-popover'
 const closeFlag = `${storageKey}-close`
 
+// 移动端最小化
+const { width } = useWindowSize()
+
 onMounted(() => {
   if (!popoverProps?.title) {
     return
@@ -30,6 +35,12 @@ onMounted(() => {
   const newValue = JSON.stringify(popoverProps)
   localStorage.setItem(storageKey, newValue)
 
+  // 移动端最小化
+  if (width.value < 768 && popoverProps?.mobileMinify) {
+    show.value = false
+    return
+  }
+
   // >= 0 每次都展示，区别是否自动消失
   if (Number(popoverProps?.duration ?? '') >= 0) {
     show.value = true
@@ -117,12 +128,16 @@ function PopoverValue(props: { key: number; item: BlogPopover.Value },
     <div class="header">
       <div class="title-wrapper">
         <ElIcon size="20px">
-          <Flag />
+          <i v-if="popoverProps?.icon" v-outer-html="popoverProps.icon" />
+          <svg v-else width="512" height="512" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+            <path fill="currentColor" d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.6c-3.7 11.6-5.6 23.9-5.6 36.4c0 65.9 53.8 119.5 120 119.5c55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3c16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112M344 762.3c-26.5 0-48-21.4-48-47.8c0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1" />
+          </svg>
         </ElIcon>
         <span class="title">{{ popoverProps?.title }}</span>
       </div>
       <ElIcon class="close-icon" size="20px" @click="handleClose">
-        <CircleCloseFilled />
+        <i v-if="popoverProps?.closeIcon" v-outer-html="popoverProps.closeIcon" />
+        <CircleCloseFilled v-else />
       </ElIcon>
     </div>
     <div v-if="bodyContent.length" class="body content">
@@ -138,12 +153,14 @@ function PopoverValue(props: { key: number; item: BlogPopover.Value },
     </div>
   </div>
   <div
-    v-show="!show && (popoverProps?.reopen ?? true) && popoverProps?.title"
-    class="theme-blog-popover-close"
+    v-show="!show && (popoverProps?.reopen ?? true) && popoverProps?.title" class="theme-blog-popover-close"
     @click="show = true"
   >
-    <ElIcon size="20px">
-      <Flag />
+    <ElIcon>
+      <i v-if="popoverProps?.icon" v-outer-html="popoverProps.icon" />
+      <svg v-else width="512" height="512" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+        <path fill="currentColor" d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.6c-3.7 11.6-5.6 23.9-5.6 36.4c0 65.9 53.8 119.5 120 119.5c55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3c16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112M344 762.3c-26.5 0-48-21.4-48-47.8c0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1" />
+      </svg>
     </ElIcon>
   </div>
 </template>
@@ -160,16 +177,13 @@ function PopoverValue(props: { key: number; item: BlogPopover.Value },
   border-radius: 6px;
   background-color: rgba(var(--bg-gradient-home));
   box-shadow: var(--box-shadow);
+
   :deep(.el-button.el-button--primary) {
     background-color: var(--vp-c-brand-2);
     border-color: var(--vp-c-brand-2);
   }
 }
-@media screen and (min-width: 760px) and (max-width: 1140px) {
-  .theme-blog-popover {
-    top: 200px;
-  }
-}
+
 .header {
   background-color: var(--vp-c-brand-3);
   color: #fff;
@@ -177,6 +191,7 @@ function PopoverValue(props: { key: number; item: BlogPopover.Value },
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   .close-icon {
     cursor: pointer;
   }
@@ -185,6 +200,7 @@ function PopoverValue(props: { key: number; item: BlogPopover.Value },
 .title-wrapper {
   display: flex;
   align-items: center;
+
   .title {
     font-size: 14px;
     padding-left: 6px;
@@ -194,11 +210,13 @@ function PopoverValue(props: { key: number; item: BlogPopover.Value },
 .body {
   box-sizing: border-box;
   padding: 10px 10px 0;
+
   hr {
     border: none;
     border-bottom: 1px solid #eaecef;
   }
 }
+
 .footer {
   box-sizing: border-box;
   padding: 10px;
@@ -207,15 +225,18 @@ function PopoverValue(props: { key: number; item: BlogPopover.Value },
 .body.content,
 .footer.content {
   text-align: center;
+
   h4 {
     text-align: center;
     font-size: 12px;
   }
+
   p {
     text-align: center;
     padding: 10px 0;
     font-size: 14px;
   }
+
   img {
     width: 100%;
   }

package/src/composables/config/blog.ts

@@ -216,3 +216,7 @@ export function useAutoUpdateAnchor() {
 export function useHomeFooterConfig() {
   return inject(homeFooter)
 }
+
+export function useBackToTopConfig() {
+  return useBlogConfig().backToTop
+}

package/src/composables/config/index.ts

@@ -99,6 +99,22 @@ export namespace Theme {
     type: string
   }
 
+  export interface CommentConfig extends GiscusConfig {
+    /**
+     * @default '评论'
+     */
+    label?: string
+    /**
+     * 自定义图标，SVG 格式
+     * @recommend https://iconbuddy.app/search?q=fire
+     */
+    icon?: string
+    /**
+     * 移动端最小化按钮
+     * @default true
+     */
+    mobileMinify?: boolean
+  }
   export interface GiscusConfig {
     repo: Repo
     repoId: string
@@ -181,6 +197,9 @@ export namespace Theme {
     html?: string
   }
 
+  /**
+   * 公告
+   */
   export interface Popover {
     title: string
     /**
@@ -189,12 +208,28 @@ export namespace Theme {
      * 配置改变时，会重新触发展示
      */
     duration: number
+    /**
+     * 移动端自动最小化
+     * @default false
+     */
+    mobileMinify?: boolean
     body?: BlogPopover.Value[]
     footer?: BlogPopover.Value[]
     /**
      * 手动重新打开
+     * @default true
      */
     reopen?: boolean
+    /**
+     * 设置展示图标，svg
+     * @recommend https://iconbuddy.app/search?q=fire
+     */
+    icon?: string
+    /**
+     * 设置关闭图标，svg
+     * @recommend https://iconbuddy.app/search?q=fire
+     */
+    closeIcon?: string
   }
   export interface FriendLink {
     nickname: string
@@ -312,7 +347,7 @@ export namespace Theme {
      * 配置评论
      * power by https://giscus.app/zh-CN
      */
-    comment?: GiscusConfig | false
+    comment?: CommentConfig | false
     /**
      * 阅读文章左侧的推荐文章（替代默认的sidebar）
      */
@@ -362,8 +397,34 @@ export namespace Theme {
     /**
      * 配置内置的 markdown-it-task-checkbox 插件，设置 false 则关闭
      * 详见 https://github.com/linsir/markdown-it-task-checkbox
+     * @default true
      */
     taskCheckbox?: TaskCheckbox | boolean
+    /**
+     * 支持 markdown 时间线语法，在 vitepress 中使用 markdown 渲染时间线（时间轴）样式。
+     * 详见 https://github.com/HanochMa/vitepress-markdown-timeline
+     * @default true
+     */
+    timeline?: boolean
+    /**
+     * 回到顶部
+     * @default true
+     */
+    backToTop?: boolean | BackToTop
+  }
+
+  export interface BackToTop {
+    /**
+     * 距离顶部多少距离出现
+     * @default 450
+     */
+    top?: number
+
+    /**
+     * 设置展示图标，svg
+     * @recommend https://iconbuddy.app/search?q=fire
+     */
+    icon?: string
   }
 
   export interface TaskCheckbox {

package/src/directives/index.ts

@@ -0,0 +1,5 @@
+export const vOuterHtml = {
+  mounted: (el: HTMLElement, binding: any) => {
+    el.outerHTML = binding.value
+  }
+}

package/src/index.ts

@@ -5,9 +5,14 @@ import './styles/index.scss'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 
+// 引入时间线组件样式
+import 'vitepress-markdown-timeline/dist/theme/index.css'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
+
+// 图表渲染组件
+import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue'
 import BlogApp from './components/BlogApp.vue'
 import { withConfigProvider } from './composables/config/blog'
 
@@ -22,10 +27,11 @@ export const BlogTheme: Theme = {
   ...DefaultTheme,
   Layout: withConfigProvider(BlogApp),
   enhanceApp(ctx) {
-    enhanceAppWithTabs(ctx.app)
+    enhanceAppWithTabs(ctx.app as any)
     DefaultTheme.enhanceApp(ctx)
     ctx.app.component('TimelinePage', TimelinePage)
     ctx.app.component('UserWorksPage', UserWorksPage)
+    ctx.app.component('Mermaid', Mermaid as any)
   }
 }
 

package/src/utils/node/mdPlugins.ts

@@ -1,9 +1,15 @@
 /* eslint-disable global-require */
+import { createRequire } from 'module'
 import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 import type { UserConfig } from 'vitepress'
+import timeline from 'vitepress-markdown-timeline'
 import type { Theme } from '../../composables/config/index'
 import { aliasObjectToArray } from './index'
 
+export function _require(module: any) {
+  return (typeof import.meta?.url !== 'undefined' ? createRequire(import.meta.url) : require)(module)
+}
+
 export function getMarkdownPlugins(cfg?: Partial<Theme.BlogConfig>) {
   const markdownPlugin: any[] = []
   // tabs支持,默认开启
@@ -12,27 +18,24 @@ export function getMarkdownPlugins(cfg?: Partial<Theme.BlogConfig>) {
   }
 
   // 添加mermaid markdown 插件
-  if (cfg) {
-    cfg.mermaid = cfg?.mermaid ?? true
-    if (cfg?.mermaid !== false) {
-      const { MermaidMarkdown } = require('vitepress-plugin-mermaid')
-      markdownPlugin.push(MermaidMarkdown)
-    }
+  if (cfg?.mermaid !== false) {
+    const { MermaidMarkdown } = _require('vitepress-plugin-mermaid')
+    markdownPlugin.push(MermaidMarkdown)
   }
 
-  if (cfg) {
-    cfg.taskCheckbox = cfg?.taskCheckbox ?? true
-    if (cfg.taskCheckbox !== false) {
-      markdownPlugin.push(taskCheckboxPlugin(cfg.taskCheckbox))
-    }
+  if (cfg.taskCheckbox !== false) {
+    markdownPlugin.push(taskCheckboxPlugin(typeof cfg?.taskCheckbox === 'boolean' ? {} : cfg?.taskCheckbox))
   }
 
+  if (cfg?.timeline !== false) {
+    markdownPlugin.push(timeline)
+  }
   return markdownPlugin
 }
 
-export function taskCheckboxPlugin(ops: Theme.TaskCheckbox | boolean) {
+export function taskCheckboxPlugin(ops?: Theme.TaskCheckbox) {
   return (md: any) => {
-    md.use(require('markdown-it-task-checkbox'), ops)
+    md.use(_require('markdown-it-task-checkbox'), ops)
   }
 }
 
@@ -48,34 +51,6 @@ export function registerMdPlugins(vpCfg: any, plugins: any[]) {
   }
 }
 
-/**
- * 流程图支持，配置mermaid
- */
-export function assignMermaid(config: any) {
-  if (!config?.mermaid)
-    return
-
-  if (!config.vite)
-    config.vite = {}
-  if (!config.vite.plugins)
-    config.vite.plugins = []
-  const { MermaidPlugin } = require('vitepress-plugin-mermaid')
-  config.vite.plugins.push(MermaidPlugin(config.mermaid))
-  if (!config.vite.resolve)
-    config.vite.resolve = {}
-  if (!config.vite.resolve.alias)
-    config.vite.resolve.alias = {}
-
-  config.vite.resolve.alias = [
-    ...aliasObjectToArray({
-      ...config.vite.resolve.alias,
-      'cytoscape/dist/cytoscape.umd.js': 'cytoscape/dist/cytoscape.esm.js',
-      'mermaid': 'mermaid/dist/mermaid.esm.mjs'
-    }),
-    { find: /^dayjs\/(.*).js/, replacement: 'dayjs/esm/$1' }
-  ]
-}
-
 export function patchMermaidPluginCfg(config: any) {
   if (!config.vite.resolve)
     config.vite.resolve = {}
@@ -100,24 +75,6 @@ export function patchOptimizeDeps(config: any) {
   config.vite.optimizeDeps.include = ['element-plus']
 }
 
-export function wrapperCfgWithMermaid(config: UserConfig<Theme.Config>): any {
-  // @ts-expect-error
-  const extendThemeConfig = (config.extends?.themeConfig?.blog
-    || {}) as Theme.BlogConfig
-
-  // 开关支持Mermaid
-  const resultConfig
-    = extendThemeConfig.mermaid === false
-      ? config
-      : {
-          ...config,
-          mermaid:
-            extendThemeConfig.mermaid === true ? {} : extendThemeConfig.mermaid
-        }
-  assignMermaid(resultConfig)
-  return resultConfig
-}
-
 export function supportRunExtendsPlugin(config: UserConfig<Theme.Config>) {
   // 处理markdown插件
   if (!config.markdown)

package/src/utils/node/vitePlugins.ts

@@ -11,6 +11,7 @@ import {
 } from 'vitepress-plugin-pagefind'
 import { RssPlugin } from 'vitepress-plugin-rss'
 import type { Theme } from '../../composables/config/index'
+import { _require } from './mdPlugins'
 import { joinPath } from './index'
 
 export function getVitePlugins(cfg?: Partial<Theme.BlogConfig>) {
@@ -32,7 +33,7 @@ export function getVitePlugins(cfg?: Partial<Theme.BlogConfig>) {
 
   // 内置支持Mermaid
   if (cfg?.mermaid !== false) {
-    const { MermaidPlugin } = require('vitepress-plugin-mermaid')
+    const { MermaidPlugin } = _require('vitepress-plugin-mermaid')
     plugins.push(MermaidPlugin(cfg?.mermaid === true ? {} : (cfg?.mermaid ?? {})))
   }