update theme to butterfly

themes/butterfly/layout/includes/layout.pug

@@ -13,9 +13,32 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
     !=partial('includes/loading/index', {}, {cache: true})
 
     if theme.background
-      #web_bg(style=getBgPath(theme.background))
+      if !Array.isArray(theme.background)
+        #web_bg.bg-animation(style=getBgPath(theme.background))
+      else
+        #web_bg.bg-animation
+        - const bgStyleArr = theme.background.map(getBgPath)
+        script.
+          (() => {
+            const arr = !{JSON.stringify(bgStyleArr)}
+            const webBgDiv = document.getElementById('web_bg')
+
+            const setRandomBg = () => {
+              webBgDiv.style = arr[Math.floor(Math.random() * arr.length)]
+              requestAnimationFrame(() => webBgDiv.classList.add('bg-animation'))
+            }
+
+            document.addEventListener('pjax:send', () => {
+              webBgDiv.style = ''
+              webBgDiv.classList.remove('bg-animation')
+            })
+
+            document.addEventListener('pjax:complete', setRandomBg)
+            document.addEventListener('DOMContentLoaded', setRandomBg)
+          })()
 
     !=partial('includes/sidebar', {}, {cache: true})
+
     #body-wrap(class=pageType)
       include ./header/index.pug
 
@@ -33,5 +56,4 @@ html(lang=config.language data-theme=theme.display_mode class=htmlClassHideAside
         !=partial('includes/footer', {}, {cache: true})
 
     include ./rightside.pug
-    include ./additional-js.pug
-    !=partial('includes/rightmenu',{}, {cache:true})
+    include ./additional-js.pug