From 05f3ee79ce40d667d414920743b168d8c9587ecd Mon Sep 17 00:00:00 2001
From: kitian616 <kitian616@outlook.com>
Date: Sat, 12 Jan 2019 01:05:52 +0800
Subject: [PATCH] feat: add `key` setting for navigation.header and `nav_key`
 setting for page layout, resolve #127

---
 _includes/header.html                         |  6 +--
 _sass/components/_header.scss                 | 43 ++++++++++++-------
 docs/_config.dev.yml                          | 24 ++++++++---
 docs/_config.yml                              | 24 ++++++++---
 docs/_data/navigation.yml                     |  2 +
 .../1.1-brief.md                              |  0
 .../1.2-brief-info.md                         |  0
 .../2.1-item-excerpt-readmore-info.md         |  0
 .../2.2-item-cover.md                         |  0
 .../2.3-item-cover-excerpt.md                 |  0
 .../2.4-item-cover-excerpt-readmore.md        |  0
 .../2.5-item-cover-excerpt-readmore-info.md   |  0
 .../3.1-grid.md                               |  0
 .../3.2-grid-small.md                         |  0
 .../1-english.md                              |  0
 .../2-chinese-simplified.md                   |  0
 .../3-chinese-traditional.md                  |  0
 .../4-korean.md                               |  0
 docs/{_page => _sample_page}/1.1-single.md    |  0
 docs/{_page => _sample_page}/1.2-aside.md     |  0
 docs/{_page => _sample_page}/1.3-sidebar.md   |  0
 .../1.4-sidebar+asdie.md                      |  0
 ...-article-header-overlay-background-fill.md |  0
 ...article-header-overlay-background-image.md |  0
 .../2.5-article-header-cover-image.md         |  0
 ...rlay-background-image-header-background.md |  0
 ...le-header-cover-image-header-background.md |  0
 ...round-fill-immersive-translucent-header.md |  0
 ...ound-image-immersive-translucent-header.md |  0
 ...over-image-immersive-translucent-header.md |  0
 docs/samples.html                             |  6 +--
 31 files changed, 73 insertions(+), 32 deletions(-)
 rename docs/{_articles => _sample_articles}/1.1-brief.md (100%)
 rename docs/{_articles => _sample_articles}/1.2-brief-info.md (100%)
 rename docs/{_articles => _sample_articles}/2.1-item-excerpt-readmore-info.md (100%)
 rename docs/{_articles => _sample_articles}/2.2-item-cover.md (100%)
 rename docs/{_articles => _sample_articles}/2.3-item-cover-excerpt.md (100%)
 rename docs/{_articles => _sample_articles}/2.4-item-cover-excerpt-readmore.md (100%)
 rename docs/{_articles => _sample_articles}/2.5-item-cover-excerpt-readmore-info.md (100%)
 rename docs/{_articles => _sample_articles}/3.1-grid.md (100%)
 rename docs/{_articles => _sample_articles}/3.2-grid-small.md (100%)
 rename docs/{_languages => _sample_languages}/1-english.md (100%)
 rename docs/{_languages => _sample_languages}/2-chinese-simplified.md (100%)
 rename docs/{_languages => _sample_languages}/3-chinese-traditional.md (100%)
 rename docs/{_languages => _sample_languages}/4-korean.md (100%)
 rename docs/{_page => _sample_page}/1.1-single.md (100%)
 rename docs/{_page => _sample_page}/1.2-aside.md (100%)
 rename docs/{_page => _sample_page}/1.3-sidebar.md (100%)
 rename docs/{_page => _sample_page}/1.4-sidebar+asdie.md (100%)
 rename docs/{_page => _sample_page}/2.1-article-header-overlay-background-fill.md (100%)
 rename docs/{_page => _sample_page}/2.2-article-header-overlay-background-image.md (100%)
 rename docs/{_page => _sample_page}/2.5-article-header-cover-image.md (100%)
 rename docs/{_page => _sample_page}/2.7-article-header-overlay-background-image-header-background.md (100%)
 rename docs/{_page => _sample_page}/2.8-article-header-cover-image-header-background.md (100%)
 rename docs/{_page => _sample_page}/3.1-article-header-overlay-background-fill-immersive-translucent-header.md (100%)
 rename docs/{_page => _sample_page}/3.2-article-header-overlay-background-image-immersive-translucent-header.md (100%)
 rename docs/{_page => _sample_page}/3.5-article-header-cover-image-immersive-translucent-header.md (100%)

diff --git a/_includes/header.html b/_includes/header.html
index 26cf7b69136..c79d3992388 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -28,10 +28,10 @@
             {%- include snippets/get-nav-url.html path=page.url -%}
             {%- assign _page_url = __return -%}
             {%- include snippets/get-string-from-locale-config.html locale=_item.titles -%}
-            {%- if _nav_url == _page_url -%}
-              <li class="navigation__link navigation__link--active"><a href="{{ _nav_url }}">{%- if _item.title -%}{{ _item.title }}{%- else -%}{{ __return }}{%- endif -%}</a></li>
+            {%- if _nav_url == _page_url or page.nav_key and _item.key and page.nav_key == _item.key -%}
+              <li class="navigation__item navigation__item--active"><a href="{{ _nav_url }}">{%- if _item.title -%}{{ _item.title }}{%- else -%}{{ __return }}{%- endif -%}</a></li>
             {%- else -%}
-              <li class="navigation__link"><a href="{{ _nav_url }}">{%- if _item.title -%}{{ _item.title }}{%- else -%}{{ __return }}{%- endif -%}</a></li>
+              <li class="navigation__item"><a href="{{ _nav_url }}">{%- if _item.title -%}{{ _item.title }}{%- else -%}{{ __return }}{%- endif -%}</a></li>
             {%- endif -%}
           {%- endfor -%}
           {%- if site.search.provider -%}
diff --git a/_sass/components/_header.scss b/_sass/components/_header.scss
index 1590c8b4f98..857319d9a13 100644
--- a/_sass/components/_header.scss
+++ b/_sass/components/_header.scss
@@ -16,11 +16,21 @@
 .header--dark {
   @extend .text--dark;
   background: rgba(#000, .15);
+  .navigation__item--active {
+    &::after {
+      @include split-line(bottom, 4px, $text-color-theme-dark);
+    }
+  }
 }
 
 .header--light {
   @extend .text--light;
   background: rgba(#fff, .15);
+  .navigation__item--active {
+    &::after {
+      @include split-line(bottom, 4px, $text-color-theme-light);
+    }
+  }
 }
 
 .header__title {
@@ -89,21 +99,22 @@
         display: none;
       }
     }
-    .navigation__link {
-      &::after {
-        display: block;
-        margin-bottom: -4px;
-        content: "";
-        @include split-line(bottom, 4px, transparent);
-      }
-    }
-    .navigation__link--active {
-      a {
-        @include link-colors($main-color-1, $main-color-1);
-      }
-      &::after {
-        @include split-line(bottom, 4px, $main-color-1);
-      }
-    }
+  }
+}
+
+.navigation__item {
+  &::after {
+    display: block;
+    margin-bottom: -4px;
+    content: "";
+    @include split-line(bottom, 4px, transparent);
+  }
+}
+.navigation__item--active {
+  a {
+    @include link-colors($main-color-1, $main-color-1);
+  }
+  &::after {
+    @include split-line(bottom, 4px, $main-color-1);
   }
 }
\ No newline at end of file
diff --git a/docs/_config.dev.yml b/docs/_config.dev.yml
index 95f242a2be4..e8ad9ba848d 100644
--- a/docs/_config.dev.yml
+++ b/docs/_config.dev.yml
@@ -204,19 +204,21 @@ collections_dir: docs
 collections:
   docs:
     output: true
-  page:
+  sample_page:
     output: true
-  articles:
+  sample_articles:
     output: true
-  languages:
+  sample_languages:
     output: true
 
 defaults:
+  ## home
   - scope:
       path: "test"
     values:
       articles:
         excerpt_type: html
+  ## posts
   - scope:
       path: ""
       type: posts
@@ -231,20 +233,31 @@ defaults:
       show_subscribe: true
       pageview: true
       lightbox: true
+  ## samples
   - scope:
       path: ""
-      type: articles
+      type: sample_page
     values:
+      nav_key: samples
+  - scope:
+      path: ""
+      type: sample_articles
+    values:
+      nav_key: samples
       show_date: false
   - scope:
       path: ""
-      type: languages
+      type: sample_languages
     values:
       layout: article
+      nav_key: samples
+      show_date: false
+  ## docs
   - scope:
       path: "_docs/en"
     values:
       layout: article
+      nav_key: docs
       sidebar:
         nav: docs-en
       license: true
@@ -257,6 +270,7 @@ defaults:
       path: "_docs/zh"
     values:
       layout: article
+      nav_key: docs
       sidebar:
         nav: docs-zh
       license: true
diff --git a/docs/_config.yml b/docs/_config.yml
index 48c531ed87b..e1c8b9a5629 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -206,19 +206,21 @@ collections_dir: docs
 collections:
   docs:
     output: true
-  page:
+  sample_page:
     output: true
-  articles:
+  sample_articles:
     output: true
-  languages:
+  sample_languages:
     output: true
 
 defaults:
+  ## home
   - scope:
       path: "test"
     values:
       articles:
         excerpt_type: html
+  ## posts
   - scope:
       path: ""
       type: posts
@@ -233,20 +235,31 @@ defaults:
       show_subscribe: true
       pageview: true
       # lightbox: true
+  ## samples
   - scope:
       path: ""
-      type: articles
+      type: sample_page
     values:
+      nav_key: samples
+  - scope:
+      path: ""
+      type: sample_articles
+    values:
+      nav_key: samples
       show_date: false
   - scope:
       path: ""
-      type: languages
+      type: sample_languages
     values:
       layout: article
+      nav_key: samples
+      show_date: false
+  ## docs
   - scope:
       path: "_docs/en"
     values:
       layout: article
+      nav_key: docs
       sidebar:
         nav: docs-en
       license: true
@@ -259,6 +272,7 @@ defaults:
       path: "_docs/zh"
     values:
       layout: article
+      nav_key: docs
       sidebar:
         nav: docs-zh
       license: true
diff --git a/docs/_data/navigation.yml b/docs/_data/navigation.yml
index 3d658abf06a..2d5bca79d41 100644
--- a/docs/_data/navigation.yml
+++ b/docs/_data/navigation.yml
@@ -3,8 +3,10 @@ header:
     url:        /test/
   - title:      Docs
     url:        /docs/en/quick-start
+    key:        docs
   - title:      Samples
     url:        /samples.html
+    key:        samples
   - title:      Archive
     url:        /archive.html
   - title:      About
diff --git a/docs/_articles/1.1-brief.md b/docs/_sample_articles/1.1-brief.md
similarity index 100%
rename from docs/_articles/1.1-brief.md
rename to docs/_sample_articles/1.1-brief.md
diff --git a/docs/_articles/1.2-brief-info.md b/docs/_sample_articles/1.2-brief-info.md
similarity index 100%
rename from docs/_articles/1.2-brief-info.md
rename to docs/_sample_articles/1.2-brief-info.md
diff --git a/docs/_articles/2.1-item-excerpt-readmore-info.md b/docs/_sample_articles/2.1-item-excerpt-readmore-info.md
similarity index 100%
rename from docs/_articles/2.1-item-excerpt-readmore-info.md
rename to docs/_sample_articles/2.1-item-excerpt-readmore-info.md
diff --git a/docs/_articles/2.2-item-cover.md b/docs/_sample_articles/2.2-item-cover.md
similarity index 100%
rename from docs/_articles/2.2-item-cover.md
rename to docs/_sample_articles/2.2-item-cover.md
diff --git a/docs/_articles/2.3-item-cover-excerpt.md b/docs/_sample_articles/2.3-item-cover-excerpt.md
similarity index 100%
rename from docs/_articles/2.3-item-cover-excerpt.md
rename to docs/_sample_articles/2.3-item-cover-excerpt.md
diff --git a/docs/_articles/2.4-item-cover-excerpt-readmore.md b/docs/_sample_articles/2.4-item-cover-excerpt-readmore.md
similarity index 100%
rename from docs/_articles/2.4-item-cover-excerpt-readmore.md
rename to docs/_sample_articles/2.4-item-cover-excerpt-readmore.md
diff --git a/docs/_articles/2.5-item-cover-excerpt-readmore-info.md b/docs/_sample_articles/2.5-item-cover-excerpt-readmore-info.md
similarity index 100%
rename from docs/_articles/2.5-item-cover-excerpt-readmore-info.md
rename to docs/_sample_articles/2.5-item-cover-excerpt-readmore-info.md
diff --git a/docs/_articles/3.1-grid.md b/docs/_sample_articles/3.1-grid.md
similarity index 100%
rename from docs/_articles/3.1-grid.md
rename to docs/_sample_articles/3.1-grid.md
diff --git a/docs/_articles/3.2-grid-small.md b/docs/_sample_articles/3.2-grid-small.md
similarity index 100%
rename from docs/_articles/3.2-grid-small.md
rename to docs/_sample_articles/3.2-grid-small.md
diff --git a/docs/_languages/1-english.md b/docs/_sample_languages/1-english.md
similarity index 100%
rename from docs/_languages/1-english.md
rename to docs/_sample_languages/1-english.md
diff --git a/docs/_languages/2-chinese-simplified.md b/docs/_sample_languages/2-chinese-simplified.md
similarity index 100%
rename from docs/_languages/2-chinese-simplified.md
rename to docs/_sample_languages/2-chinese-simplified.md
diff --git a/docs/_languages/3-chinese-traditional.md b/docs/_sample_languages/3-chinese-traditional.md
similarity index 100%
rename from docs/_languages/3-chinese-traditional.md
rename to docs/_sample_languages/3-chinese-traditional.md
diff --git a/docs/_languages/4-korean.md b/docs/_sample_languages/4-korean.md
similarity index 100%
rename from docs/_languages/4-korean.md
rename to docs/_sample_languages/4-korean.md
diff --git a/docs/_page/1.1-single.md b/docs/_sample_page/1.1-single.md
similarity index 100%
rename from docs/_page/1.1-single.md
rename to docs/_sample_page/1.1-single.md
diff --git a/docs/_page/1.2-aside.md b/docs/_sample_page/1.2-aside.md
similarity index 100%
rename from docs/_page/1.2-aside.md
rename to docs/_sample_page/1.2-aside.md
diff --git a/docs/_page/1.3-sidebar.md b/docs/_sample_page/1.3-sidebar.md
similarity index 100%
rename from docs/_page/1.3-sidebar.md
rename to docs/_sample_page/1.3-sidebar.md
diff --git a/docs/_page/1.4-sidebar+asdie.md b/docs/_sample_page/1.4-sidebar+asdie.md
similarity index 100%
rename from docs/_page/1.4-sidebar+asdie.md
rename to docs/_sample_page/1.4-sidebar+asdie.md
diff --git a/docs/_page/2.1-article-header-overlay-background-fill.md b/docs/_sample_page/2.1-article-header-overlay-background-fill.md
similarity index 100%
rename from docs/_page/2.1-article-header-overlay-background-fill.md
rename to docs/_sample_page/2.1-article-header-overlay-background-fill.md
diff --git a/docs/_page/2.2-article-header-overlay-background-image.md b/docs/_sample_page/2.2-article-header-overlay-background-image.md
similarity index 100%
rename from docs/_page/2.2-article-header-overlay-background-image.md
rename to docs/_sample_page/2.2-article-header-overlay-background-image.md
diff --git a/docs/_page/2.5-article-header-cover-image.md b/docs/_sample_page/2.5-article-header-cover-image.md
similarity index 100%
rename from docs/_page/2.5-article-header-cover-image.md
rename to docs/_sample_page/2.5-article-header-cover-image.md
diff --git a/docs/_page/2.7-article-header-overlay-background-image-header-background.md b/docs/_sample_page/2.7-article-header-overlay-background-image-header-background.md
similarity index 100%
rename from docs/_page/2.7-article-header-overlay-background-image-header-background.md
rename to docs/_sample_page/2.7-article-header-overlay-background-image-header-background.md
diff --git a/docs/_page/2.8-article-header-cover-image-header-background.md b/docs/_sample_page/2.8-article-header-cover-image-header-background.md
similarity index 100%
rename from docs/_page/2.8-article-header-cover-image-header-background.md
rename to docs/_sample_page/2.8-article-header-cover-image-header-background.md
diff --git a/docs/_page/3.1-article-header-overlay-background-fill-immersive-translucent-header.md b/docs/_sample_page/3.1-article-header-overlay-background-fill-immersive-translucent-header.md
similarity index 100%
rename from docs/_page/3.1-article-header-overlay-background-fill-immersive-translucent-header.md
rename to docs/_sample_page/3.1-article-header-overlay-background-fill-immersive-translucent-header.md
diff --git a/docs/_page/3.2-article-header-overlay-background-image-immersive-translucent-header.md b/docs/_sample_page/3.2-article-header-overlay-background-image-immersive-translucent-header.md
similarity index 100%
rename from docs/_page/3.2-article-header-overlay-background-image-immersive-translucent-header.md
rename to docs/_sample_page/3.2-article-header-overlay-background-image-immersive-translucent-header.md
diff --git a/docs/_page/3.5-article-header-cover-image-immersive-translucent-header.md b/docs/_sample_page/3.5-article-header-cover-image-immersive-translucent-header.md
similarity index 100%
rename from docs/_page/3.5-article-header-cover-image-immersive-translucent-header.md
rename to docs/_sample_page/3.5-article-header-cover-image-immersive-translucent-header.md
diff --git a/docs/samples.html b/docs/samples.html
index 0485351416f..99459d74972 100644
--- a/docs/samples.html
+++ b/docs/samples.html
@@ -6,16 +6,16 @@
 <div class="layout--articles">
   <section class="my-5">
     <header><h2 id="page-layout">Page Layout</h2></header>
-    {%- include article-list.html articles=site.page type='grid' -%}
+    {%- include article-list.html articles=site.sample_page type='grid' -%}
   </section>
 
   <section class="my-5">
     <header><h2 id="articles-layout">Articles(Home) Layout</h2></header>
-    {%- include article-list.html articles=site.articles type='grid' -%}
+    {%- include article-list.html articles=site.sample_articles type='grid' -%}
   </section>
 
   <section class="my-5">
     <header><h2 id="languages">Languages</h2></header>
-    {%- include article-list.html articles=site.languages type='grid' size='sm' -%}
+    {%- include article-list.html articles=site.sample_languages type='grid' size='sm' -%}
   </section>
 </div>
\ No newline at end of file