Merge pull request #719 from Vixcity/dev

漂浮线段特效、彩带特效

blog.config.js

@@ -70,6 +70,14 @@ const BLOG = {
   // 樱花飘落特效
   SAKURA: process.env.NEXT_PUBLIC_SAKURA || false, // 开关
 
+  // 漂浮线段特效
+  NEST: process.env.NEXT_PUBLIC_NEST || false, // 开关
+
+  // 动态彩带特效
+  FLUTTERINGRIBBON: process.env.NEXT_PUBLIC_FLUTTERINGRIBBON || false, // 开关
+  // 静态彩带特效
+  RIBBON: process.env.NEXT_PUBLIC_RIBBON || false, // 开关
+
   // 星空雨特效 黑夜模式才会生效
   STARRY_SKY: process.env.NEXT_PUBLIC_STARRY_SKY || false, // 开关
 

components/FlutteringRibbon.js

@@ -0,0 +1,307 @@
+/* eslint-disable */
+import React from 'react'
+
+export const FlutteringRibbon = () => {
+  React.useEffect(() => {
+    createFlutteringRibbon()
+  }, [])
+}
+
+/**
+ * 创建连接点
+ * @param config
+ */
+function createFlutteringRibbon() {
+  'object' == typeof window &&
+    (window.Ribbons = (function () {
+      const t = window,
+        i = document.body,
+        n = document.documentElement
+      var o = function () {
+        if (1 === arguments.length) {
+          if (Array.isArray(arguments[0])) {
+            const t = Math.round(o(0, arguments[0].length - 1))
+            return arguments[0][t]
+          }
+          return o(0, arguments[0])
+        }
+        return 2 === arguments.length
+          ? Math.random() * (arguments[1] - arguments[0]) + arguments[0]
+          : 0
+      }
+      const s = function (o) {
+          const s = Math.max(
+              0,
+              t.innerWidth || n.clientWidth || i.clientWidth || 0
+            ),
+            e = Math.max(
+              0,
+              t.innerHeight || n.clientHeight || i.clientHeight || 0
+            )
+          return {
+            width: s,
+            height: e,
+            ratio: s / e,
+            centerx: s / 2,
+            centery: e / 2,
+            scrollx:
+              Math.max(0, t.pageXOffset || n.scrollLeft || i.scrollLeft || 0) -
+              (n.clientLeft || 0),
+            scrolly:
+              Math.max(0, t.pageYOffset || n.scrollTop || i.scrollTop || 0) -
+              (n.clientTop || 0)
+          }
+        },
+        e = function (t, i) {
+          ;(this.x = 0), (this.y = 0), this.set(t, i)
+        }
+      e.prototype = {
+        constructor: e,
+        set: function (t, i) {
+          ;(this.x = t || 0), (this.y = i || 0)
+        },
+        copy: function (t) {
+          return (this.x = t.x || 0), (this.y = t.y || 0), this
+        },
+        multiply: function (t, i) {
+          return (this.x *= t || 1), (this.y *= i || 1), this
+        },
+        divide: function (t, i) {
+          return (this.x /= t || 1), (this.y /= i || 1), this
+        },
+        add: function (t, i) {
+          return (this.x += t || 0), (this.y += i || 0), this
+        },
+        subtract: function (t, i) {
+          return (this.x -= t || 0), (this.y -= i || 0), this
+        },
+        clampX: function (t, i) {
+          return (this.x = Math.max(t, Math.min(this.x, i))), this
+        },
+        clampY: function (t, i) {
+          return (this.y = Math.max(t, Math.min(this.y, i))), this
+        },
+        flipX: function () {
+          return (this.x *= -1), this
+        },
+        flipY: function () {
+          return (this.y *= -1), this
+        }
+      }
+      const h = function (t) {
+        ;(this._canvas = null),
+          (this._context = null),
+          (this._sto = null),
+          (this._width = 0),
+          (this._height = 0),
+          (this._scroll = 0),
+          (this._ribbons = []),
+          (this._options = {
+            colorSaturation: '80%',
+            colorBrightness: '60%',
+            colorAlpha: 0.65,
+            colorCycleSpeed: 6,
+            verticalPosition: 'center',
+            horizontalSpeed: 150,
+            ribbonCount: 5,
+            strokeSize: 5,
+            parallaxAmount: -0.5,
+            animateSections: !0
+          }),
+          (this._onDraw = this._onDraw.bind(this)),
+          (this._onResize = this._onResize.bind(this)),
+          (this._onScroll = this._onScroll.bind(this)),
+          this.setOptions(t),
+          this.init()
+      }
+      return (
+        (h.prototype = {
+          constructor: h,
+          setOptions: function (t) {
+            if ('object' == typeof t)
+              for (const i in t)
+                t.hasOwnProperty(i) && (this._options[i] = t[i])
+          },
+          init: function () {
+            try {
+              ;(this._canvas = document.createElement('canvas')),
+                (this._canvas.style.display = 'block'),
+                (this._canvas.style.position = 'fixed'),
+                (this._canvas.style.margin = '0'),
+                (this._canvas.style.padding = '0'),
+                (this._canvas.style.border = '0'),
+                (this._canvas.style.outline = '0'),
+                (this._canvas.style.left = '0'),
+                (this._canvas.style.top = '0'),
+                (this._canvas.style.width = '100%'),
+                (this._canvas.style.height = '100%'),
+                (this._canvas.style['z-index'] = '0'),
+                this._onResize(),
+                (this._context = this._canvas.getContext('2d')),
+                this._context.clearRect(0, 0, this._width, this._height),
+                (this._context.globalAlpha = this._options.colorAlpha),
+                window.addEventListener('resize', this._onResize),
+                window.addEventListener('scroll', this._onScroll),
+                document.body.appendChild(this._canvas)
+            } catch (t) {
+              return void console.warn('Canvas Context Error: ' + t.toString())
+            }
+            this._onDraw()
+          },
+          addRibbon: function () {
+            const t = Math.round(o(1, 9)) > 5 ? 'right' : 'left'
+            let i = 1e3
+            const n = 200,
+              s = 0 - n,
+              h = this._width + n
+            let a = 0,
+              r = 0
+            const l = 'right' === t ? s : h
+            let c = Math.round(o(0, this._height))
+            ;/^(top|min)$/i.test(this._options.verticalPosition)
+              ? (c = 0 + n)
+              : /^(middle|center)$/i.test(this._options.verticalPosition)
+              ? (c = this._height / 2)
+              : /^(bottom|max)$/i.test(this._options.verticalPosition) &&
+                (c = this._height - n)
+            const p = [],
+              _ = new e(l, c),
+              d = new e(l, c)
+            let u = null,
+              b = Math.round(o(0, 360)),
+              f = 0
+            for (; !(i <= 0); ) {
+              if (
+                (i--,
+                (a = Math.round(
+                  (1 * Math.random() - 0.2) * this._options.horizontalSpeed
+                )),
+                (r = Math.round(
+                  (1 * Math.random() - 0.5) * (0.25 * this._height)
+                )),
+                (u = new e()),
+                u.copy(d),
+                'right' === t)
+              ) {
+                if ((u.add(a, r), d.x >= h)) break
+              } else if ('left' === t && (u.subtract(a, r), d.x <= s)) break
+              p.push({
+                point1: new e(_.x, _.y),
+                point2: new e(d.x, d.y),
+                point3: u,
+                color: b,
+                delay: f,
+                dir: t,
+                alpha: 0,
+                phase: 0
+              }),
+                _.copy(d),
+                d.copy(u),
+                (f += 4),
+                (b += this._options.colorCycleSpeed)
+            }
+            this._ribbons.push(p)
+          },
+          _drawRibbonSection: function (t) {
+            if (t) {
+              if (t.phase >= 1 && t.alpha <= 0) return !0
+              if (t.delay <= 0) {
+                if (
+                  ((t.phase += 0.02),
+                  (t.alpha = 1 * Math.sin(t.phase)),
+                  (t.alpha = t.alpha <= 0 ? 0 : t.alpha),
+                  (t.alpha = t.alpha >= 1 ? 1 : t.alpha),
+                  this._options.animateSections)
+                ) {
+                  const i = 0.1 * Math.sin(1 + (t.phase * Math.PI) / 2)
+                  'right' === t.dir
+                    ? (t.point1.add(i, 0),
+                      t.point2.add(i, 0),
+                      t.point3.add(i, 0))
+                    : (t.point1.subtract(i, 0),
+                      t.point2.subtract(i, 0),
+                      t.point3.subtract(i, 0)),
+                    t.point1.add(0, i),
+                    t.point2.add(0, i),
+                    t.point3.add(0, i)
+                }
+              } else t.delay -= 0.5
+              const i = this._options.colorSaturation,
+                n = this._options.colorBrightness,
+                o =
+                  'hsla(' +
+                  t.color +
+                  ', ' +
+                  i +
+                  ', ' +
+                  n +
+                  ', ' +
+                  t.alpha +
+                  ' )'
+              this._context.save(),
+                0 !== this._options.parallaxAmount &&
+                  this._context.translate(
+                    0,
+                    this._scroll * this._options.parallaxAmount
+                  ),
+                this._context.beginPath(),
+                this._context.moveTo(t.point1.x, t.point1.y),
+                this._context.lineTo(t.point2.x, t.point2.y),
+                this._context.lineTo(t.point3.x, t.point3.y),
+                (this._context.fillStyle = o),
+                this._context.fill(),
+                this._options.strokeSize > 0 &&
+                  ((this._context.lineWidth = this._options.strokeSize),
+                  (this._context.strokeStyle = o),
+                  (this._context.lineCap = 'round'),
+                  this._context.stroke()),
+                this._context.restore()
+            }
+            return !1
+          },
+          _onDraw: function () {
+            for (let t = 0, i = this._ribbons.length; t < i; ++t)
+              this._ribbons[t] || this._ribbons.splice(t, 1)
+            this._context.clearRect(0, 0, this._width, this._height)
+            for (let t = 0; t < this._ribbons.length; ++t) {
+              const i = this._ribbons[t],
+                n = i.length
+              let o = 0
+              for (let t = 0; t < n; ++t) this._drawRibbonSection(i[t]) && o++
+              o >= n && (this._ribbons[t] = null)
+            }
+            this._ribbons.length < this._options.ribbonCount &&
+              this.addRibbon(),
+              requestAnimationFrame(this._onDraw)
+          },
+          _onResize: function (t) {
+            const i = s(t)
+            ;(this._width = i.width),
+              (this._height = i.height),
+              this._canvas &&
+                ((this._canvas.width = this._width),
+                (this._canvas.height = this._height),
+                this._context &&
+                  (this._context.globalAlpha = this._options.colorAlpha))
+          },
+          _onScroll: function (t) {
+            const i = s(t)
+            this._scroll = i.scrolly
+          }
+        }),
+        h
+      )
+    })())
+  new Ribbons({
+    colorSaturation: '60%',
+    colorBrightness: '50%',
+    colorAlpha: 0.5,
+    colorCycleSpeed: 5,
+    verticalPosition: 'random',
+    horizontalSpeed: 200,
+    ribbonCount: 3,
+    strokeSize: 0,
+    parallaxAmount: -0.2,
+    animateSections: !0
+  })
+}

components/Nest.js

@@ -0,0 +1,113 @@
+/* eslint-disable */
+import React from 'react'
+
+export const Nest = () => {
+  React.useEffect(() => {
+    createNest()
+  }, [])
+}
+
+/**
+ * 创建连接点
+ * @param config
+ */
+function createNest() {
+  const e = document.getElementById('__next')
+  if(!e) return
+  function n(e, n, t) {
+    return e.getAttribute(n) || t
+  }
+  function t() {
+    ;(u = i.width =
+      window.innerWidth ||
+      document.documentElement.clientWidth ||
+      document.body.clientWidth),
+      (d = i.height =
+        window.innerHeight ||
+        document.documentElement.clientHeight ||
+        document.body.clientHeight)
+  }
+  function o() {
+    c.clearRect(0, 0, u, d)
+    const e = [s].concat(x)
+    let n, t, i, l, r, w
+    x.forEach(function (o) {
+      for (
+        o.x += o.xa,
+          o.y += o.ya,
+          o.xa *= o.x > u || o.x < 0 ? -1 : 1,
+          o.ya *= o.y > d || o.y < 0 ? -1 : 1,
+          c.fillRect(o.x - 0.5, o.y - 0.5, 1, 1),
+          t = 0;
+        t < e.length;
+        t++
+      )
+        (n = e[t]),
+          o !== n &&
+            null !== n.x &&
+            null !== n.y &&
+            ((l = o.x - n.x),
+            (r = o.y - n.y),
+            (w = l * l + r * r),
+            w < n.max &&
+              (n === s &&
+                w >= n.max / 2 &&
+                ((o.x -= 0.03 * l), (o.y -= 0.03 * r)),
+              (i = (n.max - w) / n.max),
+              c.beginPath(),
+              (c.lineWidth = i / 2),
+              (c.strokeStyle = 'rgba(' + a.c + ',' + (i + 0.2) + ')'),
+              c.moveTo(o.x, o.y),
+              c.lineTo(n.x, n.y),
+              c.stroke()))
+      e.splice(e.indexOf(o), 1)
+    }),
+      m(o)
+  }
+  var i = document.createElement('canvas')
+  i.id = 'canvasNestCreated'
+  var a = (function () {
+      const t = e
+      return {
+        z: n(t, 'zIndex', 0),
+        o: n(t, 'opacity', 0.7),
+        c: n(t, 'color', '0,0,0'),
+        n: n(t, 'count', 99)
+      }
+    })(),
+    c = i.getContext('2d')
+  let u, d
+  var m =
+    window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.oRequestAnimationFrame ||
+    window.msRequestAnimationFrame ||
+    function (e) {
+      window.setTimeout(e, 1e3 / 45)
+    }
+  const l = Math.random
+  var r,
+    s = { x: null, y: null, max: 2e4 }
+  ;(i.style.cssText =
+    'position:fixed;top:0;left:0;z-index:' + a.z + ';opacity:' + a.o),
+    (r = 'body'), e.appendChild(i),
+    t(),
+    (window.onresize = t),
+    (window.onmousemove = function (e) {
+      ;(e = e || window.event), (s.x = e.clientX), (s.y = e.clientY)
+    }),
+    (window.onmouseout = function () {
+      ;(s.x = null), (s.y = null)
+    })
+  for (var x = [], w = 0; a.n > w; w++) {
+    const e = l() * u,
+      n = l() * d,
+      t = 2 * l() - 1,
+      o = 2 * l() - 1
+    x.push({ x: e, y: n, xa: t, ya: o, max: 6e3 })
+  }
+  setTimeout(function () {
+    o()
+  }, 100)
+}

components/Ribbon.js

@@ -0,0 +1,85 @@
+/* eslint-disable */
+import React from 'react'
+
+export const Ribbon = () => {
+  React.useEffect(() => {
+    createRibbon()
+  }, [])
+}
+
+/**
+ * 创建连接点
+ * @param config
+ */
+function createRibbon() {
+  !(function () {
+    const t = document.getElementById('__next')
+    const e = {
+      z: n(t, 'zIndex', 0),
+      a: n(t, 'alpha', 0.6),
+      s: n(t, 'size', 90),
+      c: t.getAttribute('data-click')
+    }
+    function n(t, e, n) {
+      return Number(t.getAttribute(e)) || n
+    }
+    const i = document.createElement('canvas'),
+      o = i.getContext('2d'),
+      c = window.devicePixelRatio || 1,
+      a = window.innerWidth,
+      l = window.innerHeight,
+      d = e.s
+    let r, s
+    const u = Math
+    let h = 0
+    const g = 2 * u.PI,
+      f = u.cos,
+      m = u.random
+    function x() {
+      for (
+        o.clearRect(0, 0, a, l),
+          r = [
+            { x: 0, y: 0.7 * l + d },
+            { x: 0, y: 0.7 * l - d }
+          ];
+        r[1].x < a + d;
+
+      )
+        y(r[0], r[1])
+    }
+    function y(t, e) {
+      o.beginPath(), o.moveTo(t.x, t.y), o.lineTo(e.x, e.y)
+      const n = e.x + (2 * m() - 0.25) * d,
+        i = b(e.y)
+      o.lineTo(n, i),
+        o.closePath(),
+        (h -= g / -50),
+        (o.fillStyle =
+          '#' +
+          (
+            ((127 * f(h) + 128) << 16) |
+            ((127 * f(h + g / 3) + 128) << 8) |
+            (127 * f(h + (g / 3) * 2) + 128)
+          ).toString(16)),
+        o.fill(),
+        (r[0] = r[1]),
+        (r[1] = { x: n, y: i })
+    }
+    function b(t) {
+      return (s = t + (2 * m() - 1.1) * d), s > l || s < 0 ? b(t) : s
+    }
+    ;(i.width = a * c),
+      (i.height = l * c),
+      o.scale(c, c),
+      (o.globalAlpha = e.a),
+      (i.style.cssText =
+        'opacity: ' +
+        e.a +
+        ';position:fixed;top:0;left:0;z-index: ' +
+        e.z +
+        ';width:100%;height:100%;pointer-events:none;'),
+      document.getElementsByTagName('body')[0].appendChild(i),
+      'false' !== e.c && ((document.onclick = x), (document.ontouchstart = x)),
+      x()
+  })()
+}

components/Sakura.js

@@ -1,15 +1,10 @@
 /* eslint-disable */
-/**
- * https://codepen.io/juliangarnier/pen/gmOwJX
- * custom by hexo-theme-yun @YunYouJun
- */
 import React from 'react'
 
 export const Sakura = () => {
   React.useEffect(() => {
     createSakura({})
   }, [])
-  //   return <canvas id="fireworks" className="fireworks"></canvas>
 }
 
 /**

components/StarrySky.js

@@ -1,8 +1,4 @@
 /* eslint-disable */
-/**
- * https://codepen.io/juliangarnier/pen/gmOwJX
- * custom by hexo-theme-yun @YunYouJun
- */
 import React from 'react'
 
 export const StarrySky = () => {

pages/_app.js

@@ -25,6 +25,9 @@ import { GlobalContextProvider } from '@/lib/global'
 import { DebugPanel } from '@/components/DebugPanel'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { Fireworks } from '@/components/Fireworks'
+import { Nest } from '@/components/Nest'
+import { FlutteringRibbon } from '@/components/FlutteringRibbon'
+import { Ribbon } from '@/components/Ribbon'
 import { Sakura } from '@/components/Sakura'
 import { StarrySky } from '@/components/StarrySky'
 import MusicPlayer from '@/components/MusicPlayer'
@@ -53,6 +56,9 @@ const MyApp = ({ Component, pageProps }) => {
         {JSON.parse(BLOG.SAKURA) && <Sakura />}
         {JSON.parse(BLOG.STARRY_SKY) && <StarrySky />}
         {JSON.parse(BLOG.MUSIC_PLAYER) && <MusicPlayer />}
+        {JSON.parse(BLOG.NEST) && <Nest />}
+        {JSON.parse(BLOG.FLUTTERINGRIBBON) && <FlutteringRibbon />}
+        {JSON.parse(BLOG.RIBBON) && <Ribbon />}
     </>
 
   // 默认Webfont:  请在font.js文件中检查font-family 新版改从npm本地导入；

themes/example/LayoutBase.js

@@ -25,7 +25,7 @@ const LayoutBase = props => {
             <Nav {...props} />
 
             {/* 主体 */}
-            <div id='container-inner' className="w-full">
+            <div id='container-inner' className="w-full relative z-10">
 
                 <Title {...props} />
 

themes/example/components/Header.js

@@ -8,7 +8,7 @@ export const Header = (props) => {
   const { siteInfo } = props
 
   return (
-      <header className="w-full px-6 bg-white  dark:bg-black">
+      <header className="w-full px-6 bg-white  dark:bg-black relative z-10">
             <div className="container mx-auto max-w-4xl md:flex justify-between items-center">
                 <Link
                     href='/'

themes/fukasawa/LayoutBase.js

@@ -31,7 +31,7 @@ const LayoutBase = (props) => {
     <div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex'}>
       <AsideLeft {...props} slot={leftAreaSlot}/>
       <main id='wrapper' className='relative flex w-full py-8 justify-center'>
-        <div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full'>
+        <div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative z-10'>
           <div> {headerSlot} </div>
           <div>{children}</div>
         </div>

themes/fukasawa/components/AsideLeft.js

@@ -11,7 +11,7 @@ import DarkModeButton from '@/components/DarkModeButton'
 function AsideLeft (props) {
   const { tags, currentTag, categories, currentCategory, post, slot, siteInfo } = props
   const router = useRouter()
-  return <div className='relative w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block'>
+  return <div className='relative w-72 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block relative z-10'>
     <Logo {...props}/>
 
     <section className='flex flex-col text-gray-600'>

themes/hexo/LayoutBase.js

@@ -76,7 +76,7 @@ const LayoutBase = props => {
       <main id="wrapper" className="w-full py-8 md:px-8 lg:px-24 min-h-screen relative">
         <div
           id="container-inner"
-          className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' pt-14 w-full mx-auto lg:flex lg:space-x-4 justify-center'}
+          className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' pt-14 w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'}
         >
           <div className="w-full max-w-4xl overflow-x-hidden scroll-hidden">
             {onLoading ? <LoadingCover /> : children}

themes/hexo/components/Header.js

@@ -78,7 +78,7 @@ const Header = props => {
   return (
     <header
       id="header"
-      className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black text-white"
+      className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black text-white relative z-10"
       style={{
         backgroundImage:
           `linear-gradient(rgba(0, 0, 0, 0.9), rgba(0,0,0,0.5), rgba(0,0,0,0.3), rgba(0,0,0,0.5), rgba(0, 0, 0, 0.9) ),url("${siteInfo?.pageCover}")`

themes/hexo/components/HeaderArticle.js

@@ -19,7 +19,7 @@ export default function HeaderArticle({ post, siteInfo }) {
   return (
     <div
       id="header"
-      className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn"
+      className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn relative"
       style={{ backgroundImage: headerImage }}
     >
       <header className="animate__slideInDown animate__animated bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">

themes/matery/LayoutBase.js

@@ -59,7 +59,7 @@ const LayoutBase = props => {
             {headerSlot}
 
             <main id="wrapper" className="flex-1 w-full py-8 md:px-8 lg:px-24 relative">
-                <div id="container-inner" className="w-full max-w-6xl mx-auto lg:flex lg:space-x-4 justify-center">
+                <div id="container-inner" className="w-full max-w-6xl mx-auto lg:flex lg:space-x-4 justify-center relative z-10">
                     {onLoading ? <LoadingCover /> : children}
                 </div>
             </main>

themes/matery/components/Header.js

@@ -79,7 +79,7 @@ const Header = props => {
   return (
     <header
       id="header"
-      className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black text-white"
+      className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black text-white relative z-10"
       style={{
         backgroundImage:
           `linear-gradient(rgba(0, 0, 0, 0.9), rgba(0,0,0,0.5), rgba(0,0,0,0.3), rgba(0,0,0,0.5), rgba(0, 0, 0, 0.9) ),url("${siteInfo?.pageCover}")`

themes/medium/LayoutBase.js

@@ -31,7 +31,7 @@ const LayoutBase = props => {
         {/* 桌面端左侧菜单 */}
         {/* <LeftMenuBar/> */}
 
-        <div id='container-inner' className='w-full'>
+        <div id='container-inner' className='w-full relative z-10'>
           {/* 移动端顶部菜单 */}
           <TopNavBar {...props}/>
           <div className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
@@ -41,7 +41,7 @@ const LayoutBase = props => {
         </div>
 
         {/* 桌面端右侧 */}
-        <div className='hidden xl:block border-l dark:border-transparent w-96'>
+        <div className='hidden xl:block border-l dark:border-transparent w-96 relative z-10'>
          <div className='py-14 px-6 sticky top-0'>
           <Tabs>
             {slotRight}

themes/medium/components/Footer.js

@@ -14,7 +14,7 @@ const Footer = ({ title }) => {
 
   return (
     <footer
-      className='dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
+      className='dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6 relative'
     >
        <DarkModeButton/>
       <i className='fas fa-copyright' /> {`${copyrightDate}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br/>

themes/next/LayoutBase.js

@@ -79,7 +79,7 @@ const LayoutBase = (props) => {
       <main id='wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative flex justify-center flex-1 pb-12'}>
           {/* 左侧栏样式 */}
           <SideAreaLeft slot={leftAreaSlot} targetRef={targetRef} {...props}/>
-          <section id='container-inner' 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}>
+          <section id='container-inner' 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 relative z-10`} ref={targetRef}>
             {onLoading ? <LoadingCover/> : <> {children}</> }
           </section>
           {/* 右侧栏样式 */}

themes/next/components/Header.js

@@ -93,7 +93,7 @@ export default function Header(props) {
   return (
     <header
       id="header"
-      className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black"
+      className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black relative z-10"
       style={{
         backgroundImage:
           `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${siteInfo?.pageCover}")`

themes/next/components/SideAreaLeft.js

@@ -23,7 +23,7 @@ const SideAreaLeft = props => {
   const { post, slot, postCount } = props
   const { locale } = useGlobal()
   const showToc = post && post.toc && post.toc.length > 1
-  return <aside id='left' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'ml-4' : 'mr-4') + ' hidden lg:block flex-col w-60'}>
+  return <aside id='left' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'ml-4' : 'mr-4') + ' hidden lg:block flex-col w-60 z-10 relative'}>
 
         <section
             data-aos="fade-down"

themes/next/components/SideAreaRight.js

@@ -24,7 +24,7 @@ const SideAreaRight = (props) => {
   const { tags, currentTag, slot, categories, currentCategory } = props
   const { locale } = useGlobal()
   const router = useRouter()
-  return (<aside id='right' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'mr-4' : 'ml-4') + ' hidden 2xl:block flex-col w-60'}>
+  return (<aside id='right' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'mr-4' : 'ml-4') + ' hidden 2xl:block flex-col w-60 relative z-10'}>
 
         {CONFIG_NEXT.RIGHT_AD && <Card className='mb-2'>
           {/* 展示广告  */}