feat: Make the background image of body configurable

liuyib · Jan 31, 2020 · 18b74c5 · 18b74c5
1 parent a167675
commit 18b74c5
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 28 deletions.
diff --git a/_config.yml b/_config.yml
@@ -143,34 +143,23 @@ header:
     enable: false
     animation: true
 
-# Creative Commons 4.0 International License.
-creative_commons:
-  enable: true
-  # Available: BY | BY-SA | BY-ND | BY-NC | BY-NC-SA | BY-NC-ND.
-  # For details, please see: https://creativecommons.org/share-your-work/licensing-types-examples/
-  license: BY-NC-SA
-  # Show the CC license in the sidebar.
-  sidebar: true
-  # Show the CC license at the post bottom.
-  post: true
-  # You can set a language value if you prefer a translated version of CC license.
-  # Valid values of language: en, zh, etc.
-  # If not set, "en" will be used by default.
-  language:
-
-# Back to top button.
-back2top:
-  enable: true
-  icon:
-    # Icon name in FontAwesome, see: https://fontawesome.com/v4.7.0/icons/
-    # `rocket` is recommended.
-    name: rocket
-    # Rotation Angle of icon.
-    rotate: -45deg
-    # Please use quote to wrap value (All CSS size units are supported).
-    color: "#49b1f5"
-    # Colour when the mouse hovers it.
-    hover_color: "#fc6423"
+body:
+  # Background image in the body.
+  bg_image:
+    enable: false
+    # In theme directory (source/images): /images/avatar.png
+    # In site directory (source/uploads): /uploads/avatar.png
+    # You can also use a link of image.
+    url:
+    # Whether to fixed the background image.
+    fixed: true
+    # Whether to repeat the image as much as possible to cover the entire area.
+    repeat: false
+  # Mask effect of the background image.
+  mask:
+    enable: false
+    # Opacity of mask (value: 0 ~ 1).
+    opacity: 0.5
 
 # Footer of your site.
 footer:
@@ -226,6 +215,35 @@ footer:
     enable: false
     text:
 
+# Creative Commons 4.0 International License.
+creative_commons:
+  enable: true
+  # Available: BY | BY-SA | BY-ND | BY-NC | BY-NC-SA | BY-NC-ND.
+  # For details, please see: https://creativecommons.org/share-your-work/licensing-types-examples/
+  license: BY-NC-SA
+  # Show the CC license in the sidebar.
+  sidebar: true
+  # Show the CC license at the post bottom.
+  post: true
+  # You can set a language value if you prefer a translated version of CC license.
+  # Valid values of language: en, zh, etc.
+  # If not set, "en" will be used by default.
+  language:
+
+# Back to top button.
+back2top:
+  enable: true
+  icon:
+    # Icon name in FontAwesome, see: https://fontawesome.com/v4.7.0/icons/
+    # `rocket` is recommended.
+    name: rocket
+    # Rotation Angle of icon.
+    rotate: -45deg
+    # Please use quote to wrap value (All CSS size units are supported).
+    color: "#49b1f5"
+    # Colour when the mouse hovers it.
+    hover_color: "#fc6423"
+
 # ---------------------------------------------------------------
 # Sidebar config
 # ---------------------------------------------------------------

diff --git a/source/css/_common/outline/macro.styl b/source/css/_common/outline/macro.styl
@@ -1,3 +1,43 @@
+if (hexo-config('body.bg_image.enable')) {
+  body {
+    position: relative;
+
+    bodyBgSet() {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      if (hexo-config('body.bg_image.fixed')) {
+        position: fixed;
+        height: 100vh;
+      }
+    }
+
+    if (hexo-config('body.mask.enable')) {
+      &::before {
+        bodyBgSet();
+        z-index: $z-index-1;
+        background-color: alpha(#000, hexo-config('body.mask.opacity'));
+      }
+    }
+
+    &::after {
+      bodyBgSet();
+      z-index: $z-index-2;
+      background: url(hexo-config('body.bg_image.url')) no-repeat center / cover;
+
+      if (hexo-config('body.bg_image.repeat')) {
+        background-repeat: repeat;
+        background-size: auto;
+      }
+    }
+  }
+}
+
 .container {
   break-word();
   display: flex;