@sugarat/theme 0.4.9 → 0.4.10

package/node.d.ts

@@ -199,6 +199,10 @@ declare namespace Theme {
         analysis?: HomeAnalysis;
     }
     interface ArticleConfig {
+        /**
+         * 文章分析数据展示标题
+         */
+        analyzeTitles?: ArticleAnalyzeTitles;
         readingTime?: boolean;
         /**
          * 阅读时间分析展示位置
@@ -207,6 +211,48 @@ declare namespace Theme {
         readingTimePosition?: 'inline' | 'newLine' | 'top';
         hiddenCover?: boolean;
     }
+    interface ArticleAnalyzeTitles {
+        /**
+         * 字数：{{value}} 个字
+         */
+        topWordCount?: string;
+        /**
+         * 预计：{{value}} 分钟
+         */
+        topReadTime?: string;
+        /**
+         * {{value}} 个字
+         */
+        inlineWordCount?: string;
+        /**
+         * {{value}} 分钟
+         */
+        inlineReadTime?: string;
+        /**
+         * 文章字数
+         */
+        wordCount?: string;
+        /**
+         * 预计阅读时间
+         */
+        readTime?: string;
+        /**
+         * 本文作者
+         */
+        author?: string;
+        /**
+         * 发布时间
+         */
+        publishDate?: string;
+        /**
+         * 最近修改时间
+         */
+        lastUpdated?: string;
+        /**
+         * 标签
+         */
+        tag?: string;
+    }
     interface Alert {
         type: 'success' | 'warning' | 'info' | 'error';
         /**
@@ -335,6 +381,10 @@ declare namespace Theme {
     type ThemeColor = 'vp-default' | 'vp-green' | 'vp-yellow' | 'vp-red' | 'el-blue' | 'el-yellow' | 'el-green' | 'el-red';
     interface BlogConfig {
         blog?: false;
+        /**
+         * 展示日期格式化
+         */
+        formatShowDate?: FormatShowDate;
         /**
          * 内置一些主题色
          * @default 'vp-default'
@@ -441,6 +491,32 @@ declare namespace Theme {
          */
         imageStyle?: ImageStyleConfig;
     }
+    type FormatShowDate = {
+        /**
+         * 刚刚
+         */
+        justNow?: string;
+        /**
+         * 秒前
+         */
+        secondsAgo?: string;
+        /**
+         * 分钟前
+         */
+        minutesAgo?: string;
+        /**
+         * 小时前
+         */
+        hoursAgo?: string;
+        /**
+         * 天前
+         */
+        daysAgo?: string;
+        /**
+         * 周前
+         */
+        weeksAgo?: string;
+    } | ((date: Date) => string);
     interface BackToTop {
         /**
          * 距离顶部多少距离出现

package/node.js

@@ -40,7 +40,7 @@ module.exports = __toCommonJS(node_exports);
 // src/utils/node/mdPlugins.ts
 var import_module = require("module");
 
-// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.3.1_@algolia+client-search@4.19.1_@types+node@20.6.3__tymgq2io4kjnp3wlifsw2g5vnu/node_modules/vitepress-plugin-tabs/dist/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.3.2_@algolia+client-search@4.19.1_@types+node@20.6.3__i342z2vy4vtzoo4ecdc3cz7rya/node_modules/vitepress-plugin-tabs/dist/index.js
 var tabsMarker = "=tabs";
 var tabsMarkerLen = tabsMarker.length;
 var ruleBlockTabs = (state, startLine, endLine, silent) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -52,7 +52,7 @@
     "vitepress-plugin-tabs": "0.2.0",
     "@sugarat/theme-shared": "0.0.2",
     "vitepress-plugin-pagefind": "0.4.10",
-    "vitepress-plugin-rss": "0.2.9"
+    "vitepress-plugin-rss": "0.2.10"
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.3.1",
@@ -62,7 +62,7 @@
     "sass": "^1.77.8",
     "typescript": "^5.4.5",
     "vite": "^5.2.11",
-    "vitepress": "1.3.1",
+    "vitepress": "1.3.2",
     "vue": "^3.4.26"
   },
   "scripts": {

package/src/components/BlogArticleAnalyze.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 // 阅读时间计算方式参考
 // https://zhuanlan.zhihu.com/p/36375802
-import { useData, useRoute } from 'vitepress'
-import { computed, onMounted, ref, watch } from 'vue'
+import { useData } from 'vitepress'
+import { computed, onMounted, ref } from 'vue'
 import { ElIcon } from 'element-plus'
 import {
   AlarmClock,
@@ -11,11 +11,12 @@ import {
   EditPen,
   UserFilled
 } from '@element-plus/icons-vue'
-import { useBlogConfig, useCurrentArticle, useDocMetaInsertPosition, useDocMetaInsertSelector } from '../composables/config/blog'
-import countWord, { formatDate, formatShowDate } from '../utils/client'
+import { useAnalyzeTitles, useBlogConfig, useCurrentArticle, useDocMetaInsertPosition, useDocMetaInsertSelector, useFormatShowDate } from '../composables/config/blog'
+import countWord, { formatDate } from '../utils/client'
 import type { Theme } from '../composables/config'
 import BlogDocCover from './BlogDocCover.vue'
 
+const formatShowDate = useFormatShowDate()
 const { article, authorList } = useBlogConfig()
 const readingTimePosition = article?.readingTimePosition || 'inline'
 
@@ -57,7 +58,6 @@ const readTime = computed(() => {
 const docMetaInsertSelector = useDocMetaInsertSelector()
 const docMetaInsertPosition = useDocMetaInsertPosition()
 
-const route = useRoute()
 const $des = ref<HTMLDivElement>()
 
 function analyze() {
@@ -100,9 +100,6 @@ onMounted(() => {
   analyze()
 })
 
-// 阅读量
-const pv = ref(6666)
-
 const currentArticle = useCurrentArticle()
 const publishDate = computed(() => {
   return formatShowDate(currentArticle.value?.meta?.date || '')
@@ -112,9 +109,6 @@ const hoverDate = computed(() => {
   return currentArticle.value?.meta?.date ? `: ${formatDate(currentArticle.value?.meta?.date)}` : ''
 })
 
-const timeTitle = computed(() =>
-  frontmatter.value.date ? '发布时间' : '最近修改时间'
-)
 const hiddenTime = computed(() => frontmatter.value.date === false)
 
 const { theme } = useData<Theme.Config>()
@@ -129,15 +123,9 @@ const currentAuthorInfo = computed(() =>
 )
 const hiddenAuthor = computed(() => frontmatter.value.author === false)
 
-watch(
-  () => route.path,
-  () => {
-    // TODO: 调用接口取数据
-    pv.value = 123
-  },
-  {
-    immediate: true
-  }
+const { topWordCount, topReadTime, inlineWordCount, inlineReadTime, authorTitle, readTimeTitle, wordCountTitle, publishDateTitle, lastUpdatedTitle, tagTitle } = useAnalyzeTitles(wordCount, readTime)
+const timeTitle = computed(() =>
+  frontmatter.value.date ? publishDateTitle.value : lastUpdatedTitle.value
 )
 </script>
 
@@ -145,16 +133,16 @@ watch(
   <div v-if="showAnalyze && readingTimePosition === 'top'" class="doc-analyze" data-pagefind-ignore="all">
     <span>
       <ElIcon><EditPen /></ElIcon>
-      字数：{{ wordCount }} 个字
+      {{ topWordCount }}
     </span>
     <span>
       <ElIcon><AlarmClock /></ElIcon>
-      预计：{{ readTime }} 分钟
+      {{ topReadTime }}
     </span>
   </div>
   <div id="hack-article-des" ref="$des" class="meta-des">
     <!-- TODO：是否需要原创？转载等标签，理论上可以添加标签解决，可以参考 charles7c -->
-    <span v-if="author && !hiddenAuthor" class="author" title="本文作者">
+    <span v-if="author && !hiddenAuthor" class="author" :title="authorTitle">
       <ElIcon><UserFilled /></ElIcon>
       <a
         v-if="currentAuthorInfo"
@@ -172,30 +160,30 @@ watch(
       <ElIcon><Clock /></ElIcon>
       {{ publishDate }}
     </span>
-    <span v-if="tags.length" class="tags" title="标签">
+    <span v-if="tags.length" class="tags" :title="tagTitle">
       <ElIcon><CollectionTag /></ElIcon>
       <a v-for="tag in tags" :key="tag" class="link" :href="`/?tag=${tag}`">{{ tag }}
       </a>
     </span>
     <template v-if="readingTimePosition === 'inline' && showAnalyze">
-      <span title="文章字数">
+      <span :title="wordCountTitle">
         <ElIcon><EditPen /></ElIcon>
-        {{ wordCount }} 个字
+        {{ inlineWordCount }}
       </span>
-      <span title="预计阅读时间">
+      <span :title="readTimeTitle">
         <ElIcon><AlarmClock /></ElIcon>
-        {{ readTime }} 分钟
+        {{ inlineReadTime }}
       </span>
     </template>
     <template v-if="readingTimePosition === 'newLine' && showAnalyze">
       <div style="width: 100%;" class="new-line-meta-des">
-        <span title="文章字数">
+        <span :title="wordCountTitle">
           <ElIcon><EditPen /></ElIcon>
-          {{ wordCount }} 个字
+          {{ inlineWordCount }}
         </span>
-        <span title="预计阅读时间">
+        <span :title="readTimeTitle">
           <ElIcon><AlarmClock /></ElIcon>
-          {{ readTime }} 分钟
+          {{ inlineReadTime }}
         </span>
       </div>
     </template>

package/src/components/BlogHotArticle.vue

@@ -2,10 +2,12 @@
 import { computed, ref } from 'vue'
 import { ElButton } from 'element-plus'
 import { useRouter, withBase } from 'vitepress'
-import { useArticles, useBlogConfig, useCleanUrls } from '../composables/config/blog'
-import { formatShowDate, wrapperCleanUrls } from '../utils/client'
+import { useArticles, useBlogConfig, useCleanUrls, useFormatShowDate } from '../composables/config/blog'
+import { wrapperCleanUrls } from '../utils/client'
 import { fireSVG } from '../constants/svg'
 
+const formatShowDate = useFormatShowDate()
+
 const { hotArticle: _hotArticle } = useBlogConfig()
 
 const hotArticle = computed(() =>

package/src/components/BlogItem.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { useRouter, withBase } from 'vitepress'
 import { computed } from 'vue'
-import { formatShowDate, wrapperCleanUrls } from '../utils/client'
-import { useCleanUrls, useImageStyle } from '../composables/config/blog'
+import { wrapperCleanUrls } from '../utils/client'
+import { useCleanUrls, useFormatShowDate, useImageStyle } from '../composables/config/blog'
 
 const props = defineProps<{
   route: string
@@ -16,6 +16,9 @@ const props = defineProps<{
   cover?: string | false
   pin?: number
 }>()
+
+const formatShowDate = useFormatShowDate()
+
 const showTime = computed(() => {
   return formatShowDate(props.date)
 })

package/src/components/BlogRecommendArticle.vue

@@ -2,11 +2,13 @@
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter, withBase } from 'vitepress'
 import { ElButton } from 'element-plus'
-import { formatShowDate, wrapperCleanUrls } from '../utils/client'
-import { useArticles, useBlogConfig, useCleanUrls } from '../composables/config/blog'
+import { wrapperCleanUrls } from '../utils/client'
+import { useArticles, useBlogConfig, useCleanUrls, useFormatShowDate } from '../composables/config/blog'
 import { recommendSVG } from '../constants/svg'
 import type { Theme } from '../composables/config/index'
 
+const formatShowDate = useFormatShowDate()
+
 const { recommend: _recommend } = useBlogConfig()
 
 const sidebarStyle = computed(() =>

package/src/composables/config/blog.ts

@@ -1,6 +1,7 @@
 import { useData, useRoute, withBase } from 'vitepress'
 import type {
   Component,
+  ComputedRef,
   InjectionKey,
   Ref
 } from 'vue'
@@ -17,6 +18,7 @@ import {
 } from 'vue'
 import { useColorMode } from '@vueuse/core'
 
+import { formatDate, replaceValue } from '../../utils/client'
 import type { Theme } from './index'
 
 const configSymbol: InjectionKey<Ref<Theme.Config>> = Symbol('theme-config')
@@ -237,3 +239,104 @@ export function useImageStyle() {
 export function useHomeAnalysis() {
   return inject(configSymbol)?.value?.blog?.home?.analysis
 }
+
+export function useAnalyzeTitles(wordCount: Ref<number>, readTime: ComputedRef<number>) {
+  const { article } = useBlogConfig()
+
+  const topWordCount = computed(() =>
+    replaceValue(article?.analyzeTitles?.topWordCount || '字数：{{value}} 个字', wordCount.value)
+  )
+  const topReadTime = computed(() =>
+    replaceValue(article?.analyzeTitles?.topReadTime || '预计：{{value}} 分钟', readTime.value)
+  )
+  const inlineWordCount = computed(() =>
+    replaceValue(article?.analyzeTitles?.inlineWordCount || '{{value}} 个字', wordCount.value)
+  )
+  const inlineReadTime = computed(() =>
+    replaceValue(article?.analyzeTitles?.inlineReadTime || '{{value}} 分钟', readTime.value)
+  )
+
+  const wordCountTitle = computed(() =>
+    article?.analyzeTitles?.wordCount || '文章字数'
+  )
+  const readTimeTitle = computed(() =>
+    article?.analyzeTitles?.readTime || '预计阅读时间'
+  )
+
+  const authorTitle = computed(() =>
+    article?.analyzeTitles?.author || '本文作者'
+  )
+
+  const publishDateTitle = computed(() =>
+    article?.analyzeTitles?.publishDate || '发布时间'
+  )
+
+  const lastUpdatedTitle = computed(() =>
+    article?.analyzeTitles?.lastUpdated || '最近修改时间'
+  )
+
+  const tagTitle = computed(() =>
+    article?.analyzeTitles?.tag || '标签'
+  )
+
+  return {
+    topWordCount,
+    topReadTime,
+    inlineWordCount,
+    inlineReadTime,
+    wordCountTitle,
+    readTimeTitle,
+    authorTitle,
+    publishDateTitle,
+    lastUpdatedTitle,
+    tagTitle
+  }
+}
+
+export function useFormatShowDate() {
+  const blog = useBlogConfig()
+  if (typeof blog.formatShowDate === 'function') {
+    return blog.formatShowDate
+  }
+
+  function formatShowDate(date: any) {
+    const source = +new Date(date)
+    const now = +new Date()
+    const diff = now - source
+    const oneSeconds = 1000
+    const oneMinute = oneSeconds * 60
+    const oneHour = oneMinute * 60
+    const oneDay = oneHour * 24
+    const oneWeek = oneDay * 7
+
+    const langMap = {
+      justNow: '刚刚',
+      secondsAgo: '秒前',
+      minutesAgo: '分钟前',
+      hoursAgo: '小时前',
+      daysAgo: '天前',
+      weeksAgo: '周前',
+      ...blog.formatShowDate
+    }
+    const mapValue = langMap
+
+    if (diff < 10) {
+      return mapValue.justNow
+    }
+    if (diff < oneMinute) {
+      return `${Math.floor(diff / oneSeconds)}${mapValue.secondsAgo}`
+    }
+    if (diff < oneHour) {
+      return `${Math.floor(diff / oneMinute)}${mapValue.minutesAgo}`
+    }
+    if (diff < oneDay) {
+      return `${Math.floor(diff / oneHour)}${mapValue.hoursAgo}`
+    }
+    if (diff < oneWeek) {
+      return `${Math.floor(diff / oneDay)}${mapValue.daysAgo}`
+    }
+
+    return formatDate(new Date(date), 'yyyy-MM-dd')
+  }
+  return formatShowDate
+}

package/src/composables/config/index.ts

@@ -211,6 +211,10 @@ export namespace Theme {
   }
 
   export interface ArticleConfig {
+    /**
+     * 文章分析数据展示标题
+     */
+    analyzeTitles?: ArticleAnalyzeTitles
     readingTime?: boolean
     /**
      * 阅读时间分析展示位置
@@ -219,6 +223,49 @@ export namespace Theme {
     readingTimePosition?: 'inline' | 'newLine' | 'top'
     hiddenCover?: boolean
   }
+
+  export interface ArticleAnalyzeTitles {
+    /**
+     * 字数：{{value}} 个字
+     */
+    topWordCount?: string
+    /**
+     * 预计：{{value}} 分钟
+     */
+    topReadTime?: string
+    /**
+     * {{value}} 个字
+     */
+    inlineWordCount?: string
+    /**
+     * {{value}} 分钟
+     */
+    inlineReadTime?: string
+    /**
+     * 文章字数
+     */
+    wordCount?: string
+    /**
+     * 预计阅读时间
+     */
+    readTime?: string
+    /**
+     * 本文作者
+     */
+    author?: string
+    /**
+     * 发布时间
+     */
+    publishDate?: string
+    /**
+     * 最近修改时间
+     */
+    lastUpdated?: string
+    /**
+     * 标签
+     */
+    tag?: string
+  }
   export interface Alert {
     type: 'success' | 'warning' | 'info' | 'error'
     /**
@@ -368,6 +415,10 @@ export namespace Theme {
     | 'el-red'
   export interface BlogConfig {
     blog?: false
+    /**
+     * 展示日期格式化
+     */
+    formatShowDate?: FormatShowDate
     /**
      * 内置一些主题色
      * @default 'vp-default'
@@ -476,6 +527,32 @@ export namespace Theme {
     imageStyle?: ImageStyleConfig
   }
 
+  export type FormatShowDate = {
+    /**
+     * 刚刚
+     */
+    justNow?: string
+    /**
+     * 秒前
+     */
+    secondsAgo?: string
+    /**
+     * 分钟前
+     */
+    minutesAgo?: string
+    /**
+     * 小时前
+     */
+    hoursAgo?: string
+    /**
+     * 天前
+     */
+    daysAgo?: string
+    /**
+     * 周前
+     */
+    weeksAgo?: string
+  } | ((date: Date) => string)
   export interface BackToTop {
     /**
      * 距离顶部多少距离出现

package/src/utils/client/index.ts

@@ -177,3 +177,7 @@ export function wrapperCleanUrls(cleanUrls: boolean, route: string) {
   const tempUrl = route.replace(/\.html$/, '')
   return cleanUrls ? tempUrl : `${tempUrl}.html`
 }
+
+export function replaceValue(str: string, value: any) {
+  return str.replace(/\{\{value\}\}/, value)
+}