diff --git a/README.md b/README.md index c0aadde9..07a79c41 100644 --- 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 index ccac3cf7..3af32b2d 100644 --- 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 index a0ea0276..ebe035c0 100644 --- a/layout/index.ejs +++ b/layout/index.ejs @@ -1,5 +1,5 @@
-
+
diff --git a/layout/layout.ejs b/layout/layout.ejs index 5a294d56..223b1839 100644 --- a/layout/layout.ejs +++ b/layout/layout.ejs @@ -26,6 +26,9 @@
+ <% if (theme.contentBackground) { %> +
+ <% } %>
diff --git a/source/css/main.css b/source/css/main.css index 1b2e7e7c..f9eea755 100644 --- 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 b/source/images/home-background.jpg similarity index 100% rename from source/images/background.jpg rename to source/images/home-background.jpg diff --git a/source/js/lib/home.js b/source/js/lib/home.js index 35eb74d7..384c22ca 100644 --- 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() {