關於主題只顯示每天第一個博文的的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,比如評論的數量會取到瀏覽數的百位數,等。太多了,改起來太費勁,所以還是改主題吧。。。。