延遲載入瀑布流文章列表模式

 
安裝這個小工具之後，將會改變你原來的分頁瀏覽模式
下拉捲軸時 ~ 會延遲加載文章摘要，以瀑布流文章列表模式瀏覽

這種沒分頁的瀏覽模式，其優點是，初始只要先預載2、3篇摘要，以加快下載的速度，其後、滾動捲軸延續加載文章摘要，直到最後一篇文章。


以下為安裝說明 :


進入 >> 後台管理 >> 版面配置 >> 新增一個「HTML/JavaScript」小工具

複製以下的樣式碼，填入內容裡 >> 最後按下儲存 ~ OK

在下面的文字框內點一下，複製 程式碼：
<script type="text/javascript"> if(location.href == location.origin+"/") { const Dom =document; if (typeof jQuery == 'undefined') { let load_js = Dom.createElement('script'); load_js.setAttribute("type", "text/javascript") load_js.src= "https://ajax.googleapis.com/ajax/libs/jquery/3.6.2/jquery.min.js"; Dom.head.appendChild(load_js); } window.addEventListener("load", (e) =>{ const count =2; // 每次加載文章篇數 const P_width =200; // 相片的寬度 const txt_count =100; // 摘要的文字數 const feedUrl = 'https://' + window.location.hostname; let Point = Dom.querySelectorAll(".blog-posts article").length +1; let pg = Dom.getElementById('blog-pager') ; let Fz = true; pg.style.visibility='hidden'; const addList = (entry, observer) => { if (entry[0].isIntersecting && Fz) { Fz = false; $.ajax({ url: feedUrl + '/feeds/posts/summary?alt=json-in-script&max-results='+ count +'&start-index=' + Point, type: 'get', dataType: 'jsonp', success: xson, error: function() { consonle.log('系統異常')} }); }} function xson(data) { let tent = data.feed.entry, temp=''; if (Point >= data.feed.openSearch$totalResults.$t) { observer.unobserve(pg); } if (tent == undefined) { return 0;} for ( i in tent) { temp='<div class="post-outer"><div class="post"><h3 class="post-title entry-title"> '; temp += '<a href="'+ tent[i].link[4].href+ '">'+ tent[i].title.$t +'</a></h3>'; temp += '<div class="post-header"><div class="post-header-line-1"><span class="byline post-timestamp"><a class="timestamp-link" href="'; temp += tent[i].link[4].href+ '"rel="bookmark" title="permanent link"><time class="published">'; temp += tent[i].published.$t.replace(/[T].*/,"") + '</time></a></span></div></div><div class="container post-body entry-content">'; temp +='<div class="snippet-thumbnail"><img src="' + tent[i].media$thumbnail.url.replace(/(=s|\/s)72/, "$1"+P_width)+'" /></div>'; temp +='<div class="post-snippet snippet-container r-snippet-container"><div class="snippet-item r-snippetized">'; temp += tent[i].summary.$t.substr(0,txt_count) + '</div></div></div><div class="post-bottom"><div class="post-footer float-container">'; temp += '<div class="post-footer-line post-footer-line-1"><span class="byline post-comment-link container">'; temp +='<a class="comment-link" href="' + tent[i].link[4].href+ '#comments"><svg class="svg-icon-24 touch-icon">' ; temp +='<use xlink:href="/responsive/sprite_v1_6.css.svg#ic_mode_comment_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink">'; temp +='</use></svg><span class="num_comments">'; temp += tent[i].thr$total.$t <=0? "張貼留言": tent[i].thr$total.$t + "則留言"; temp += '</span></a></span></div></div><div class="jump-link flat-button ripple"><a href="'; temp += tent[i].link[4].href+'#more" >閱讀完整內容</a></div></div></div></div>' ; const Article = Dom.createElement('article'); Article.setAttribute("class", "post-outer-container e7e7"); Article.insertAdjacentHTML("afterbegin", temp); Dom.querySelector('.blog-posts').appendChild(Article); } Point += count; Fz = true; } const observer = new IntersectionObserver(addList, { threshold: 0.02}); observer.observe(pg); });} </script> <style> .e7e7{ animation: 3s e7e7 } @keyframes e7e7 { 0% { margin-top: 500px; opacity: 0; } 10% { margin-top: 350px; opacity: 0.15; } 70% {opacity: 0.3;} 100% {margin-top: 0px; opacity: 1; } } </style> 不懂語法的格友請按  >>  

假如、都使用預設值的話，直接存檔就可開始使用。
若要修改參數，請參照註解以及以下說明：

const count =2; // 每次加載文章篇數

每個人的版型圖片尺寸大小都不一樣，請自行修改相片的參數至最適合大小。

const P_width =200; // 相片的寬度 ( 數字後若再加上參數[-rw] 圖片將會以webp格式顯示) 例如 : const P_width ="200-rw";

自訂每則摘要，要顯示的字串數量

const txt_count =100; // 摘要的文字數



還有、 網站資訊提供 ~ 允許網誌動態消息 》 ( 要設定成 ) 》完整

範例看首頁