@sugarat/theme 0.4.13 → 0.5.1

package/src/components/BlogRecommendArticle.vue

@@ -3,27 +3,21 @@ import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter, withBase } from 'vitepress'
 import { ElButton } from 'element-plus'
 import { wrapperCleanUrls } from '../utils/client'
-import { useArticles, useBlogConfig, useCleanUrls, useFormatShowDate } from '../composables/config/blog'
+import { useArticles, useCleanUrls, useFormatShowDate, useRecommendConfig, useShowRecommend } from '../composables/config/blog'
 import { recommendSVG } from '../constants/svg'
 import type { Theme } from '../composables/config/index'
 
 const formatShowDate = useFormatShowDate()
 
-const { recommend: _recommend } = useBlogConfig()
+const recommend = useRecommendConfig()
+const show = useShowRecommend()
 
 const sidebarStyle = computed(() =>
-  _recommend && _recommend?.style ? _recommend.style : 'sidebar'
+  recommend.value?.style ?? 'sidebar'
 )
 
-const recommendPadding = computed(() =>
-  sidebarStyle.value === 'card' ? '10px' : '0px'
-)
-const recommend = computed(() =>
-  _recommend === false ? undefined : _recommend
-)
-
-const showDate = computed(() => (_recommend && _recommend?.showDate) ?? true)
-const showNum = computed(() => (_recommend && _recommend?.showNum) ?? true)
+const showDate = computed(() => recommend.value?.showDate ?? true)
+const showNum = computed(() => recommend.value?.showNum ?? true)
 
 const title = computed(() => recommend.value?.title ?? (`<span class="svg-icon">${recommendSVG}</span>` + '相关文章'))
 const pageSize = computed(() => recommend.value?.pageSize || 9)
@@ -162,7 +156,7 @@ function handleLinkClick(link: string) {
 
 <template>
   <div
-    v-if="_recommend !== false && (recommendList.length || emptyText)" class="recommend"
+    v-if="show && (recommendList.length || emptyText)" class="recommend"
     :class="{ card: sidebarStyle === 'card' }" data-pagefind-ignore="all"
   >
     <!-- 头部 -->
@@ -233,7 +227,10 @@ function handleLinkClick(link: string) {
 
 .recommend {
   flex-direction: column;
-  padding: v-bind(recommendPadding);
+  padding: 0px;
+}
+.recommend.card{
+  padding: 10px;
 }
 
 .recommend-container {

package/src/components/BlogSidebar.vue

@@ -1,35 +1,29 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useBlogConfig } from '../composables/config/blog'
+import { useRecommendConfig, useShowRecommend } from '../composables/config/blog'
 import BlogRecommendArticle from './BlogRecommendArticle.vue'
 
-const { recommend: _recommend } = useBlogConfig()
-
+const recommend = useRecommendConfig()
+const show = useShowRecommend()
 const sidebarStyle = computed(() =>
-  _recommend && _recommend?.style ? _recommend.style : 'card'
-)
-const marginTop = computed(() =>
-  sidebarStyle.value === 'card' ? '40px' : '0px'
-)
-const marginTopMini = computed(() =>
-  sidebarStyle.value === 'card' ? '60px' : '0px'
+  recommend.value?.style || 'sidebar'
 )
 </script>
 
 <template>
-  <div v-if="_recommend !== false" class="sidebar" data-pagefind-ignore="all">
+  <div v-if="show" class="sidebar" :class="{ card: sidebarStyle === 'card' }" data-pagefind-ignore="all">
     <BlogRecommendArticle />
   </div>
 </template>
 
 <style lang="scss" scoped>
-.sidebar {
-  margin-top: v-bind(marginTop);
+.sidebar.card {
+  margin-top: 40px;
 }
 
 @media screen and (min-width: 960px) and (max-width: 1120px) {
-  .sidebar {
-    margin-top: v-bind(marginTopMini);
+  .sidebar.card {
+    margin-top: 60px;
   }
 }
 </style>

package/src/components/CommentArtalk.vue

@@ -3,7 +3,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useData, useRoute } from 'vitepress'
 import type Artalk from 'artalk'
 
-import { useBlogConfig } from '../composables/config/blog'
+import { useCommentConfig, useOpenCommentConfig } from '../composables/config/blog'
 
 const { isDark, page } = useData()
 const el = ref<HTMLDivElement>()
@@ -12,14 +12,16 @@ const route = useRoute()
 
 const artalk = ref<Artalk>()
 
-const { comment } = useBlogConfig()
+const comment = useCommentConfig()
+
 const commentConfig = computed(() => {
-  if (comment && 'type' in comment && comment.type === 'artalk') {
-    return comment.options
+  if (comment.value && 'type' in comment.value && comment.value?.type === 'artalk') {
+    return comment.value.options
   }
 
   return false
 })
+const open = useOpenCommentConfig()
 
 onMounted(() => {
   // CDN 异步加载，有优化空间
@@ -64,7 +66,7 @@ watch(isDark, () => {
 </script>
 
 <template>
-  <div v-if="commentConfig" ref="el" class="artalk-container" />
+  <div v-if="open" ref="el" class="artalk-container" />
 </template>
 
 <style lang="scss" scoped>

package/src/components/CommentGiscus.vue

@@ -2,19 +2,18 @@
 import { useData, useRoute } from 'vitepress'
 import { computed, nextTick, ref, watch } from 'vue'
 import Giscus from '@giscus/vue'
-import { useBlogConfig } from '../composables/config/blog'
+import { useCommentConfig } from '../composables/config/blog'
 
-// 读取配制
-const { comment } = useBlogConfig()
+const comment = useCommentConfig()
 const commentConfig = computed(() => {
-  if (!comment) {
+  if (!comment.value) {
     return false
   }
-  if ('type' in comment && comment.type === 'giscus') {
-    return comment.options
+  if ('type' in comment.value && comment.value?.type === 'giscus') {
+    return comment.value.options
   }
-  else if (!('type' in comment)) {
-    return comment
+  else if (!('type' in comment.value)) {
+    return comment.value
   }
 
   return false

package/src/components/Icon.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps<{
+  size?: string | number
+  icon?: string
+}>()
+
+const size = computed(() => props.size && (typeof props.size === 'number' ? `${props.size}px` : props.size))
+</script>
+
+<template>
+  <i v-if="props.icon" class="sugar-theme-icon" :style="{ fontSize: size }" v-html="props.icon" />
+  <i v-else class="sugar-theme-icon" :style="{ fontSize: size }">
+    <slot />
+  </i>
+</template>
+
+<style lang="css" scoped>
+.sugar-theme-icon {
+    --color: inherit;
+    align-items: center;
+    display: inline-flex;
+    height: 1em;
+    justify-content: center;
+    line-height: 1em;
+    position: relative;
+    width: 1em;
+    fill: currentColor;
+    color: var(--color);
+    font-size: inherit;
+}
+</style>

package/src/composables/config/blog.ts

@@ -14,7 +14,8 @@ import {
   onUnmounted,
   provide,
   reactive,
-  ref
+  ref,
+  watch,
 } from 'vue'
 import { useColorMode } from '@vueuse/core'
 
@@ -27,28 +28,14 @@ const activeTagSymbol: InjectionKey<Ref<Theme.activeTag>> = Symbol('active-tag')
 
 const currentPageNum: InjectionKey<Ref<number>> = Symbol('home-page-num')
 
-const userWorks: InjectionKey<Ref<Theme.UserWorks>> = Symbol('user-works')
-
-const homeFooter: InjectionKey<Theme.Footer | Theme.Footer[] | undefined> = Symbol('home-footer')
-
 export function withConfigProvider(App: Component) {
   return defineComponent({
     name: 'ConfigProvider',
     setup(_, { slots }) {
-      const { theme } = useData()
-      const config = computed(() => resolveConfig(theme.value))
-      provide(homeFooter, config.value.blog?.footer)
+      const { theme, localeIndex } = useData()
+      const config = computed(() => resolveConfig(theme.value, localeIndex.value))
+
       provide(configSymbol, config)
-      provide(
-        userWorks,
-        ref(
-          config.value.blog?.works || {
-            title: '',
-            description: '',
-            list: []
-          }
-        )
-      )
 
       const activeTag = ref<Theme.activeTag>({
         label: '',
@@ -73,37 +60,122 @@ export function withConfigProvider(App: Component) {
           'el-red': 'el-red'
         }
       })
-      mode.value = config.value.blog?.themeColor ?? 'vp-default'
+      watch(config, () => {
+        mode.value = config.value.blog?.themeColor ?? 'vp-default'
+      }, {
+        immediate: true
+      })
+
       return () => h(App, null, slots)
     }
   })
 }
+
+export function useGlobalAuthor() {
+  const blogConfig = useBlogConfig()
+  return computed(() => blogConfig.value?.author || '')
+}
+
+export function useArticleConfig() {
+  const blogConfig = useBlogConfig()
+  return computed(() => blogConfig.value?.article)
+}
+
+export function useAuthorList() {
+  const blogConfig = useBlogConfig()
+  return computed(() => blogConfig.value?.authorList)
+}
+
+export function useHotArticleConfig() {
+  const blogConfig = useBlogConfig()
+  return computed(() => {
+    const cfg = blogConfig.value?.hotArticle
+    return cfg === false ? undefined : cfg
+  })
+}
+
+export function useShowHotArticle() {
+  const blogConfig = useBlogConfig()
+  return computed(() => {
+    const cfg = blogConfig.value?.hotArticle
+    return cfg !== false
+  })
+}
+
+export function useRecommendConfig() {
+  const blogConfig = useBlogConfig()
+  return computed(() => {
+    const cfg = blogConfig.value?.recommend
+    return cfg === false ? undefined : cfg
+  })
+}
+
+export function useShowRecommend() {
+  const blogConfig = useBlogConfig()
+  return computed(() => {
+    const cfg = blogConfig.value?.recommend
+    return cfg !== false
+  })
+}
+
+export function useAlertConfig() {
+  const blogConfig = useBlogConfig()
+  return computed(() => blogConfig.value?.alert)
+}
+
+export function useHomeConfig() {
+  const blogConfig = useBlogConfig()
+  return computed(() => blogConfig.value?.home)
+}
+
+export function useHomeTagsConfig() {
+  const blogConfig = useBlogConfig()
+  return computed(() => blogConfig.value?.homeTags)
+}
+
 export function useDocMetaInsertSelector() {
   const blogConfig = useConfig()
   const { frontmatter } = useData()
-  return computed(() => frontmatter.value?.docMetaInsertSelector || blogConfig.config?.blog?.docMetaInsertSelector || 'h1')
+  return computed(() => frontmatter.value?.docMetaInsertSelector || blogConfig?.value?.blog?.docMetaInsertSelector || 'h1')
 }
 
 export function useDocMetaInsertPosition() {
   const blogConfig = useConfig()
   const { frontmatter } = useData()
-  return computed(() => frontmatter.value?.docMetaInsertPosition || blogConfig.config?.blog?.docMetaInsertPosition || 'after')
+  return computed(() => frontmatter.value?.docMetaInsertPosition || blogConfig?.value?.blog?.docMetaInsertPosition || 'after')
 }
 
 export function useConfig() {
-  return {
-    config: inject(configSymbol)!.value
-  }
+  return inject(configSymbol)
 }
 
 export function useBlogConfig() {
-  return inject(configSymbol)!.value.blog!
+  const resolveConfig = useConfig()
+  return computed(() => resolveConfig?.value?.blog)
 }
+
+export function useButtonAfterConfig() {
+  const blogConfig = useBlogConfig()
+  const { frontmatter } = useData()
+  const frontmatterConfig = computed(() => frontmatter.value.buttonAfterArticle)
+
+  const buttonAfterArticleConfig = computed<Theme.ButtonAfterArticleConfig | false>(() => {
+    if (frontmatterConfig.value === false || (!frontmatterConfig.value && !blogConfig.value?.buttonAfterArticle)) {
+      return false
+    }
+
+    return { ...blogConfig.value?.buttonAfterArticle, ...frontmatterConfig.value }
+  })
+
+  return buttonAfterArticleConfig
+}
+
 /**
  * 获取 oh-my-live2d的配置选项
  */
 export function useOml2dOptions() {
-  return inject(configSymbol)!.value.blog?.oml2d
+  const blogConfig = useBlogConfig()
+  return computed(() => blogConfig.value?.oml2d)
 }
 
 export function useDarkTransitionConfig() {
@@ -116,7 +188,16 @@ export function useBlogThemeMode() {
 
 export function useArticles() {
   const blogConfig = useConfig()
-  const articles = computed(() => blogConfig.config?.blog?.pagesData || [])
+  const { localeIndex, site } = useData()
+
+  const localeKeys = computed(() => Object.keys(site.value.locales))
+
+  const articles = computed(() => {
+    if (localeKeys.value.length === 0) {
+      return (blogConfig?.value?.blog?.pagesData || [])
+    }
+    return blogConfig?.value?.blog?.locales?.[localeIndex.value]?.pagesData || []
+  })
   return articles
 }
 
@@ -128,10 +209,9 @@ export function useCurrentPageNum() {
 }
 
 export function useCurrentArticle() {
-  const blogConfig = useConfig()
   const route = useRoute()
 
-  const docs = computed(() => blogConfig.config?.blog?.pagesData)
+  const docs = useArticles()
   const currentArticle = computed(() => {
     const currentPath = route.path.replace(/.html$/, '')
     // 兼容中文路径
@@ -149,16 +229,25 @@ export function useCurrentArticle() {
 }
 
 export function useUserWorks() {
-  return inject(userWorks)!
+  const blogConfig = useBlogConfig()
+
+  return computed(() => blogConfig.value?.works || {
+    title: '',
+    description: '',
+    list: []
+  })
 }
-function resolveConfig(config: Theme.Config): Theme.Config {
-  return {
+function resolveConfig(config: Theme.Config, locale: string = 'root'): Theme.Config {
+  const mergeConfig = {
     ...config,
     blog: {
       ...config?.blog,
-      pagesData: config?.blog?.pagesData || []
+      pagesData: config?.blog?.pagesData || [],
+      // i18n 支持
+      ...config?.blog?.locales?.[locale]
     }
   }
+  return mergeConfig
 }
 
 /**
@@ -220,11 +309,36 @@ export function useAutoUpdateAnchor() {
 }
 
 export function useHomeFooterConfig() {
-  return inject(homeFooter)
+  const blogConfig = useBlogConfig()
+  return computed(() => blogConfig.value?.footer)
 }
 
 export function useBackToTopConfig() {
-  return useBlogConfig().backToTop
+  const blogConfig = useBlogConfig()
+  return computed(() => typeof blogConfig.value?.backToTop === 'boolean' ? undefined : blogConfig.value?.backToTop)
+}
+
+export function useOpenBackToTop() {
+  const blogConfig = useBlogConfig()
+  return computed(() => blogConfig.value?.backToTop !== false)
+}
+
+export function useCommentConfig() {
+  const blogConfig = useBlogConfig()
+  return computed(() => {
+    return blogConfig.value?.comment === false ? undefined : blogConfig.value?.comment
+  })
+}
+
+export function useOpenCommentConfig() {
+  const blogConfig = useBlogConfig()
+  const { frontmatter } = useData()
+  return computed(() => !!blogConfig.value?.comment && frontmatter.value.comment !== false)
+}
+
+export function useFriendData() {
+  const blogConfig = useBlogConfig()
+  return computed(() => blogConfig.value?.friend)
 }
 
 export function useCleanUrls() {
@@ -233,50 +347,52 @@ export function useCleanUrls() {
 }
 
 export function useImageStyle() {
-  return inject(configSymbol)?.value?.blog?.imageStyle || {} as Theme.ImageStyleConfig
+  const blogConfig = useBlogConfig()
+  return computed<Theme.ImageStyleConfig>(() => blogConfig.value?.imageStyle || {})
 }
 
 export function useHomeAnalysis() {
-  return inject(configSymbol)?.value?.blog?.home?.analysis
+  const home = useHomeConfig()
+  return computed(() => home.value?.analysis)
 }
 
 export function useAnalyzeTitles(wordCount: Ref<number>, readTime: ComputedRef<number>) {
-  const { article } = useBlogConfig()
+  const article = computed(() => useConfig()?.value.blog?.article)
 
   const topWordCount = computed(() =>
-    replaceValue(article?.analyzeTitles?.topWordCount || '字数：{{value}} 个字', wordCount.value)
+    replaceValue(article.value?.analyzeTitles?.topWordCount || '字数：{{value}} 个字', wordCount.value)
   )
   const topReadTime = computed(() =>
-    replaceValue(article?.analyzeTitles?.topReadTime || '预计：{{value}} 分钟', readTime.value)
+    replaceValue(article.value?.analyzeTitles?.topReadTime || '预计：{{value}} 分钟', readTime.value)
   )
   const inlineWordCount = computed(() =>
-    replaceValue(article?.analyzeTitles?.inlineWordCount || '{{value}} 个字', wordCount.value)
+    replaceValue(article.value?.analyzeTitles?.inlineWordCount || '{{value}} 个字', wordCount.value)
   )
   const inlineReadTime = computed(() =>
-    replaceValue(article?.analyzeTitles?.inlineReadTime || '{{value}} 分钟', readTime.value)
+    replaceValue(article.value?.analyzeTitles?.inlineReadTime || '{{value}} 分钟', readTime.value)
   )
 
   const wordCountTitle = computed(() =>
-    article?.analyzeTitles?.wordCount || '文章字数'
+    article.value?.analyzeTitles?.wordCount || '文章字数'
   )
   const readTimeTitle = computed(() =>
-    article?.analyzeTitles?.readTime || '预计阅读时间'
+    article.value?.analyzeTitles?.readTime || '预计阅读时间'
   )
 
   const authorTitle = computed(() =>
-    article?.analyzeTitles?.author || '本文作者'
+    article.value?.analyzeTitles?.author || '本文作者'
   )
 
   const publishDateTitle = computed(() =>
-    article?.analyzeTitles?.publishDate || '发布时间'
+    article.value?.analyzeTitles?.publishDate || '发布时间'
   )
 
   const lastUpdatedTitle = computed(() =>
-    article?.analyzeTitles?.lastUpdated || '最近修改时间'
+    article.value?.analyzeTitles?.lastUpdated || '最近修改时间'
   )
 
   const tagTitle = computed(() =>
-    article?.analyzeTitles?.tag || '标签'
+    article.value?.analyzeTitles?.tag || '标签'
   )
 
   return {
@@ -295,48 +411,50 @@ export function useAnalyzeTitles(wordCount: Ref<number>, readTime: ComputedRef<n
 
 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
+  return computed(() => {
+    if (typeof blog.value?.formatShowDate === 'function') {
+      return blog.value.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}`
-    }
+    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.value?.formatShowDate
+      }
+      const mapValue = langMap
 
-    return formatDate(new Date(date), 'yyyy-MM-dd')
-  }
-  return formatShowDate
+      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

@@ -349,6 +349,7 @@ export namespace Theme {
     | 'el-red'
   export interface BlogConfig {
     blog?: false
+    locales?: Record<string, Omit<BlogConfig, 'locales' | 'pagesData' | 'search' | 'popover' | 'RSS'> & { pagesData?: PageData[] }>
     /**
      * 展示日期格式化
      */
@@ -360,6 +361,11 @@ export namespace Theme {
      */
     themeColor?: ThemeColor
     pagesData: PageData[]
+    /**
+     * @deprecated 请使用 VitePress 官方 srcDir 替代
+     *
+     * @doc https://vitepress.dev/zh/reference/site-config#srcdir
+     */
     srcDir?: string
     author?: string
     hotArticle?: HotArticle | false
@@ -459,6 +465,9 @@ export namespace Theme {
      * 渲染时替换图片地址
      */
     imageStyle?: ImageStyleConfig
+    groupIcon?: {
+      customIcon: Record<string, string>
+    }
   }
 
   export type FormatShowDate = {