@sugarat/theme 0.2.29 → 0.3.0

package/node.d.ts

@@ -93,7 +93,8 @@ declare namespace Theme {
         label: string;
         type: string;
     }
-    interface CommentConfig extends GiscusConfig {
+    type CommentConfig = ((GiscusOption & CommentCommonConfig) | GiscusConfig | ArtalkConfig);
+    interface CommentCommonConfig {
         /**
          * @default '评论'
          */
@@ -109,7 +110,15 @@ declare namespace Theme {
          */
         mobileMinify?: boolean;
     }
-    interface GiscusConfig {
+    interface GiscusConfig extends CommentCommonConfig {
+        type: 'giscus';
+        options: GiscusOption;
+    }
+    interface ArtalkConfig extends CommentCommonConfig {
+        type: 'artalk';
+        options: ArtalkOption;
+    }
+    interface GiscusOption {
         repo: Repo;
         repoId: string;
         category: string;
@@ -119,6 +128,10 @@ declare namespace Theme {
         lang?: string;
         loading?: 'lazy' | 'eager';
     }
+    interface ArtalkOption {
+        site: string;
+        server: string;
+    }
     interface HotArticle {
         title?: string;
         pageSize?: number;
@@ -308,7 +321,7 @@ declare namespace Theme {
         pagesData: PageData[];
         srcDir?: string;
         author?: string;
-        hotArticle?: HotArticle;
+        hotArticle?: HotArticle | false;
         home?: HomeBlog;
         /**
          * 本地全文搜索定制
@@ -319,7 +332,8 @@ declare namespace Theme {
         search?: SearchConfig;
         /**
          * 配置评论
-         * power by https://giscus.app/zh-CN
+         * giscus: https://giscus.app/zh-CN
+         * artalk: https://artalk.js.org/
          */
         comment?: CommentConfig | false;
         /**
@@ -390,6 +404,8 @@ declare namespace Theme {
          * 详见 https://oml2d.com/options/Options.html
          */
         oml2d?: Options;
+        homeTags?: boolean;
+        buttonAfterArticle?: ButtonAfterArticleConfig | false;
     }
     interface BackToTop {
         /**
@@ -469,6 +485,22 @@ declare namespace Theme {
          */
         handleChangeSlogan?: (oldSlogan: string) => string | Promise<string>;
     }
+    interface ButtonAfterArticleConfig {
+        openTitle?: string;
+        closeTitle?: string;
+        content?: string;
+        icon?: 'aliPay' | 'wechatPay' | string;
+        /**
+         * 按钮尺寸
+         * @default 'default'
+         */
+        size?: 'small' | 'default' | 'large';
+        /**
+         * 默认展开
+         * @default false
+         */
+        expand?: boolean;
+    }
 }
 
 /**

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.0.1_vue@3.4.21/node_modules/vitepress-plugin-tabs/dist/index.js
+// ../../node_modules/.pnpm/vitepress-plugin-tabs@0.2.0_vitepress@1.0.2_vue@3.4.21/node_modules/vitepress-plugin-tabs/dist/index.js
 var tabsMarker = "=tabs";
 var tabsMarkerLen = tabsMarker.length;
 var ruleBlockTabs = (state, startLine, endLine, silent) => {
@@ -453,6 +453,16 @@ function getArticles(cfg) {
   }).filter((v) => v.meta.layout !== "home");
   return data;
 }
+function patchVPConfig(vpConfig, cfg) {
+  vpConfig.head = vpConfig.head || [];
+  if (cfg?.comment && "type" in cfg.comment && cfg?.comment?.type === "artalk") {
+    const server = cfg.comment?.options?.server;
+    if (server) {
+      vpConfig.head.push(["link", { href: `${server}/dist/Artalk.css`, rel: "stylesheet" }]);
+      vpConfig.head.push(["script", { src: `${server}/dist/Artalk.js`, id: "artalk-script" }]);
+    }
+  }
+}
 function patchVPThemeConfig(cfg, vpThemeConfig = {}) {
   vpThemeConfig.sidebar = patchDefaultThemeSideBar(cfg)?.sidebar;
   return vpThemeConfig;
@@ -574,6 +584,7 @@ function getThemeConfig(cfg) {
   registerMdPlugins(extraVPConfig, markdownPlugin);
   patchMermaidPluginCfg(extraVPConfig);
   patchOptimizeDeps(extraVPConfig);
+  patchVPConfig(extraVPConfig, cfg);
   return {
     themeConfig: {
       blog: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.2.29",
+  "version": "0.3.0",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -42,22 +42,23 @@
     "gray-matter": "^4.0.3",
     "markdown-it-task-checkbox": "^1.0.6",
     "mermaid": "^10.2.4",
-    "oh-my-live2d": "^0.13.0",
+    "oh-my-live2d": "^0.15.2",
     "swiper": "^11.0.5",
     "vitepress-markdown-timeline": "^1.2.1",
     "vitepress-plugin-mermaid": "2.0.13",
-    "vitepress-plugin-pagefind": "0.2.13",
+    "vitepress-plugin-pagefind": "0.2.14",
     "vitepress-plugin-rss": "0.2.2",
     "vitepress-plugin-tabs": "0.2.0"
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.1.0",
+    "artalk": "^2.8.3",
     "element-plus": "^2.3.4",
     "javascript-stringify": "^2.1.0",
     "pagefind": "1.0.3",
     "sass": "^1.56.1",
     "typescript": "^4.8.2",
-    "vitepress": "1.0.1",
+    "vitepress": "1.0.2",
     "vue": "^3.4.21"
   },
   "scripts": {

package/src/components/BlogApp.vue

@@ -7,9 +7,6 @@ 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'
@@ -18,6 +15,11 @@ import BlogPopover from './BlogPopover.vue'
 import BlogFooter from './BlogFooter.vue'
 import BlogHomeHeaderAvatar from './BlogHomeHeaderAvatar.vue'
 import BlogBackToTop from './BlogBackToTop.vue'
+import CommentGiscus from './CommentGiscus.vue'
+
+import CommentArtalk from './CommentArtalk.vue'
+import BlogButtonAfterArticle from './BlogButtonAfterArticle.vue'
+import BlogCommentWrapper from './BlogCommentWrapper.vue'
 
 const { frontmatter } = useData()
 const layout = computed(() => frontmatter.value.layout)
@@ -75,8 +77,12 @@ useOml2d()
       <slot name="doc-after" />
       <!-- 评论 -->
       <ClientOnly>
+        <BlogButtonAfterArticle />
         <BlogBackToTop />
-        <BlogComment />
+        <BlogCommentWrapper>
+          <CommentArtalk />
+          <CommentGiscus />
+        </BlogCommentWrapper>
       </ClientOnly>
     </template>
     <template #layout-bottom>
@@ -192,6 +198,7 @@ useOml2d()
 .blog-list-wrapper {
   width: 100%;
 }
+
 .blog-info-wrapper {
   margin-left: 16px;
   position: sticky;

package/src/components/BlogButtonAfterArticle.vue

@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+import { ElButton } from 'element-plus'
+import { computed, ref, watch } from 'vue'
+import { useData } from 'vitepress'
+import { useBlogConfig } from '../composables/config/blog'
+import { aliPaySVG, weChatPaySVG } from '../constants/svg'
+
+const { buttonAfterArticle: _buttonAfterArticle } = useBlogConfig()
+const { frontmatter } = useData()
+const frontmatterConfig = computed(() => frontmatter.value.buttonAfterArticle)
+
+const buttonAfterArticleConfig = computed(() => {
+  if (frontmatterConfig.value === false || (!frontmatterConfig.value && !_buttonAfterArticle)) {
+    return false
+  }
+
+  return { ..._buttonAfterArticle, ...frontmatterConfig.value }
+})
+
+const showContent = ref(false)
+
+watch(buttonAfterArticleConfig, () => {
+  showContent.value = !!buttonAfterArticleConfig.value?.expand
+}, {
+  immediate: true
+})
+
+const svg = computed(() => {
+  const icon = buttonAfterArticleConfig.value?.icon
+  if (icon === 'aliPay') {
+    return aliPaySVG
+  }
+  else if (icon === 'wechatPay') {
+    return weChatPaySVG
+  }
+  else {
+    return icon as string
+  }
+})
+
+function toggleContent() {
+  showContent.value = !showContent.value
+}
+</script>
+
+<template>
+  <div v-if="buttonAfterArticleConfig" class="appreciation-container">
+    <ElButton :size="buttonAfterArticleConfig.size || 'default'" class="content-button" :type="showContent ? 'danger' : 'primary'" @click="toggleContent">
+      <span class="content-icon" v-html="svg" />
+      {{ showContent ? buttonAfterArticleConfig.closeTitle : buttonAfterArticleConfig.openTitle }}
+    </ElButton>
+    <transition name="content">
+      <div v-if="showContent" class="content-container" v-html="buttonAfterArticleConfig.content" />
+    </transition>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.appreciation-container {
+  text-align: center;
+  padding: 20px;
+  font-size: 14px;
+  color: #606266;
+
+  :deep(.el-button.el-button--primary){
+    background-color: var(--vp-c-brand-2);
+    border-color: var(--vp-c-brand-2);
+  }
+}
+
+.content-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+  :deep(img){
+    height: 260px;
+  }
+}
+
+.content-icon {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  margin-right: 8px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* 进入动画 */
+.content-enter-active {
+  animation: fadeIn 0.5s ease forwards;
+}
+
+/* 离开动画 */
+.content-leave-active {
+  animation: fadeOut 0.3s ease forwards;
+}
+
+/* 淡入 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+/* 淡出 */
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+</style>

package/src/components/{BlogComment.vue → BlogCommentWrapper.vue}

@@ -1,66 +1,33 @@
 <script setup lang="ts">
 import { useElementSize, useElementVisibility, useWindowSize } from '@vueuse/core'
-import { useData, useRoute } from 'vitepress'
-import { computed, h, ref, watch } from 'vue'
+import { useData } from 'vitepress'
+import { computed, h, ref } 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'
-import type { Theme } from '../composables/config/index'
+import { useBlogConfig } from '../composables/config/blog'
 
 const { frontmatter } = useData()
 const commentEl = ref(null)
 const commentIsVisible = useElementVisibility(commentEl)
 
 function handleScrollToComment() {
-  document.querySelector('#giscus-comment')?.scrollIntoView({
+  document.querySelector('#blog-comment-wrapper')?.scrollIntoView({
     behavior: 'smooth',
     block: 'start'
   })
 }
-const giscusConfig = useGiscusConfig()
 
-const commentConfig = computed<Theme.CommentConfig>(() => {
-  if (!giscusConfig) {
-    return {} as any
-  }
-  return giscusConfig
-})
+const { comment: _comment } = useBlogConfig()
+const commentConfig = computed(() =>
+  _comment === false ? undefined : _comment
+)
 
 const show = computed(() => {
-  if (frontmatter.value.comment === false) {
-    return frontmatter.value.comment
-  }
-  if (!giscusConfig) {
-    return giscusConfig
-  }
-  return (
-    giscusConfig.repo
-    && giscusConfig.repoId
-    && giscusConfig.category
-    && giscusConfig.categoryId
-  )
+  return _comment && frontmatter.value.comment !== false
 })
 
-const { isDark } = useData()
-
-const route = useRoute()
-const showComment = ref(true)
-watch(
-  () => route.path,
-  () => {
-    showComment.value = false
-    setTimeout(() => {
-      showComment.value = true
-    }, 200)
-  },
-  {
-    immediate: true
-  }
-)
-
 const { width } = useWindowSize()
-const mobileMinify = computed(() => width.value < 768 && (commentConfig.value.mobileMinify ?? true))
+const mobileMinify = computed(() => width.value < 768 && (commentConfig.value?.mobileMinify ?? true))
 
 const CommentIcon = commentConfig.value?.icon
   ? h('i', {
@@ -78,20 +45,13 @@ const { width: _docWidth } = useElementSize(el)
 const docWidth = computed(() => `${_docWidth.value}px`)
 
 const labelText = computed(() => {
-  return commentConfig.value.label ?? '评论'
+  return commentConfig.value?.label ?? '评论'
 })
 </script>
 
 <template>
-  <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'"
-    />
-
+  <div v-if="show && _docWidth" id="blog-comment-wrapper" ref="commentEl" class="blog-comment-wrapper" data-pagefind-ignore="all">
+    <slot />
     <div v-show="!commentIsVisible" class="comment-btn-wrapper">
       <span v-if="!mobileMinify && labelText" class="icon-wrapper-text" @click="handleScrollToComment">
         <ElIcon :size="20">
@@ -151,7 +111,7 @@ const labelText = computed(() => {
     border-radius: 2px;
     padding: 2px 6px;
 
-    span.text{
+    span.text {
       font-size: 12px;
       margin-left: 4px;
     }

package/src/components/BlogHomeTags.vue

@@ -2,16 +2,17 @@
 import { computed, watch } from 'vue'
 import { ElTag } from 'element-plus'
 import { useBrowserLocation, useDark, useUrlSearchParams } from '@vueuse/core'
-import { useRouter, useRoute } from 'vitepress'
+import { useRoute, useRouter } from 'vitepress'
 import {
   useActiveTag,
   useArticles,
-  useCurrentPageNum
+  useConfig,
+  useCurrentPageNum,
 } from '../composables/config/blog'
 
 const route = useRoute()
 const docs = useArticles()
-
+const showTags = useConfig()?.config?.blog?.homeTags ?? true
 const tags = computed(() => {
   return [...new Set(docs.value.map(v => v.meta.tag || []).flat(3))]
 })
@@ -77,7 +78,7 @@ watch(
 </script>
 
 <template>
-  <div v-if="tags.length" class="card tags" data-pagefind-ignore="all">
+  <div v-if="showTags && tags.length" class="card tags" data-pagefind-ignore="all">
     <!-- 头部 -->
     <div class="card-header">
       <span class="title svg-icon"><svg

package/src/components/BlogHotArticle.vue

@@ -6,11 +6,16 @@ import { useArticles, useBlogConfig, useCleanUrls } from '../composables/config/
 import { formatShowDate, wrapperCleanUrls } from '../utils/client'
 import { fireSVG } from '../constants/svg'
 
-const { hotArticle } = useBlogConfig()
-const title = computed(() => hotArticle?.title || (`<span class="svg-icon">${fireSVG}</span>` + ' 精选文章'))
-const nextText = computed(() => hotArticle?.nextText || '换一组')
-const pageSize = computed(() => hotArticle?.pageSize || 9)
-const empty = computed(() => hotArticle?.empty ?? '暂无精选内容')
+const { hotArticle: _hotArticle } = useBlogConfig()
+
+const hotArticle = computed(() =>
+  _hotArticle === false ? undefined : _hotArticle
+)
+
+const title = computed(() => hotArticle.value?.title || (`<span class="svg-icon">${fireSVG}</span>` + ' 精选文章'))
+const nextText = computed(() => hotArticle.value?.nextText || '换一组')
+const pageSize = computed(() => hotArticle.value?.pageSize || 9)
+const empty = computed(() => hotArticle.value?.empty ?? '暂无精选内容')
 
 const docs = useArticles()
 
@@ -43,7 +48,7 @@ const showChangeBtn = computed(() => {
 </script>
 
 <template>
-  <div v-if="recommendList.length || empty" class="card recommend" data-pagefind-ignore="all">
+  <div v-if="_hotArticle !== false && (recommendList.length || empty) " class="card recommend" data-pagefind-ignore="all">
     <!-- 头部 -->
     <div class="card-header">
       <span class="title" v-html="title" />

package/src/components/BlogItem.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { withBase } from 'vitepress'
 import { computed } from 'vue'
-import { useWindowSize } from '@vueuse/core'
 import { formatShowDate, wrapperCleanUrls } from '../utils/client'
 import { useCleanUrls } from '../composables/config/blog'
 
@@ -17,8 +16,6 @@ const props = defineProps<{
   cover?: string | boolean
   pin?: number
 }>()
-const { width } = useWindowSize()
-const inMobile = computed(() => width.value <= 500)
 const showTime = computed(() => {
   return formatShowDate(props.date)
 })
@@ -28,15 +25,16 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
 </script>
 
 <template>
+  <!-- TODO: 响应式优化使用纯 CSS -->
   <a class="blog-item" :href="link">
     <i v-if="!!pin" class="pin" />
     <!-- 标题 -->
-    <p v-if="inMobile" class="title">{{ title }}</p>
+    <p class="title mobile-visible">{{ title }}</p>
     <div class="info-container">
       <!-- 左侧信息 -->
       <div class="info-part">
         <!-- 标题 -->
-        <p v-if="!inMobile" class="title">{{ title }}</p>
+        <p class="title pc-visible">{{ title }}</p>
         <!-- 简短描述 -->
         <p v-if="!descriptionHTML && !!description" class="description">
           {{ description }}
@@ -45,21 +43,17 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
           <div class="description-html" v-html="descriptionHTML" />
         </template>
         <!-- 底部补充描述 -->
-        <div v-if="!inMobile" class="badge-list">
+        <div class="badge-list pc-visible">
           <span v-if="author" class="split">{{ author }}</span>
           <span class="split">{{ showTime }}</span>
           <span v-if="tag?.length" class="split">{{ tag.join(' · ') }}</span>
         </div>
       </div>
       <!-- 右侧封面图 -->
-      <div
-        v-if="cover"
-        class="cover-img"
-        :style="`background-image: url(${withBase(`${cover}`)});`"
-      />
+      <div v-if="cover" class="cover-img" :style="`background-image: url(${withBase(`${cover}`)});`" />
     </div>
     <!-- 底部补充描述 -->
-    <div v-if="inMobile" class="badge-list">
+    <div class="badge-list mobile-visible">
       <span v-if="author" class="split">{{ author }}</span>
       <span class="split">{{ showTime }}</span>
       <span v-if="tag?.length" class="split">{{ tag.join(' · ') }}</span>
@@ -77,19 +71,19 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
   left: -4px;
   opacity: 0.5;
 }
+
 .blog-item:hover .pin {
   opacity: 1;
 }
+
 .blog-item .pin::before {
   content: '';
   position: absolute;
   width: 120%;
   height: 30px;
-  background-image: linear-gradient(
-    45deg,
-    var(--blog-theme-color),
-    var(--blog-theme-color)
-  );
+  background-image: linear-gradient(45deg,
+      var(--blog-theme-color),
+      var(--blog-theme-color));
   transform: rotate(-45deg) translateY(-20px);
   display: flex;
   align-items: center;
@@ -111,10 +105,12 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
   cursor: pointer;
   display: flex;
   flex-direction: column;
+
   &:hover {
     box-shadow: var(--box-shadow-hover);
   }
 }
+
 .info-container {
   display: flex;
   align-items: center;
@@ -124,11 +120,13 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
 .info-part {
   flex: 1;
 }
+
 .title {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 8px;
 }
+
 .description {
   color: var(--description-font-color);
   font-size: 14px;
@@ -140,13 +138,16 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+
 .description-html {
   font-size: 14px;
 }
+
 .badge-list {
   font-size: 13px;
   color: var(--badge-font-color);
   margin-top: 8px;
+
   .split:not(:last-child) {
     &::after {
       content: '';
@@ -158,20 +159,39 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
     }
   }
 }
+
 .cover-img {
   width: 120px;
   height: 80px;
   margin-left: 24px;
   border-radius: 2px;
   background-repeat: no-repeat;
-  background-size: 120px 80px;
+  background-size: contain;
+  background-position: center;
+}
+
+.pc-visible {
+  display: block;
+}
+
+.mobile-visible {
+  display: none;
 }
 
 @media screen and (max-width: 500px) {
   .cover-img {
     width: 100px;
     height: 60px;
-    background-size: 100px 60px;
+    background-size: contain;
+    background-position: center;
+  }
+
+  .pc-visible {
+    display: none;
+  }
+
+  .mobile-visible {
+    display: block;
   }
 }
 </style>