feat: Make the display of website header configurable

liuyib · Jan 31, 2020 · a167675 · a167675
1 parent 0ce3569
commit a167675
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 65 deletions.
diff --git a/_config.yml b/_config.yml
@@ -114,10 +114,13 @@ layout:
   main_side_gap: 20px
 
 header:
-  # Header height (Support for all types of CSS size units).
+  enable: true
+  # Whether to show on the some pages.
+  show_on:
+    # Whether to show on the article page.
+    post: true
+  # Height of the header. (Support for all types of CSS size units)
   height: 80%
-  # Header navigation bar height (Support for all types of CSS size units).
-  nav_height: 50px
   # Background image in the header.
   bg_image:
     enable: false
@@ -130,6 +133,11 @@ header:
     enable: false
     # Opacity of mask (value: 0 ~ 1).
     opacity: 0.5
+  nav:
+    # Height of the navigation bar. (Support for all types of CSS size units)
+    height: 50px
+    # Background color of the navigation bar.
+    bg_color: "#333"
   # The icon that prompt to scroll down.
   scroll_down_icon:
     enable: false

diff --git a/layout/_layout.pug b/layout/_layout.pug
@@ -7,14 +7,16 @@
     dataPjax = { 'data-pjax': '' };
   }
 
+  var isNoHeader = !_.get(theme, 'header.enable') || (is_post() && !_.get(theme, 'header.show_on.post'))
+
 doctype html
 html(lang=config.language)
   head
     include ./_partials/head/head.pug
   body
     div#container.container
       header#header.header
-        div.header-inner
+        div.header-inner(class=`${isNoHeader ? 'header-inner--height header-inner--bgcolor' : ''}`)
           include ./_partials/header/header.pug
 
       main#main.main

diff --git a/layout/_partials/config.pug b/layout/_partials/config.pug
@@ -47,11 +47,13 @@
   });
 
   var header = "undefined";
-  if (theme.header) {
+  if (theme.header && theme.header.enable) {
     var isScrollDownIcon =
       (theme.header.scroll_down_icon && theme.header.scroll_down_icon.enable) || false;
 
     header = JSON.stringify({
+      enable: theme.header.enable,
+      showOnPost: theme.header.show_on.post,
       scrollDownIcon: isScrollDownIcon,
     });
   }

diff --git a/layout/_partials/header/header.pug b/layout/_partials/header/header.pug
@@ -1,8 +1,8 @@
 include ../../_mixins/menu-item.pug
 
-- var fa_prefix = theme.fa_prefix || 'fa'
+- var fa_prefix = theme.fa_prefix || 'fa';
 
-nav.header-nav
+nav.header-nav(class=`${isNoHeader ? '' : 'header-nav--fixed'}`)
   div.header-nav-inner
     div.header-nav-btn(class=`${fa_prefix} fa-bars`)
     div.header-nav-menu
@@ -19,14 +19,19 @@ nav.header-nav
       div.header-nav-mode
         include ../widgets/night-mode.pug
 
-div.header-info(style=`${
-  theme.header.bg_image.enable &&
-    page.top_image ? 'background: url(' + page.top_image + ') no-repeat center/cover;' : ''
-}`)
-  div.header-info-inner
-    div.header-info-title= config.title
-    div.header-info-subtitle= config.subtitle
+if !isNoHeader
+  if _.get(theme, 'header.enable')
+    div.header-info(
+      style=`${
+        (theme.header.bg_image.enable && page.top_image)
+          ? 'background: url(' + page.top_image + ') no-repeat center/cover;'
+          : ''
+      }`
+    )
+      div.header-info-inner
+        div.header-info-title= config.title
+        div.header-info-subtitle= config.subtitle
 
-  if theme.header && theme.header.scroll_down_icon && theme.header.scroll_down_icon.enable
-    div.header-info-scrolldown
-      i.fa.fa-angle-down.header-info-scrolldown__icon
+      if theme.header && theme.header.scroll_down_icon && theme.header.scroll_down_icon.enable
+        div.header-info-arrow
+          i.fa.fa-angle-down.header-info-arrow__icon
diff --git a/layout/_third-party/pjax.pug b/layout/_third-party/pjax.pug
@@ -5,8 +5,8 @@
     '.pjax-reload'
   ];
 
-  if (theme.header.bg_image.enable) {
-    pjaxSelectors.push('.header-info');
+  if (_.get(theme, 'header.enable')) {
+    pjaxSelectors.push('.header-inner');
   }
 
   var pjaxArgs = {

diff --git a/source/css/_common/components/header/index.styl b/source/css/_common/components/header/index.styl
@@ -1,39 +1,61 @@
-if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_height'))) {
-  header-nav-height = unit(convert(hexo-config('header.nav_height')), 'vh');
+if (hexo-config('header.nav.height') && match('%', hexo-config('header.nav.height'))) {
+  header-nav-height = unit(convert(hexo-config('header.nav.height')), 'vh');
 } else {
-  header-nav-height = convert(hexo-config('header.nav_height') || '50px');
+  header-nav-height = convert(hexo-config('header.nav.height') || '50px');
 }
 
 .header {
   &-inner {
     width: 100%;
     font-size: $font-size-header;
+    background-color: $header-bg-color;
 
-    if (hexo-config('header.height') && match('%', hexo-config('header.height'))) {
-      height: unit(convert(hexo-config('header.height')), 'vh');
-    } else {
-      height: convert(hexo-config('header.height') || '80vh');
+    if (hexo-config('header.enable')) {
+      if (hexo-config('header.height') && match('%', hexo-config('header.height'))) {
+        height: unit(convert(hexo-config('header.height')), 'vh');
+      } else {
+        height: convert(hexo-config('header.height') || '80vh');
+      }
+    }
+
+    &--bgcolor {
+      background-color: convert(hexo-config('header.nav.bg_color'));
+    }
+
+    &--height {
+      height: header-nav-height !important;
     }
   }
 
   &-nav {
-    position: fixed;
     top: 0;
+    left: 0;
     z-index: $z-index1;
     width: 100%;
     height: header-nav-height;
     transition: transform .2s ease, background-color .2s ease;
 
-    &.fixed {
-      background-color: $header-nav-bg-color;
+    &--fixed {
+      position: fixed;
     }
 
-    &.slider-down {
-      transform: translateY(0);
+    &--sticky {
+      position: fixed;
+      background-color: convert(hexo-config('header.nav.bg_color') || '$header-nav-bg-color');
     }
 
-    &.slider-up {
-      transform: translateY(-100%);
+    &.slider {
+      &--down {
+        transform: translateY(0);
+      }
+
+      &--up {
+        transform: translateY(-100%);
+      }
+
+      &--clear {
+        transition: background-color .2s ease;
+      }
     }
 
     &-inner {
@@ -64,10 +86,12 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
       }
     }
 
-    &-menu-item__a,
-    &-submenu-item__a {
-      display: block;
-      color: $header-text-color;
+    &-menu-item,
+    &-submenu-item {
+      &__a {
+        display: block;
+        color: $header-text-color;
+      }
     }
 
     &-menu-item__a {
@@ -154,7 +178,6 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
     position: relative;
     width: 100%;
     height: 100%;
-    background-color: $header-bg-color;
 
     if (hexo-config('header.bg_image.enable') && hexo-config('header.bg_image.url')) {
       background: url(hexo-config('header.bg_image.url')) no-repeat center / cover;
@@ -199,8 +222,8 @@ if (hexo-config('header.nav_height') && match('%', hexo-config('header.nav_heigh
       color: $header-text-color;
     }
 
-    if (hexo-config('header.scroll_down_icon') && hexo-config('header.scroll_down_icon.enable')) {
-      &-scrolldown {
+    if (hexo-config('header.scroll_down_icon.enable')) {
+      &-arrow {
         position: absolute;
         bottom: 0;
         left: 50%;

diff --git a/source/js/header.js b/source/js/header.js
@@ -180,7 +180,7 @@ $(document).ready(function () {
 
   Stun.utils.pjaxReloadHeader = function () {
     if (CONFIG.header && CONFIG.header.scrollDownIcon) {
-      $('.header-info-scrolldown').on('click', function () {
+      $('.header-info-arrow').on('click', function () {
         $('#container').velocity('scroll', {
           offset: $('#header').outerHeight()
         });

diff --git a/source/js/scroll.js b/source/js/scroll.js
@@ -1,50 +1,65 @@
 $(document).ready(function () {
+  var isHeaderEnable = CONFIG.header && CONFIG.header.enable;
+  var isShowHeaderOnPost = isHeaderEnable && CONFIG.header.showOnPost;
   // The previous distance from the page to the top.
   var prevScrollTop = 0;
   var isNavFix = false;
   var isNavShow = true;
+  var isAnimation = false;
 
   function headerNavScroll () {
+    var isPostPage = !!$('#is-post').length;
+    var isNoHeader = !isHeaderEnable || (isPostPage && !isShowHeaderOnPost);
     var $headerNav = $('.header-nav');
-    var scrollTop = $(window).scrollTop();
-    var delta = scrollTop - prevScrollTop;
+    var scrollTop = Math.floor($(window).scrollTop());
+    var delta = Math.floor(scrollTop - prevScrollTop);
 
     if (scrollTop === 0) {
-      $headerNav.removeClass('fixed');
-      $headerNav.removeClass('slider-up');
-      $headerNav.addClass('slider-down');
-
+      if (isNoHeader) {
+        $headerNav.addClass('slider--clear');
+        isAnimation = false;
+      }
+      $headerNav.removeClass('header-nav--sticky');
+      $headerNav.removeClass('slider--up');
+      $headerNav.addClass('slider--down');
       isNavFix = false;
+      isNavShow = true;
     } else {
+      if (isNoHeader && scrollTop < $headerNav.height()) {
+        return false;
+      }
       if (!isNavFix) {
-        $headerNav.addClass('fixed');
-
+        $headerNav.addClass('header-nav--sticky');
         isNavFix = true;
       }
-
       var MIN_SCROLL_TO_CHANGE_NAV = 5;
       // Make the state of nav bar not change due to tiny scrolling.
       if (Math.abs(delta) > MIN_SCROLL_TO_CHANGE_NAV) {
-        if (isNavShow && delta > 0) {
-          $headerNav.removeClass('slider-down');
-          $headerNav.addClass('slider-up');
-
-          isNavShow = false;
-        } else if (!isNavShow && delta < 0) {
-          $headerNav.removeClass('slider-up');
-          $headerNav.addClass('slider-down');
-
-          isNavShow = true;
+        if (isNoHeader) {
+          if (!isAnimation) {
+            isAnimation = true;
+          } else {
+            $headerNav.removeClass('slider--clear');
+          }
+        }
+        if (delta > 0) {
+          if (isNavShow) {
+            $headerNav.removeClass('slider--down');
+            $headerNav.addClass('slider--up');
+            isNavShow = false;
+          }
+        } else {
+          if (!isNavShow) {
+            $headerNav.removeClass('slider--up');
+            $headerNav.addClass('slider--down');
+            isNavShow = true;
+          }
         }
       }
     }
-
     prevScrollTop = scrollTop;
   }
 
-  // Initializaiton
-  headerNavScroll();
-
   function scrollHeadingToTop (anchor) {
     $(anchor)
       .velocity('stop')
@@ -84,6 +99,9 @@ $(document).ready(function () {
     });
   }
 
+  // Initializaiton
+  headerNavScroll();
+
   $(window).on('scroll', Stun.utils.throttle(function () {
     headerNavScroll();
 

diff --git a/source/js/stun-boot.js b/source/js/stun-boot.js
@@ -1,5 +1,5 @@
 $(document).ready(function () {
-  Stun.utils.showThemeInConsole();
+  // Stun.utils.showThemeInConsole();
 
   if (CONFIG.shortcuts && CONFIG.shortcuts.switch_post) {
     Stun.utils.registerHotkeyToSwitchPost();