css

_config.yml

@@ -28,7 +28,7 @@ sidebar:
     index: [welcome, recent, timeline] # for home/wiki/categories/tags/archives/404 pages
     page: [welcome, toc] # for pages using 'layout:page'
     post: [toc, ghrepo] # for pages using 'layout:post'
-    wiki: [toc, ghrepo, wiki_more] # for pages using 'layout:wiki'
+    wiki: [toc, ghrepo, related] # for pages using 'layout:wiki'
 
 
 ######## Main ########

_data/widgets.yml

@@ -6,8 +6,8 @@
 # ---- 内置组件，暂时不支持覆盖 ----
 ghrepo:
   layout: ghrepo
-wiki_more:
+related:
-  layout: wiki_more
+  layout: related
 
 # ---- 默认组件，可以覆盖自定义配置 ----
 # 将其覆盖设置为空，可删除一个默认组件，例如 welcome:

layout/_partial/sidebar/widgets/markdown.ejs

@@ -5,7 +5,7 @@ function layoutDiv() {
     return el;
   }
   el += '<div class="widget-wrap" id="markdown">';
-    el += '<div class="widget-header cap dis-select">';
+    el += '<div class="widget-header cap theme dis-select">';
       el += '<span class="name">' + item.title + '</span>';
     el += '</div>';
     el += '<div class="widget-body fs14">';

layout/_partial/sidebar/widgets/recent.ejs

@@ -2,7 +2,7 @@
 function layoutDiv() {
   var el = '<div class="widget-wrap" id="recent">';
   // header
-  el += '<div class="widget-header cap dis-select">';
+  el += '<div class="widget-header cap theme dis-select">';
   el += '<span class="name">' + __("meta.recent_update") + '</span>';
   if (item.rss) {
     el += '<a class="cap-action" id="rss" title="Subscribe" href="' + item.rss + '">';
@@ -25,23 +25,20 @@ function layoutDiv() {
       return p.title && p.title.length > 0;
     });
   }
-  el += '<div class="widget-body fs14">';
+  el += '<div class="widget-body related-posts fs14">';
   arr.sort("updated", -1).limit(item.limit).each(function(post) {
-    el += '<div class="more-item">';
+    el += '<a class="item title" href="' + url_for(post.link || post.path) + '">';
-    el += '<a class="title" href="' + url_for(post.link || post.path) + '">';
+    el += '<span class="title">'
     if (post.layout == 'wiki') {
-      el += '<span>';
       let proj = theme.wiki.projects[post.wiki];
       if (proj && proj.title) {
-        el += proj.title + __('symbol.colon');
+        el += proj.title + ' / ';
       } else if (post.wiki) {
-        el += post.wiki + __('symbol.colon');
+        el += post.wiki + ' / ';
       }
-      el += '</span>';
     }
-    el += post.title || post.seo_title || post.wiki;
+    el += (post.title || post.seo_title || post.wiki) + '</span>';
     el += '</a>';
-    el += '</div>';
     el += '';
   });
   el += '</div>';

layout/_partial/sidebar/widgets/related.ejs

@@ -16,21 +16,21 @@ function layoutDiv() {
   var el = '';
   if (related.length > 0) {
     el += '<div class="widget-wrap" id="related">';
-    el += '<div class="widget-header cap dis-select">';
+    el += '<div class="widget-header cap theme dis-select">';
     var title = __('btn.wiki');
     if (proj.tags && proj.tags[0]) {
       title = proj.tags[0];
     }
     el += '<span class="name">' + __('meta.more', title) + '</span>';
     el += '</div>';
-    el += '<div class="widget-body fs14">';
+    el += '<div class="widget-body related-posts">';
     related.forEach((p, i) => {
       // 同一个分组中的其它项目
-      el += '<a class="more-item wiki" href="' + url_for(p.homepage.path) + '">';
+      el += '<a class="item wiki" href="' + url_for(p.homepage.path) + '">';
-      el += p.title;
+      el += '<span class="title">' + p.title + '</span>';
-      el += '<div class="excerpt">';
+      if (p.description && p.description.length > 0) {
-      el += p.description;
+        el += '<span class="excerpt">' + p.description + '</span>';
-      el += '</div>';
+      }
       el += '</a>';
     });
     el += '</div>';

layout/_partial/sidebar/widgets/timeline.ejs

@@ -6,7 +6,7 @@ function layoutDiv() {
   }
   el += '<div class="widget-wrap" id="timeline">';
     if (item.title) {
-      el += '<div class="widget-header cap dis-select">';
+      el += '<div class="widget-header cap theme dis-select">';
       el += '<span class="name">' + item.title + '</span>';
       el += '</div>';
     }

source/css/_layout/partial/related.styl

@@ -19,48 +19,45 @@
     color: var(--text-p1)
 
 
-.related-wrap#related-posts
+
-  .related-posts
+.related-posts
-    width: 100%
+  width: 100%
-    margin: 1rem 0
+  margin: 1rem 0
-    .item
+  .item
-      line-height: 1.2
+    line-height: 1.2
-      display: block
+    display: block
-      border-left: 0
+    border-left: 0
-      &+.item
+    margin-top: 1rem
-        margin-top: 1rem
+    .title
-      &:first-child
+      color: var(--text-p1)
-        margin-top: 0
+      font-weight: 500
+      font-size: 1rem
+      trans1 color
+      position: relative
+      padding-bottom: 4px
+      &:after
+        content: ''
+        position: absolute
+        left: 0
+        width: 0
+        height: 2px
+        bottom: 0
+        border-radius: 2px
+        background: $color-hover
+        trans1 width
+    .excerpt
+      color: var(--text-p3)
+      font-size: $fs-12
+      margin-top: 0.5rem
+      display: -webkit-box
+      -webkit-box-orient: vertical
+      overflow: hidden
+      -webkit-line-clamp: 2
+    &:hover
       .title
-        color: var(--text-p1)
+        color: $color-hover
-        font-weight: 500
-        font-size: 1rem
-        trans1 color
-        position: relative
-        padding-bottom: 4px
         &:after
-          content: ''
+          width: 100%
-          position: absolute
-          left: 0
-          width: 0
-          height: 2px
-          bottom: 0
-          border-radius: 2px
-          background: $color-hover
-          trans1 width
-      .excerpt
-        color: var(--text-p3)
-        font-size: $fs-12
-        margin-top: 0.5rem
-        display: -webkit-box
-        -webkit-box-orient: vertical
-        overflow: hidden
-        -webkit-line-clamp: 2
-      &:hover
-        .title
-          color: $color-hover
-          &:after
-            width: 100%
 
 
 .related-wrap#read-next

source/css/_layout/sidebar/sidebar.styl

@@ -166,8 +166,8 @@ nav.menu
       background: var(--site-bg)
       padding-top: 2px
       z-index 1
-      color: var(--text-p3)
+      .item 
-      font-size: $fs-14
+        display: block
       >span 
         margin: 0.25rem 0
         text-align: left
@@ -195,48 +195,29 @@ nav.menu
     .widget-header+.widget-body
       margin-top: 0
 
-  .widget-wrap .widget-body
-    .more-item
-      margin: .5rem 0
-      .cap
-        margin-bottom: .25rem
   .widget-wrap#recent .widget-body
+    display: flex
+    flex-direction: column
+    align-items: flex-start
+    margin-top: 0.25rem
     a
       line-height: 1.2
-      font-weight: 500
-      color: var(--text-p2)
       font-size: $fs-13
+      margin: 0.25rem 0
+      padding: 2px 0
+      .title  
+        font-size: $fs-13
+        color: var(--text-p2)
       &:hover
         color: $color-hover
-  .widget-wrap#related .widget-body
+  .widget-wrap#related 
-    >a
+    .widget-body a
-      padding 0.5rem
+      margin-top: 0.5rem
-      display: block
+      .title 
-      line-height: 1.2
-      color: var(--text-p2)
-      font-weight: 500
-      border: 1px solid var(--block-border)
-      border-radius: $border-block
-      margin: 4px 0
-      background: var(--block)
-      div.cap
-        margin-bottom: 0.25rem
-        color: var(--text-p4)
-        display: flex
-        justify-content: space-between
-      &:hover
-        background: var(--block-hover)
-      &.wiki
         font-weight: 700
-      div.excerpt
+        font-size: $fs-14
-        margin-top: .5rem
+      .excerpt
-        color: var(--text-p3)
+        -webkit-line-clamp: 3
-        font-size: $fs-12
-        font-weight: 400
-        display: -webkit-box
-        -webkit-box-orient: vertical
-        overflow: hidden
-        -webkit-line-clamp: 5
 
 .widgets .loading-wrap
   margin: 0.5rem 0