博客園首頁美化----js添加分割線

引言：

​ “工欲善其事必先利其器“，剛開始在博客園寫文，也是看中了博客園css與js給用戶開放的特點。這樣我們就可以根據自己的喜好在一定范圍內（其實js權限都已經開放了，基本上也沒有范圍了）對頁面加以改變，所以第一步，是打造屬於自己的寫文小窩。

​ 我的博客園主題是SimpleMemory,網上有些博主的首頁都做的都很漂亮，也去學習了一些經驗。並且網上也有許多模板可供選擇，當然你也是可以選擇自己從頭到尾設計編碼的。我認為頁面簡潔看着舒服就行，畢竟寫文主要是記錄自己，要完整的去研究樣式的改變再轉換成自己的知識對我這個小白來說太花時間了。

​ 在此之前已經先改好了主題背景以及相應的標題字體樣式等，覺得好像也差不多了。后來發現首頁隨筆之間挨的太緊了看着有點亂，打算弄個分割線隔開來看看。

分析：

**（不想看分析的話可以直接跳到下面操作部分）**

鼠標移動到首頁隨筆部分再右鍵檢查源，查看對應源代碼結構：

起初以為每個class="day"的div里是裝着一篇隨筆的，但是我后面多添加了幾篇篇幅較小的隨筆之后，它竟然把前幾篇隨筆放在一個class=“day”的div里了。下面的代碼結構這么對稱還是很有迷惑性的（如下圖）。

后來發現每個隨筆最后都是class="postDesc"的div結尾，或者說每篇隨筆都有唯一一個此div結尾（如下圖），所以可以借用類名為postDesc的div可以作為唯一標識來操作。

總結：解決方法是只需要在每個class名為postDesc的div中添加分割線 hr 子標簽就可以了：

操作：

下面是我自己寫的添加分割線的javascript代碼：

<script>                   //思路：一個postDesc對應一個hr,數量不同就添加（有點子押韻）
     function addhr() {
            var thismy = document.getElementsByClassName("postDesc");
            var thishr = document.getElementsByClassName("myhr");
            var thismyLen = thismy.length;            
            var thishrLen = thishr.length;
            var tmp = thismyLen - thishrLen;
            if (tmp && tmp > 0) {
                for (var i = thishrLen; i < thismyLen; i++) {
                    var myhr = document.createElement('hr');
                    myhr.className = 'myhr';
                    thismy[i].appendChild(myhr);
                }
            }
        }
        window.onload=addhr;        
        var thisid = document.getElementById('thisid');
        thisid.addEventListener("change", addhr, false);
</script>

添加代碼，只需要將上面的代碼粘貼到首頁 管理-設置-頁首HTML代碼 （如圖）保存：

效果截圖（是不是有更好一丟丟）：

ps: 添加之后如果沒有效果，可能是因為你的js權限還沒開放，需要向博客園申請js權限，這里就不說了。還有一點就是如果需要對分割線的樣式進行改變，在css樣式中通過添加修改 .myhr{} 就可以了，也是比較方便的。

（我要睡覺了，好困(。-ω-)zzz）。