@sugarat/theme 0.2.30 → 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;
@@ -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;
         /**
@@ -391,6 +405,7 @@ declare namespace Theme {
          */
         oml2d?: Options;
         homeTags?: boolean;
+        buttonAfterArticle?: ButtonAfterArticleConfig | false;
     }
     interface BackToTop {
         /**
@@ -470,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.30",
+  "version": "0.3.0",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -52,12 +52,13 @@
   },
   "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,8 +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 BlogSidebar from './BlogSidebar.vue'
 import BlogImagePreview from './BlogImagePreview.vue'
 import BlogArticleAnalyze from './BlogArticleAnalyze.vue'
@@ -17,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)
@@ -74,8 +77,12 @@ useOml2d()
       <slot name="doc-after" />
       <!-- 评论 -->
       <ClientOnly>
+        <BlogButtonAfterArticle />
         <BlogBackToTop />
-        <BlogComment />
+        <BlogCommentWrapper>
+          <CommentArtalk />
+          <CommentGiscus />
+        </BlogCommentWrapper>
       </ClientOnly>
     </template>
     <template #layout-bottom>
@@ -191,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

@@ -12,7 +12,7 @@ import {
 
 const route = useRoute()
 const docs = useArticles()
-const showTags = useConfig()?.config?.blog?.homeTags ??  true
+const showTags = useConfig()?.config?.blog?.homeTags ?? true
 const tags = computed(() => {
   return [...new Set(docs.value.map(v => v.meta.tag || []).flat(3))]
 })

package/src/components/BlogItem.vue

@@ -166,7 +166,8 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
   margin-left: 24px;
   border-radius: 2px;
   background-repeat: no-repeat;
-  background-size: 120px 80px;
+  background-size: contain;
+  background-position: center;
 }
 
 .pc-visible {
@@ -181,7 +182,8 @@ const link = computed(() => withBase(wrapperCleanUrls(!!cleanUrls, props.route))
   .cover-img {
     width: 100px;
     height: 60px;
-    background-size: 100px 60px;
+    background-size: contain;
+    background-position: center;
   }
 
   .pc-visible {

package/src/components/CommentArtalk.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useData, useRoute } from 'vitepress'
+import type Artalk from 'artalk'
+
+import { useBlogConfig } from '../composables/config/blog'
+
+const { isDark, page } = useData()
+const el = ref<HTMLDivElement>()
+
+const route = useRoute()
+
+const artalk = ref<Artalk>()
+
+const { comment } = useBlogConfig()
+const commentConfig = computed(() => {
+  if (comment && 'type' in comment && comment.type === 'artalk') {
+    return comment.options
+  }
+
+  return false
+})
+
+onMounted(() => {
+  // CDN 异步加载，有优化空间
+  const observer = new MutationObserver((mutationsList, observer) => {
+    if (window.Artalk && commentConfig.value && el.value) {
+      artalk.value = window.Artalk.init({
+        el: el.value,
+        darkMode: isDark.value,
+        pageKey: route.path,
+        pageTitle: page.value.title,
+        server: commentConfig.value?.server,
+        site: commentConfig.value?.site,
+      })
+      observer.disconnect()
+    }
+  })
+
+  observer.observe(document.head, { subtree: true, childList: true, attributes: true, attributeFilter: ['id'] })
+})
+
+watch(() => route.path, () => {
+  if (artalk.value) {
+    artalk.value.update({
+      pageKey: route.path,
+      pageTitle: page.value.title,
+    })
+    artalk.value.reload()
+  }
+})
+
+onUnmounted(() => {
+  if (artalk.value) {
+    artalk.value.destroy()
+  }
+})
+
+watch(isDark, () => {
+  if (artalk.value) {
+    artalk.value.setDarkMode(isDark.value)
+  }
+})
+</script>
+
+<template>
+  <div v-if="commentConfig" ref="el" class="artalk-container" />
+</template>
+
+<style lang="scss" scoped>
+.artalk-container {
+  --at-color-main: var(--vp-c-brand-2);
+}
+</style>

package/src/components/CommentGiscus.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useData, useRoute } from 'vitepress'
+import { computed, ref, watch } from 'vue'
+import Giscus from '@giscus/vue'
+import { useBlogConfig } from '../composables/config/blog'
+
+// 读取配制
+const { comment } = useBlogConfig()
+const commentConfig = computed(() => {
+  if (!comment) {
+    return false
+  }
+  if ('type' in comment && comment.type === 'giscus') {
+    return comment.options
+  }
+  else if (!('type' in comment)) {
+    return comment
+  }
+
+  return false
+})
+
+const { isDark } = useData()
+
+const route = useRoute()
+const showComment = ref(true)
+watch(
+  () => route.path,
+  () => {
+    showComment.value = false
+    setTimeout(() => {
+      showComment.value = true
+    }, 200)
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<template>
+  <Giscus
+    v-if="commentConfig" :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'"
+  />
+</template>

package/src/composables/config/blog.ts

@@ -108,11 +108,6 @@ export function useBlogThemeMode() {
   return inject(configSymbol)!.value?.blog?.blog ?? true
 }
 
-export function useGiscusConfig() {
-  const blogConfig = useConfig()
-  return blogConfig.config?.blog?.comment
-}
-
 export function useArticles() {
   const blogConfig = useConfig()
   const articles = computed(() => blogConfig.config?.blog?.pagesData || [])

package/src/composables/config/index.ts

@@ -100,7 +100,9 @@ export namespace Theme {
     type: string
   }
 
-  export interface CommentConfig extends GiscusConfig {
+  export type CommentConfig = ((GiscusOption & CommentCommonConfig) | GiscusConfig | ArtalkConfig)
+
+  export interface CommentCommonConfig {
     /**
      * @default '评论'
      */
@@ -116,7 +118,15 @@ export namespace Theme {
      */
     mobileMinify?: boolean
   }
-  export interface GiscusConfig {
+  export interface GiscusConfig extends CommentCommonConfig {
+    type: 'giscus'
+    options: GiscusOption
+  }
+  export interface ArtalkConfig extends CommentCommonConfig {
+    type: 'artalk'
+    options: ArtalkOption
+  }
+  export interface GiscusOption {
     repo: Repo
     repoId: string
     category: string
@@ -126,6 +136,10 @@ export namespace Theme {
     lang?: string
     loading?: 'lazy' | 'eager'
   }
+  export interface ArtalkOption {
+    site: string
+    server: string
+  }
 
   export interface HotArticle {
     title?: string
@@ -351,7 +365,8 @@ export 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
     /**
@@ -424,6 +439,7 @@ export namespace Theme {
      */
     oml2d?: Oml2dOptions
     homeTags?: boolean
+    buttonAfterArticle?: ButtonAfterArticleConfig | false
   }
 
   export interface BackToTop {
@@ -509,4 +525,20 @@ export namespace Theme {
      */
     handleChangeSlogan?: (oldSlogan: string) => string | Promise<string>
   }
+  export interface ButtonAfterArticleConfig {
+    openTitle?: string
+    closeTitle?: string
+    content?: string
+    icon?: 'aliPay' | 'wechatPay' | string
+    /**
+     * 按钮尺寸
+     * @default 'default'
+     */
+    size?: 'small' | 'default' | 'large'
+    /**
+     * 默认展开
+     * @default false
+     */
+    expand?: boolean
+  }
 }

package/src/constants/svg.ts

@@ -52,3 +52,26 @@ export const themeSVG = `<svg width="128" height="128" viewBox="0 0 24 24" xmlns
 export const icpSVG = '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" data-v-2f084f89=""><title data-v-2f084f89="">ICP备案号</title><path d="M778.24 163.84c-76.8-40.96-165.888-61.44-269.312-61.44s-192.512 20.48-269.312 61.44h-133.12l23.552 337.92c8.192 113.664 67.584 217.088 162.816 280.576l215.04 144.384 215.04-144.384c96.256-63.488 155.648-166.912 163.84-280.576l23.552-337.92H778.24z m47.104 333.824c-7.168 94.208-56.32 181.248-135.168 233.472l-181.248 120.832L327.68 731.136c-78.848-53.248-129.024-139.264-135.168-233.472L173.056 225.28h136.192v-26.624c58.368-23.552 124.928-34.816 199.68-34.816s141.312 12.288 199.68 34.816V225.28H844.8l-19.456 272.384z" data-v-2f084f89=""></path><path d="M685.056 328.704v-46.08H455.68c2.048-4.096 6.144-9.216 11.264-15.36 5.12-7.168 9.216-12.288 11.264-15.36L419.84 240.64c-31.744 46.08-75.776 87.04-133.12 123.904 4.096 4.096 10.24 11.264 18.432 21.504l17.408 17.408c23.552-15.36 45.056-31.744 63.488-50.176 26.624 25.6 49.152 43.008 67.584 51.2-46.08 15.36-104.448 27.648-175.104 35.84 2.048 5.12 6.144 13.312 9.216 24.576 4.096 11.264 6.144 19.456 7.168 24.576l39.936-7.168v218.112H389.12V680.96h238.592v19.456h54.272V481.28H348.16c60.416-12.288 114.688-27.648 163.84-46.08 49.152 19.456 118.784 34.816 210.944 46.08 5.12-17.408 10.24-34.816 17.408-51.2-62.464-4.096-116.736-12.288-161.792-24.576 38.912-20.48 74.752-46.08 106.496-76.8z m-150.528 194.56h94.208v41.984h-94.208v-41.984z m0 78.848h94.208v41.984h-94.208v-41.984z m-144.384-78.848h94.208v41.984H390.144v-41.984z m0 78.848h94.208v41.984H390.144v-41.984zM424.96 326.656h182.272c-26.624 22.528-57.344 41.984-94.208 57.344-31.744-15.36-61.44-34.816-88.064-57.344z" data-v-2f084f89=""></path></svg>'
 
 export const copyrightSVG = '<svg t="1695543755857" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="89399" width="200" height="200"><path d="M512 16C238.066 16 16 238.066 16 512s222.066 496 496 496 496-222.066 496-496S785.934 16 512 16z m234.268 693.506c-3.184 3.734-79.552 91.462-219.702 91.462-169.384 0-288.968-126.52-288.968-291.134 0-162.606 124.008-286.802 287.524-286.802 133.914 0 203.93 74.63 206.844 77.808a24 24 0 0 1 2.476 29.246l-44.76 69.31c-8.098 12.534-25.548 14.702-36.468 4.59-0.466-0.428-53.058-47.76-123.76-47.76-92.232 0-147.832 67.15-147.832 152.164 0 79.204 51.028 159.384 148.554 159.384 77.394 0 130.56-56.676 131.088-57.25 10.264-11.13 28.118-10.066 37.016 2.106l49.094 67.144a24.002 24.002 0 0 1-1.106 29.732z" p-id="89400"></path></svg>'
+
+export const aliPaySVG = `
+<svg
+        id="mx_n_1711731519286" t="1711731519285" class="icon" viewBox="0 0 1024 1024" version="1.1"
+        xmlns="http://www.w3.org/2000/svg" p-id="9945" width="16" height="16"
+      >
+        <path
+          d="M230.404 576.536c-12.087 9.728-25.043 23.93-28.805 41.984-5.12 24.666-1.069 55.541 22.728 79.761 28.828 29.362 72.637 37.398 91.56 38.779 51.4 3.717 106.184-21.772 147.477-50.844 16.184-11.42 43.899-34.349 70.39-69.721-59.37-30.653-133.477-64.557-212.703-61.24-40.47 1.692-69.454 10.084-90.647 21.281z m752.859 135.545C1009.463 650.574 1024 582.968 1024 512 1024 229.688 794.335 0 512 0 229.665 0 0 229.688 0 512c0 282.335 229.665 512 512 512 170.385 0 321.491-83.723 414.631-212.124-87.997-43.742-233.027-115.734-322.36-159.299-42.63 48.596-105.65 97.303-176.84 118.495-44.722 13.29-85.037 18.365-127.199 9.75-41.739-8.548-72.481-28.093-90.401-47.683-9.127-9.995-19.612-22.706-27.203-37.82a71.25 71.25 0 0 0 1.202 3.049s-4.363-7.524-7.702-19.5a85.994 85.994 0 0 1-3.34-18.143 93.517 93.517 0 0 1-0.2-13.045c-0.378-7.702-0.066-15.783 1.67-24.064 4.185-20.235 12.822-43.81 35.172-65.692 49.063-48.039 114.777-50.621 148.814-50.42 50.421 0.289 138.04 22.35 211.812 48.439 20.436-43.52 33.547-90.068 42.007-121.1H305.308v-33.168h157.518v-66.337H272.139v-33.169h190.687v-66.315c0-9.105 1.803-16.584 16.584-16.584h74.619v82.899h207.293v33.169H554.029v66.337h165.82s-16.65 92.828-68.719 184.32c115.557 41.272 278.128 104.849 332.133 126.086z"
+          fill="white" p-id="9946"
+        />
+      </svg>
+`
+export const weChatPaySVG = `
+<svg
+        t="1711730357270" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        p-id="4392" width="16" height="16"
+      >
+        <path
+          d="M512 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512z m-112.523636-836.538182c-144.989091 0-262.516364 100.538182-262.516364 224.465455 0 74.007273 42.123636 139.636364 106.705455 180.363636l-19.549091 78.312727 86.807272-47.592727a301.265455 301.265455 0 0 0 88.669091 13.381818h2.210909a178.967273 178.967273 0 0 1-3.607272-34.909091c0-115.083636 109.498182-208.407273 244.363636-208.407272 6.167273 0 11.636364 0 18.152727 0.814545-10.589091-115.665455-123.461818-206.778182-261.469091-206.778182z m246.690909 226.443637c-124.741818 0-225.861818 86.109091-225.861818 192.465454s101.003636 192.349091 225.861818 192.349091a257.047273 257.047273 0 0 0 99.723636-20.014545l77.265455 40.610909L802.909091 744.727273a179.316364 179.316364 0 0 0 69.003636-138.24c0-106.24-101.12-192.465455-225.861818-192.465455z m81.454545 152.087272a31.767273 31.767273 0 1 1 32.349091-31.767272 32 32 0 0 1-32.349091 31.767272z m-164.072727 0a31.767273 31.767273 0 1 1 32.349091-31.767272 32 32 0 0 1-32.349091 31.767272zM502.341818 373.527273a34.909091 34.909091 0 1 1 34.909091-34.909091 34.909091 34.909091 0 0 1-34.909091 34.909091z m-206.196363 0a34.909091 34.909091 0 1 1 34.90909-34.909091 34.909091 34.909091 0 0 1-34.90909 34.909091z m0 0"
+          fill="white" p-id="4393"
+        />
+      </svg>
+`

package/src/node.ts

@@ -6,7 +6,7 @@ import {
   patchOptimizeDeps,
   registerMdPlugins,
 } from './utils/node/mdPlugins'
-import { checkConfig, getArticles, patchVPThemeConfig } from './utils/node/theme'
+import { checkConfig, getArticles, patchVPConfig, patchVPThemeConfig } from './utils/node/theme'
 import { getVitePlugins, registerVitePlugins } from './utils/node/vitePlugins'
 
 /**
@@ -34,6 +34,8 @@ export function getThemeConfig(cfg?: Partial<Theme.BlogConfig>) {
   // patch extraVPConfig
   patchMermaidPluginCfg(extraVPConfig)
   patchOptimizeDeps(extraVPConfig)
+
+  patchVPConfig(extraVPConfig, cfg)
   return {
     themeConfig: {
       blog: {

package/src/utils/node/theme.ts

@@ -125,7 +125,15 @@ export function getArticles(cfg?: Partial<Theme.BlogConfig>) {
 }
 
 export function patchVPConfig(vpConfig: any, cfg?: Partial<Theme.BlogConfig>) {
-  // TODO: 待确定场景
+  vpConfig.head = vpConfig.head || []
+  // Artalk 资源地址
+  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' }])
+    }
+  }
 }
 
 export function patchVPThemeConfig(

package/types/vue-shim.d.ts

@@ -1,3 +1,13 @@
+import type Artalk, { ArtalkConfig } from 'artalk'
+
+declare global {
+  interface Window {
+    Artalk: {
+      init(options: Partial<ArtalkConfig>): Artalk
+    }
+  }
+}
+
 declare module '*.vue' {
   import type { ComponentOptions } from 'vue'