[na]整一下博客面貌--cnblog css定制

前言

之前觉得cnblog排版乱. 而csdn对word兼容性较好一些.所以就转到csdn了. 后来看到别人的cnblog排版挺好,如

等效果.

参考资料

http://www.cnblogs.com/mingjiatang/p/5954352.html

http://www.cnblogs.com/solontan/p/3502072.html

http://blog.liuxianan.com/custom-cnblogs-highlight-theme.html

https://github.com/gzdaijie/cnblogs_markdown_optimize

后感

爱折腾,有强迫症,尝试一些东西时候总是受尽折磨.尤其是类似css ps等样式图片等一些东东的时候

本次实现了

可能比较丑陋些,有时间了在完善一下吧.

使用到的代码

\\页面定制CSS代码

/* 标题开始优化 */

#cnblogs_post_body

{

    color: black;

    font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;

    font-size: 15px;

}

#cnblogs_post_body h1    {

    background: #333366;

    border-radius: 6px 6px 6px 6px;

    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);

    color: #FFFFFF;

    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;

    font-size: 23px;

    font-weight: bold;

    height: 25px;

    line-height: 25px;

    margin: 18px 0 !important;

    padding: 8px 0 5px 5px;

    text-shadow: 2px 2px 3px #222222;

}

#cnblogs_post_body h2    {

    background: #006699;

    border-radius: 6px 6px 6px 6px;

    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);

    color: #FFFFFF;

    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;

    font-size: 20px;

    font-weight: bold;

    height: 25px;

    line-height: 25px;

    margin: 18px 0 !important;

    padding: 8px 0 5px 5px;

    text-shadow: 2px 2px 3px #222222;

}

#cnblogs_post_body h3    {

    background: #2B6695;

    border-radius: 6px 6px 6px 6px;

    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);

    color: #FFFFFF;

    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;

    font-size: 18px;

    font-weight: bold;

    height: 25px;

    line-height: 25px;

    margin: 18px 0 !important;

    padding: 8px 0 5px 5px;

    text-shadow: 2px 2px 3px #222222;

}

#cnblogs_post_body h4{

    background: #2B6600;

    border-radius: 6px 6px 6px 6px;

    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);

    color: #FFFFFF;

    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;

    font-size: 16px;

    font-weight: bold;

    height: 24px;

    line-height: 23px;

    margin: 12px 0 !important;

    padding: 5px 0 5px 10px;

    text-shadow: 2px 2px 3px #222222;

}

/* 标题优化完成 */

\\页脚html代码

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<link href="http://files.cnblogs.com/files/mingjiatang/mystyle.css" rel="stylesheet">

<script type="text/javascript" src="http://files.cnblogs.com/files/mingjiatang/mycnblogs.js"></script>

<script type="text/javascript" src="http://files.cnblogs.com/files/mingjiatang/mystyle.js"></script>

<script type="text/javascript">

    var setMyBlog = {

        setCopyright: function() {

            //设置版权信息，转载出处自动根据页面url生成

            var info_str = '<p>作者：<a target="_blank">@狮子XL</a><br>'+

                '本文为作者原创，转载请注明出处：<a class="uri"></a></p><hr></hr>',

                info = $(info_str),

                info_a = info.find("a"),

                url = window.location.href;

            $(info_a[0]).attr("href","http://weibo.com/imaxiaolang");

            $(info_a[1]).attr("href",url).text(url);

            $("#cnblogs_post_body").prepend(info);

        },

        setCodeRow: function(){

            // 代码行号显示

            var pre = $("pre.sourceCode"); //选中需要更改的部分

            if(pre && pre.length){

                pre.each(function() {

                    var item = $(this);

                    var lang = item.attr("class").split(" ")[1]; //判断高亮的语言

                    item.html(item.html().replace(/<[^>]+>/g,"")); //将<pre>标签中的html标签去掉

                    item.removeClass().addClass("brush: " + lang +";"); //根据语言添加笔刷

                    SyntaxHighlighter.all();

                })

            }

        },

        setAtarget: function() {

            // 博客内的链接在新窗口打开

            $("#cnblogs_post_body a").each(function(){

                this.target = "_blank";

            })

        },

        setContent: function() {

            // 根据h2、h3标签自动生成目录

            var captions_ori = $("#cnblogs_post_body h2"),

                captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(),

                content = $("<blockquote><h4>目录</h4></blockquote>");

            $("#cnblogs_post_body").prepend(content.append(captions));

            var index = -1;

            captions.replaceWith(function(){

                var self = this;

                if(self.tagName == "H2" || self.tagName == "h2"){

                    // 设置点击目录跳转

                    index += 1;

                    $('<a name="' + '_caption_' + index + '"></a>').insertBefore(captions_ori[index]);

                    return '<a href="#_caption_' + index + '"><strong>' + self.innerHTML + '</strong></a><br>';

                } else {

                    return self.innerHTML + "<br>";

                }

            });

        },

        runAll: function() {

            /* 运行所有方法

             * setAtarget() 博客园内标签新窗口打开

             * setContent() 设置目录

             * setCopyright() 设置版权信息

             * setCodeRow() 代码行号显示

             */

            this.setAtarget();

            this.setContent();

            this.setCopyright();

            this.setCodeRow();

        }

    }

    setMyBlog.runAll();

</script>

巴特西

[na]整一下博客面貌--cnblog css定制

前言

参考资料

后感

本次实现了

使用到的代码

最新文章

热门文章