Merge pull request #90 from tangly1024/preview

看板宠物

blog.config.js

@@ -39,6 +39,10 @@ const BLOG = {
   CONTACT_GITHUB: 'https://github.com/tangly1024',
   CONTACT_TELEGRAM: '',
 
+  // 悬浮挂件
+  WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || false, // 是否显示宠物挂件
+  WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
+
   // 评论互动 可同时开启 CUSDIS UTTERRANCES GITALK
   COMMENT_CUSDIS_APP_ID: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID || '', // data-app-id 36位 see https://cusdis.com/
   COMMENT_CUSDIS_HOST: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_HOST || 'https://cusdis.com', // data-host, change this if you're using self-hosted version

components/Live2D.js

@@ -1,21 +1,27 @@
 /* eslint-disable no-undef */
-import CONFIG_NEXT from '../config_next'
+import BLOG from '@/blog.config'
 import { loadExternalResource } from '@/lib/utils'
+import { useEffect, useState } from 'react'
 
-let hasLoad = false
 export default function Live2D () {
-  if (!CONFIG_NEXT.WIDGET_PET) {
+  if (!BLOG.WIDGET_PET) {
     return <></>
   }
+  const [init, setInit] = useState()
 
-  if (typeof window !== 'undefined' && !hasLoad) {
-    initLive2D()
-    hasLoad = true
-  }
+  // if (typeof window !== 'undefined' && !hasLoad) {
+  //   initLive2D()
+  //   hasLoad = true
+  // }
 
-  return <div className='fixed right-0 bottom-0 hidden md:block lg:mr-24 2xl:mr-40 z-20'>
-    <canvas id="live2d" className='animate__slideInLeft animate__animated' width="280" height="250"/>
-  </div>
+  useEffect(() => {
+    if (!init) {
+      initLive2D()
+      setInit(true)
+    }
+  }, [init])
+
+  return <canvas id="live2d" className='animate__slideInUp animate__animated' width="280" height="250"/>
 }
 
 function initLive2D () {
@@ -26,7 +32,7 @@ function initLive2D () {
       loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js')
     ]).then(() => {
       // https://github.com/xiazeyu/live2d-widget-models
-      loadlive2d('live2d', CONFIG_NEXT.WIDGET_PET_LINK)
+      loadlive2d('live2d', BLOG.WIDGET_PET_LINK)
     })
   }
 }

pages/_app.js

@@ -34,6 +34,7 @@ const MyApp = ({ Component, pageProps }) => {
         {/* FontawesomeCDN */}
         <link href={BLOG.FONT_AWESOME_PATH} rel="stylesheet" referrerPolicy="no-referrer" />
         <Component {...pageProps} />
+
     </GlobalContextProvider>
   )
 }

themes/fukasawa/LayoutBase.js

@@ -1,6 +1,7 @@
 import CommonHead from '@/components/CommonHead'
 import TopNav from './components/TopNav'
 import AsideLeft from './components/AsideLeft'
+import Live2D from '@/components/Live2D'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -22,11 +23,12 @@ const LayoutBase = (props) => {
     headerSlot,
     meta
   } = props
+  const leftAreaSlot = <Live2D/>
   return (<>
     <CommonHead meta={meta} />
     <TopNav {...props}/>
     <div className='flex'>
-      <AsideLeft {...props}/>
+      <AsideLeft {...props} slot={leftAreaSlot}/>
       <main id='wrapper' className='flex w-full py-8 justify-center'>
         <div className='2xl:max-w-6xl md:max-w-4xl w-full'>
           <div> {headerSlot} </div>

themes/fukasawa/components/AsideLeft.js

@@ -8,7 +8,7 @@ import SiteInfo from './SiteInfo'
 import Catalog from './Catalog'
 
 function AsideLeft (props) {
-  const { tags, currentTag, categories, currentCategory, post } = props
+  const { tags, currentTag, categories, currentCategory, post, slot } = props
   return <div className='w-72 bg-white dark:bg-gray-800 min-h-screen px-10 py-14 hidden lg:block'>
     <Logo />
 
@@ -44,8 +44,10 @@ function AsideLeft (props) {
 
     <section className='sticky top-0 pt-12'>
       <Catalog toc={post?.toc}/>
+      <div className='flex justify-center'>
+        {slot}
+      </div>
     </section>
-
   </div>
 }
 

themes/hexo/LayoutBase.js

@@ -7,6 +7,7 @@ import SideRight from './components/SideRight'
 import TopNav from './components/TopNav'
 import smoothscroll from 'smoothscroll-polyfill'
 import FloatDarkModeButton from './components/FloatDarkModeButton'
+import Live2D from '@/components/Live2D'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -18,6 +19,7 @@ const LayoutBase = (props) => {
   const { children, headerSlot, floatSlot, meta } = props
   const [show, switchShow] = useState(false)
   // const [percent, changePercent] = useState(0) // 页面阅读百分比
+  const rightAreaSlot = <Live2D/>
 
   const scrollListener = () => {
     const targetRef = document.getElementById('wrapper')
@@ -49,7 +51,7 @@ const LayoutBase = (props) => {
 
       <div id='container-inner' className='pt-14 w-full mx-auto lg:flex justify-between md:space-x-4 max-w-7xl'>
         <div className='flex-grow w-full'>{children}</div>
-        <SideRight {...props}/>
+        <SideRight {...props} slot={rightAreaSlot}/>
       </div>
 
     </main>

themes/hexo/components/SideRight.js

@@ -8,14 +8,8 @@ import { AnalyticsCard } from './AnalyticsCard'
 
 export default function SideRight (props) {
   const {
-    post,
-    currentCategory,
-    categories,
-    latestPosts,
-    tags,
-    currentTag,
-    showCategory,
-    showTag
+    post, currentCategory, categories, latestPosts, tags,
+    currentTag, showCategory, showTag, slot
   } = props
 
   return (
@@ -43,11 +37,13 @@ export default function SideRight (props) {
         <LatestPostsGroup posts={latestPosts} />
       </Card>}
 
-      {post && post.toc && (
-        <Card className='sticky top-20'>
+      <div className='sticky top-20'>
+       {post && post.toc && <Card>
           <Catalog toc={post.toc} />
-        </Card>
-      )}
+        </Card>}
+        {slot}
+      </div>
+
     </div>
   )
 }

themes/medium/LayoutBase.js

@@ -10,6 +10,7 @@ import SearchInput from './components/SearchInput'
 import BottomMenuBar from './components/BottomMenuBar'
 import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
+import Live2D from '@/components/Live2D'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -40,7 +41,8 @@ const LayoutBase = props => {
 
         {/* 桌面端右侧 */}
         <div className='hidden xl:block border-l dark:border-gray-500 w-96'>
-          <Tabs className='py-14 px-6 sticky top-0'>
+         <div className='py-14 px-6 sticky top-0'>
+          <Tabs>
             {slotRight}
             <div key={locale.NAV.ABOUT}>
               {router.pathname !== '/search' && <SearchInput className='mt-6  mb-12' />}
@@ -48,9 +50,15 @@ const LayoutBase = props => {
               {CONFIG_MEDIUM.WIDGET_REVOLVER_MAPS === 'true' && <RevolverMaps />}
             </div>
           </Tabs>
+           <Live2D/>
+         </div>
         </div>
       </main>
 
+      <div className='fixed right-0 bottom-0 hidden md:block lg:mr-6 z-20'>
+
+      </div>
+
       {/* 移动端底部 */}
       <Footer />
       <BottomMenuBar className='block md:hidden' />

themes/next/LayoutArchive.js

@@ -3,7 +3,6 @@ import BLOG from '@/blog.config'
 import React, { useEffect } from 'react'
 import LayoutBase from './LayoutBase'
 import BlogPostArchive from './components/BlogPostArchive'
-import Live2D from './components/Live2D'
 
 export const LayoutArchive = (props) => {
   const { posts } = props
@@ -60,7 +59,6 @@ export const LayoutArchive = (props) => {
           />
         ))}
       </div>
-      <Live2D />
     </LayoutBase>
   )
 }

themes/next/LayoutBase.js

@@ -12,6 +12,7 @@ import PropTypes from 'prop-types'
 import React, { useEffect, useRef, useState } from 'react'
 import smoothscroll from 'smoothscroll-polyfill'
 import CONFIG_NEXT from './config_next'
+import Live2D from '@/components/Live2D'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -22,6 +23,7 @@ const LayoutBase = (props) => {
   const { children, headerSlot, meta, sideBarSlot, floatSlot, rightAreaSlot } = props
   const { onLoading } = useGlobal()
   const targetRef = useRef(null)
+  const leftAreaSlot = <Live2D/>
 
   const [show, switchShow] = useState(false)
   const [percent, changePercent] = useState(0) // 页面阅读百分比
@@ -56,7 +58,7 @@ const LayoutBase = (props) => {
       <div className='h-0.5 w-full bg-gray-700 dark:bg-gray-600 hidden lg:block'/>
 
       <main id='wrapper' className='flex justify-center flex-1 pb-12'>
-          <SideAreaLeft targetRef={targetRef} {...props}/>
+          <SideAreaLeft slot={leftAreaSlot} targetRef={targetRef} {...props}/>
           <section id='center' className={`${CONFIG_NEXT.NAV_TYPE !== 'normal' ? 'mt-40' : ''} lg:max-w-3xl xl:max-w-4xl flex-grow md:mt-0 min-h-screen w-full`} ref={targetRef}>
             {onLoading ? <LoadingCover/> : <> {children}</> }
           </section>

themes/next/LayoutSlug.js

@@ -6,7 +6,6 @@ import Card from './components/Card'
 import LatestPostsGroup from './components/LatestPostsGroup'
 import ArticleDetail from './components/ArticleDetail'
 import TocDrawer from './components/TocDrawer'
-import Live2D from './components/Live2D'
 import { useRef } from 'react'
 import CONFIG_NEXT from './config_next'
 
@@ -53,9 +52,6 @@ export const LayoutSlug = (props) => {
         <TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
       </div>
 
-      {/* 宠物 */}
-      <Live2D />
-
     </LayoutBase>
   )
 }

themes/next/components/SideAreaLeft.js

@@ -19,7 +19,7 @@ import CONFIG_NEXT from '../config_next'
  * @constructor
  */
 const SideAreaLeft = (props) => {
-  const { post, postCount } = props
+  const { post, slot, postCount } = props
   const { locale } = useGlobal()
   const showToc = post && post.toc && post.toc.length > 1
   return <aside id='left' className='hidden lg:block flex-col w-60 mr-4'>
@@ -37,7 +37,8 @@ const SideAreaLeft = (props) => {
       </section>
     </section>
 
-    <Card className='sticky top-4 hidden lg:block'>
+    <div className='sticky top-4 hidden lg:block'>
+    <Card>
       <Tabs>
           {showToc && (
             <div key={locale.COMMON.TABLE_OF_CONTENTS} className='dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800 duration-200'>
@@ -61,6 +62,11 @@ const SideAreaLeft = (props) => {
       </Tabs>
     </Card>
 
+   {slot && <div className='flex justify-center'>
+      {slot}
+    </div>}
+  </div>
+
  </aside>
 }
 export default SideAreaLeft

themes/next/config_next.js

@@ -26,9 +26,6 @@ const CONFIG_NEXT = {
   MENU_ABOUT: false, // 显示关于
   MENU_SEARCH: true, // 显示搜索
 
-  // 悬浮挂件
-  WIDGET_PET: false, // 是否显示宠物挂件
-  WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
   WIDGET_TO_TOP: true, // 是否显示回顶
   WIDGET_TO_BOTTOM: false, // 显示回底
   WIDGET_DARK_MODE: false, // 显示日间/夜间模式切换