給你的博客園圖片添加標題

一直以來都覺得在圖片下面添加一個標題可以更加清晰的表示這張圖片的含義，可是博客園原生並不支持這種渲染方式，再加上博客園可以自己寫js來更改主題，於是通過搜索資料完成給博客園圖片添加標題的功能。

當我們如下書寫markdown時：

![](https://images.morethink.cn/092017231747399.jpg "TCP的三次握手和四次揮手")

會被博客園渲染成

<p><img src="https://images.morethink.cn/092017231747399.jpg" title="TCP的三次握手和四次揮手"></p>

於是我就想通過在img標簽后面動態添加一個帶有title的p標簽來給博客園圖片添加標題。

將下面代碼放入頁首Html代碼代碼中即可(需要申請js權限)。

<!-- 引入jQuery -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        //給每張圖片添加標題,div.cnblogs_post_body是博客主體
        $("div[id=cnblogs_post_body] img").each(function () {
            var title = $(this).attr("title");
            if (title != undefined) {
                var boardp_style = "style='display: block; text-align: center; color: #969696;padding: 10px;border-bottom: 1px solid #d9d9d9;margin: 0 auto;" +
                    "width: " + ($(this).width() * 0.8) + "px;" +
                    "height: 28px;" +
                    "'>";
                var boardp = "<p " + boardp_style + title + "</p";
                $(this).after(boardp);
            }
        });
    });
</script>
<!-- 將img變為塊級元素 -->
<style type="text/css">
    img {
        margin: 0 auto;
        display: block;
    }
</style>

markdown圖片：

![](https://images.morethink.cn/092017231747399.jpg "TCP的三次握手和四次揮手")