@sugarat/theme 0.4.9 → 0.4.11

package/node.d.ts

@@ -175,6 +175,16 @@ declare namespace Theme {
          * @default 'sidebar'
          */
         style?: 'card' | 'sidebar';
+        /**
+         * 是否在左侧显示日期
+         * @default true
+         */
+        showDate?: boolean;
+        /**
+         * 是否在左侧展示序号
+         * @default true
+         */
+        showNum?: boolean;
     }
     interface HomeAnalysis {
         articles?: {
@@ -199,6 +209,10 @@ declare namespace Theme {
         analysis?: HomeAnalysis;
     }
     interface ArticleConfig {
+        /**
+         * 文章分析数据展示标题
+         */
+        analyzeTitles?: ArticleAnalyzeTitles;
         readingTime?: boolean;
         /**
          * 阅读时间分析展示位置
@@ -207,6 +221,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 +391,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 +501,32 @@ declare namespace Theme {
          */
         imageStyle?: ImageStyleConfig;
     }
+    type FormatShowDate = {
+        /**
+         * 刚刚
+         */
+        justNow?: string;
+        /**
+         * 秒前
+         */
+        secondsAgo?: string;
+        /**
+         * 分钟前
+         */
+        minutesAgo?: string;
+        /**
+         * 小时前
+         */
+        hoursAgo?: string;
+        /**
+         * 天前
+         */
+        daysAgo?: string;
+        /**
+         * 周前
+         */
+        weeksAgo?: string;
+    } | ((date: Date | string) => 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.4_@algolia+client-search@4.19.1_@types+node@20.6.3__ovjzvjgjmyeesvgttjdmi2b3dm/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.11",
   "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,8 +62,9 @@
     "sass": "^1.77.8",
     "typescript": "^5.4.5",
     "vite": "^5.2.11",
-    "vitepress": "1.3.1",
-    "vue": "^3.4.26"
+    "vitepress": "1.3.4",
+    "vue": "^3.4.26",
+    "vitepress-plugin-51la": "0.1.0"
   },
   "scripts": {
     "dev": "npm run build:node && npm run dev:docs",

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)
 })
@@ -79,7 +82,7 @@ const resultCover = computed(() => {
       <div class="info-part">
         <!-- 标题 -->
         <p class="title pc-visible">
-          {{ title }}
+          <span>{{ title }}</span>
         </p>
         <!-- 简短描述 -->
         <p v-show="!descriptionHTML && !!description" class="description">

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(() =>
@@ -19,6 +21,10 @@ const recommendPadding = computed(() =>
 const recommend = computed(() =>
   _recommend === false ? undefined : _recommend
 )
+
+const showDate = computed(() => (_recommend && _recommend?.showDate) ?? true)
+const showNum = computed(() => (_recommend && _recommend?.showNum) ?? true)
+
 const title = computed(() => recommend.value?.title ?? (`<span class="svg-icon">${recommendSVG}</span>` + '相关文章'))
 const pageSize = computed(() => recommend.value?.pageSize || 9)
 const nextText = computed(() => recommend.value?.nextText || '换一组')
@@ -167,10 +173,16 @@ function handleLinkClick(link: string) {
       </ElButton>
     </div>
     <!-- 文章列表 -->
-    <ol v-if="currentWikiData.length" class="recommend-container">
-      <li v-for="(v, idx) in currentWikiData" :key="v.route">
+    <ol
+      v-if="currentWikiData.length" :class="{
+        'hide-num': !showNum,
+      }" class="recommend-container"
+    >
+      <li
+        v-for="(v, idx) in currentWikiData" :key="v.route"
+      >
         <!-- 序号 -->
-        <i class="num">{{ startIdx + idx + 1 }}</i>
+        <i v-if="showNum" class="num">{{ startIdx + idx + 1 }}</i>
         <!-- 简介 -->
         <div class="des">
           <!-- title -->
@@ -187,7 +199,7 @@ function handleLinkClick(link: string) {
             <span>{{ v.meta.title }}</span>
           </a>
           <!-- 描述信息 -->
-          <div class="suffix">
+          <div v-if="showDate" class="suffix">
             <!-- 日期 -->
             <span class="tag">{{ formatShowDate(v.meta.date) }}</span>
           </div>
@@ -232,6 +244,9 @@ function handleLinkClick(link: string) {
   padding: 0 10px 0 0px;
   width: 100%;
 
+  &.hide-num>li{
+    padding: 5px 0;
+  }
   li {
     display: flex;
 
@@ -251,6 +266,9 @@ function handleLinkClick(link: string) {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
     }
 
     .title {
@@ -261,21 +279,21 @@ function handleLinkClick(link: string) {
       font-weight: 500;
       position: relative;
       cursor: pointer;
-
-      &.current {
+      transition: color .25s;
+      &.current,&:hover {
         color: var(--vp-c-brand-1);
       }
     }
 
-    .title:hover::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      right: 0;
-      height: 0;
-      bottom: -3px;
-      border-bottom: 1px solid #b1b3b8;
-    }
+    // .title:hover::after {
+    //   content: "";
+    //   position: absolute;
+    //   left: 0;
+    //   right: 0;
+    //   height: 0;
+    //   bottom: -3px;
+    //   border-bottom: 1px solid #b1b3b8;
+    // }
 
     .suffix {
       font-size: 12px;

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

@@ -184,6 +184,16 @@ export namespace Theme {
      * @default 'sidebar'
      */
     style?: 'card' | 'sidebar'
+    /**
+     * 是否在左侧显示日期
+     * @default true
+     */
+    showDate?: boolean
+    /**
+     * 是否在左侧展示序号
+     * @default true
+     */
+    showNum?: boolean
   }
 
   export interface HomeAnalysis {
@@ -211,6 +221,10 @@ export namespace Theme {
   }
 
   export interface ArticleConfig {
+    /**
+     * 文章分析数据展示标题
+     */
+    analyzeTitles?: ArticleAnalyzeTitles
     readingTime?: boolean
     /**
      * 阅读时间分析展示位置
@@ -219,6 +233,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 +425,10 @@ export namespace Theme {
     | 'el-red'
   export interface BlogConfig {
     blog?: false
+    /**
+     * 展示日期格式化
+     */
+    formatShowDate?: FormatShowDate
     /**
      * 内置一些主题色
      * @default 'vp-default'
@@ -476,6 +537,32 @@ export namespace Theme {
     imageStyle?: ImageStyleConfig
   }
 
+  export type FormatShowDate = {
+    /**
+     * 刚刚
+     */
+    justNow?: string
+    /**
+     * 秒前
+     */
+    secondsAgo?: string
+    /**
+     * 分钟前
+     */
+    minutesAgo?: string
+    /**
+     * 小时前
+     */
+    hoursAgo?: string
+    /**
+     * 天前
+     */
+    daysAgo?: string
+    /**
+     * 周前
+     */
+    weeksAgo?: string
+  } | ((date: Date | string) => 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)
+}