Add sub nav configuration

4 files changed, 54 insertions, 10 deletions

diff --git a/_config.yml b/_config.yml
index 248dda1..2e1f71c 100644
--- a/_config.yml
+++ b/_config.yml
@@ -73,6 +73,17 @@ navbar:
   - ['https://github.com/guiqiqi/chromate', 'fa fa-github', '']
   - ['/feed.rss', 'fa fa-rss', '']
 
+# Subnav configuration will show below navbar with a horizontal divider
+# Configuration format as same as previous
+# ------------------------------------------------------------
+# Sub Navbar 将会在 Navbar 下方展示并以水平线与之分割
+# 配置模式与上面类似
+subnav:
+  - ['#love', 'fa fa-heart', 'Love']
+  - ['#peace', 'fa fa-globe', 'Peace']
+  - ['#human', 'fa fa-male', 'Human']
+
+
 # Menubar and its texts
 # ------------------------------------------------------------
 # 菜单栏的地址和文字
diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
index a9d9dbd..aeaed58 100644
--- a/layout/_partial/header.ejs
+++ b/layout/_partial/header.ejs
@@ -43,7 +43,11 @@
             </p>
             <p class="subtitle is-size-6">
                 <%- config.description %>
-                <div>
+                <% if (theme.subnav) { %>
+                    <div class="container is-uppercase subnav-top">
+                <% } else { %>
+                    <div class="container is-uppercase">
+                <% } %>
                     <% for (let index in theme.navbar) { %>
                         <% 
                             const mapping = theme.navbar[index];
@@ -66,13 +70,36 @@
                         </a>
                     <% } %>
                 </div>
+                <% if (theme.subnav) { %>
+                    <div class="container is-uppercase">
+                        <div class="columns subnav-bottom">
+                            <div class="column is-10-mobile is-offset-1-mobile is-one-third is-offset-one-third" style="padding: 0%;">
+                                <% for (let index in theme.subnav) { %>
+                                    <% 
+                                        const mapping = theme.subnav[index];
+                                        const link = mapping[0];
+                                        const favicon = mapping[1];
+                                        const description = mapping[2];
+                                        let outter = link.startsWith("https://") ? true : false;
+                                    %>
+                                    <% if (outter) { %>
+                                        <a class="mr-2" href="<%= link %>" target="_blank" rel="noopener noreferrer">
+                                    <% } else { %>  
+                                        <a class="mr-2" href="<%= link %>">
+                                    <% } %>
+                                        <span class="icon-text">
+                                            <span class="icon">
+                                                <i class="<%= favicon %>"></i>
+                                            </span>
+                                            <span><%= description %></span>
+                                        </span>
+                                    </a>
+                                <% } %>
+                            </div>
+                        </div>
+                    </div>
+                <% } %>
             </p>
         </div>
     </div>
-
-    <% if (is_home()) { %>
-        <div class="hero-foot">
-
-        </div>
-    <% } %>
 </section>
\ No newline at end of file
diff --git a/source/css/style.css b/source/css/style.css
index dc68f3c..3a9430f 100644
--- a/source/css/style.css
+++ b/source/css/style.css
@@ -65,6 +65,12 @@ pre {
     background-color: transparent!important
 }
 
-.feeding :hover {
-    font-weight: normal;
+.subnav-top {
+    border-bottom: 1px solid;
+    padding-bottom: 1rem;
+    display: inline;
+}
+
+.subnav-bottom {
+    margin-top: 1.5rem !important;
 }
\ No newline at end of file
diff --git a/source/css/style.min.css b/source/css/style.min.css
index 99fd06e..d8c3a0b 100644
--- a/source/css/style.min.css
+++ b/source/css/style.min.css
@@ -1 +1 @@
-pre{background-color:none!important;padding:0!important}#mourn{filter:grayscale(1)!important;-webkit-filter:grayscale(1)!important}@media(prefers-color-scheme:dark){*{transition:backgourd-color .5s}.card{box-shadow:none!important;background-color:#121212!important}img:not([src*=".svg"]){filter:brightness(.7) contrast(1.2)}}@media screen and (max-width:1023px){.navbar-menu{box-shadow:0 8px 16px -8px rgb(10 10 10 / 10%)!important}.post-content{padding-top:0!important}.post-card{margin:0!important}}.post-podcast-player{padding-bottom:1.5rem}.post-card{margin:0 1rem 0 1rem}.navbar-brand .navbar-item:hover{background-color:inherit!important}.entry{margin-bottom:1.5rem!important;margin-top:1.5rem!important;transition:box-shadow .1s}.entry:hover{box-shadow:0 1em 2em -.125em rgb(10 10 10 / 10%),0 0 0 1px rgb(10 10 10 / 2%)}.pagination-bar{padding-left:.25rem;padding-right:.25rem}.footer{padding:1rem 1rem 1rem!important;background-color:transparent!important}.feeding :hover{font-weight:400}
\ No newline at end of file
+pre{background-color:none!important;padding:0!important}#mourn{filter:grayscale(1)!important;-webkit-filter:grayscale(1)!important}@media(prefers-color-scheme:dark){*{transition:backgourd-color .5s}.card{box-shadow:none!important;background-color:#121212!important}img:not([src*=".svg"]){filter:brightness(.7) contrast(1.2)}}@media screen and (max-width:1023px){.navbar-menu{box-shadow:0 8px 16px -8px rgb(10 10 10 / 10%)!important}.post-content{padding-top:0!important}.post-card{margin:0!important}}.post-podcast-player{padding-bottom:1.5rem}.post-card{margin:0 1rem 0 1rem}.navbar-brand .navbar-item:hover{background-color:inherit!important}.entry{margin-bottom:1.5rem!important;margin-top:1.5rem!important;transition:box-shadow .1s}.entry:hover{box-shadow:0 1em 2em -.125em rgb(10 10 10 / 10%),0 0 0 1px rgb(10 10 10 / 2%)}.pagination-bar{padding-left:.25rem;padding-right:.25rem}.footer{padding:1rem 1rem 1rem!important;background-color:transparent!important}.subnav-top{border-bottom:1px solid;padding-bottom:1rem;display:inline}.subnav-bottom{margin-top:1.6rem!important}
\ No newline at end of file