部落格園sakura主題只顯示每天一篇或者顯示不完隨筆bug的修復

Be_Somebody發表於2024-11-06

關於主題只顯示每天第一個博文的的bug

問題

在佈置sakura部落格園主題的時候，發現這個主題只會顯示每一天釋出的博文中最晚釋出的，其他的就不發了，很奇怪。去去翻了這個主題作者的博文也說了有這bug，但由於這個主題一直沒更新，所以也一直沒修復。因為比較喜歡這個主題，也抱著學習的心態，就試試能不能把這個bug修了吧。順便把過程記錄下來。

‍

尋找問題

隨筆顯示問題

基本上就只有裡面的main.js可以修改，那就只能從這裡面下手了，由於js學的時候只是淺嘗輒止，這找到主要的問題程式碼還是廢了很大的勁。只不過還是找到了

構建整個博文的程式碼就在setHomeSuiBiList()這個函式之中

setHomeSuiBiList() {
			let article_list = document.getElementsByClassName('day');
			let author = $(this.cnblogs.publicProfile).find('a:eq(0)').html() //作者
			for (let i = article_list.length - 1; i >= 0; i--) {
				let time = $('.day').find('div.dayTitle')[i].textContent.replace('年', '-').replace('月', '-').replace('日', ''); //獲取年月日
				let postTitle = $('.day').find('div.postTitle')[i].innerHTML;//<a class="postTitle2" href="https://www.cnblogs.com/zouwangblog/p/11194299.html">[置頂] 部落格園美化</a>
				let readMore = $('.day').find('a.c_b_p_desc_readmore')[i].href;//https://www.cnblogs.com/zouwangblog/p/11194299.html
				let content = $('.day').find('div.c_b_p_desc')[i].textContent.replace('閱讀全文', ''); //摘要
				let desc = $('.day').find('div.postDesc')[i].textContent;//posted @ 2019-07-16 13:27 ふじさんの雪 閱讀 (3073) 評論 (56)<a href="https://i.cnblogs.com/EditPosts.aspx?postid=11194299" rel="nofollow">編輯</a>
				let readNum = desc.substring(desc.indexOf("(") + 1, desc.indexOf(")")); //閱讀量
				let comNum = desc.substring(desc.lastIndexOf("(") + 1, desc.lastIndexOf(")")); //評論量
				let bianji = $('.day').find('div.postDesc')[i].firstElementChild.href; //獲取編輯連結 https://i.cnblogs.com/EditPosts.aspx?postid=11194299
				let url
				let desc_img = article_list[i].getElementsByClassName('desc_img')[0];
				if (desc_img !== undefined) {
					url = desc_img.src;//https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807204419622-1770363151.jpg
				} else {
					url = 'https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151203983-873040918.jpg'
				}
				let html = `<div class="post post-list-thumb post-list-show">` +
						`  <div class="post-thumb"> <a href="${readMore}"> <img class="lazyload" src="${url}"  data-src="${url}"> </a></div>` +
						`  <div class="post-content-wrap">` +
						`   <div class="post-content">` +
						`     <div class="post-date"> <i class="iconfont icon-time"></i>釋出於 ${time}</div>` +
						`     <div class="post-title">${postTitle}</div>` +
						`     <div class="post-meta"> <span><i class="iconfont icon-attention"></i>${readNum} 熱度</span> <span class="comments-number"><i class="iconfont icon-mark"></i>${comNum} 條評論</span> <span><i class="iconfont icon-cc-user"></i><a href="https://www.cnblogs.com/zouwangblog/p/11157339.html"></a>${author}</span></div>` +
						`     <div class="float-content"><p>${content}</p>` +
						`        <div class="post-bottom">` +
						`           <a href="${readMore}" class="button-normal"><i class="iconfont icon-gengduo"></i></a>` +
						`           <a href="${bianji}" class="button-normal"><i class="iconfont icon-bianji"></i></a>` +
						`        </div>` +
						`     </div>` +
						`  </div>` +
						` </div>` +
						`</div>`;
				$('.forFlow').prepend(html);
			}
			$('.post-list-thumb:odd').addClass('post-list-thumb-left')

			//構建notice
			const config = this.defaluts.profile;
			let notice = `<div class="notice"> <i class="iconfont icon-notification"></i><div class="notice-content">${config.notice}</div></div>`
			$('#main').prepend(notice);
		}

這樣就可以慢慢梳理思路了。我建立了四個置頂隨筆+三個普通隨筆，其中置頂的隨筆是三天分別建立的，三個隨筆是一天建立的。這個時候來看效果，很抽象，只顯示了4個隨筆，都是置頂的，從釋出時間排序跟著排的。

這個時候就很燒腦子了，前面我沒有置頂太多隨筆的時候普通隨筆是在的，現在只有置頂了，而且置頂的也沒顯示完。

仔細看整個函式感覺也沒什麼問題。再思考一下，既然部落格園整個皮膚是靠他自帶的皮膚改的，那我們去看下他沒有任何皮膚的時候能否顯示完，如果可以，那就能驗證就是程式碼中識別文章是有錯的。

我們來看下沒有修改過的主題是怎麼樣的

這個時候我們發現，所有的隨筆都是能正常顯示的，我們再來看看html的隨筆程式碼

day pinned就是同一天置頂的隨筆，而day就是同一天的普通隨筆，這裡麵包含著同一天的隨筆資訊

看了這個之後就很能說明問題了。

讓我們看看程式碼是怎麼獲得隨筆資訊的，

let article_list = document.getElementsByClassName('day');

我除錯了下，就會發現這段程式碼會獲取到上面class=day和class=day pinned的標籤內容，我去查了下getElementsByClassName這個函式，發現引數是絕對按照引數來匹配的，至於為什麼會有day pinned也不知道，不深究了。

我們再來看看迴圈條件

for (let i = article_list.length - 1; i >= 0; i--)

他是按獲得的div數量來迴圈的，那就不奇怪了，那就不奇怪了。整個獲取隨筆的次數跟釋出隨筆的天數數量一致那能不顯示不出來嗎？換句話說，我有四天釋出了隨筆，那隻會獲取四篇隨筆，那可不嘛。

時間獲取bug

然後這裡面還有bug，那就是時間的獲取

let time = $('.day').find('div.dayTitle')[i].textContent.replace('年', '-').replace('月', '-').replace('日', ''); //獲取年月日

每一次迴圈都會有時間的獲取，但是一天的隨筆打包只會有一個dayTitle，但是其他的資訊是打包在一個

裡面的，那後邊的就必定獲取不到時間。

圖片獲取bug

之後就是這個圖片的獲取，由於article_list必定的數量也是錯的，那也得修改整個圖片獲取的邏輯

‍

修復BUG

所有的問題我們都找出來了，那隻用重構一下這邊的程式碼就行了。由於原作者的程式碼耦合度有點高了，我用ai重構了一下，這樣看起來整個功能就清晰很多了：

setHomeSuiBiList() {
			let article_list = document.getElementsByClassName('day');
			let author = $(this.cnblogs.publicProfile).find('a:eq(0)').html() //作者
			console.log($('.day').find('div.dayTitle').length);
			let article_count=($('.day').find('div.postTitle')).length;
			for (let i = article_list-1; i >= 0; i--) {
				let time = this.getFormattedTime($('.day').find('div.dayTitle')[i].textContent);
				let postTitle = this.getPostTitle($('.day').find('div.postTitle')[i]);
				let readMore = this.getReadMoreLink($('.day').find('a.c_b_p_desc_readmore')[i]);
				let content = this.getContent($('.day').find('div.c_b_p_desc')[i]);
				let desc = this.getPostDesc($('.day').find('div.postDesc')[i]);
				let readNum = this.getReadNum(desc);
				let comNum = this.getComNum(desc);
				let bianji = this.getEditLink($('.day').find('div.postDesc')[i]);
				let url = this.getPostImageUrl(article_list[i]);
	
				let html = this.buildPostHtml(time, postTitle, readMore, content, desc, readNum, comNum, bianji, url, author);
				$('.forFlow').prepend(html);
			}
			$('.post-list-thumb:odd').addClass('post-list-thumb-left');
	
			//構建notice
			const config = this.defaluts.profile;
			let notice = `<div class="notice"> <i class="iconfont icon-notification"></i><div class="notice-content">${config.notice}</div></div>`
			$('#main').prepend(notice);
		}
	
		/**
		 * 獲取格式化後的時間
		 * @param {string} timeStr - 原始時間字串
		 * @returns {string} - 格式化後的時間字串
		 */
		getFormattedTime(timeStr) {
			return timeStr.replace('年', '-').replace('月', '-').replace('日', '');
		}
	
		/**
		 * 獲取文章標題
		 * @param {HTMLElement} postTitleElement - 包含文章標題的元素
		 * @returns {string} - 文章標題
		 */
		getPostTitle(postTitleElement) {
			return postTitleElement.innerHTML;
		}
	
		/**
		 * 獲取閱讀更多連結
		 * @param {HTMLElement} readMoreElement - 包含閱讀更多連結的元素
		 * @returns {string} - 閱讀更多連結
		 */
		getReadMoreLink(readMoreElement) {
			return readMoreElement.href;
		}
	
		/**
		 * 獲取文章內容
		 * @param {HTMLElement} contentElement - 包含文章內容的元素
		 * @returns {string} - 文章內容
		 */
		getContent(contentElement) {
			return contentElement.textContent.replace('閱讀全文', '');
		}
	
		/**
		 * 獲取文章描述
		 * @param {HTMLElement} descElement - 包含文章描述的元素
		 * @returns {string} - 文章描述
		 */
		getPostDesc(descElement) {
			return descElement.textContent;
		}
	
		/**
		 * 獲取閱讀量
		 * @param {string} desc - 文章描述
		 * @returns {number} - 閱讀量
		 */
		getReadNum(desc) {
			return parseInt(desc.substring(desc.indexOf("(") + 1, desc.indexOf(")")));
		}
	
		/**
		 * 獲取評論量
		 * @param {string} desc - 文章描述
		 * @returns {number} - 評論量
		 */
		getComNum(desc) {
			return parseInt(desc.substring(desc.lastIndexOf("(") + 1, desc.lastIndexOf(")")));
		}
	
		/**
		 * 獲取編輯連結
		 * @param {HTMLElement} descElement - 包含編輯連結的元素
		 * @returns {string} - 編輯連結
		 */
		getEditLink(descElement) {
			return descElement.firstElementChild.href;
		}
	
		/**
		 * 獲取文章圖片連結
		 * @param {HTMLElement} articleElement - 文章元素
		 * @returns {string} - 文章圖片連結
		 */
		getPostImageUrl(articleElement) {
			let desc_img = articleElement.getElementsByClassName('desc_img')[0];
			if (desc_img!== undefined) {
				return desc_img.src;
			} else {
				return 'https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151203983-873040918.jpg';
			}
		}
	
		/**
		 * 構建文章列表項的 HTML 結構
		 * @param {string} time - 文章釋出時間
		 * @param {string} postTitle - 文章標題
		 * @param {string} readMore - 閱讀更多連結
		 * @param {string} content - 文章內容
		 * @param {string} desc - 文章描述
		 * @param {number} readNum - 閱讀量
		 * @param {number} comNum - 評論量
		 * @param {string} bianji - 編輯連結
		 * @param {string} url - 文章圖片連結
		 * @param {string} author - 文章作者
		 * @returns {string} - 構建好的 HTML 結構
		 */

重構的大致邏輯也不難。

我們先看整個置頂隨筆的頁面

<div class="day pinned" role="article" aria-describedby="postlist_description_18530397">
    <div class="dayTitle">
        <a href="https://www.cnblogs.com/ENchantedN/p/archive/2024/11/06"></a>
    </div>

        <div class="postTitle" role="heading" aria-level="2">
            <a class="postTitle2 vertical-middle pinned-post" href="https://www.cnblogs.com/ENchantedN/p/18530442">
    <span>
            <span class="pinned-post-mark">[置頂]</span>
        置頂4
    </span>
  

</a>
        </div>
        <div class="postCon">

<div class="c_b_p_desc" id="postlist_description_18530442">
摘要：        <img src="./Be_Somebody - 部落格園_files/3033596-20241106204215268-744098495.png" alt="置頂4" class="desc_img">
置頂4    <a href="https://www.cnblogs.com/ENchantedN/p/18530442" class="c_b_p_desc_readmore">閱讀全文</a>
</div>

</div>
        <div class="clear"></div>
        <div class="postDesc">posted @ 2024-11-06 16:13
Be_Somebody
<span data-post-id="18530442" class="post-view-count">閱讀(4)</span> 
<span data-post-id="18530442" class="post-comment-count">評論(0)</span> 
<span data-post-id="18530442" class="post-digg-count">推薦(0)</span> 
<a href="https://i.cnblogs.com/EditPosts.aspx?postid=18530442" rel="nofollow">
    編輯
</a>
</div>
        <div class="clear"></div>
            <div class="postSeparator"></div>
        <div class="postTitle" role="heading" aria-level="2">
            <a class="postTitle2 vertical-middle pinned-post" href="https://www.cnblogs.com/ENchantedN/p/18530395">
    <span>
            <span class="pinned-post-mark">[置頂]</span>
        一天置頂1
    </span>
  

</a>
        </div>
        <div class="postCon">

<div class="c_b_p_desc" id="postlist_description_18530395">
摘要：      
一天置頂1    <a href="https://www.cnblogs.com/ENchantedN/p/18530395" class="c_b_p_desc_readmore">閱讀全文</a>
</div>

</div>
        <div class="clear"></div>
        <div class="postDesc">posted @ 2024-11-06 15:58
Be_Somebody
<span data-post-id="18530395" class="post-view-count">閱讀(0)</span> 
<span data-post-id="18530395" class="post-comment-count">評論(0)</span> 
<span data-post-id="18530395" class="post-digg-count">推薦(0)</span> 
<a href="https://i.cnblogs.com/EditPosts.aspx?postid=18530395" rel="nofollow">
    編輯
</a>
</div>
        <div class="clear"></div>
            <div class="postSeparator"></div>
        <div class="postTitle" role="heading" aria-level="2">
            <a class="postTitle2 vertical-middle pinned-post" href="https://www.cnblogs.com/ENchantedN/p/18530397">
    <span>
            <span class="pinned-post-mark">[置頂]</span>
        一天置頂2
    </span>
  

</a>
        </div>
        <div class="postCon">

<div class="c_b_p_desc" id="postlist_description_18530397">
摘要：        <img src="./Be_Somebody - 部落格園_files/3033596-20241106204443382-343604796.jpg" alt="一天置頂2" class="desc_img">
一天置2    <a href="https://www.cnblogs.com/ENchantedN/p/18530397" class="c_b_p_desc_readmore">閱讀全文</a>
</div>

</div>
        <div class="clear"></div>
        <div class="postDesc">posted @ 2024-11-06 15:58
Be_Somebody
<span data-post-id="18530397" class="post-view-count">閱讀(0)</span> 
<span data-post-id="18530397" class="post-comment-count">評論(0)</span> 
<span data-post-id="18530397" class="post-digg-count">推薦(0)</span> 
<a href="https://i.cnblogs.com/EditPosts.aspx?postid=18530397" rel="nofollow">
    編輯
</a>
</div>
        <div class="clear"></div>
</div>

我們容易發現，每個隨筆必會有postTitle這個標籤，那麼我們只用給postTitle計數就能解決文章數不同的問題，這個時候再換掉for迴圈的article_list-1

let article_count = 0;
document.querySelectorAll('.day').forEach(day => {
	article_count += day.querySelectorAll('.postTitle').length;
});

這個解決了之後就是時間獲取的問題，這裡我在貼出普通隨筆的頁面程式碼

<div class="day" role="article" aria-describedby="postlist_description_18525705">
    <div class="dayTitle">
        <a href="https://www.cnblogs.com/ENchantedN/p/archive/2024/11/04">2024年11月4日
</a>
    </div>

        <div class="postTitle" role="heading" aria-level="2">
            <a class="postTitle2 vertical-middle" href="https://www.cnblogs.com/ENchantedN/p/18525710">
    <span>
        測試3
    </span>
  

</a>
        </div>
        <div class="postCon">

<div class="c_b_p_desc" id="postlist_description_18525710">
摘要：      
測試3    <a href="https://www.cnblogs.com/ENchantedN/p/18525710" class="c_b_p_desc_readmore">閱讀全文</a>
</div>

</div>
        <div class="clear"></div>
        <div class="postDesc">posted @ 2024-11-04 16:57
Be_Somebody
<span data-post-id="18525710" class="post-view-count">閱讀(8)</span> 
<span data-post-id="18525710" class="post-comment-count">評論(0)</span> 
<span data-post-id="18525710" class="post-digg-count">推薦(0)</span> 
<a href="https://i.cnblogs.com/EditPosts.aspx?postid=18525710" rel="nofollow">
    編輯
</a>
</div>
        <div class="clear"></div>
            <div class="postSeparator"></div>
        <div class="postTitle" role="heading" aria-level="2">
            <a class="postTitle2 vertical-middle" href="https://www.cnblogs.com/ENchantedN/p/18525707">
    <span>
        測試2
    </span>
  

</a>
        </div>
        <div class="postCon">

<div class="c_b_p_desc" id="postlist_description_18525707">
摘要：      
測試2    <a href="https://www.cnblogs.com/ENchantedN/p/18525707" class="c_b_p_desc_readmore">閱讀全文</a>
</div>

</div>
        <div class="clear"></div>
        <div class="postDesc">posted @ 2024-11-04 16:57
Be_Somebody
<span data-post-id="18525707" class="post-view-count">閱讀(0)</span> 
<span data-post-id="18525707" class="post-comment-count">評論(0)</span> 
<span data-post-id="18525707" class="post-digg-count">推薦(0)</span> 
<a href="https://i.cnblogs.com/EditPosts.aspx?postid=18525707" rel="nofollow">
    編輯
</a>
</div>
        <div class="clear"></div>
            <div class="postSeparator"></div>
        <div class="postTitle" role="heading" aria-level="2">
            <a class="postTitle2 vertical-middle" href="https://www.cnblogs.com/ENchantedN/p/18525705">
    <span>
        測試1
    </span>
  

</a>
        </div>
        <div class="postCon">

<div class="c_b_p_desc" id="postlist_description_18525705">
摘要：        <img src="./Be_Somebody - 部落格園_files/3033596-20241106204426204-456357718.jpg" alt="測試1" class="desc_img">
測試1    <a href="https://www.cnblogs.com/ENchantedN/p/18525705" class="c_b_p_desc_readmore">閱讀全文</a>
</div>

</div>
        <div class="clear"></div>
        <div class="postDesc">posted @ 2024-11-04 16:57
Be_Somebody
<span data-post-id="18525705" class="post-view-count">閱讀(0)</span> 
<span data-post-id="18525705" class="post-comment-count">評論(0)</span> 
<span data-post-id="18525705" class="post-digg-count">推薦(0)</span> 
<a href="https://i.cnblogs.com/EditPosts.aspx?postid=18525705" rel="nofollow">
    編輯
</a>
</div>
        <div class="clear"></div>
</div>

我們能發現跟置頂的隨筆不同的是，普通隨筆有直接的時間dayTitle標籤可以使用，但是置頂的是沒有的，那我們只能另尋他路了，值得注意的是postDesc裡面是有時間的，那麼我們就可以直接拆分以下就能使用了，我們直接把time的定義放在desc的下面，這樣就可以直接傳入desc的值切割就能用了

let desc = this.getPostDesc($('.day').find('div.postDesc')[i]);
let time = this.getFormattedTime(desc);

getFormattedTime(timeStr) {
	return timeStr.substring(8, 19);
}

最後一個就是圖片的獲取了，我們再次比對有自定義圖片和沒有自定義圖片的c_b_p_desc，在有自定義圖片的隨筆中的c_b_p_desc裡面是有一個img的標籤的，那麼我們只用判斷在這裡面的c_b_p_desc是否有img標籤就提取出來，沒有我們直接就放入預設的圖片就行

let url = this.getPostImageUrl(document.querySelectorAll('.c_b_p_desc')[i]);

getPostImageUrl(desc) {
	const img = desc.querySelector('.desc_img');
	if (img) {
		return img.src;
	} else {
		return 'https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151203983-873040918.jpg';
	}
}

‍

最後整合一下，修復的程式碼如下：

		setHomeSuiBiList() {			  
			let article_count = 0;
			let author = $(this.cnblogs.publicProfile).find('a:eq(0)').html() //作者

			document.querySelectorAll('.day').forEach(day => {
				article_count += day.querySelectorAll('.postTitle').length;
			});

		
			for (let i = article_count-1; i >= 0; i--) {
				let postTitle = this.getPostTitle($('.day').find('div.postTitle')[i]);
				let readMore = this.getReadMoreLink($('.day').find('a.c_b_p_desc_readmore')[i]);
				let content = this.getContent($('.day').find('div.c_b_p_desc')[i]);
				let desc = this.getPostDesc($('.day').find('div.postDesc')[i]);
				let time = this.getFormattedTime(desc);
				let readNum = this.getReadNum(desc);
				let comNum = this.getComNum(desc);
				let bianji = this.getEditLink($('.day').find('div.postDesc')[i]);
				let url = this.getPostImageUrl(document.querySelectorAll('.c_b_p_desc')[i]);
	
				let html = this.buildPostHtml(time, postTitle, readMore, content, desc, readNum, comNum, bianji, url, author);
				$('.forFlow').prepend(html);
			}
			$('.post-list-thumb:odd').addClass('post-list-thumb-left');
	
			//構建notice
			const config = this.defaluts.profile;
			let notice = `<div class="notice"> <i class="iconfont icon-notification"></i><div class="notice-content">${config.notice}</div></div>`
			$('#main').prepend(notice);
		}
	
		/**
		 * 獲取格式化後的時間
		 * @param {string} timeStr - 原始時間字串
		 * @returns {string} - 格式化後的時間字串
		 */
		/**getFormattedTime(timeStr) {
			return timeStr.replace('年', '-').replace('月', '-').replace('日', '');
		}**/
		getFormattedTime(timeStr) {
			return timeStr.substring(8, 19);
		}


	
		/**
		 * 獲取文章標題
		 * @param {HTMLElement} postTitleElement - 包含文章標題的元素
		 * @returns {string} - 文章標題
		 */
		getPostTitle(postTitleElement) {
			return postTitleElement.innerHTML;
		}
	
		/**
		 * 獲取閱讀更多連結
		 * @param {HTMLElement} readMoreElement - 包含閱讀更多連結的元素
		 * @returns {string} - 閱讀更多連結
		 */
		getReadMoreLink(readMoreElement) {
			return readMoreElement.href;
		}
	
		/**
		 * 獲取文章內容
		 * @param {HTMLElement} contentElement - 包含文章內容的元素
		 * @returns {string} - 文章內容
		 */
		getContent(contentElement) {
			return contentElement.textContent.replace('閱讀全文', '');
		}
	
		/**
		 * 獲取文章描述
		 * @param {HTMLElement} descElement - 包含文章描述的元素
		 * @returns {string} - 文章描述
		 */
		getPostDesc(descElement) {
			return descElement.textContent;
		}
	
		/**
		 * 獲取閱讀量
		 * @param {string} desc - 文章描述
		 * @returns {number} - 閱讀量
		 */
		getReadNum(desc) {
			return parseInt(desc.substring(desc.indexOf("(") + 1, desc.indexOf(")")));
		}
	
		/**
		 * 獲取評論量
		 * @param {string} desc - 文章描述
		 * @returns {number} - 評論量
		 */
		getComNum(desc) {
			return parseInt(desc.substring(desc.lastIndexOf("(") + 1, desc.lastIndexOf(")")));
		}
	
		/**
		 * 獲取編輯連結
		 * @param {HTMLElement} descElement - 包含編輯連結的元素
		 * @returns {string} - 編輯連結
		 */
		getEditLink(descElement) {
			return descElement.firstElementChild.href;
		}
	
		/**
		 * 獲取文章圖片連結
		 * @param {HTMLElement} articleElement - 文章元素
		 * @returns {string} - 文章圖片連結
		 */
		getPostImageUrl(desc) {
			const img = desc.querySelector('.desc_img');
			//let desc_img = articleElement.getElementsByClassName('desc_img')[0];
			if (img) {
				return img.src;
			} else {
				return 'https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151203983-873040918.jpg';
			}
		}
	
		/**
		 * 構建文章列表項的 HTML 結構
		 * @param {string} time - 文章釋出時間
		 * @param {string} postTitle - 文章標題
		 * @param {string} readMore - 閱讀更多連結
		 * @param {string} content - 文章內容
		 * @param {string} desc - 文章描述
		 * @param {number} readNum - 閱讀量
		 * @param {number} comNum - 評論量
		 * @param {string} bianji - 編輯連結
		 * @param {string} url - 文章圖片連結
		 * @param {string} author - 文章作者
		 * @returns {string} - 構建好的 HTML 結構
		 */

‍

其實裡面還有一些大大小小bug，但是這位博主在這個隨筆裡面已經解決了部落格園Sakura主題美化中BUG修復方法 - CodeFan* - 部落格園

部落格園主題美化中BUG修復方法
2022-03-27
bootstrap datetimepicker 中只顯示年或者只顯示月份
2016-06-11
boot
關於UIImageView的顯示問題——居中顯示或者
2016-06-14
UIView
win10托盤圖示不顯示怎麼回事_win10工作列托盤圖示顯示不完全如何修復
2020-04-26
Win10
部落格園主題&美化
2024-04-05
部落格園主題美化
2024-08-28
修改部落格園主題
2024-10-28
iOS設定tabbar不顯示文字，只顯示圖片
2017-12-13
iOStabBar
win10電腦工作列顯示不全怎麼調整 win10工作列顯示不完全如何修復
2020-12-05
Win10
解決本地筆記匯入部落格中圖片無法顯示的問題
2021-01-01
筆記
電腦顯示器破圖了怎麼辦修復顯示器螢幕橫條紋修復教程
2022-07-23
部落格園SimpleMemory主題美化
2020-08-01
部落格園 SimpleMemory 主題美化
2020-11-29
自定義部落格園主題
2022-06-15
部落格園主題設定
2024-08-07
部落格園主題美化教程
2024-06-08
部落格園美化-Awescnb主題
2024-11-03
呼叫百度地圖api只顯示網格
2020-09-26
地圖API
chm 檔案開啟只顯示目錄，不顯示內容
2024-09-15
讓你掘金部落格中的程式碼顯示得更酷
2017-11-28
你要的部落格園主題都有！！！
2020-05-19
easyui datetimebox 如何只顯示月份，不顯示具體的資料
2016-04-22
UI
win10工作列圖示不顯示怎麼辦修復工作列顯示不正常的辦法
2020-12-30
Win10
部落格園主題折騰記
2024-03-09
win7圖片只顯示圖示不顯示預覽圖解決方案
2013-10-30
Win7圖解
SQL：顯示每天的小計，某一天沒有記錄也要顯示
2014-04-16
SQL
win10主顯示器設定方法_win10雙顯示器如何設定主顯示器
2020-04-30
Win10
修復Win7系統Aero特效無法顯示的問題
2016-07-11
Win7特效
EasyUI選擇日期只顯示年月
2018-07-25
UI
pyecharts地圖功能，並解決顯示不全或只顯示南海諸島問題解決
2018-06-17
Echarts地圖
一個Eclipse程式碼顯示主題
2014-03-25
Eclipse
zblog主題下載成功不顯示
2024-09-18
修復Arch Linux和Manjaro Linux無法顯示emoji的問題
2022-05-04
LinuxJAR
部落格園自用主題美化 - Light
2020-06-12
部落格園主題修改分享 - 過年篇
2023-01-10
部落格園主題美化（僅相容 Markdown）
2022-07-11
git log提交歷史顯示不完全
2018-06-13
Git
bootstrap日期控制元件只顯示年月
2020-11-04
boot控制元件