优化封面

layout/_partial/main/post_list/post_card.ejs

@@ -2,6 +2,38 @@
 function div_default() {
   var el = '';
   el += '<article class="md">';
+
+  // 封面
+  if (post.cover || theme.article.auto_cover) {
+    var cover_url;
+    if (post.cover != undefined) {
+      if (post.cover.includes('/')) {
+        cover_url = post.cover;
+      } else {
+        cover_url = 'https://source.unsplash.com/1280x640/?' + post.cover;
+      }
+    } else {
+      // 自动以 tags 作为关键词搜索封面
+      if (post.tags) {
+        var params = '';
+        post.tags.reverse().forEach((tag, i) => {
+          if (i > 0) {
+            params += ',';
+          }
+          params += tag.name;
+        });
+        cover_url = 'https://source.unsplash.com/1280x640/?' + params;
+      } else {
+        cover_url = 'https://source.unsplash.com/random/1280x640';
+      }
+    }
+    if (cover_url) {
+      el += '<div class="post-cover">';
+      el += '<img src="' + cover_url + '"/>';
+      el += '</div>';
+    }
+  }
+
   // 标题
   el += '<h2 class="post-title">';
   el += (post.title || post.seo_title) ? (post.title || post.seo_title) : date(post.date, config.date_format);
@@ -43,10 +75,10 @@ function div_default() {
       }
     }
   }
-  el += '</div>';
   if (post.pin) {
     el += '<span class="pin"><img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/badge/3279dd441df8b.svg"/></span>';
   }
+  el += '</div>';
   el += '</article>';
   return el;
 }
@@ -54,22 +86,30 @@ function div_photo() {
   var el = '';
   el += '<div class="cover">';
   el += '<img src="' + post.cover + '"/>';
-  el += '<div class="meta cap">';
+  if (post.cover_info) {
-  el += '<span class="cap" id="post-meta">';
+    el += '<div class="cover-info"';
-  el += __("meta.created") + '&nbsp;' + '<time datetime="' + date_xml(post.date) + '">' + date(post.date, config.date_format) + '</time>';
+    if (post.cover_info.meta) {
-  el += '</span>';
+      el += 'position="top">';
-  el += '</div>';
+    } else {
+      el += 'position="bottom">';
+    }
+    if (post.cover_info.meta) {
+      el += '<div class="cap">' + post.cover_info.meta + '</div>';
+    }
+    if (post.cover_info.title) {
+      el += '<div class="title">' + post.cover_info.title + '</div>';
+    }
+    if (post.cover_info.subtitle) {
+      el += '<div class="cap">' + post.cover_info.subtitle + '</div>';
+    }
     el += '</div>';
 
-  el += '<article class="md">';
+  }
-  el += '<h2 class="post-title">';
+  el += '</div>';
-  el += post.title;
-  el += '</h2>';
-  el += '</article>';
   return el;
 }
 function div() {
-  if (post.cover && post.cover.length > 0) {
+  if (post.cover && post.cover.length > 0 && post.cover_info != undefined) {
     return div_photo();
   }
   return div_default();

layout/index.ejs

@@ -13,7 +13,7 @@ if (page.title && page.wiki) {
 function layout_post_card(layout, post, content) {
   var el = '';
   var layout = layout;
-  if (layout == 'post' && post.cover != undefined) {
+  if (layout == 'post' && post.cover != undefined && post.cover_info != undefined) {
     layout += ' photo';
   }
   el += '<a class="post-card ' + layout + ' ' + scrollreveal() + '" href="' + url_for(post.link || post.path) + '">';

source/css/_layout/list.styl

@@ -22,6 +22,7 @@
     flex-wrap: wrap
     align-items: center
     margin: .5rem 0
+    line-height: 1.5
     span+span
       margin-left: 0.5rem
     span.pin
@@ -34,18 +35,37 @@
 
 
 // common article
-.post-list article
+.post-list article.md
   padding: 1rem
+  p
+    font-size: $fs-14
+    color: var(--text-p2)
 
 // posts
-.post-list .post-card
+.post-list .post-card .post-cover
-  .post-cover
   overflow: hidden
-    position: absolute
+  width: 'calc(100% + 2 * %s)' % 1rem
-    width: 100%
   border-radius: 0
+  margin-left: -1rem
+  margin-top: -1rem
+  margin-right: -1rem
   &:not(.lazy)
     trans1: transform 1s
+  img
+    object-fit: cover
+    width: 100%
+    border-radius: 0
+    height: 280px
+    @media screen and (max-width: 900px)
+      height: 240px
+    @media screen and (max-width: $device-tablet)
+      height: 280px
+    @media screen and (max-width: $device-mobile)
+      height: 240px
+    @media screen and (max-width: $device-mobile-425)
+      height: 220px
+    @media screen and (max-width: $device-mobile-375)
+      height: 180px
 
 .post-list .post-card.post.photo
   .cover
@@ -53,16 +73,25 @@
     line-height: 0
     img
       width: 100%
-    .meta
+    .cover-info
-      margin: 0 1rem
+      padding: 1rem
       position: absolute
-      line-height: 1
+      line-height: 1.2
-      bottom: 1rem
       width: 'calc(100% - %s * 2)' % 1rem
-      justify-content: flex-end
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
+      color: white
+      &[position=top]
+        top: 0
+        background-image: linear-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.2),rgba(0,0,0,0))
+      &[position=bottom]
+        bottom: 0
+        background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0.25))
       .cap
         color: white
+      .title
+        font-weight: 500
+        font-size: $fs-h3
+        margin: 4px 0
   h2
     margin: .25rem 0
     font-size: $fs-h4