Add captions to your blog garden images

I have always felt that adding a title below the picture can more clearly express the meaning of the picture, but the blog garden does not natively support this rendering method, and the blog garden can write js to change the theme, so by searching for information Complete the function of adding a title to the blog garden picture.

When we write markdown as follows:

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

will be rendered by the blog garden as

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

titleSo I want to add a title to the blog garden image by dynamically adding a p tag after the img tag .

Put the following code into the 页首Html代码code (you need to apply for js permission).

<!-- 引入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");
            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 image:

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