..

_config.yml

@@ -33,4 +33,8 @@ social:
   Github: lensferno || https://github.com/lensferno
   Email: lensferno@outlook.com || mailto:lensferno@outlook.com
   Twitter: lensfrex || https://www.twitter.com
-  Bilibili: lensfrex || https://bilibili.com
+  Bilibili: lensfrex || https://bilibili.com
+
+lazyload:
+  enable: true
+  

layout/includes/_partials/post_list/post_item.pug

@@ -1,9 +1,10 @@
 mixin post_item(title, cover_url, post_date, post_summary, post_time, link)
-  .post-item
+  .post-item(onclick=`document.location='${link}'` href=link)
-    - const hasCover = cover_url !== undefined
+    - const has_cover = (cover_url !== undefined && cover_url !== null && cover_url != '')
-    img.post-cover.lazy(
+    - cover_url = has_cover ? cover_url : "/img/no_image.svg"
-      src=hasCover ? cover_url : "/img/no_image.svg"
+    img.post-cover(
-      class=hasCover ? '' : 'no-cover'
+      src=cover_url
+      class=has_cover ? '' : 'no-cover'
     )
     .post-info
       .post-title-box
@@ -12,5 +13,9 @@ mixin post_item(title, cover_url, post_date, post_summary, post_time, link)
           span.title-text= title
         span.post-date= post_date
       .post-summary-box
-        span.post-summary= post_summary
+        span.post-summary
+          each line in post_summary.split('\n')
+            if line !== ''
+              != line
+              br
         span.post-time= 'Time: ' + post_time

layout/includes/_partials/post_list/post_list.pug

@@ -0,0 +1,19 @@
+include post_item.pug
+
+.post-list
+  - const posts = page.posts
+  - const MAX_SUMMARY_LENGTH = 140
+  - posts.each(function(post) {
+      - const post_date = date(post.date, 'MM/DD/YYYY')
+      - const post_time = date(post.time === undefined ? post.date : post.time, 'HH:mm:ss')
+      - let summary = '尚未编写简介...'
+      if post.description
+        - summary = post.description 
+      if post.describe
+        - summary = post.describe 
+      else
+        - const content = (post.more !== undefined) ? post.more : post.content
+        - const strip = strip_html(content).substr(0, MAX_SUMMARY_LENGTH)
+        - summary = strip.length < MAX_SUMMARY_LENGTH ? strip : strip + '...'
+      +post_item(post.title, post.cover, post_date, trim(summary), post_time, url_for(post.path))
+  - })

layout/includes/layout.pug

@@ -12,7 +12,7 @@ html(lang=config.language)
   head
     meta(charset='UTF-8')
     title= pageTitle
-    script(src="js/lazyload.min.js") 
+    //- script(src="/js/lazysizes.min.js") 
     if theme.stylesheets !== undefined && theme.stylesheets.length > 0
       //- stylesheets list from _config.yml
       each url in theme.stylesheets
@@ -35,4 +35,10 @@ html(lang=config.language)
       footer#footer.footer 
         .footer-box
           include ./_partials/footer.pug
-        
+    //- 这这段一定要放在body结束前，否则lazyload不生效
+    script(src="/js/lazyload.min.js") 
+    script.
+      window.lazyLoad = new LazyLoad({
+        elements_selector: 'img',
+        threshold: 0
+      });

layout/index.pug

@@ -1,27 +1,10 @@
 extends includes/layout.pug
 include includes/_partials/information_card.pug
-include includes/_partials/post_list/post_item.pug
 
 block content
   .index-content
     .left-content
       include includes/_partials/left_declaration.pug
-      .post-list
+      include includes/_partials/post_list/post_list.pug
-        - const posts = page.posts
-        - posts.each(function(post) {
-            - const date = moment(post.date).format('MM/DD/YYYY')
-            - const time = moment(post.date).format('HH:mm:ss')
-            - let summary = ''
-            if post.description
-              summary = post.description 
-            else if post.more
-              - const strip = strip_html(post.more).substr(0, 128)
-              - summary = strip.length < 128 ? strip : strip + '...'
-            else 
-              - const strip = strip_html(post.content).substr(0, 128)
-              - summary = strip.length < 128 ? strip : strip + '...'
-            +post_item(post.title, post.cover, date , summary, time)
-        - })
-          
     .right-content
       +information_card({name: '全站总字数', value: totalcount(site)})

scripts/lazyload.js

@@ -0,0 +1,14 @@
+/*
+  edited from post_lazyload.js in Butterfly theme
+*/
+
+function lazyload(htmlContent) {
+  const config = hexo.theme.config.lazyload
+  if (!config.enable) return
+  const bg = hexo.theme.config.lazyload.placeholder ? urlFor(hexo.theme.config.lazyload.placeholder) : 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+  return htmlContent.replace(/(<img.*? src=)/ig, `$1 "${bg}" data-src=`)
+}
+
+hexo.extend.filter.register('after_render:html', data => {
+  return lazyload.call(this, data)
+})

source/css/_partials/post_list/post_item.styl

@@ -12,9 +12,11 @@
   &:hover
     background-color: $light
     .no-cover
+      transition: all 0.2s linear 0s !important
       filter: invert(100%)
       background-color: rgb(181, 184, 193)
     .post-cover:not(.no-cover)
+      transition: all 0.2s linear 0s !important
       filter: opacity(0.7)
     .post-title-box
       background-color: rgb(74, 71, 62)
@@ -62,7 +64,7 @@
     min-height 144px
     max-width: 256px
     max-height 144px
-    object-fit: scale-down
+    object-fit: cover
     transition: all 0.2s linear 0s
 
   .post-summary-box

source/css/common.styl

@@ -58,6 +58,13 @@ span::selection
     width: 10px;
     height: 10px;
 
+img
+  transition: filter 0.2s linear 0s !important
+  &[data-src]:not(.loaded)
+    filter: blur(10px) brightness(1) opacity(0.4)
+  &[data-src].error
+    filter: none
+
 @import '_partials/header/*'
 @import '_partials/post_list/*'
 @import '_partials/*'

source/img/no_image.svg

@@ -1,71 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256mm" height="144mm" viewBox="0 0 256 144" xmlns="http://www.w3.org/2000/svg"><path style="fill:#fff;fill-opacity:0;stroke:#000;stroke-width:2.022;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;opacity:.5" d="M1.011 1.011h253.978v141.978H1.011z"/><path style="opacity:.5;fill:#fff;fill-opacity:0;stroke:#000;stroke-width:2.04771;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1" d="M254.896.894.5 142.891"/><path style="opacity:.5;fill:#fff;fill-opacity:0;stroke:#000;stroke-width:1.99762;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1" d="m.488.872 112.09 62.683"/><path style="opacity:.5;fill:#fff;fill-opacity:0;stroke:#000;stroke-width:2.01587;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1" d="m142.226 79.979 113.273 63.144"/></svg>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="256mm"
-   height="144mm"
-   viewBox="0 0 256 144"
-   version="1.1"
-   id="svg5"
-   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
-   sodipodi:docname="no_image.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="0.74564394"
-     inkscape:cx="562.60097"
-     inkscape:cy="337.96292"
-     inkscape:window-width="1920"
-     inkscape:window-height="1017"
-     inkscape:window-x="1912"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs2">
-    <linearGradient
-       id="linearGradient931"
-       inkscape:swatch="solid">
-      <stop
-         style="stop-color:#000000;stop-opacity:1;"
-         offset="0"
-         id="stop929" />
-    </linearGradient>
-  </defs>
-  <g
-     inkscape:label="图层 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <rect
-       style="fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:2.022;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;opacity:0.5"
-       id="rect111"
-       width="253.97806"
-       height="141.97804"
-       x="1.0109739"
-       y="1.0109739" />
-    <path
-       style="opacity:0.5;fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:2.04771;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-       d="M 254.89616,0.89401565 0.49901404,142.89125"
-       id="path4014" />
-    <path
-       style="opacity:0.5;fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:1.99762;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-       d="M 0.48750591,0.8717565 112.5778,63.555181"
-       id="path7722" />
-    <path
-       style="opacity:0.5;fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:2.01587;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
-       d="M 142.22553,79.979049 255.49906,143.12286"
-       id="path7722-8" />
-  </g>
-</svg>

source/img/svg.svg

@@ -1,9 +1 @@
-<svg width="256" height="256" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1</title></g></svg>
-
- <g>
-  <title>Layer 1</title>
-  <ellipse stroke="#000" ry="32" rx="32" id="svg_2" cy="65.72726" cx="126.1818" fill="#000000"/>
-  <ellipse stroke="#000" ry="32" rx="32" id="svg_3" cy="182.72726" cx="179.1818" fill="#000000"/>
-  <ellipse stroke="#000" ry="32" rx="32" id="svg_4" cy="182.72726" cx="78.1818" fill="#000000"/>
- </g>
-</svg>

source/js/add_lazyload.js

@@ -0,0 +1,4 @@
+window.lazyLoad = new LazyLoad({
+  elements_selector: 'img',
+  threshold: 0
+});