🦄 refactor: 演示站点添加自定义模板示例

MaLuns · Jan 19, 2023 · ed9e5c2 · ed9e5c2
1 parent 2abc9f5
commit ed9e5c2
Show file tree

Hide file tree

Showing 11 changed files with 114 additions and 79 deletions.
diff --git a/demo/_config.async.yml b/demo/_config.async.yml
@@ -103,6 +103,7 @@ theme:
 
 layout:
   footer: async/footer
-  page_loading: async/page_loading
+  page_loading: async/page-loading
+  post_card: async/post-card
   fixed_btn: async/fixed-btn
   header_search: async/empty
diff --git a/demo/layout/footer.pug b/demo/layout/footer.pug
@@ -1,11 +1 @@
-if is_home()
-    div
-        h5(class='trm-title-with-divider') 自定义 Footer 模板
-            span(data-number='02')
-        div(class='trm-card')
-            p 使用 pug 渲染
-            p(class='trm-mt-10') 仅在首页显示
-        include ./test.pug
-            p(class='trm-mt-10') 插入主题内置 Footer 模块
-
 != partial('_partial/footer')
diff --git a/demo/layout/page_loading.html → demo/layout/page-loading.html b/demo/layout/page_loading.html → demo/layout/page-loading.html
diff --git a/demo/layout/post-card.pug b/demo/layout/post-card.pug
@@ -0,0 +1,39 @@
+- var coverURl = post.cover ? post.cover : (post.photos && post.photos.length ? post.photos[0] : (theme.cover.type === 'img' ? theme.cover.default : false));
+- var index = 0 || postIndex
+
+mixin conver
+    a.trm-cover-frame.trm-anima-link(href=url_for(post.path), style= { width:"40%", "padding-bottom": 0  })
+        if coverURl
+            div !{swich_imgs(coverURl, { alt: "cover", class:"no-fancybox" })}
+        else 
+            div.trm-cover-date
+                div.trm-cover-day !{date(post.date, theme.datetime_foramt.post_card.cover_date)}
+                div.trm-cover-month !{date(post.date, theme.datetime_foramt.post_card.cover_date2)}
+
+if postIndex === 0 && is_home()
+    div.col-lg-12
+        include ./test.pug
+            h6.trm-mt-10 使用 pug 模块来自定义模板
+            h6.trm-mt-10 演示主题使用自定义模块区域：首页文章卡片、主题切换、查询、Footer
+
+div.col-lg-12
+    div.trm-blog-card.trm-scroll-animation(data-scroll, data-scroll-offset="40",style={ display: "flex" })   
+        if index % 2 === 0
+            +conver
+        div.trm-card-descr(style={ padding: "40px", flex: 1 })
+            div.trm-label.trm-category.trm-mb-20
+                a(href= post.categories && post.categories.length ? url_for(post.categories.data[0].path) :'#.') !{post.categories && post.categories.length ? post.categories.data[0].name :__('title.unclassified')}
+            h5
+                a.trm-anima-link(href=url_for(post.path)) !{post.title}
+            div.trm-divider.trm-mb-20.trm-mt-20
+            ul.trm-card-data.trm-label
+                li !{date(post.date,theme.datetime_foramt.post_card.date)}
+                li !{date(post.date,theme.datetime_foramt.post_card.time)}
+                if theme.wordcount.enable && theme.wordcount.count
+                    li !{wordcount(post.content)}
+                if theme.wordcount.enable && theme.wordcount.time
+                    li !{min2read(post.content)}
+        if index % 2 !== 0
+            +conver
+        if is_home() && post.sticky > 0
+            div.trm-top !{__('post.sticky')}
diff --git a/demo/layout/test.pug b/demo/layout/test.pug
@@ -1 +1,2 @@
-div(class='trm-card') 使用 include 功能
+div.trm-card
+    h6 使用 pug include 功能，加载了这段文字
diff --git a/package/hexo-theme-async/layout/_partial/page/index.ejs b/package/hexo-theme-async/layout/_partial/page/index.ejs
@@ -33,9 +33,7 @@
         </div>
     <% } %>
     <% page.posts.each(function(post,postIndex){ %>
-        <div class="col-lg-6">
-            <%- partial(theme.layout.post_card,{ post }) %>
-        </div>
+        <%- partial(theme.layout.post_card,{ post, postIndex}) %>
     <% }) %>
 </div>
 <!-- newest publications end -->

diff --git a/package/hexo-theme-async/layout/_partial/post/post-card-mini.ejs b/package/hexo-theme-async/layout/_partial/post/post-card-mini.ejs
@@ -1,19 +1,21 @@
-<div class="trm-older-publications-card trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
-    <div class="trm-older-publication">
-        <%  let coverURl = post.cover ? 
-            post.cover : ( post.photos && post.photos.length ? post.photos : theme.cover.default )
-        %>
-        <a class="trm-op-top trm-anima-link" href="<%- url_for(post.path) %>">
-            <span class="trm-op-cover">
-                <%- swich_imgs(coverURl, { alt: "cover", class:"no-fancybox" }) %>
-            </span>
-            <h6 class="trm-op-title"><%= post.title %></h6>
-        </a>
-        <div class="trm-divider trm-mb-15 trm-mt-20"></div>
-        <ul class="trm-card-data trm-label">
-            <li><%= date(post.date,theme.datetime_foramt.post_card.date) %></li>
-            <li><%= date(post.date,theme.datetime_foramt.post_card.time) %></li>
-            <li><%- post.categories && post.categories.length ? post.categories.data[0].name :__('title.unclassified')  %></li>
-        </ul>
+<div class="col-lg-6">
+    <div class="trm-older-publications-card trm-scroll-animation trm-active-el" data-scroll="" data-scroll-offset="40">
+        <div class="trm-older-publication">
+            <%  let coverURl = post.cover ? 
+                post.cover : ( post.photos && post.photos.length ? post.photos : theme.cover.default )
+            %>
+            <a class="trm-op-top trm-anima-link" href="<%- url_for(post.path) %>">
+                <span class="trm-op-cover">
+                    <%- swich_imgs(coverURl, { alt: "cover", class:"no-fancybox" }) %>
+                </span>
+                <h6 class="trm-op-title"><%= post.title %></h6>
+            </a>
+            <div class="trm-divider trm-mb-15 trm-mt-20"></div>
+            <ul class="trm-card-data trm-label">
+                <li><%= date(post.date,theme.datetime_foramt.post_card.date) %></li>
+                <li><%= date(post.date,theme.datetime_foramt.post_card.time) %></li>
+                <li><%- post.categories && post.categories.length ? post.categories.data[0].name :__('title.unclassified')  %></li>
+            </ul>
+        </div>
     </div>
 </div>
diff --git a/package/hexo-theme-async/layout/_partial/post/post-card.ejs b/package/hexo-theme-async/layout/_partial/post/post-card.ejs
@@ -1,44 +1,46 @@
-<div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
-    <a href="<%- url_for(post.path) %>" class="trm-cover-frame trm-anima-link">
-        <%  let coverURl = post.cover ? 
-            post.cover :  (
-            post.photos && post.photos.length ? 
-            post.photos[0] : 
-            ( theme.cover.type === 'img' ?  theme.cover.default : false)
-        ) %>
-        <% if(coverURl) { %>
-            <%- swich_imgs(coverURl, { alt: "cover", class:"no-fancybox" }) %>
-        <% } else { %>
-            <div class="trm-cover-date">
-                <div class="trm-cover-day"><%= date(post.date, theme.datetime_foramt.post_card.cover_date) %></div>
-                <div class="trm-cover-month"><%= date(post.date, theme.datetime_foramt.post_card.cover_date2) %></div>
-            </div>
+<div class="col-lg-6">
+    <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
+        <a href="<%- url_for(post.path) %>" class="trm-cover-frame trm-anima-link">
+            <%  let coverURl = post.cover ? 
+                post.cover :  (
+                post.photos && post.photos.length ? 
+                post.photos[0] : 
+                ( theme.cover.type === 'img' ?  theme.cover.default : false)
+            ) %>
+            <% if(coverURl) { %>
+                <%- swich_imgs(coverURl, { alt: "cover", class:"no-fancybox" }) %>
+            <% } else { %>
+                <div class="trm-cover-date">
+                    <div class="trm-cover-day"><%= date(post.date, theme.datetime_foramt.post_card.cover_date) %></div>
+                    <div class="trm-cover-month"><%= date(post.date, theme.datetime_foramt.post_card.cover_date2) %></div>
+                </div>
+            <% } %>
+        </a>
+        <% if(is_home() && post.sticky > 0) { %>
+            <div class="trm-top"><%- __('post.sticky') %></div>
         <% } %>
-    </a>
-    <% if(is_home() && post.sticky > 0) { %>
-        <div class="trm-top"><%- __('post.sticky') %></div>
-    <% } %>
-    <div class="trm-card-descr">
-        <div class="trm-label trm-category trm-mb-20">
-            <a href=" <%- post.categories && post.categories.length ? url_for(post.categories.data[0].path) :'#.' %>">
-                <%- post.categories && post.categories.length ? post.categories.data[0].name :__('title.unclassified')  %>
-            </a>
+        <div class="trm-card-descr">
+            <div class="trm-label trm-category trm-mb-20">
+                <a href=" <%- post.categories && post.categories.length ? url_for(post.categories.data[0].path) :'#.' %>">
+                    <%- post.categories && post.categories.length ? post.categories.data[0].name :__('title.unclassified')  %>
+                </a>
+            </div>
+            <h5>
+                <a href="<%- url_for(post.path) %>" class="trm-anima-link">
+                    <%= post.title %>
+                </a>
+            </h5>
+            <div class="trm-divider trm-mb-20 trm-mt-20"></div>
+            <ul class="trm-card-data trm-label">
+                <li><%= date(post.date,theme.datetime_foramt.post_card.date) %></li>
+                <li><%= date(post.date,theme.datetime_foramt.post_card.time) %></li>
+                <% if(theme.wordcount.enable && theme.wordcount.count){ %>
+                    <li><%= wordcount(post.content) %></li>
+                <% } %>
+                <% if(theme.wordcount.enable && theme.wordcount.time){ %>
+                    <li><%= min2read(post.content) %></li>
+                <% } %>
+            </ul>
         </div>
-        <h5>
-            <a href="<%- url_for(post.path) %>" class="trm-anima-link">
-                <%= post.title %>
-            </a>
-        </h5>
-        <div class="trm-divider trm-mb-20 trm-mt-20"></div>
-        <ul class="trm-card-data trm-label">
-            <li><%= date(post.date,theme.datetime_foramt.post_card.date) %></li>
-            <li><%= date(post.date,theme.datetime_foramt.post_card.time) %></li>
-            <% if(theme.wordcount.enable && theme.wordcount.count){ %>
-                <li><%= wordcount(post.content) %></li>
-            <% } %>
-            <% if(theme.wordcount.enable && theme.wordcount.time){ %>
-                <li><%= min2read(post.content) %></li>
-            <% } %>
-        </ul>
     </div>
 </div>
diff --git a/package/hexo-theme-async/layout/_partial/post/post-next-prev.ejs b/package/hexo-theme-async/layout/_partial/post/post-next-prev.ejs
@@ -7,13 +7,9 @@
         </h5>
     </div>
     <% if(page.prev && theme.post_pagination.enable){ %>
-        <div class="col-lg-6">
-            <%- theme.post_pagination.type === 'large' ? partial(theme.layout.post_card, { post: page.prev }) : partial(theme.layout.post_card_mini, { post: page.prev }) %>
-        </div>
+        <%- theme.post_pagination.type === 'large' ? partial(theme.layout.post_card, { post: page.prev }) : partial(theme.layout.post_card_mini, { post: page.prev }) %>
     <%}%>
     <% if(page.next && theme.post_pagination.enable){ %>
-        <div class="col-lg-6">
-            <%- theme.post_pagination.type === 'large' ? partial(theme.layout.post_card, { post: page.next }) : partial(theme.layout.post_card_mini, { post: page.next }) %>
-        </div>
+        <%- theme.post_pagination.type === 'large' ? partial(theme.layout.post_card, { post: page.next }) : partial(theme.layout.post_card_mini, { post: page.next }) %>
     <%}%>
 </div>
diff --git a/package/hexo-theme-async/source/css/_components/fixed-btn.less b/package/hexo-theme-async/source/css/_components/fixed-btn.less
@@ -82,7 +82,7 @@
 
     .transition-mixin();
 
-    background-image   : linear-gradient(var(--primary-weak-50), var(--primary-weak-50));
+    background-image   : var(--scroll-progress-bg-color);
     background-repeat  : no-repeat;
     background-size    : 100% 0;
     background-position: bottom;

diff --git a/package/hexo-theme-async/source/css/_variables/index.less b/package/hexo-theme-async/source/css/_variables/index.less
@@ -68,6 +68,9 @@
     --notice-outdate-bg    : #ffe6e6;
     --notice-outdate-color : #ff6666;
     --notice-outdate-border: #ff8080;
+
+    // scroll progress
+    --scroll-progress-bg-color: linear-gradient(#ffdddd, #e9ddff);
 }
 
 .dark() {
@@ -111,6 +114,9 @@
     --notice-outdate-bg    : #403131;
     --notice-outdate-color : #ff6565;
     --notice-outdate-border: #bb1e1e;
+
+    // scroll progress
+    --scroll-progress-bg-color: linear-gradient(#82df7a80, #82df7a80);
 }
 
 :root.dark {