feat: Make the layout of sidebar and content configurable

liuyib · Jan 13, 2020 · 308e90b · 308e90b
1 parent dfff784
commit 308e90b
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 15 deletions.
diff --git a/_config.yml b/_config.yml
@@ -94,6 +94,13 @@ night_mode:
     dark: 🌜
     light: 🌞
 
+# The layout for sidebar and content of site.
+layout:
+  content: 768px
+  sidebar: 300px
+  content_sidebar_gap: 30px
+  main_side_gap: 20px
+
 header:
   # Header height (Support for all types of CSS size units).
   height: 80%
@@ -207,12 +214,10 @@ sidebar:
   enable: true
   # Sidebar position, available values: left | right.
   position: right
-  # Sidebar offset from top menubar (Only px units are supported).
+  # The distance from the top of the page when the sidebar is fixed (Only px units are supported).
   offsetTop: 30px
   # Horizon line.
   horizon_line: false
-  # Suggest: 240px ~ 300px
-  width: 280px
 
 author:
   enable: true

diff --git a/source/css/_common/components/footer/index.styl b/source/css/_common/components/footer/index.styl
@@ -3,7 +3,7 @@
     &-icon {
       margin: 0 .3rem;
       font-size: 1em;
-      color: convert(hexo-config('footer.icon.color') || '#ff0000');
+      color: convert(hexo-config('footer.icon.color') || '#f00');
 
       if (hexo-config('footer.icon.animation')) {
         animation: footerHeartBeat 1.2s infinite;

diff --git a/source/css/_common/components/header/index.styl b/source/css/_common/components/header/index.styl
@@ -40,7 +40,7 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
     &-inner {
       position: relative;
       margin: 0 auto;
-      width: 'calc(100% - %s)' % ($content-aside-gap * 2);
+      width: 'calc(100% - %s)' % ($main-side-gap * 2);
       height: 100%;
 
       i {

diff --git a/source/css/_common/outline/macro.styl b/source/css/_common/outline/macro.styl
@@ -22,13 +22,13 @@
 
 .main-inner {
   margin: 0 auto;
-  width: 'calc(100% - %s)' % ($content-aside-gap * 2);
+  width: 'calc(100% - %s)' % ($main-side-gap * 2);
   font-size: $font-size-main;
 }
 
 .content-wrap {
   if (hexo-config('sidebar.enable')) {
-    width: 'calc(100% - %s)' % ($sidebar-width + $main-sidebar-gap);
+    width: 'calc(100% - %s)' % ($sidebar-width + $content-sidebar-gap);
 
     if (hexo-config('sidebar.position') == 'left') {
       float: right;

diff --git a/source/css/_common/responsive.styl b/source/css/_common/responsive.styl
@@ -1,6 +1,6 @@
 // $main-width: A calc value.
 // -----------------------------------------
-@media (min-width: $main-width + $content-aside-gap * 2) {
+@media (min-width: $main-width + $main-side-gap * 2) {
   if (hexo-config('sidebar.enable')) {
     .header-nav-inner {
       width: $main-width;
@@ -60,8 +60,8 @@
     overflow: hidden;
     position: absolute;
     top: header-nav-height;
-    right: 0 - $content-aside-gap;
-    left: 0 - $content-aside-gap;
+    right: 0 - $main-side-gap;
+    left: 0 - $main-side-gap;
     width: auto;
     height: auto;
     background-color: $header-nav-bg-color;

diff --git a/source/css/_variables/index.styl b/source/css/_variables/index.styl
@@ -29,12 +29,12 @@ $md-width = 992px - 0.02px
 $lg-width = 1200px - 0.02px
 
 // Width
-$sidebar-width          = convert(hexo-config('sidebar.width') || '280px')
-$content-aside-gap      = 20px
-$content-width          = $sm-width
-$main-sidebar-gap       = 30px
+$content-width          = convert(hexo-config('layout.content') || '$sm-width')
+$sidebar-width          = convert(hexo-config('layout.sidebar') || '300px')
+$content-sidebar-gap    = convert(hexo-config('layout.content_sidebar_gap') || '30px')
+$main-side-gap          = convert(hexo-config('layout.main_side_gap') || '20px')
 if (hexo-config('sidebar.enable')) {
-  $main-width           = $content-width + $sidebar-width + $main-sidebar-gap
+  $main-width           = $content-width + $sidebar-width + $content-sidebar-gap
 } else {
   $main-width           = $content-width
 }