Refactored header components.

1. Fixed #218 bug: with `cache: enabled` option `hexo g & d` don't make right active menu selected items. 2. Refactored files hierarchy for header components. 3. Some small code improvements.
sslogan666 · Feb 17, 2021 · 5400d62 · 5400d62
1 parent 2ad77ae
commit 5400d62
Show file tree

Hide file tree

Showing 11 changed files with 116 additions and 116 deletions.
diff --git a/layout/_layout.swig b/layout/_layout.swig
@@ -11,7 +11,7 @@
   {% include '_partials/head/head-unique.swig' %}
   <title>{% block title %}{% endblock %}</title>
   {% include '_third-party/analytics/index.swig' %}
-  {% include '_scripts/noscript.swig' %}
+  {{ partial('_scripts/noscript.swig', {}, {cache: theme.cache.enable}) }}
 </head>
 
 <body itemscope itemtype="http://schema.org/WebPage" lang="{{ page.lang || page.language || config.language }}">
@@ -25,16 +25,16 @@
     <div class="headband"></div>
 
     <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
-      <div class="header-inner"> {{ partial('_partials/header.swig', {}, {cache: theme.cache.enable}) }} </div>
+      <div class="header-inner">{% include '_partials/header/index.swig' %}</div>
     </header>
 
-    {% include '_third-party/github-banner.swig' %}
+    {{ partial('_third-party/github-banner.swig', {}, {cache: theme.cache.enable}) }}
 
     <main id="main" class="main">
       <div class="main-inner">
         <div class="content-wrap">
           {% if theme.scheme === 'Pisces' || theme.scheme === 'Gemini' %}
-            {% include '_partials/sub-menu.swig' %}
+            {% include '_partials/header/sub-menu.swig' %}
           {% endif %}
           <div id="content" class="content">
             {% block content %}{% endblock %}

diff --git a/layout/_macro/menu/menu-badge-1.swig b/layout/_macro/menu/menu-badge-1.swig
@@ -1,7 +1,7 @@
   {% macro render(value) %}
-  {% set itemURL = value.split('||')[0] | replace('//', '/', 'g') | trim %}
+  {% set itemURL = url_for(value.split('||')[0] | trim) %}
   <li class="menu-item menu-item-{{ itemName | replace(' ', '-', 'g') }}{{ item_active(itemURL, 'menu-item-active') }}">
-    <a href="{{ url_for(itemURL) }}" rel="section">
+    <a href="{{ itemURL }}" rel="section">
       {% if theme.menu_settings.icons %}{#
       #}<i class="menu-item-icon fa fa-fw fa-{{ value.split('||')[1] | trim | default('question-circle') }}"></i> <br />{#
     #}{% endif %}{#

diff --git a/layout/_macro/menu/menu-item.swig b/layout/_macro/menu/menu-item.swig
@@ -1,7 +1,7 @@
 {% macro render(name, value) %}
-{% set itemURL = value.split('||')[0] | replace('//', '/', 'g') | trim %}
+{% set itemURL = url_for(value.split('||')[0] | trim) %}
 <li class="menu-item menu-item-{{ itemName | replace(' ', '-', 'g') }}{{ item_active(itemURL, 'menu-item-active') }}">
-  <a href="{{ url_for(itemURL) | trim }}" rel="section">
+  <a href="{{ itemURL }}" rel="section">
     {% if theme.menu_settings.icons %}{#
     #}<i class="menu-item-icon fa fa-fw fa-{{ value.split('||')[1] | trim | default('question-circle') }}"></i> <br />{#
   #}{% endif %}{#

diff --git a/layout/_partials/header.swig b/layout/_partials/header.swig
diff --git a/layout/_partials/header/brand.swig b/layout/_partials/header/brand.swig
@@ -0,0 +1,33 @@
+<div class="site-brand-wrapper">
+  <div class="site-meta {% if theme.custom_logo.enabled %}custom-logo{% endif %}">
+    {% if theme.custom_logo.image and theme.scheme === 'Muse' %}
+      <div class="site-meta-headline">
+        <a>
+          <img class="custom-logo-image" src="{{ theme.custom_logo.image }}"
+               alt="{{ config.title }}"/>
+        </a>
+      </div>
+    {% endif %}
+
+    <div class="custom-logo-site-title">
+      <a href="{{ config.root }}" class="brand" rel="start">
+        <span class="logo-line-before"><i></i></span>
+        <span class="site-title">{{ config.title }}</span>
+        <span class="logo-line-after"><i></i></span>
+      </a>
+    </div>
+      {% if theme.seo %}
+        <h1 class="site-subtitle" itemprop="description">{{ config.subtitle }}</h1>
+      {% else %}
+        <p class="site-subtitle">{{ config.subtitle }}</p>
+      {% endif %}
+  </div>
+
+  <div class="site-nav-toggle">
+    <button aria-label="{{ __('accessibility.nav_toggle') }}">
+      <span class="btn-bar"></span>
+      <span class="btn-bar"></span>
+      <span class="btn-bar"></span>
+    </button>
+  </div>
+</div>
diff --git a/layout/_partials/header/index.swig b/layout/_partials/header/index.swig
@@ -0,0 +1,10 @@
+{{ partial('_partials/header/brand.swig', {}, {cache: theme.cache.enable}) }}
+{#{% include 'brand.swig' %}#}
+{% include 'menu.swig' %}
+
+{% if theme.custom_file_path.header %}
+  {% set custom_header = '../../../../../' + theme.custom_file_path.header %}
+{% else %}
+  {% set custom_header = '../../_custom/header.swig' %}
+{% endif %}
+{% include custom_header %}
diff --git a/layout/_partials/header/menu.swig b/layout/_partials/header/menu.swig
@@ -0,0 +1,53 @@
+{% import '../../_macro/menu/menu-item.swig' as menu_item %}
+{% import '../../_macro/menu/menu-badge-1.swig' as menu_badge_1 %}
+{% import '../../_macro/menu/menu-badge-2.swig' as menu_badge_2 %}
+
+<nav class="site-nav">
+  {% if theme.menu %}
+    <ul id="menu" class="menu">
+      {% for name, path in theme.menu %}
+        {% set respath = path %}
+        {% if path == '[object Object]' %}
+          {% for subname, subpath in path %}
+            {% set itemName = subname.toLowerCase() %}
+            {% set respath = subpath %}
+              {% if itemName == 'default' %}
+                {% set itemName = name.toLowerCase() %}{#
+              #}{{ menu_item.render(name, respath) }}{#
+            #}{% endif %}
+          {% endfor %}
+        {% else %}
+          {% set itemName = name.toLowerCase() %}{#
+        #}{{ menu_badge_1.render(respath) }}{#
+      #}{% endif %}{#
+        #}{{ menu_badge_2.render(name, path) }}
+      {% endfor %}
+
+      {% set hasSearch = theme.swiftype_key || theme.algolia_search.enable || theme.tinysou_Key || theme.local_search.enable %}
+      {% if hasSearch %}
+        <li class="menu-item menu-item-search">
+          {% if theme.swiftype_key %}
+            <a href="javascript:;" class="st-search-show-outputs">
+          {% elseif theme.local_search.enable || theme.algolia_search.enable %}
+            <a href="javascript:;" class="popup-trigger">
+          {% endif %}
+            {% if theme.menu_settings.icons %}
+              <i class="menu-item-icon fa fa-search fa-fw"></i> <br />{#
+          #}{% endif %}{#
+          #}{{ __('menu.search') }}{#
+        #}</a>
+        </li>
+      {% endif %}
+    </ul>
+  {% endif %}
+
+  {% if theme.scheme === 'Muse' || theme.scheme === 'Mist' %}
+    {% include 'sub-menu.swig' %}
+  {% endif %}
+
+  {% if hasSearch %}
+    <div class="site-search">
+      {% include '../search/index.swig' %}
+    </div>
+  {% endif %}
+</nav>
diff --git a/layout/_partials/sub-menu.swig → layout/_partials/header/sub-menu.swig b/layout/_partials/sub-menu.swig → layout/_partials/header/sub-menu.swig
@@ -1,7 +1,7 @@
 {% if not is_home() && not is_post() %}
   {% if theme.menu %}
 
-    {% import '../_macro/menu/menu-item.swig' as menu_item %}
+    {% import '../../_macro/menu/menu-item.swig' as menu_item %}
 
     {# Submenu & Submenu-2 #}
     {% for name, value in theme.menu %}

diff --git a/layout/_partials/search.swig b/layout/_partials/search.swig
diff --git a/layout/_partials/search/index.swig b/layout/_partials/search/index.swig
@@ -0,0 +1,9 @@
+{% if theme.algolia_search.enable %}
+  {% include '../../_third-party/search/algolia-search/dom.swig' %}
+{% elseif theme.swiftype_key %}
+  {% include 'swiftype.swig' %}
+{% elseif theme.tinysou_Key %}
+  {% include 'tinysou.swig' %}
+{% elseif theme.local_search.enable %}
+  {% include 'localsearch.swig' %}
+{% endif %}
diff --git a/scripts/helpers.js b/scripts/helpers.js
@@ -3,11 +3,10 @@
 hexo.extend.helper.register('item_active', function(path, className) {
   var canonical = this.page.canonical_path;
   var current = this.url_for(canonical).replace('index.html', '', 'g');
-  var url = this.url_for(path);
   var result = '';
 
-  if (current.indexOf(url) !== -1) {
-    if (url !== '/' || url === current) {
+  if (current.indexOf(path) !== -1) {
+    if (path !== '/' || path === current) {
       result = ' ' + className;
     }
   }