feat: make the background image become random

xcyeye · Nov 21, 2021 · 259d658 · 259d658
1 parent 5a0a19e
commit 259d658
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 10 deletions.
diff --git a/Aurora-plugin/vuepress-plugin-bubble/lib/AuroraBubble.vue b/Aurora-plugin/vuepress-plugin-bubble/lib/AuroraBubble.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="aurora-bubble">
+  <div class="aurora-bubble" :style="getBubbleStyle">
     <div class="aurora-bubble-box" id="aurora-bubble-box"></div>
     <canvas class="aurora-bubble-canvas" id="aurora-bubble-canvas"></canvas>
   </div>
@@ -14,6 +14,7 @@ let size = 0.5
 let sizeChangeSpeed = 0.002
 let riseSpeed = 0.9
 let color = '255,255,255'
+let zIndex = -1
 
 try {
   bubbleNumber = __BUBBLE_NUMBER__
@@ -23,13 +24,19 @@ try {
   sizeChangeSpeed = __SIZE_CHANGE_SPEED__
   riseSpeed = __RISE_SPEED__
   color = __COLOR__
+  zIndex = __Z_INDEX__
 }catch (e) {
   console.warn(e)
 }
 
 const bubble = require('./bubble')
 export default {
   name: "AuroraBubble",
+  computed: {
+    getBubbleStyle() {
+      return '--aurora-bubble-z-index: ' + zIndex + "';"
+    }
+  },
   mounted() {
     bubble.bubble(bubbleNumber,bubbleAlpha,alphaChangeSpeed,size,sizeChangeSpeed,riseSpeed,color)
   }
@@ -43,7 +50,7 @@ export default {
     right: 0;
     width: 100%;
     height: 100%;
-    z-index: -1;
+    z-index: var(--aurora-bubble-z-index,-1);
   }
 
   .aurora-bubble-box,.aurora-bubble-canvas {

diff --git a/Aurora-plugin/vuepress-plugin-bubble/lib/node/vuepress-plugin-bubble.js b/Aurora-plugin/vuepress-plugin-bubble/lib/node/vuepress-plugin-bubble.js
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.cozePlugin = void 0;
 const { path } = require('@vuepress/utils')
 const utils_1 = require("@vuepress/utils");
-const vuepressPluginBubble = ({bubbleNumber,bubbleAlpha,alphaChangeSpeed,size,sizeChangeSpeed,riseSpeed,color}) => {
+const vuepressPluginBubble = ({bubbleNumber,bubbleAlpha,alphaChangeSpeed,size,sizeChangeSpeed,riseSpeed,color,zIndex}) => {
     return {
         onInitialized: (app) => {
 
@@ -16,7 +16,8 @@ const vuepressPluginBubble = ({bubbleNumber,bubbleAlpha,alphaChangeSpeed,size,si
             __SIZE__: size,
             __SIZE_CHANGE_SPEED__: sizeChangeSpeed,
             __RISE_SPEED__: riseSpeed,
-            __COLOR__: color
+            __COLOR__: color,
+            __Z_INDEX__: zIndex
         },
         multiple: false,
         clientAppEnhanceFiles: utils_1.path.resolve(__dirname, '../clientAppEnhance.js'),

diff --git a/Aurora-theme/lib/client/components/global/Common.vue b/Aurora-theme/lib/client/components/global/Common.vue
@@ -375,7 +375,7 @@ export default defineComponent({
 
     this.homeWps = homeWps
 
-    if (this.aboutOption !== undefined || this.aboutOption != null) {
+    if (this.aboutOption !== undefined) {
       this.aboutOption = this.themeProperty.about
     }
 
@@ -424,8 +424,7 @@ export default defineComponent({
     //手机端壁纸
     let screen = document.body.clientWidth
     if (screen < 500) {
-      if (this.themeProperty.homeWpsMobile !== undefined &&
-          this.themeProperty.homeWpsMobile != null) {
+      if (this.themeProperty.homeWpsMobile !== undefined) {
         try {
           if (this.themeProperty.homeWpsMobile.length !== 0) {
             this.homeWps = this.themeProperty.homeWpsMobile
@@ -438,11 +437,13 @@ export default defineComponent({
     let backgroundUrl = ''
     if (this.$store.state.homeWps === "") {
       //将首页壁纸设置为配置文件数组中的第一张图片
-      backgroundUrl = this.homeWps[0]
+      // backgroundUrl = this.homeWps[0]
+      backgroundUrl = this.homeWps[this.getRandomInt(0,this.homeWps.length -1)]
     }else {
       //将首页壁纸设置为配置文件数组中的第一张图片
       backgroundUrl = this.$store.state.homeWps
     }
+
     this.$store.commit("setHomeWps",{
       homeWps: backgroundUrl
     })

diff --git a/Aurora-theme/lib/client/public/js/store/state.js b/Aurora-theme/lib/client/public/js/store/state.js
@@ -65,7 +65,7 @@ module.exports = {
     defaultPostImgApi: 'https://unsplash.it/1600/900?random',
 
     //版权信息
-    latestVersion: 'V1.3.2',
+    latestVersion: 'V1.8.x',
     printRightIndex: 0,
     mobileOpenStatus: false,
     currentTagNum: 1

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -109,7 +109,9 @@ module.exports = {
                 riseSpeed: 0.4,
 
                 //气泡颜色，白色rgb(255,255,255) 请传入255,255,255
-                color: '255,255,255'
+                color: '255,255,255',
+
+                zIndex: -2
             }
         ],
     ],