sub menu

qidouhai · Aug 23, 2020 · 089d600 · 089d600
1 parent b3aa45c
commit 089d600
Show file tree

Hide file tree

Showing 13 changed files with 198 additions and 60 deletions.
diff --git a/_config.yml b/_config.yml
@@ -86,12 +86,14 @@ font:
 
 menu:
   home: / || home
-  #about: /about/ || user
-  #tags: /tags/ || tags
-  #categories: /categories/ || th
-  #archives: /archives/ || list-alt
-  #friends: /friends/ || heart
-  #links: /links/ || magic
+  # about: /about/ || user
+  posts:
+    default: / || feather
+    archives: /archives/ || list-alt
+    categories: /categories/ || th
+    tags: /tags/ || tags
+  # friends: /friends/ || heart
+  # links: /links/ || magic
 
 # themes/shoka/source/images/banner/***
 header_bg:

diff --git a/languages/en.yml b/languages/en.yml
@@ -13,6 +13,7 @@ title:
 
 menu:
   home: Home
+  posts: Posts
   archives: Archives
   categories: Categories
   tags: Tags

diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
@@ -13,6 +13,7 @@ title:
 
 menu:
   home: 首页
+  posts: 文章
   archives: 归档
   categories: 分类
   tags: 标签

diff --git a/layout/_partials/header.njk b/layout/_partials/header.njk
@@ -8,17 +8,7 @@
       </div>
     </div>
     <ul class="list menu">
-      {%- for name, path in theme.menu %}
-      {%- set itemURL = path.split('||')[0] | trim %}
-      {%- if not itemURL.startsWith('http') %}
-      {%- set itemURL = itemURL | replace('//', '/') %}
-      {%- endif %}
-      {%- set menuIcon = '<i class="ic i-' + path.split('||')[1] | trim + '"></i>' %}
-      {%- set menuText = __('menu.' + name) | replace('menu.', '') %}
-      <li class="item">
-        {{ _url(itemURL, menuIcon + menuText, {rel: 'section'}) }}
-      </li>
-      {%- endfor %}
+      {{ partial('_partials/sidebar/menu.njk', {}, {cache: true}) }}
     </ul>
     <div class="right menu">
       <div class="theme-btn">
@@ -73,9 +63,9 @@
   </div>
 </div>
 <div class="tool">
-  <div class="player"></div>
-  <div class="chat"><i class="ic i-comments"></i></div>
-  <div class="back-to-top">
+  <div class="item player"></div>
+  <div class="item chat"><i class="ic i-comments"></i></div>
+  <div class="item back-to-top">
     <i class="ic i-arrow-up"></i>
     <span>0%</span>
   </div>

diff --git a/layout/_partials/sidebar/menu.njk b/layout/_partials/sidebar/menu.njk
@@ -0,0 +1,33 @@
+{% macro item(name, path, parent) %}
+  {%- set path = path.split('||') %}
+  {%- set itemURL = path[0] | trim %}
+  {%- if not itemURL.startsWith('http') %}
+    {%- set itemURL = itemURL | replace('//', '/') %}
+  {%- endif %}
+  {%- set menuIcon = '<i class="ic i-' + path[1] | trim + '"></i>' %}
+  {%- set menuText = __('menu.' + name) | replace('menu.', '') %}
+  {%- if parent %}
+  <li class="item">
+    <a href="javascript:void(0);">{{menuIcon + menuText}}</a>
+    <ul class="sub menu">
+  {%- else %}
+  <li class="item">
+    {{ _url(itemURL, menuIcon + menuText, {rel: 'section'}) }}
+  </li>
+  {%- endif %}
+{% endmacro %}
+
+{%- for name, value in theme.menu %}
+  {%- if value == '[object Object]' %}
+    {%- for subname, subvalue in value %}
+      {%- if subname == 'default' %}
+        {{ item(name, subvalue, true) }}
+      {%- else %}
+        {{ item(subname, subvalue) }}
+      {%- endif %}
+    {%- endfor %}
+  </ul>
+  {%- else %}
+    {{ item(name, value) }}
+  {%- endif %}
+{%- endfor %}
diff --git a/layout/_partials/sidebar/overview.njk b/layout/_partials/sidebar/overview.njk
@@ -8,22 +8,32 @@
 <nav class="state">
   {%- if config.archive_dir != '/' and site.posts.length > 0 %}
     <div class="item posts">
-      <span class="count">{{ site.posts.length }}</span>
-      <span class="name">{{ __('state.posts') }}</span>
+      {%- if theme.menu.archives %}
+        <a href="{{ url_for(theme.menu.archives.split('||')[0] | trim) }}">
+      {% else %}
+        <a href="{{ url_for(config.archive_dir + '/') }}">
+      {%- endif %}
+        <span class="count">{{ site.posts.length }}</span>
+        <span class="name">{{ __('state.posts') }}</span>
+      </a>
     </div>
   {%- endif %}
 
   {%- if site.categories.length > 0 %}
     <div class="item categories">
+      {%- if theme.page.categories %}<a href="{{ url_for(theme.page.categories) + '/' }}">{%- endif %}
       <span class="count">{{ site.categories.length }}</span>
       <span class="name">{{ __('state.categories') }}</span>
+      {%- if theme.page.categories %}</a>{%- endif %}
     </div>
   {%- endif %}
 
   {%- if site.tags.length > 0 %}
     <div class="item tags">
+      {%- if theme.page.tags %}<a href="{{ url_for(theme.page.tags) + '/' }}">{%- endif %}
       <span class="count">{{ site.tags.length }}</span>
       <span class="name">{{ __('state.tags') }}</span>
+      {%- if theme.page.tags %}</a>{%- endif %}
     </div>
   {%- endif %}
 </nav>
@@ -36,17 +46,6 @@
   {%- endfor %}
 </div>
 
-
 <ul class="menu">
-  {%- for name, path in theme.menu %}
-    {%- set itemURL = path.split('||')[0] | trim %}
-    {%- if not itemURL.startsWith('http') %}
-      {%- set itemURL = itemURL | replace('//', '/') %}
-    {%- endif %}
-    {%- set menuIcon = '<i class="ic i-' + path.split('||')[1] | trim + '"></i>' %}
-    {%- set menuText = __('menu.' + name) | replace('menu.', '') %}
-    <li class="item">
-      {{ _url(itemURL, menuIcon + menuText, {rel: 'section'}) }}
-    </li>
-    {%- endfor %}
+  {{ partial('_partials/sidebar/menu.njk', {}, {cache: true}) }}
 </ul>
diff --git a/source/css/outline/header/header.styl b/source/css/outline/header/header.styl
@@ -58,6 +58,7 @@ $animes = 0;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.2);
       z-index: $zindex-1;
+      the-transition();
     }
   }
 

diff --git a/source/css/outline/header/menu.styl b/source/css/outline/header/menu.styl
@@ -7,15 +7,12 @@ header .list.menu {
 
   .item {
     display: inline-block;
+    position: relative;
 
-    margin: 0 10px;
+    padding: 0 10px;
 
     +mobile() {
       display: none;
-
-      &.menu-item-search {
-        display: none;
-      }
     }
 
     a, span.exturl {
@@ -49,6 +46,66 @@ header .list.menu {
     &.active a:hover {
       opacity: 1;
     }
+
+    .sub {
+      display: none;
+      position: absolute;
+      margin-top: 8px;
+      padding: 0;
+      width: max-content;
+      background-color: var(--grey-1);
+      box-shadow: 0 5px 20px -4px var(--grey-9-a1);
+      animation: slideUpIn 0.3s 0.1s ease both;
+      border-radius: 10px 0;
+
+      &::before {
+        position: absolute;
+        top: -20px;
+        left: 0;
+        width: 100%;
+        height: 40px;
+        content: '';
+      }
+
+      &:hover {
+        display: block;
+      }
+
+      .item {
+        list-style: none;
+        display: block;
+
+        &:first-child{
+          border-radius: 10px 0 0 0;
+        }
+
+        &:last-child{
+          border-radius: 0 0 10px 0
+        }
+
+        a {
+          display: inline-block;
+          padding: 0.3rem 0.7rem;
+          width: 100%;
+          color: var(--text-color);
+          text-shadow: none;
+        }
+
+        &:hover, &.active {
+          background: linear-gradient(to right,var(--color-pink) 0,var(--color-orange) 100%);
+          a {
+            color: var(--grey-0);
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    &:hover {
+      .sub {
+        display: block;
+      }
+    }
   }
 }
 

diff --git a/source/css/outline/header/tool.styl b/source/css/outline/header/tool.styl
@@ -4,7 +4,7 @@
   top: 300px;
   z-index: $zindex-2;
 
-  > div {
+  .item {
     display: none;
     width: 30px;
     height: 30px;
@@ -55,21 +55,32 @@
     }
   }
 
+
   .play-list {
     position: fixed;
     display: none;
     bottom: 0;
     right: 45px;
-    min-width: 260px;
+    width: auto;
     z-index: $zindex-2;
-    padding: 10px 0;
     border-radius: 10px;
     background: var(--grey-1);
     color: var(--text-color);
-    font-size: $font-size-smaller;
+    font-size: $font-size-base;
     text-shadow: none;
+    text-align: left;
     shadow-box();
 
+    ul {
+      font-size: $font-size-smaller;
+      padding: 5px 0;
+      margin: 0px;
+      min-width: 260px;
+      max-width: 300px;
+      max-height: 300px;
+      overflow-x: scroll;
+    }
+
     li {
       padding: 5px 15px 5px 25px;
       cursor: pointer;
@@ -120,7 +131,7 @@
     top: auto;
     bottom: 0px;
 
-    > div {
+    .item {
       display: flex;
       background: var(--color-red);
       margin-top: 2px;
@@ -130,13 +141,15 @@
     .player {
       font-size: $font-size-base;
       flex-direction: column-reverse;
+
       > div+div {
         margin-right: 0;
       }
 
       .music {
         display: block;
       }
+
     }
 
     .play-list {

diff --git a/source/css/outline/sidebar/menu.styl b/source/css/outline/sidebar/menu.styl
@@ -17,9 +17,19 @@
       line-height: 3;
     }
 
+    .sub {
+      display: none;
+      padding: 0;
+      animation: slideUpIn 0.3s 0.1s ease both;
+    }
+
     &:hover {
       background-color: rgba(0,0,0,.1);
       color: inherit;
+
+      .sub {
+        display: block;
+      }
     }
 
     i {
@@ -35,5 +45,15 @@
       }
     }
 
+
+    &.expand {
+      background-color: rgba(0,0,0,.05);
+
+      .sub {
+        display: block;
+      }
+
+    }
+
   }
 }
diff --git a/source/css/scaffolding/animate.styl b/source/css/scaffolding/animate.styl
@@ -129,3 +129,14 @@
     }
 }
 
+@keyframes slideUpIn {
+    0% {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+}
diff --git a/source/css/scaffolding/iconfont.styl b/source/css/scaffolding/iconfont.styl
@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'ic';  /* project id 1832207 */
-  src: url('//at.alicdn.com/t/font_1832207_3mdvzdz3rco.eot');
-  src: url('//at.alicdn.com/t/font_1832207_3mdvzdz3rco.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_1832207_3mdvzdz3rco.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_1832207_3mdvzdz3rco.woff') format('woff'),
-  url('//at.alicdn.com/t/font_1832207_3mdvzdz3rco.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_1832207_3mdvzdz3rco.svg#ic') format('svg');
+  src: url('//at.alicdn.com/t/font_1832207_cg9i3mmodsj.eot');
+  src: url('//at.alicdn.com/t/font_1832207_cg9i3mmodsj.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_1832207_cg9i3mmodsj.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_1832207_cg9i3mmodsj.woff') format('woff'),
+  url('//at.alicdn.com/t/font_1832207_cg9i3mmodsj.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_1832207_cg9i3mmodsj.svg#ic') format('svg');
 }
 
 .ic {
@@ -27,6 +27,10 @@
   vertical-align: -.0667em;
 }
 
+.i-feather:before {
+  content: "\efbd";
+}
+
 .i-music:before {
   content: "\f059";
 }