fix: 随机背景适配 Pjax

layout/includes/layout.pug

@@ -14,15 +14,27 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
 
     if theme.background
       if !Array.isArray(theme.background)
-        #web_bg(style=getBgPath(theme.background))
+        #web_bg.bg-animation(style=getBgPath(theme.background))
       else
-        #web_bg
+        #web_bg.bg-animation
         - const bgStyleArr = theme.background.map(getBgPath)
         script.
-          (function () {
+          (() => {
             const arr = !{JSON.stringify(bgStyleArr)}
-            const randomBgStyle = arr[Math.floor(Math.random() * arr.length)]
+            const webBgDiv = document.getElementById('web_bg')
-            document.getElementById('web_bg').style = randomBgStyle
+
+            function setRandomBg() {
+              webBgDiv.style = arr[Math.floor(Math.random() * arr.length)]
+            }
+
+            setRandomBg()
+            document.addEventListener('pjax:send', () => {
+              setRandomBg()
+              // Reload CSS animation
+              webBgDiv.classList.remove('bg-animation')
+              void webBgDiv.offsetWidth
+              webBgDiv.classList.add('bg-animation')
+            })
           })()
 
     !=partial('includes/sidebar', {}, {cache: true})

source/css/_global/function.styl

@@ -159,7 +159,7 @@ if hexo-config('enter_transitions')
     animation: titleScale 1s
 
   canvas:not(#ribbon-canvas),
-  #web_bg
+  #web_bg.bg-animation
     animation: to_show 4s
 
   #ribbon-canvas