feat(front-matter): add home_cover and post_cover settings

XPoet · Sep 20, 2023 · 10abbe2 · 10abbe2
1 parent d97aa97
commit 10abbe2
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 10 deletions.
diff --git a/layout/article-content.ejs b/layout/article-content.ejs
@@ -3,17 +3,21 @@
 
         <div class="article-content-container border-box">
 
-            <% if (page?.cover) { %>
-                <div class="article-content-top border-box">
+            <% if (page?.post_cover || page?.home_cover) { %>
+                <div class="article-content-top border-box"
+                     style="height: <%= page?.post_cover_height ? page?.post_cover_height + 'px' : '13.8rem' %>"
+                >
                     <div class="cover-article-title">
                         <%= page.title %>
                     </div>
-                    <img class="post-cover" src="<%= page.cover %>" alt="<%= page.title %>">
+                    <img class="post-cover" src="<%= page.post_cover || page?.home_cover %>"
+                         onerror="this.style.display='none'"
+                    >
                 </div>
             <% } %>
 
-            <div class="article-content-bottom border-box<%= page?.cover ? ' has-cover' : '' %>">
-                <% if (!page?.cover) { %>
+            <div class="article-content-bottom border-box<%= (page?.post_cover || page?.home_cover) ? ' has-cover' : '' %>">
+                <% if (!page?.post_cover && !page?.home_cover) { %>
                     <div class="article-title">
                         <%= page.title %>
                     </div>

diff --git a/layout/home-content.ejs b/layout/home-content.ejs
@@ -3,16 +3,18 @@
         <% page.posts.forEach(post => { %>
             <li class="home-article-item">
 
-                <% if (post?.cover) { %>
+                <% if (post?.home_cover) { %>
                     <div class="home-article-item-top border-box"
-                         style="height: <%= post?.cover_height ? post?.cover_height + 'px' : '10rem' %>"
+                         style="height: <%= post?.home_cover_height ? post?.home_cover_height + 'px' : '10rem' %>"
                     >
                         <% if (post.sticky) { %>
                             <div class="post-sticky-box cover">
                                 <i class="fas fa-thumbtack"></i><span class="sticky-name">&nbsp;<%- __('top') %></span>
                             </div>
                         <% } %>
-                        <img class="cover-img" src="<%= post.cover %>" alt="<%= post.title %>">
+                        <img class="home-cover" src="<%= post.home_cover %>"
+                             onerror="this.style.display='none'"
+                        >
                     </div>
                 <% } %>
 

diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
@@ -57,7 +57,6 @@ $spacer-padding = 2rem
       display flex
       align-items flex-end
       width 100%
-      height 13.8rem
       padding-top $spacer-padding
       padding-right $spacer-padding
       overflow hidden

diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
@@ -61,7 +61,7 @@
           height 6rem
         }
 
-        .cover-img {
+        .home-cover {
           width 100%
           height 100%
           object-fit cover