优化 wiki 侧边栏

languages/en.yml

@@ -3,7 +3,7 @@ btn:
   blog: Blog
   wiki: Wiki
   recent_publish: Recent
-  all_wiki: All
+  all_wiki: All Products
   category: Category
   categories: Categories
   tag: Tag

layout/_partial/sidebar/header.ejs

@@ -1,6 +1,7 @@
 <%
 function layoutMainMenu() {
   var el = '';
+  el += partial('logo');
   el += '<nav class="menu dis-select">'
   for (let id of Object.keys(theme.sidebar.menu)) {
     let item = theme.sidebar.menu[id];
@@ -18,8 +19,26 @@ function layoutMainMenu() {
   el += '</nav>';
   return el;
 }
+function layoutWikiMenu() {
+  var el = '';
+  el += partial('logo');
+  return el;
+}
+function layoutDiv() {
+  var el = '';
+  el += '<header class="header';
+  if (where == 'main') {
+    el += ' mobile-only';
+  }
+  el += '">';
+  if (page.layout === 'wiki') {
+    el += layoutWikiMenu();
+  } else {
+    el += layoutMainMenu();
+  }
+  el += '</header>';
+  return el;
+}
 %>
-<header class='header<%- where == "main" ? " mobile-only" : "" %>'>
+
-  <%- partial('logo') %>
+<%- layoutDiv() %>
-  <%- layoutMainMenu() %>
-</header>

layout/_partial/sidebar/logo.ejs

@@ -1,15 +1,51 @@
-<div class='logo-wrap'>
+<%
-  <% if (md_text(theme.sidebar.logo.avatar)) { %>
+var wiki;
-    <a class='avatar' href='<%- url_for(md_link(theme.sidebar.logo.avatar) || "/") %>'>
+if (page.layout === 'wiki') {
-      <% if (theme.style.animated_avatar.animate) { %>
+  site.pages.filter(function (p) {
-        <div class='bg' style='opacity:0;background-image:url("<%- theme.style.animated_avatar.background %>");'></div>
+    return p.layout == 'wiki' && p.wiki == page.wiki && p.description
-      <% } %>
+  }).limit(1).each(function(p) {
-      <img no-lazy class='avatar' src='<%- md_text(theme.sidebar.logo.avatar) %>'/>
+    wiki = p;
-    </a>
+  });
-  <% } %>
+}
-  <% if (md_text(theme.sidebar.logo.title)) { %>
+
-    <a class='title' href='<%- url_for(md_link(theme.sidebar.logo.title) || "/") %>'>
+function layoutDiv() {
-      <%- md_text(theme.sidebar.logo.title) %>
+  var el = '';
-    </a>
+  if (page.layout === 'wiki') {
-  <% } %>
+    el += '<div class="logo-wrap wiki">';
-</div>
+    // all products
+    el += '<a style="filter: grayscale(100%)" class="wiki-home cap" href="' + url_for(config.wiki_dir) + '">';
+    el += '<img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/arrow/f049bbd4e88ec.svg"/>';
+    el += __('btn.all_wiki');
+    el += '</a>';
+    // this product
+    if (wiki === undefined) {
+      if (page.menu_id && theme.sidebar.menu[page.menu_id] && md_link(theme.sidebar.menu[page.menu_id])) {
+        wiki = new Object();
+        wiki.path = md_link(theme.sidebar.menu[page.menu_id]);
+        wiki.wiki = __(md_text(theme.sidebar.menu[page.menu_id]));
+      }
+    }
+    if (wiki !== undefined) {
+      el += '<a class="title" href="' + url_for(wiki.path) + '">';
+      el += wiki.wiki;
+      el += '</a>';
+    }
+  } else {
+    el += '<div class="logo-wrap">';
+    if (md_text(theme.sidebar.logo.avatar)) {
+      el += '<a class="avatar" href="' + url_for(md_link(theme.sidebar.logo.avatar) || "/") + '">';
+      el += '<img no-lazy class="avatar" src="' + md_text(theme.sidebar.logo.avatar) + '">';
+      el += '</a>';
+    }
+    if (md_text(theme.sidebar.logo.title)) {
+      el += '<a class="title" href="' + url_for(md_link(theme.sidebar.logo.title) || "/") + '">';
+      el += md_text(theme.sidebar.logo.title);
+      el += '</a>';
+    }
+  }
+  el += '</div>';
+  return el;
+}
+%>
+
+<%- layoutDiv() %>

layout/_partial/sidebar/widgets/toc.ejs

@@ -25,15 +25,13 @@ function layoutDiv(fallback) {
   if (t.length > 0) {
     el += '<div class="widget-wrap" id="toc">';
     el += '<div class="widget-header h4 dis-select">';
-    el += '<span class="name">';
     if (page.toc_title) {
-        el += page.toc_title;
+      el += '<span class="name">' + page.toc_title + '</span>';
     } else if (t == 'wiki') {
-        el += page.wiki || item.wiki;
+      el += '';
     } else {
-        el += __("meta.toc");
+      el += '<span class="name">' + __("meta.toc") + '</span>';
     }
-    el += '</span>';
     el += '</div>';
     el += '<div class="widget-body fs14 ' + t + '">';
     if (page.layout == "wiki" && page.wiki) {

layout/_partial/sidebar/widgets/wiki_more.ejs

@@ -1,28 +1,41 @@
-<% if (page.layout == 'wiki') { %>
+<%
-  <% site.pages.filter(function (p) { %>
+function layoutDiv() {
-    <% return p.layout == 'index' && p.title && p.wiki && p.wiki.includes(page.wiki) %>
+  if (page.layout !== "wiki") {
-  <% }).limit(1).each(function(current_group) { %>
+    return '';
-    <% if (current_group.wiki.length > 1) { %>
+  }
-      <div class='widget-wrap' id='related'>
+  var current_group;
-        <div class='widget-header h4 dis-select'>
+  site.pages.filter(function (p) {
-          <span class='name'>更多<%- current_group.title %></span>
+    return p.layout == "index" && p.title && p.wiki && p.wiki.includes(page.wiki)
-        </div>
+  }).limit(1).each(function(p) {
-        <div class='widget-body fs14'>
+    current_group = p;
-          <% current_group.wiki.forEach((wiki, i) => { %>
+  });
-            <% site.pages.filter(function (p) { %>
+  if (current_group === undefined || current_group.wiki.length < 1) {
-              <% return p.wiki == wiki && p.wiki != page.wiki && p.description %>
+    return '';
-            <% }).each(function(post) { %>
+  }
-              <% if (post.wiki || post.title) { %>
+  var el = '';
-                <div class='post-title'>
+  el += '<div class="widget-wrap" id="related">';
-                  <a href="<%= url_for(post.link || post.path) %>">
+  el += '<div class="widget-header h4 dis-select">';
-                    <%- post.wiki || post.title %>
+  el += '<span class="name">更多' + current_group.title + '</span>';
-                  </a>
+  el += '</div>';
-                </div>
+  el += '<div class="widget-body fs14">';
-              <% } %>
+  current_group.wiki.forEach((wiki, i) => {
-            <% }); %>
+    site.pages.filter(function (p) {
-          <% }); %>
+      return p.wiki == wiki && p.wiki != page.wiki && p.description
-        </div>
+    }).each(function(post) {
-      </div>
+      if (post.wiki || post.title) {
-    <% } %>
+        el += '<div class="line"></div>'
-  <% }); %>
+        el += '<a class="reveal wiki" href="' + url_for(post.link || post.path) + '">';
-<% } %>
+        el += post.wiki || post.title;
+        el += '<div class="excerpt">';
+        el += post.description;
+        el += '</div>';
+        el += '</a>';
+      }
+    });
+  });
+  el += '</div>';
+  el += '</div>';
+  return el;
+}
+%>
+<%- layoutDiv() %>

source/css/_layout/md.styl

@@ -78,7 +78,7 @@ article.md code
   font-size: 85%
   background: var(--block)
   padding: .2em .4em
-  border-radius: 2px
+  border-radius: 4px
 article.md pre
   -webkit-font-smoothing: auto
   -moz-osx-font-smoothing: auto

source/css/_layout/partial/navbar.styl

@@ -23,7 +23,6 @@ nav.cap
     &.active, &:hover
       background: var(--block-hover)
       color: var(--text-p1)
-      box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1)
 
 
 @media screen and (max-width: $device-tablet)

source/css/_layout/partial/paginator.styl

@@ -18,9 +18,9 @@
     color: var(--text-p3)
     padding: 1rem
     line-height: 0
+    filter: grayscale(100%)
     img
       height: 1rem
-      filter: grayscale(100%)
     &.disable
       pointer-events: none
       opacity: 0.25
@@ -30,5 +30,4 @@
       border-left: 1px solid var(--block-border)
   a.paginator:hover
     background: var(--card)
-    img
+    filter: unset
-      filter: grayscale(0%)

source/css/_layout/sidebar/footer.styl

@@ -20,7 +20,7 @@
     &:hover
       color: $color-hover
       z-index: 1
-      filter: grayscale(0%)
+      filter: unset
       transform: translateY(-1px)
       background: linear-gradient(145deg, #ddd, #fff)
       box-shadow: 2px 4px 8px #ddd, -2px -4px 8px #fff

source/css/_layout/sidebar/sidebar.styl

@@ -9,7 +9,7 @@
     height: "calc(100% - 2 * %s)" % var(--gap-l)
 
 .logo-wrap
-  margin: 1rem 0
+  margin: 1rem 0 .5rem
   display: flex
   align-items: center
   color: var(--text-p0)
@@ -59,8 +59,6 @@
           animation: spin infinite 1s
           animation-timing-function: linear
 
-
-
   .title
     font-size: 1.75rem
     font-weight: 900
@@ -68,8 +66,23 @@
     line-height: 1;
     font-family: $ff-logo
   
+
+.logo-wrap.wiki
+  flex-direction: column
+  align-items: flex-start
+  a.wiki-home
+    margin-bottom: .5rem
+    color: var(--text-p2)
+    img 
+      height: .9em
+      margin-right: .5rem
+    &:hover
+      color: $color-hover
+      filter: unset !important
+
+
 nav.menu
-  margin-top: 0
+  margin: 1rem 0 .5rem
   background: var(--block)
   border-radius: 6px
   display: flex
@@ -120,6 +133,8 @@ nav.menu
       background: var(--site-bg)
       padding: 2px 0
       z-index 1
+      &:empty
+        display: none
       .cap-action
         hover-block 4px 4px
         line-height: 0
@@ -140,7 +155,7 @@ nav.menu
         margin-bottom: 0.5em
         >a:hover
           text-decoration: underline
-  .widget-wrap#recent .widget-body
+  .widget-wrap#recent .widget-body, .widget-wrap#related .widget-body
     border: 1px solid var(--block-border)
     border-radius: $border-block
     background: var(--block)
@@ -163,4 +178,15 @@ nav.menu
       &:hover
         color: $color-hover
         background: var(--card)
+      &.wiki 
+        font-weight: 700
+      div.excerpt
+        margin-top: .5rem
+        color: var(--text-p3)
+        font-size: $fs-12
+        font-weight: 400
+        display: -webkit-box
+        -webkit-box-orient: vertical
+        overflow: hidden
+        -webkit-line-clamp: 3
 

source/css/_layout/sidebar/toc.styl

@@ -65,6 +65,8 @@
     border-bottom-right-radius: 4px
     font-size: $fs-12
     font-weight: 500
+    position sticky
+    top: 0
     &.active
       color: var(--text-p2)
       font-size: $fs-14