@sugarat/theme 0.1.48 → 0.1.50

package/node.d.ts

@@ -260,7 +260,7 @@ declare namespace Theme {
         /**
          * 设置解析 frontmatter 里 date 的时区
          * @default 8 => 'UTC+8'
-         * */
+         */
         timeZone?: number;
         /**
          * 启用RSS配置
@@ -299,6 +299,7 @@ declare namespace Theme {
          * @description (0 不限制；> 1 会按照日期排序对输出内容进行调整)
          */
         limit?: number;
+        ariaLabel?: string;
     };
     interface Config extends DefaultTheme.Config {
         blog?: BlogConfig;

package/node.js

@@ -197,7 +197,7 @@ var tabsPlugin = (md) => {
 };
 
 // src/utils/node/index.ts
-var import_child_process = require("child_process");
+var import_node_child_process = require("child_process");
 
 // src/utils/client/index.ts
 function formatDate(d, fmt = "yyyy-MM-dd hh:mm:ss") {
@@ -211,7 +211,7 @@ function formatDate(d, fmt = "yyyy-MM-dd hh:mm:ss") {
     "m+": d.getMinutes(),
     "s+": d.getSeconds(),
     "q+": Math.floor((d.getMonth() + 3) / 3),
-    S: d.getMilliseconds()
+    "S": d.getMilliseconds()
   };
   if (/(y+)/.test(fmt)) {
     fmt = fmt.replace(
@@ -258,7 +258,7 @@ function getDefaultTitle(content) {
 function getFileBirthTime(url) {
   let date = new Date();
   try {
-    const infoStr = (0, import_child_process.spawnSync)("git", ["log", "-1", '--pretty="%ci"', url]).stdout?.toString().replace(/["']/g, "").trim();
+    const infoStr = (0, import_node_child_process.spawnSync)("git", ["log", "-1", '--pretty="%ci"', url]).stdout?.toString().replace(/["']/g, "").trim();
     if (infoStr) {
       date = new Date(infoStr);
     }
@@ -277,11 +277,11 @@ function aliasObjectToArray(obj) {
   }));
 }
 var EXTERNAL_URL_RE = /^[a-z]+:/i;
-function joinPath(base, path3) {
-  return `${base}${path3}`.replace(/\/+/g, "/");
+function joinPath(base, path4) {
+  return `${base}${path4}`.replace(/\/+/g, "/");
 }
-function withBase(base, path3) {
-  return EXTERNAL_URL_RE.test(path3) || path3.startsWith(".") ? path3 : joinPath(base, path3);
+function withBase(base, path4) {
+  return EXTERNAL_URL_RE.test(path4) || path4.startsWith(".") ? path4 : joinPath(base, path4);
 }
 
 // src/utils/node/mdPlugins.ts
@@ -327,7 +327,7 @@ function assignMermaid(config) {
     ...aliasObjectToArray({
       ...config.vite.resolve.alias,
       "cytoscape/dist/cytoscape.umd.js": "cytoscape/dist/cytoscape.esm.js",
-      mermaid: "mermaid/dist/mermaid.esm.mjs"
+      "mermaid": "mermaid/dist/mermaid.esm.mjs"
     }),
     { find: /^dayjs\/(.*).js/, replacement: "dayjs/esm/$1" }
   ];
@@ -360,10 +360,11 @@ function supportRunExtendsPlugin(config) {
 }
 
 // src/utils/node/theme.ts
+var import_node_fs = __toESM(require("fs"));
+var import_node_path = __toESM(require("path"));
+var import_node_process = __toESM(require("process"));
 var import_fast_glob = __toESM(require("fast-glob"));
 var import_gray_matter = __toESM(require("gray-matter"));
-var import_fs = __toESM(require("fs"));
-var import_path = __toESM(require("path"));
 function patchDefaultThemeSideBar(cfg) {
   return cfg?.blog !== false && cfg?.recommend !== false ? {
     sidebar: [
@@ -376,27 +377,27 @@ function patchDefaultThemeSideBar(cfg) {
 }
 var pageMap = /* @__PURE__ */ new Map();
 function getArticles(cfg) {
-  const srcDir = cfg?.srcDir || process.argv.slice(2)?.[1] || ".";
+  const srcDir = cfg?.srcDir || import_node_process.default.argv.slice(2)?.[1] || ".";
   const files = import_fast_glob.default.sync(`${srcDir}/**/*.md`, { ignore: ["node_modules"] });
   const data = files.map((v) => {
     let route = v.replace(".md", "");
     if (route.startsWith("./")) {
       route = route.replace(
         new RegExp(
-          `^\\.\\/${import_path.default.join(srcDir, "/").replace(new RegExp(`\\${import_path.default.sep}`, "g"), "/")}`
+          `^\\.\\/${import_node_path.default.join(srcDir, "/").replace(new RegExp(`\\${import_node_path.default.sep}`, "g"), "/")}`
         ),
         ""
       );
     } else {
       route = route.replace(
         new RegExp(
-          `^${import_path.default.join(srcDir, "/").replace(new RegExp(`\\${import_path.default.sep}`, "g"), "/")}`
+          `^${import_node_path.default.join(srcDir, "/").replace(new RegExp(`\\${import_node_path.default.sep}`, "g"), "/")}`
         ),
         ""
       );
     }
     pageMap.set(`/${route}`, v);
-    const fileContent = import_fs.default.readFileSync(v, "utf-8");
+    const fileContent = import_node_fs.default.readFileSync(v, "utf-8");
     const { data: frontmatter, excerpt } = (0, import_gray_matter.default)(fileContent, {
       excerpt: true
     });
@@ -433,15 +434,17 @@ function getArticles(cfg) {
   }).filter((v) => v.meta.layout !== "home");
   return data;
 }
+var svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512"><title>RSS</title><path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48s48 21.49 48 48s-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634c-5.214-80.05-69.243-143.92-149.123-149.123c-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425c110.546 5.974 198.997 94.536 204.964 204.964c.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038c-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432c167.83 6.025 302.21 141.191 308.205 308.205c.232 6.449-4.978 11.787-11.432 11.787z" fill="currentColor"></path></svg>';
 function patchVPThemeConfig(cfg, vpThemeConfig = {}) {
   const RSS = cfg?.RSS;
   if (RSS && RSS.icon !== false) {
     vpThemeConfig.socialLinks = [
       {
         icon: {
-          svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512"><path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48s48 21.49 48 48s-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634c-5.214-80.05-69.243-143.92-149.123-149.123c-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425c110.546 5.974 198.997 94.536 204.964 204.964c.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038c-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432c167.83 6.025 302.21 141.191 308.205 308.205c.232 6.449-4.978 11.787-11.432 11.787z" fill="currentColor"></path></svg>'
+          svg: svgIcon
         },
-        link: RSS?.url
+        link: RSS?.url,
+        ariaLabel: RSS?.ariaLabel || "RSS"
       }
     ];
   }
@@ -450,11 +453,14 @@ function patchVPThemeConfig(cfg, vpThemeConfig = {}) {
 }
 
 // src/utils/node/vitePlugins.ts
+var import_node_path3 = __toESM(require("path"));
+var import_node_child_process2 = require("child_process");
+var import_node_process2 = __toESM(require("process"));
 var import_vitepress_plugin_pagefind = require("vitepress-plugin-pagefind");
 
 // src/utils/node/genFeed.ts
-var import_path2 = __toESM(require("path"));
-var import_fs2 = __toESM(require("fs"));
+var import_node_path2 = __toESM(require("path"));
+var import_node_fs2 = __toESM(require("fs"));
 var import_feed = require("feed");
 async function genFeed(config) {
   const blogCfg = config.userConfig.themeConfig.blog;
@@ -497,7 +503,7 @@ async function genFeed(config) {
     let html;
     const filepath = pageMap.get(route);
     if (filepath) {
-      const fileContent = import_fs2.default.readFileSync(filepath, "utf-8");
+      const fileContent = import_node_fs2.default.readFileSync(filepath, "utf-8");
       html = mdRender.render(fileContent);
     }
     feed.addItem({
@@ -516,8 +522,8 @@ async function genFeed(config) {
     });
   }
   const RSSFilename = filename || "feed.rss";
-  const RSSFile = import_path2.default.join(config.outDir, RSSFilename);
-  (0, import_fs2.writeFileSync)(RSSFile, feed.rss2());
+  const RSSFile = import_node_path2.default.join(config.outDir, RSSFilename);
+  (0, import_node_fs2.writeFileSync)(RSSFile, feed.rss2());
   console.log("\u{1F389} RSS generated", RSSFilename);
   console.log("rss filepath:", RSSFile);
   console.log("rss url:", `${baseUrl}${config.site.base + RSSFilename}`);

package/package.json

@@ -1,8 +1,22 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
-  "main": "src/index.ts",
+  "author": "sugar",
+  "license": "MIT",
+  "homepage": "https://theme.sugarat.top",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ATQQ/sugar-blog.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ATQQ/sugar-blog/issues"
+  },
+  "keywords": [
+    "vitepress",
+    "theme",
+    "粥里有勺糖"
+  ],
   "exports": {
     "./node": {
       "types": "./node.d.ts",
@@ -11,27 +25,13 @@
     "./package.json": "./package.json",
     ".": "./src/index.ts"
   },
+  "main": "src/index.ts",
   "files": [
-    "src",
-    "types",
+    "node.d.ts",
     "node.js",
-    "node.d.ts"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ATQQ/sugar-blog.git"
-  },
-  "keywords": [
-    "vitepress",
-    "theme",
-    "粥里有勺糖"
+    "src",
+    "types"
   ],
-  "author": "sugar",
-  "license": "MIT",
-  "homepage": "https://theme.sugarat.top",
-  "bugs": {
-    "url": "https://github.com/ATQQ/sugar-blog/issues"
-  },
   "dependencies": {
     "@mdit-vue/shared": "^0.12.0",
     "@mermaid-js/mermaid-mindmap": "^9.3.0",
@@ -43,19 +43,19 @@
     "highlight.js": "^11.7.0",
     "mermaid": "^10.2.4",
     "vitepress-plugin-mermaid": "^2.0.13",
-    "vitepress-plugin-pagefind": "0.2.9",
+    "vitepress-plugin-pagefind": "0.2.10",
     "vue-command-palette": "^0.1.4"
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.1.0",
     "element-plus": "^2.3.4",
+    "pagefind": "1.0.3",
     "sass": "^1.56.1",
     "tsup": " ^6.5.0",
     "typescript": "^4.8.2",
     "vitepress": "1.0.0-rc.14",
     "vitepress-plugin-tabs": "^0.2.0",
-    "vue": "^3.3.4",
-    "pagefind": "1.0.3"
+    "vue": "^3.3.4"
   },
   "scripts": {
     "dev": "npm run build:node && npm run dev:docs",

package/src/components/BlogAlert.vue

@@ -1,22 +1,6 @@
-<template>
-  <div class="global-alert" v-if="show" data-pagefind-ignore="all">
-    <el-alert
-      :title="alertProps?.title"
-      :type="alertProps?.type"
-      :show-icon="alertProps?.showIcon"
-      :center="alertProps?.center"
-      :closable="alertProps?.closable"
-      :close-text="alertProps?.closeText"
-      :description="alertProps?.description"
-    >
-      <div v-if="alertProps?.html" v-html="alertProps?.html"></div>
-    </el-alert>
-  </div>
-</template>
-
 <script lang="ts" setup>
 import { ElAlert } from 'element-plus'
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useBlogConfig } from '../composables/config/blog'
 
 const { alert: alertProps } = useBlogConfig()
@@ -46,6 +30,22 @@ onMounted(() => {
 })
 </script>
 
+<template>
+  <div v-if="show" class="global-alert" data-pagefind-ignore="all">
+    <ElAlert
+      :title="alertProps?.title"
+      :type="alertProps?.type"
+      :show-icon="alertProps?.showIcon"
+      :center="alertProps?.center"
+      :closable="alertProps?.closable"
+      :close-text="alertProps?.closeText"
+      :description="alertProps?.description"
+    >
+      <div v-if="alertProps?.html" v-html="alertProps?.html" />
+    </ElAlert>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .global-alert {
   position: fixed;

package/src/components/BlogApp.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts" name="BlogApp">
 import Theme from 'vitepress/theme'
+import { useBlogThemeMode } from '../composables/config/blog'
 import BlogHomeInfo from './BlogHomeInfo.vue'
 import BlogHomeBanner from './BlogHomeBanner.vue'
 import BlogList from './BlogList.vue'
 import BlogComment from './BlogComment.vue'
+
 // import BlogSearch from './BlogSearch.vue'
 import BlogSidebar from './BlogSidebar.vue'
 import BlogImagePreview from './BlogImagePreview.vue'
 import BlogArticleAnalyze from './BlogArticleAnalyze.vue'
 import BlogAlert from './BlogAlert.vue'
 import BlogPopover from './BlogPopover.vue'
-import { useBlogThemeMode } from '../composables/config/blog'
 
 const isBlogTheme = useBlogThemeMode()
 const { Layout } = Theme
@@ -39,7 +40,7 @@ const { Layout } = Theme
       <BlogSearch />
     </template> -->
     <!-- 自定义首页 -->
-    <template #home-hero-before v-if="isBlogTheme">
+    <template v-if="isBlogTheme" #home-hero-before>
       <slot name="home-hero-before" />
       <div class="home">
         <div class="header-banner">
@@ -49,11 +50,13 @@ const { Layout } = Theme
           <div class="blog-list-wrapper">
             <BlogList />
           </div>
-          <div class="blog-info-wrapper"><BlogHomeInfo /></div>
+          <div class="blog-info-wrapper">
+            <BlogHomeInfo />
+          </div>
         </div>
       </div>
     </template>
-    <template #sidebar-nav-after v-if="isBlogTheme">
+    <template v-if="isBlogTheme" #sidebar-nav-after>
       <slot name="sidebar-nav-after" />
       <BlogSidebar />
     </template>
@@ -65,57 +68,86 @@ const { Layout } = Theme
 
     <!-- 透传默认主题的其它插槽 -->
     <!-- navbar -->
-    <template #nav-bar-title-before
-      ><slot name="nav-bar-title-before"
-    /></template>
-    <template #nav-bar-title-after
-      ><slot name="nav-bar-title-after"
-    /></template>
-    <template #nav-bar-content-after
-      ><slot name="nav-bar-content-after"
-    /></template>
-    <template #nav-screen-content-before
-      ><slot name="nav-screen-content-before"
-    /></template>
-    <template #nav-screen-content-after
-      ><slot name="nav-screen-content-after"
-    /></template>
+    <template #nav-bar-title-before>
+      <slot name="nav-bar-title-before" />
+    </template>
+    <template #nav-bar-title-after>
+      <slot name="nav-bar-title-after" />
+    </template>
+    <template #nav-bar-content-after>
+      <slot name="nav-bar-content-after" />
+    </template>
+    <template #nav-screen-content-before>
+      <slot name="nav-screen-content-before" />
+    </template>
+    <template #nav-screen-content-after>
+      <slot name="nav-screen-content-after" />
+    </template>
 
     <!-- sidebar -->
-    <template #sidebar-nav-before><slot name="sidebar-nav-before" /></template>
+    <template #sidebar-nav-before>
+      <slot name="sidebar-nav-before" />
+    </template>
 
     <!-- content -->
-    <template #page-top><slot name="page-top" /></template>
-    <template #page-bottom><slot name="page-bottom" /></template>
-
-    <template #not-found><slot name="not-found" /></template>
-    <template #home-hero-info><slot name="home-hero-info" /></template>
-    <template #home-hero-image><slot name="home-hero-image" /></template>
-    <template #home-hero-after><slot name="home-hero-after" /></template>
-    <template #home-features-before
-      ><slot name="home-features-before"
-    /></template>
-    <template #home-features-after
-      ><slot name="home-features-after"
-    /></template>
-
-    <template #doc-footer-before><slot name="doc-footer-before" /></template>
-
-    <template #doc-top><slot name="doc-top" /></template>
-    <template #doc-bottom><slot name="doc-bottom" /></template>
-
-    <template #aside-top><slot name="aside-top" /></template>
-    <template #aside-bottom><slot name="aside-bottom" /></template>
-    <template #aside-outline-before
-      ><slot name="aside-outline-before"
-    /></template>
-    <template #aside-outline-after
-      ><slot name="aside-outline-after"
-    /></template>
-    <template #aside-ads-before><slot name="aside-ads-before" /></template>
-    <template #aside-ads-after><slot name="aside-ads-after" /></template>
+    <template #page-top>
+      <slot name="page-top" />
+    </template>
+    <template #page-bottom>
+      <slot name="page-bottom" />
+    </template>
+
+    <template #not-found>
+      <slot name="not-found" />
+    </template>
+    <template #home-hero-info>
+      <slot name="home-hero-info" />
+    </template>
+    <template #home-hero-image>
+      <slot name="home-hero-image" />
+    </template>
+    <template #home-hero-after>
+      <slot name="home-hero-after" />
+    </template>
+    <template #home-features-before>
+      <slot name="home-features-before" />
+    </template>
+    <template #home-features-after>
+      <slot name="home-features-after" />
+    </template>
+
+    <template #doc-footer-before>
+      <slot name="doc-footer-before" />
+    </template>
+
+    <template #doc-top>
+      <slot name="doc-top" />
+    </template>
+    <template #doc-bottom>
+      <slot name="doc-bottom" />
+    </template>
+
+    <template #aside-top>
+      <slot name="aside-top" />
+    </template>
+    <template #aside-bottom>
+      <slot name="aside-bottom" />
+    </template>
+    <template #aside-outline-before>
+      <slot name="aside-outline-before" />
+    </template>
+    <template #aside-outline-after>
+      <slot name="aside-outline-after" />
+    </template>
+    <template #aside-ads-before>
+      <slot name="aside-ads-before" />
+    </template>
+    <template #aside-ads-after>
+      <slot name="aside-ads-after" />
+    </template>
   </Layout>
 </template>
+
 <style scoped lang="scss">
 .home {
   margin: 0 auto;

package/src/components/BlogArticleAnalyze.vue

@@ -1,47 +1,3 @@
-<template>
-  <div class="doc-analyze" v-if="showAnalyze" data-pagefind-ignore="all">
-    <span>
-      <el-icon><EditPen /></el-icon>
-      字数：{{ wordCount }} 个字
-    </span>
-    <span>
-      <el-icon><AlarmClock /></el-icon>
-      预计：{{ readTime }} 分钟
-    </span>
-  </div>
-  <div class="meta-des" ref="$des" id="hack-article-des">
-    <!-- TODO：是否需要原创？转载等标签，理论上可以添加标签解决，可以参考 charles7c -->
-    <span v-if="author && !hiddenAuthor" class="author">
-      <el-icon title="本文作者"><UserFilled /></el-icon>
-      <a
-        class="link"
-        :href="currentAuthorInfo.url"
-        :title="currentAuthorInfo.des"
-        v-if="currentAuthorInfo"
-      >
-        {{ currentAuthorInfo.nickname }}
-      </a>
-      <template v-else>
-        {{ author }}
-      </template>
-    </span>
-    <span v-if="publishDate && !hiddenTime" class="publishDate">
-      <el-icon :title="timeTitle"><Clock /></el-icon>
-      {{ publishDate }}
-    </span>
-    <span v-if="tags.length" class="tags">
-      <el-icon :title="timeTitle"><CollectionTag /></el-icon>
-      <a class="link" :href="`/?tag=${tag}`" v-for="tag in tags" :key="tag"
-        >{{ tag }}
-      </a>
-    </span>
-    <!-- 封面展示 -->
-    <ClientOnly>
-      <BlogDocCover />
-    </ClientOnly>
-  </div>
-</template>
-
 <script lang="ts" setup>
 // 阅读时间计算方式参考
 // https://zhuanlan.zhihu.com/p/36375802
@@ -49,15 +5,15 @@ import { useData, useRoute } from 'vitepress'
 import { computed, onMounted, ref, watch } from 'vue'
 import { ElIcon } from 'element-plus'
 import {
-  UserFilled,
+  AlarmClock,
   Clock,
+  CollectionTag,
   EditPen,
-  AlarmClock,
-  CollectionTag
+  UserFilled
 } from '@element-plus/icons-vue'
 import { useBlogConfig, useCurrentArticle } from '../composables/config/blog'
 import countWord, { formatShowDate } from '../utils/client'
-import { Theme } from '../composables/config'
+import type { Theme } from '../composables/config'
 import BlogDocCover from './BlogDocCover.vue'
 
 const { article, authorList } = useBlogConfig()
@@ -69,7 +25,7 @@ const tags = computed(() => {
       []
         .concat(tag, tags, categories)
         .flat()
-        .filter((v) => !!v)
+        .filter(v => !!v)
     )
   ]
 })
@@ -99,20 +55,20 @@ const readTime = computed(() => {
 const route = useRoute()
 const $des = ref<HTMLDivElement>()
 
-const analyze = () => {
+function analyze() {
   if (!$des.value) {
     return
   }
-  document.querySelectorAll('.meta-des').forEach((v) => v.remove())
+  document.querySelectorAll('.meta-des').forEach(v => v.remove())
   const docDomContainer = window.document.querySelector('#VPContent')
   const imgs = docDomContainer?.querySelectorAll<HTMLImageElement>(
     '.content-container .main img'
   )
   imageCount.value = imgs?.length || 0
 
-  const words =
-    docDomContainer?.querySelector('.content-container .main')?.textContent ||
-    ''
+  const words
+    = docDomContainer?.querySelector('.content-container .main')?.textContent
+    || ''
 
   wordCount.value = countWord(words)
   docDomContainer?.querySelector('h1')?.after($des.value!)
@@ -151,11 +107,11 @@ const { theme } = useData<Theme.Config>()
 const globalAuthor = computed(() => theme.value.blog?.author || '')
 const author = computed(
   () =>
-    (frontmatter.value.author || currentArticle.value?.meta.author) ??
-    globalAuthor.value
+    (frontmatter.value.author || currentArticle.value?.meta.author)
+    ?? globalAuthor.value
 )
 const currentAuthorInfo = computed(() =>
-  authorList?.find((v) => author.value === v.nickname)
+  authorList?.find(v => author.value === v.nickname)
 )
 const hiddenAuthor = computed(() => frontmatter.value.author === false)
 
@@ -171,6 +127,49 @@ watch(
 )
 </script>
 
+<template>
+  <div v-if="showAnalyze" class="doc-analyze" data-pagefind-ignore="all">
+    <span>
+      <ElIcon><EditPen /></ElIcon>
+      字数：{{ wordCount }} 个字
+    </span>
+    <span>
+      <ElIcon><AlarmClock /></ElIcon>
+      预计：{{ readTime }} 分钟
+    </span>
+  </div>
+  <div id="hack-article-des" ref="$des" class="meta-des">
+    <!-- TODO：是否需要原创？转载等标签，理论上可以添加标签解决，可以参考 charles7c -->
+    <span v-if="author && !hiddenAuthor" class="author">
+      <ElIcon title="本文作者"><UserFilled /></ElIcon>
+      <a
+        v-if="currentAuthorInfo"
+        class="link"
+        :href="currentAuthorInfo.url"
+        :title="currentAuthorInfo.des"
+      >
+        {{ currentAuthorInfo.nickname }}
+      </a>
+      <template v-else>
+        {{ author }}
+      </template>
+    </span>
+    <span v-if="publishDate && !hiddenTime" class="publishDate">
+      <ElIcon :title="timeTitle"><Clock /></ElIcon>
+      {{ publishDate }}
+    </span>
+    <span v-if="tags.length" class="tags">
+      <ElIcon :title="timeTitle"><CollectionTag /></ElIcon>
+      <a v-for="tag in tags" :key="tag" class="link" :href="`/?tag=${tag}`">{{ tag }}
+      </a>
+    </span>
+    <!-- 封面展示 -->
+    <ClientOnly>
+      <BlogDocCover />
+    </ClientOnly>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 .doc-analyze {
   color: var(--vp-c-text-2);