d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 15:09:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature:

Browse Source 
手动引入live2D
This commit is contained in:
tangly1024
2021-12-28 14:47:00 +08:00
parent 6cfcd93af1
commit e04890ed71
3 changed files with 74 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/ArticleDetail.js
View File

@@ -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
<article itemScope itemType="https://schema.org/Movie"
className="shadow hover:shadow-2xl duration-300 animate__fadeIn animate__animated subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 xl:px-32 dark:border-gray-700 bg-white dark:bg-gray-800"
>
<header>
{post.type && !post.type.includes('Page') && post?.page_cover && (
<div className="w-full h-60 relative lg:h-96 transform duration-200 md:flex-shrink-0 overflow-hidden">
@@ -164,6 +166,11 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
<TocDrawerButton onClick={() => { drawerRight.current.handleSwitchVisible() }} />
<TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
</div>
{/* 宠物 */}
<div className='fixed left-0 bottom-0'>
<Live2D/>
</div>
</>)
}

28
components/Live2D.js
View File

@@ -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 <>
<Head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/></Head>
</>
return <div className='animate__fadeIn animate__bounceInUp'>
<canvas id="live2d" width="280" height="250"></canvas>
</div>
}
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
}

59
components/Live2DWaifu.js Normal file
View File

@@ -0,0 +1,59 @@
import Head from 'next/head'
import { useEffect } from 'react'
export default function Live2D () {
useEffect(() => {
if (window) {
initLive2D()
}
})
return <>
<Head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/></Head>
</>
}
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
}