diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js index f49c43f7..b3c2604c 100644 --- a/components/ArticleDetail.js +++ b/components/ArticleDetail.js @@ -22,6 +22,7 @@ import 'prismjs/components/prism-typescript' import { useRef } from 'react' import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x' import ArticleCopyright from './ArticleCopyright' +import Live2D from './Live2D' import WordCount from './WordCount' /** @@ -41,6 +42,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
+
{post.type && !post.type.includes('Page') && post?.page_cover && (
@@ -164,6 +166,11 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n { drawerRight.current.handleSwitchVisible() }} />
+ + {/* 宠物 */} +
+ +
) } diff --git a/components/Live2D.js b/components/Live2D.js index 559e8efe..4c61cc31 100644 --- a/components/Live2D.js +++ b/components/Live2D.js @@ -1,4 +1,4 @@ -import Head from 'next/head' +/* eslint-disable no-undef */ import { useEffect } from 'react' export default function Live2D () { @@ -7,16 +7,12 @@ export default function Live2D () { initLive2D() } }) - return <> - - + return
+ +
} function initLive2D () { - // 注意：live2d_path 参数应使用绝对路径 - const live2dPath = 'https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/' - // const live2d_path = "/live2d-widget/"; - // 封装异步加载资源的方法 function loadExternalResource (url, type) { return new Promise((resolve, reject) => { @@ -41,19 +37,11 @@ function initLive2D () { // 加载 waifu.css live2d.min.js waifu-tips.js if (screen.width >= 768) { Promise.all([ - loadExternalResource(live2dPath + 'waifu.css', 'css'), - loadExternalResource(live2dPath + 'live2d.min.js', 'js'), - loadExternalResource(live2dPath + 'waifu-tips.js', 'js') + // loadExternalResource('https://cdn.zhangxinxu.com/sp/demo/live2d/live2d/js/live2d.js', 'js') + loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js') ]).then(() => { - // eslint-disable-next-line no-undef - initWidget({ - waifuPath: live2dPath + 'waifu-tips.json', - // apiPath: "https://live2d.fghrsh.net/api/", - cdnPath: 'https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/' - }) + // https://github.com/xiazeyu/live2d-widget-models + loadlive2d('live2d', 'https://raw.githubusercontent.com/xiazeyu/live2d-widget-models/master/packages/live2d-widget-model-wanko/assets/wanko.model.json') }) } - // initWidget 第一个参数为 waifu-tips.json 的路径，第二个参数为 API 地址 - // API 后端可自行搭建，参考 https://github.com/fghrsh/live2d_api - // 初始化看板娘会自动加载指定目录下的 waifu-tips.json } diff --git a/components/Live2DWaifu.js b/components/Live2DWaifu.js new file mode 100644 index 00000000..559e8efe --- /dev/null +++ b/components/Live2DWaifu.js @@ -0,0 +1,59 @@ +import Head from 'next/head' +import { useEffect } from 'react' + +export default function Live2D () { + useEffect(() => { + if (window) { + initLive2D() + } + }) + return <> + + +} + +function initLive2D () { + // 注意：live2d_path 参数应使用绝对路径 + const live2dPath = 'https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/' + // const live2d_path = "/live2d-widget/"; + + // 封装异步加载资源的方法 + function loadExternalResource (url, type) { + return new Promise((resolve, reject) => { + let tag + + if (type === 'css') { + tag = document.createElement('link') + tag.rel = 'stylesheet' + tag.href = url + } else if (type === 'js') { + tag = document.createElement('script') + tag.src = url + } + if (tag) { + tag.onload = () => resolve(url) + tag.onerror = () => reject(url) + document.head.appendChild(tag) + } + }) + } + + // 加载 waifu.css live2d.min.js waifu-tips.js + if (screen.width >= 768) { + Promise.all([ + loadExternalResource(live2dPath + 'waifu.css', 'css'), + loadExternalResource(live2dPath + 'live2d.min.js', 'js'), + loadExternalResource(live2dPath + 'waifu-tips.js', 'js') + ]).then(() => { + // eslint-disable-next-line no-undef + initWidget({ + waifuPath: live2dPath + 'waifu-tips.json', + // apiPath: "https://live2d.fghrsh.net/api/", + cdnPath: 'https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/' + }) + }) + } + // initWidget 第一个参数为 waifu-tips.json 的路径，第二个参数为 API 地址 + // API 后端可自行搭建，参考 https://github.com/fghrsh/live2d_api + // 初始化看板娘会自动加载指定目录下的 waifu-tips.json +}