博客园美化----js添加分割线

引言：

“工欲善其事必先利其器“，刚开始在博客园写文，也是看中了博客园css与js给用户开放的特点。这样我们就可以根据自己的喜好在一定范围内（其实js权限都已经开放了，基本上也没有范围了）对页面加以改变，所以第一步，是打造属于自己的写文小窝。

网上有些博主的首页都做的都很漂亮，也去学习了一些经验。并且网上也有许多模板可供选择，当然你也是可以选择自己从头到尾设计编码的。我认为页面简洁看着舒服就行，毕竟写文主要是记录自己，要完整的去研究样式的改变再转换成自己的知识对我这个小白来说太花时间了。

在此之前已经先改好了主题背景以及相应的标题字体样式等，觉得好像也差不多了。后来发现首页随笔之间挨的太紧了看着有点乱，打算弄个分割线隔开来。下面跟着一起来看看吧。

分析：

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

鼠标移动到首页随笔部分再右键检查源，查看对应源代码结构：

起初以为每个class="day"的div里是装着一篇随笔的，但是我后面多添加了几篇篇幅较小的随笔之后，它竟然把前几篇随笔放在一个class=“day”的div里了。下面的代码结构这么对称还是很有迷惑性的（如下图）。

935778

后来发现每个随笔最后都是class="postDesc"的div结尾，或者说每篇随笔都有唯一一个此div结尾（如下图），所以可以借用类名为postDesc的div可以作为唯一标识来操作。

1575230608010

总结：解决方法是只需要在每个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代码（如图）保存：

1575233681435

效果截图（是不是有更好一丢丢）：

1575233624661

ps: 添加之后如果没有效果，可能是因为你的js权限还没开放，需要向博客园申请js权限，这里就不说了。还有一点就是如果需要对分割线的样式进行改变，在css样式中通过添加修改 .myhr{} 就可以了，也是比较方便的。

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

博客园美化----js添加分割线

引言：

分析：

操作：

猜你喜欢