footer sitemap

_config.yml

@@ -117,6 +117,24 @@ footer:
     # - title: Comments
     #   icon: '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/social/942ebbf1a4b91.svg"/>'
     #   url: /
+  sitemap:
+    # '博客':
+    #   - '[近期](/)'
+    #   - '[分类](/)'
+    #   - '[标签](/)'
+    #   - '[归档](/)'
+    # '项目':
+    #   - '[开源库](/)'
+    #   - '[实用脚本](/)'
+    # '社交':
+    #   - '[友链](/)'
+    #   - '[留言板](/)'
+    #   - '[Spotify](/)'
+    #   - '[Unsplash](/)'
+    # '更多':
+    #   - '[关于本站](/)'
+    #   - '[GitHub](/)'
+    #   - '[GitLab](/)'
   license: '[CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)'
   source: #'[GitHub](https://github.com/xaoxuu/hexo-theme-stellar)'
 

layout/_partial/main/footer.ejs

@@ -3,18 +3,40 @@ const author = '[@' + config.author + '](' + config.url + config.root + ')';
 const using = '[' + stellar_info('name') + '](' + stellar_info('tree') + ')';
 const source = theme.footer.source;
 function layoutDiv() {
-  var wrapper = '';
+  var el = '';
-  wrapper += '<footer class="page-footer fs12"><hr><div>';
+  el += '<footer class="page-footer fs12">';
+  el += '<hr>';
+  // sitemap
+  if (theme.footer.sitemap && Object.keys(theme.footer.sitemap).length > 0) {
+    el += '<div class="sitemap">';
+    for (let group of Object.keys(theme.footer.sitemap)) {
+      let items = theme.footer.sitemap[group];
+      if (items == undefined || items.length == 0) {
+        continue;
+      }
+      el += '<div class="sitemap-group">';
+      el += '<span class="fs14">' + group + '</span>';
+      items.forEach((item, i) => {
+        el += '<a href="' + url_for(md_link(item)) + '">';
+        el += __(md_text(item));
+        el += '</a>';
+      });
+      el += '</div>';
+    }
+    el += '</div>';
+  }
+  // footer
+  el += '<div class="text">';
   if (theme.footer.license) {
-    wrapper += markdown(__('footer.license', theme.footer.license));
+    el += markdown(__('footer.license', theme.footer.license));
   }
   if (source) {
-    wrapper += markdown(__('footer.info_open_source', author, using, source));
+    el += markdown(__('footer.info_open_source', author, using, source));
   } else {
-    wrapper += markdown(__('footer.info_not_open_source', author, using));
+    el += markdown(__('footer.info_not_open_source', author, using));
   }
-  wrapper += '</div></footer>';
+  el += '</div></footer>';
-  return wrapper;
+  return el;
 }
 %>
 <%- layoutDiv() %>

source/css/_layout/partial/footer.styl

@@ -1,11 +1,38 @@
 .page-footer
   margin: 4rem 1rem 2rem
   color: var(--text-p3)
+  a
+    color: var(--text-p3)
+    &:hover
+      color: $color-hover
+
+.page-footer .sitemap
+  margin: .5rem 0 1.5rem
+  display: grid
+  grid-gap: 1rem 1rem
+  grid-auto-flow: column dense
+  overflow: scroll
+  scrollbar(0, 0)
+
+
+.page-footer .sitemap .sitemap-group
+  display: flex
+  flex-direction: column
+  align-items: flex-start
+  >span,>a
+    text-decoration: none
+    txt-ellipsis()
+  >span
+    margin: .5rem 0
+    font-weight: 500
+    color: var(--text-p1)
+  >a
+    margin: .2rem 0
+
+
+.page-footer .text
   p
     margin: 4px 0
     line-height: 1.2
   a
-    color: var(--text-p3)
     text-decoration: underline
-    &:hover
-      color: $color-hover