博客园-真够意思

1、word书写blog

使用word的blog模板，可以上传到博客园的随笔上去。上传后，在word继续编辑，再上传的话，就会覆盖掉同一篇随笔。

上传配置

如果找不到模板的话，可以在上图中的搜索框内，搜索‘博客文章’，联网的话，一定能搜到。

如果从未添加过账户的话，点击下图中的‘新建’按钮。

账户信息填你自己登录时候的账号密码，URL 填写： http://www.cnblogs.com/XXX/services/metaweblog.aspx   (XXX是你的用户名)。

如果不能发不成功，请检查下图的Blog地址名是不是与URL链接中的XXX一致。

如果有多个账户的话，在文章里选择相应账户即可。点击左上角 ‘发布’ 即可。

 2、博客园的自定义

与市面上常用的blog相比，有以下优势：

1.  基本没有广告，对比CSDN.
2. 发布文章不用审核，对比CSDN
3. 页面高度自定义(最关键)，对比简书，CSDN。支持CSS, html script植入。

在cnblog的设置页面，

我选择的风格是：

3、支持script脚本植入

这个功能需要在"设置"中申请一下。在工作日，大概一天就能申请下来。这样，你就能对页面中所有元素就行操作了。

4、牛刀小试-添加文章目录

1) 页面CSS

#main {
    margin-right: calc(50% - 610px);
}

#ad_t2, #under_post_news, #under_post_kb, #cnblogs_c1 {
    display: none;
}

.xh-treemenu li {
    list-style: none;
}

.xh-treemenu .xh-toggler {
    cursor: pointer;
}

.xh-treemenu .xh-toggler:before {
    display: inline-block;
    margin-right: 2pt;
}

li.xh-tree-empty > .xh-toggler {
    color: #aaa;
}

li.xh-tree-empty > .xh-toggler:before {
    content: "263A";
}

li.xh-tree-closed > .xh-toggler:before {
    content: "263B";
}

li.xh-tree-opened > .xh-toggler:before {
    content: "263A";
}

#xh-aside {
    position: fixed;
    top: 4%;
    left: calc(50% - 691px);
    width: 243px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xh-tree {
    color: #46CFB0;
    width: 800px;
    margin: 100px auto;
}

.xh-tree li > a,
.xh-tree li > span {
    padding: 0 4pt;
    border-radius: 2px;
}

.xh-tree li a {
    color: #46CFB0;
    text-decoration: none;
    line-height: 20pt;

}

.xh-tree li a:hover {
    background-color: #34BC9D;
    color: #fff;
}

.xh-active {
    background-color: #34495E;
    color: white !important;
}

a.xh-active {
    color: #fff;
}

.xh-tree li a.xh-active:hover {
    background-color: #34BC9D;
}

ul {
    padding-left: 30px;
}

2) script

注：cnblog内部已经把jquery加载进来了。

关于第三方链接资源，一定要https开头，否则加载不进来。关于网页资源（图片，js）的存储,可以采取以下两种方案：

　　1、放到cnblog中。不过有文件类型限制。

2、放到github中，但是比较慢。可以放到码云上（github在中国的托管）。至于如何生成静态链接自己搜。

<script>
    $(".catListTitle").text('');
    $('.newsItem').prepend('<img src="https://xunhanliu.gitee.io/js/cnblog-profile.png" alt="xunhanliu" style="  116px;margin: 0 auto;display: block;border: solid 1px #00ff2b;border-radius: 50%;">');
</script>
<script src="https://xunhanliu.gitee.io/js/d3.v4.min.js"></script>
<script>
    console.log('谢谢啊');
    (function ($) {
        $.fn.openActive = function (activeSel) {
            activeSel = activeSel || ".xh-active";

            var c = this.attr("class");

            this.find(activeSel).each(function () {
                var el = $(this).parent();
                while (el.attr("class") !== c) {
                    if (el.prop("tagName") === 'UL') {
                        el.show();
                    } else if (el.prop("tagName") === 'LI') {
                        el.removeClass('xh-tree-closed');
                        el.addClass("xh-tree-opened");

                    }

                    el = el.parent();
                }
                el = $(this).parent();
                if (el.find('li').length > 0) { //不是叶子
                    el.removeClass('xh-tree-opened');
                    el.addClass("xh-tree-closed");
                }
            });

            return this;
        }

        $.fn.treemenu = function (options) {
            options = options || {};
            options.delay = options.delay || 0;
            options.openActive = options.openActive || false;
            options.activeSelector = options.activeSelector || "";

            this.addClass("xh-treemenu");
            this.find("> li").each(function () {
                e = $(this);
                var subtree = e.find('> ul');
                var button = e.find('span').eq(0).addClass('xh-toggler');

                if (button.length == 0) {
                    var button = $('<span>');
                    button.addClass('xh-toggler');
                    e.prepend(button);
                } else {
                    button.addClass('xh-toggler');
                }

                if (subtree.length > 0) {
                    subtree.hide();

                    e.addClass('xh-tree-closed');

                    e.find(button).click(function () {
                        var li = $(this).parent('li');
                        li.find('> ul').slideToggle(options.delay);
                        li.toggleClass('xh-tree-opened');
                        li.toggleClass('xh-tree-closed');
                        li.toggleClass(options.activeSelector);
                    });

                    $(this).find('> ul').treemenu(options);
                } else {
                    $(this).addClass('xh-tree-empty');
                }
            });

            if (options.openActive) {
                this.openActive(options.activeSelector);
            }

            return this;
        }
    })(jQuery);

</script>

<script>
    $(function () {
        var lastHeadTag = 0;
        var el = d3.select('#main').append('div').attr('id', 'xh-aside').append('ul').attr("class", "xh-tree");
        var children = $("#cnblogs_post_body").children()
        for (var i = 0; i < children.length; i++) {
            tagNameL = $(children[i]).prop("tagName").split('');
            if (tagNameL.length == 2 && tagNameL[1] > 0 && tagNameL[1] < 7)  //取出H标签
            {
                //为这些children添加id
                $(children[i]).attr('id', $(children[i]).text().trim());
                addTagTree(tagNameL[1], $(children[i]).text().trim(), lastHeadTag);
                lastHeadTag = tagNameL[1];
            }
        }
        var tagTree = {};

        function addTagTree(tagNum, text, lastHeadTag) {
            if (lastHeadTag == 0) {
                el = el.append('li').data(tagNum)
                el.append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
                return;
            }
            if (lastHeadTag < tagNum)//下一级
            {
                el = el.append('ul').append('li')
                el.data(tagNum).append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
                ;
            } else if (lastHeadTag == tagNum) {//同一级
                el = d3.select(el._groups[0][0].parentNode).append('li').data(tagNum);
                el.append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
                ;
            } else { //上溯添加
                //1、parent同级，完美
                //2、parent<tagNum  接着上溯
                //3、parent>tagNum  放到parent的下一级
                el = d3.select(el._groups[0][0].parentNode);
                var addFlag = 0;
                while (el.attr("class") == null || el.attr("class").search("xh-tree") == -1) {
                    if (el._groups[0][0].tagName === 'UL') {
                    } else if (el._groups[0][0].tagName === 'LI') {
                        if (el.data() == tagNum) {
                            el = d3.select(el._groups[0][0].parentNode).append('li').data(tagNum);
                            el.append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
                            ;
                            addFlag = 1;
                            break;
                        }
                        else if (el.data() < tagNum) {
                            el = el.select('ul').append('li').data(tagNum);
                            el.append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
                            addFlag = 1;
                            break;
                        }
                    }
                    el = d3.select(el._groups[0][0].parentNode);
                }
                if (addFlag == 0) { //未添加上
                    el.append('li').data(tagNum).append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
                    ;
                }
            }
        }

        $(".xh-tree").treemenu({delay: 300, openActive: true, activeSelector: ".xh-open"});
        $('.xh-tree a').click(function () {
            $('.xh-active').removeClass('xh-active');
            $(this).addClass('xh-active');
        })
    });

</script>

 3）效果