group widget & references widget

_config.yml

@@ -182,7 +182,7 @@ layout:
   # 文章布局，参数继承自 on_page
   on_post:
     # 文章页脚，自动在每一篇文章末尾添加
-    article_footer: [copyright, donate]
+    article_footer: [references, copyright, donate]
   # 其他的页面布局暂时等于 on_list
 
 
@@ -338,6 +338,15 @@ widget:
     images:
       - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/wiki_volantis.png
       - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/wiki_volantis.png
+  # ---------------------------------------
+  # references widget
+  references:
+    class: references # is subclass of list
+    display: [desktop, mobile] # [desktop, mobile]
+    header:
+      icon: fas fa-quote-left
+      title: 参考资料
+
   # You can add your own widget here or 'blog/source/_data/widget.yml'
   # class: text, list, grid, qrcode, page, ... see more at https://volantis.js.org/
 

layout/_partial/article.ejs

@@ -9,9 +9,13 @@
             <div class='fancybox'><img src='<%- url_for(photo) %>'/></div>
           <% }) %>
           <%- post.content %>
-          <% if(theme.layout.on_post.article_footer && (page.layout == 'post')){ %>
+          <% if ((page.meta && page.meta.article_footer && page.meta.article_footer.length > 0) || (theme.layout.on_post.article_footer && (page.layout == 'post'))) { %>
             <br>
-            <%- partial('../_widget/load', {widgets: theme.layout.on_post.article_footer, where: 'article'}) %>
+            <% if (page.meta && page.meta.article_footer && page.meta.article_footer.length > 0) { %>
+              <%- partial('../_widget/load', {widgets: page.meta.article_footer, where: 'article'}) %>
+            <% } else { %>
+              <%- partial('../_widget/load', {widgets: theme.layout.on_post.article_footer, where: 'article'}) %>
+            <% } %>
           <% } %>
         </div>
         <% if(post.layout == 'post' || post.layout == 'page'){ %>

layout/_widget/group.ejs

@@ -0,0 +1,23 @@
+<%
+if ((page.layout == 'page' || page.layout == 'post') && page.group && page.group.length > 0) {
+  var rows = new Array();
+  site.posts.each(function(post){
+    if (post.title && post.path && (post.group == page.group)) {
+      rows.push({name: post.title, url: post.path, order: (post.order || 0)})
+    }
+  })
+  site.pages.each(function(post){
+    if (post.title && post.path && (post.group == page.group)) {
+      rows.push({name: post.title, url: post.path, order: (post.order || 0)})
+    }
+  })
+  rows.sort(function(a,b){
+    return a.order - b.order;
+  });
+  item.rows = rows;
+}
+%>
+
+<% if (item.rows && item.rows.length > 0) { %>
+  <%- partial('list', {item: item, where: where}) %>
+<% } %>

layout/_widget/list.ejs

@@ -1,5 +1,5 @@
 <%- partial('_pre') %>
-<section class="widget <%- item.class %> <%- page.widget_style %> <%- page.widget_platform %>">
+<section class="widget <%- item.class == 'list' ? item.class : 'list ' + item.class %> <%- page.widget_style %> <%- page.widget_platform %>">
   <%- partial('header', {item: item}) %>
   <div class='content'>
     <ul class="list entry navigation">
@@ -14,11 +14,11 @@
           id="<%= url_for(row.url).replace(/\/|%|\./g, "")?url_for(row.url).replace(/\/|%|\./g, ""):"home" %>"
           >
           <div class='name'>
-            <% if(row.img) { %>
+            <% if (row.img) { %>
               <img src="<%- row.img %>">
-            <% } else if(row.avatar) { %>
+            <% } else if (row.avatar) { %>
               <img src="<%- row.avatar %>" id="round">
-            <% } else { %>
+            <% } else if (row.icon) { %>
               <i class="<%= row.icon %> fa-fw" aria-hidden="true"></i>
             <% } %>
             <%- row.name %>

layout/_widget/references.ejs

@@ -0,0 +1,9 @@
+<%
+if (item.rows == undefined) {
+  item.rows = page.references;
+}
+%>
+
+<% if (item.rows && item.rows.length > 0) { %>
+  <%- partial('list', {item: item, where: where}) %>
+<% } %>

source/css/_layout/article.styl

@@ -258,7 +258,8 @@
     header
       padding: $gap * 0.25 .6em
       padding-bottom: 0
-      color: alpha($color-text, 85%)
+      &,a
+        color: alpha($color-text, 85%)
 
     &.copyright,&.qrcode
       background: none
@@ -269,10 +270,13 @@
         padding: 0
     width: 100%
 
+    &.list, &.related_posts
+      .content
+        padding: 0 .6em !important
     .content
       padding: 0 .6em
       margin: 0
-      ul.entry, ul.popular-posts
+      ul
         padding-left: 9px
         margin-left: $gap
         a
@@ -282,11 +286,22 @@
           padding-left: 4px
           color: $color-link
           font-weight: normal
-          &:hover,&.active,&:active
+          &:hover
             text-decoration: underline
-            border-left: none
-            background: none
             color: $color-hover
+          &:hover,&.active,&:active
+            border-left: none !important
+            background: none !important
+
+      .list
+        a
+          .name
+            display: inline
+            color: $color-link
+          &:hover
+            .name
+              text-decoration: underline
+              color: $color-hover
 
 
     &.qrcode > .content

source/css/_layout/sidebar.styl

@@ -72,8 +72,8 @@
     ul.entry, ul.popular-posts
       a
         .name
-          flex:auto
-          txt-ellipsis()
+          flex: auto
+          // txt-ellipsis()
           color: alpha($color-text, .8)
         .badge
           flex:none
@@ -204,7 +204,9 @@
       a
         font-size: $fontsize-meta
         font-weight: bold
-        line-height: 2.4em
+        line-height: 1.5
+        padding-top: 6px
+        padding-bottom: 6px
         img,i
           margin-right: 4px
         i