@sugarat/theme 0.2.25 → 0.2.27

package/node.d.ts

@@ -2,6 +2,7 @@ import { DefaultTheme, UserConfig } from 'vitepress';
 import { ElButton } from 'element-plus';
 import { RSSOptions } from 'vitepress-plugin-rss';
 import { Repo, Mapping } from '@giscus/vue';
+import { Options } from 'oh-my-live2d';
 export { tabsMarkdownPlugin } from 'vitepress-plugin-tabs';
 
 type RSSPluginOptions = RSSOptions;
@@ -384,6 +385,11 @@ declare namespace Theme {
          * @default true
          */
         backToTop?: boolean | BackToTop;
+        /**
+         * oh-my-live2d 的 loadOml2d 方法的配置选项
+         * 详见 https://oml2d.com/options/Options.html
+         */
+        oml2d?: Options;
     }
     interface BackToTop {
         /**

package/node.js

@@ -456,6 +456,8 @@ function patchVPThemeConfig(cfg, vpThemeConfig = {}) {
   vpThemeConfig.sidebar = patchDefaultThemeSideBar(cfg)?.sidebar;
   return vpThemeConfig;
 }
+function checkConfig(cfg) {
+}
 
 // src/utils/node/vitePlugins.ts
 var import_node_path3 = __toESM(require("path"));
@@ -562,6 +564,7 @@ function coverImgTransform() {
 
 // src/node.ts
 function getThemeConfig(cfg) {
+  checkConfig(cfg);
   const pagesData = getArticles(cfg);
   const extraVPConfig = {};
   const vitePlugins = getVitePlugins(cfg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.2.25",
+  "version": "0.2.27",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -42,6 +42,7 @@
     "gray-matter": "^4.0.3",
     "markdown-it-task-checkbox": "^1.0.6",
     "mermaid": "^10.2.4",
+    "oh-my-live2d": "^0.10.0",
     "swiper": "^11.0.5",
     "vitepress-markdown-timeline": "^1.2.1",
     "vitepress-plugin-mermaid": "2.0.13",

package/src/components/BlogApp.vue

@@ -2,6 +2,7 @@
 import Theme from 'vitepress/theme'
 import { useData } from 'vitepress'
 import { computed } from 'vue'
+import { useOml2d } from '../hooks/useOml2d'
 import { useBlogThemeMode } from '../composables/config/blog'
 import BlogHomeInfo from './BlogHomeInfo.vue'
 import BlogHomeBanner from './BlogHomeBanner.vue'
@@ -22,6 +23,9 @@ const { frontmatter } = useData()
 const layout = computed(() => frontmatter.value.layout)
 const isBlogTheme = useBlogThemeMode()
 const { Layout } = Theme
+
+// oh-my-live2d 扩展
+useOml2d()
 </script>
 
 <template>

package/src/composables/config/blog.ts

@@ -76,7 +76,6 @@ export function withConfigProvider(App: Component) {
     }
   })
 }
-
 export function useDocMetaInsertSelector() {
   const blogConfig = useConfig()
   const { frontmatter } = useData()
@@ -98,6 +97,12 @@ export function useConfig() {
 export function useBlogConfig() {
   return inject(configSymbol)!.value.blog!
 }
+/**
+ * 获取 oh-my-live2d的配置选项
+ */
+export function useOml2dOptions() {
+  return inject(configSymbol)!.value.blog?.oml2d
+}
 
 export function useBlogThemeMode() {
   return inject(configSymbol)!.value?.blog?.blog ?? true

package/src/composables/config/index.ts

@@ -3,6 +3,7 @@ import type { ElButton } from 'element-plus'
 import type { DefaultTheme } from 'vitepress'
 import type { RSSOptions } from 'vitepress-plugin-rss'
 import type { Mapping, Repo } from '@giscus/vue'
+import type { Options as Oml2dOptions } from 'oh-my-live2d'
 
 type RSSPluginOptions = RSSOptions
 
@@ -416,6 +417,12 @@ export namespace Theme {
      * @default true
      */
     backToTop?: boolean | BackToTop
+
+    /**
+     * oh-my-live2d 的 loadOml2d 方法的配置选项
+     * 详见 https://oml2d.com/options/Options.html
+     */
+    oml2d?: Oml2dOptions
   }
 
   export interface BackToTop {

package/src/hooks/useOml2d.ts

@@ -0,0 +1,77 @@
+import { onMounted } from 'vue'
+import type { Options } from 'oh-my-live2d'
+import { useOml2dOptions } from '../composables/config/blog'
+
+const defaultModelOptions: any = {
+  scale: 0.08,
+  position: [-30, 0],
+  stageStyle: {
+    width: 220
+  },
+  mobilePosition: [-10, 0],
+  mobileScale: 0.05,
+  mobileStageStyle: {
+    width: 150
+  },
+}
+const defaultOptions: Options = {
+  tips: {
+    copyTips: {
+      duration: 2000,
+      message: ['复制成功，感谢您的支持！'],
+    },
+    style: {
+      top: '-50px',
+      fontSize: '14px',
+      padding: '10px',
+      width: '200px'
+    },
+    mobileStyle: {
+      top: '-80px',
+      left: '80px',
+      fontSize: '14px',
+      padding: '4px 10px',
+      width: '110px'
+    }
+  }
+}
+export function useOml2d() {
+  const oml2dOptions = useOml2dOptions()
+  onMounted(async () => {
+    if (oml2dOptions) {
+      const { loadOml2d } = await import('oh-my-live2d')
+      loadOml2d({
+        ...defaultOptions,
+        ...oml2dOptions,
+        models: oml2dOptions?.models?.map(model => ({
+          ...defaultModelOptions,
+          ...model,
+          stageStyle: {
+            ...defaultModelOptions.stageStyle,
+            ...model.stageStyle
+          },
+          mobileStageStyle: {
+            ...defaultModelOptions.mobileStageStyle,
+            ...model.mobileStageStyle
+          }
+        })),
+        tips: {
+          ...defaultOptions.tips,
+          ...oml2dOptions.tips,
+          style: {
+            ...defaultOptions?.tips?.style,
+            ...oml2dOptions?.tips?.style
+          },
+          mobileStyle: {
+            ...defaultOptions?.tips?.mobileStyle,
+            ...oml2dOptions?.tips?.mobileStyle
+          },
+          copyTips: {
+            ...defaultOptions?.tips?.copyTips,
+            ...oml2dOptions?.tips?.copyTips
+          }
+        }
+      })
+    }
+  })
+}

package/src/node.ts

@@ -6,7 +6,7 @@ import {
   patchOptimizeDeps,
   registerMdPlugins,
 } from './utils/node/mdPlugins'
-import { getArticles, patchVPThemeConfig } from './utils/node/theme'
+import { checkConfig, getArticles, patchVPThemeConfig } from './utils/node/theme'
 import { getVitePlugins, registerVitePlugins } from './utils/node/vitePlugins'
 
 /**
@@ -14,6 +14,9 @@ import { getVitePlugins, registerVitePlugins } from './utils/node/vitePlugins'
  * @param cfg 主题配置
  */
 export function getThemeConfig(cfg?: Partial<Theme.BlogConfig>) {
+  // 配置校验
+  checkConfig(cfg)
+
   // 文章数据
   const pagesData = getArticles(cfg)
   const extraVPConfig: any = {}

package/src/utils/node/theme.ts

@@ -137,3 +137,7 @@ export function patchVPThemeConfig(
 
   return vpThemeConfig
 }
+
+export function checkConfig(cfg?: Partial<Theme.BlogConfig>) {
+  // TODO：保留
+}