theme-particlex · YuziO2 · Mar 19, 2024 · Mar 19, 2024
diff --git a/README.md b/README.md
@@ -73,15 +73,23 @@ archive_generator:
 
 ## 3.1. 基本配置
 
-`background` 参数是一个列表，打开时会随机加载一个背景。
+`homeBackground`和`contentBackground` 参数是一个列表，打开时会随机加载一个背景。
+
+`homeBackground`是首页的背景，至少要有一张图片、`contentBackground`是内容，或者说整个网站的背景，默认为空，可置入任意数量的图片。
 
 ```yaml
 # Avatar image
 avatar: /images/avatar.jpg
 
 # Home page background image
-background:
-    - /images/background.jpg
+homeBackground:
+    - /images/home-background.jpg
+    # - /images/home-background1.jpg
+
+# Content (or global) background image
+contentBackground:
+    # - /images/content-background.jpg
+    # - /images/content-background1.jpg
 
 # Loading image
 loading: /images/loading.gif

diff --git a/_config.yml b/_config.yml
@@ -5,8 +5,12 @@
 avatar: /images/avatar.jpg
 
 # Home page background image
-background:
-    - /images/background.jpg
+homeBackground:
+    - /images/home-background.jpg
+
+# Content (or global) background image
+contentBackground:
+    # - /images/content-background.jpg
 
 # Loading image
 loading: /images/loading.gif

diff --git a/layout/index.ejs b/layout/index.ejs
@@ -1,5 +1,5 @@
 <div id="home-head">
-    <div id="home-background" ref="homeBackground" data-images="<%- theme.background.map(url_for) %>"></div>
+    <div id="home-background" ref="homeBackground" data-images="<%- theme.homeBackground.map(url_for) %>"></div>
     <div id="home-info" @click="homeClick">
         <span class="loop"></span>
         <span class="loop"></span>

diff --git a/layout/layout.ejs b/layout/layout.ejs
@@ -26,6 +26,9 @@
 </head>
 <body>
     <div id="layout">
+        <% if (theme.contentBackground) { %>
+        <div id="content-background" ref="contentBackground" data-images="<%- theme.contentBackground.map(url_for) %>"></div>
+        <% } %>
         <transition name="fade">
             <div id="loading" v-show="loading">
                 <div id="loading-circle">

diff --git a/source/css/main.css b/source/css/main.css
@@ -42,6 +42,18 @@
 #archives h3 {
     margin: 10px 0;
 }
+#content-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    /* background-image: url(""); */
+    background-size: cover;
+    background-position: center;
+    opacity: 0.3;
+    z-index: -1;
+}
 #crypto {
     margin: 50px 0;
 }

diff --git a/source/images/background.jpg → source/images/home-background.jpg b/source/images/background.jpg → source/images/home-background.jpg
diff --git a/source/js/lib/home.js b/source/js/lib/home.js
@@ -1,10 +1,17 @@
 mixins.home = {
     mounted() {
-        let background = this.$refs.homeBackground;
-        let images = background.dataset.images.split(",");
-        let id = Math.floor(Math.random() * images.length);
-        background.style.backgroundImage = `url('${images[id]}')`;
+        let homeBackgroundRef = this.$refs.homeBackground;
+        let homeBgImgURLs = homeBackgroundRef.dataset.images.split(",");
+        homeBackgroundRef.style.backgroundImage = `url('${
+          homeBgImgURLs[Math.floor(Math.random() * homeBgImgURLs.length)]
+        }')`;
         this.menuColor = true;
+
+        let contentBackgroundRef = this.$refs.contentBackground;
+        let contentBgImgURLs = contentBackgroundRef.dataset.images.split(",");
+        contentBackgroundRef.style.backgroundImage = `url('${
+          contentBgImgURLs[Math.floor(Math.random() * contentBgImgURLs.length)]
+        }')`;
     },
     methods: {
         homeClick() {