Merge branch 'main' into 3.8.0

components/CommonScript.js

@@ -101,6 +101,10 @@ const CommonScript = () => {
               }}
       />
     </>)}
+
+    {/* 引入音乐播放 */}
+    {JSON.parse(BLOG.MUSIC_PLAYER) && <script async src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js" />}
+    {JSON.parse(BLOG.MUSIC_PLAYER) && JSON.parse(BLOG.MUSIC_PLAYER_METING) && <script async src="https://cdnjs.cloudflare.com/ajax/libs/meting/2.0.1/Meting.min.js" />}
   </>)
 }
 

components/Fireworks.js

@@ -4,6 +4,7 @@
  */
 import React from 'react'
 import anime from 'animejs'
+import BLOG from 'blog.config'
 
 export const Fireworks = () => {
   React.useEffect(() => {
@@ -17,9 +18,8 @@ export const Fireworks = () => {
    * @param config
    */
 function createFireworks(config) {
-  const defaultColors = ['102, 167, 221', '62, 131, 225', '33, 78, 194']
   const defaultConfig = {
-    colors: defaultColors,
+    colors: BLOG.FIREWORKSCOLOR,
     numberOfParticules: 20,
     orbitRadius: {
       min: 50,
@@ -44,7 +44,7 @@ function createFireworks(config) {
   let pointerY = 0
 
   // sky blue
-  const colors = config.colors || defaultColors
+  const colors = config.colors
 
   const canvasEl = document.querySelector('.fireworks')
   const ctx = canvasEl.getContext('2d')

components/MusicPlayer.js

@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic'
+
+const MusicPlayer = dynamic(
+  () => import('@/components/Player'),
+  { ssr: false }
+)
+export default MusicPlayer

components/Player.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import BLOG from '@/blog.config'
+
+const Player = () => {
+  const [player, setPlayer] = React.useState()
+  const ref = React.useRef(null)
+
+  const showLrc = JSON.parse(BLOG.MUSIC_PLAYER_SHOW_LRC)
+  const playerVisible = JSON.parse(BLOG.MUSIC_PLAYER_VISIBLE)
+  const autoPlay = JSON.parse(BLOG.MUSIC_PLAYER_AUTO_PLAY)
+
+  const meting = JSON.parse(BLOG.MUSIC_PLAYER_METING)
+
+  React.useEffect(() => {
+    if (!meting && window.APlayer) {
+      setPlayer(new window.APlayer({
+        container: ref.current,
+        fixed: true,
+        showlrc: showLrc,
+        autoplay: autoPlay,
+        order: BLOG.MUSIC_PLAYER_ORDER,
+        audio: BLOG.MUSIC_PLAYER_AUDIO_LIST
+      }))
+    }
+    return () => {
+      setPlayer(undefined)
+    }
+  }, [])
+
+  return (
+    <div className={playerVisible ? 'visible' : 'invisible'}>
+      <link
+        rel="stylesheet"
+        type="text/css"
+        href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css"
+      />
+      {meting
+        ? <meting-js
+            fixed
+            type="playlist"
+            autoplay={autoPlay}
+            order={BLOG.MUSIC_PLAYER_ORDER}
+            server={BLOG.MUSIC_PLAYER_METING_SERVER}
+            id={BLOG.MUSIC_PLAYER_METING_ID}
+          />
+        : <div ref={ref} data-player={player} />
+      }
+    </div>
+  )
+}
+
+export default Player

components/SideBarDrawer.js

@@ -29,22 +29,22 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
     const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
 
     if (showStatus) {
-      sideBarDrawer.classList.replace('-ml-56', 'ml-0')
+      sideBarDrawer.classList.replace('-ml-60', 'ml-0')
       sideBarDrawerBackground.classList.replace('hidden', 'block')
     } else {
-      sideBarDrawer.classList.replace('ml-0', '-ml-56')
+      sideBarDrawer.classList.replace('ml-0', '-ml-60')
       sideBarDrawerBackground.classList.replace('block', 'hidden')
     }
   }
 
-  return <div id='sidebar-wrapper' className={' ' + className }>
-    <div id='sidebar-drawer' className={`${isOpen ? 'ml-0 w-56' : '-ml-56'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
+  return <div id='sidebar-wrapper' className={' block md:hidden ' + className }>
+    <div id='sidebar-drawer' className={`${isOpen ? 'ml-0 w-56' : '-ml-60 max-w-side'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
       {children}
     </div>
 
     {/* 背景蒙版 */}
     <div id='sidebar-drawer-background' onClick={() => { switchSideDrawerVisible(false) }}
-         className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}/>
+      className={`${isOpen ? 'block' : 'hidden'} animate__animated animate__fadeIn fixed top-0 duration-300 left-0 z-20 w-full h-full bg-black/70`}/>
   </div>
 }
 export default SideBarDrawer

components/ThemeSwitch.js

@@ -15,7 +15,7 @@ export function ThemeSwitch() {
 
   return (<>
         <Draggable>
-            <div id="draggableBox" style={{ left: '10px', top: '90vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
+            <div id="draggableBox" className="fixed left-1 bottom-20 text-white bg-black z-50 rounded-lg shadow-card">
                 <div className="p-2 flex items-center">
                     <i className='fas fa-arrows cursor-move px-2' />
                     {/* <div className='uppercase font-sans whitespace-nowrap cursor-pointer ' onClick={switchTheme}> {theme}</div> */}

components/WalineComponent.js

@@ -28,7 +28,12 @@ const WalineComponent = (props) => {
         el: containerRef.current,
         serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
         lang: BLOG.lang,
-        reaction: true
+        reaction: true,
+        emoji: [
+          '//npm.elemecdn.com/@waline/emojis@1.1.0/tieba',
+          '//npm.elemecdn.com/@waline/emojis@1.1.0/weibo',
+          '//npm.elemecdn.com/@waline/emojis@1.1.0/bilibili'
+        ]
       })
     }