[na]整一下博客面貌--cnblog css定制
2017-07-12 22:13
288 查看
前言
之前觉得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>
相关文章推荐
- 刚学CnBolgs的Css定制,还是在自己的Blog留下工具吧
- 阿里的博客 http://blog.sina.com.cn/haodengli [订阅][手机订阅] 首页博文目录图片关于我 个人资料 阿里 阿里 微博 加好友发纸条 写留言加关注 博客十周年地图 博
- 欢迎访问我的sina博客!谢谢!http://blog.sina.com.cn/m/hanian
- 专注前端技术的博客,CSSRAIN.CN
- 对Blog进行了一下定制
- 用 Open Live Writer 来写 cnblog.com 博客
- 本博客迁至 blog.sina.com.cn/firegl
- Blogmove.cn提供的博客搬家数据分析,来看看谁是最好和最差的博客
- 开通更专业的博客:http://jiqiubo.cublog.cn
- SUMO教程和MeanShift算法图片不可见的,请移步至本人的新浪博客。http://blog.sina.com.cn/qtluyixiao。抱歉给大家带来的不便。
- 刚刚在看52单片机和GPS通信程序的时候,看到了一个函数,absacc.h,貌似从来没有遇到过,百度了一下,结合自己的理解,整理如下: http://blog.sina.com.cn/s/blog_4
- 忆龙2009:用windows live 2009写CNBLOG博客
- 博客迁移至blog.simmzl.cn
- 本人SAP博客主要在新浪维护:http://blog.sina.com.cn/sapliumeng
- [笔记][Web]利用JS生成博文目录及CSS定制博客
- 永久博客地址:NealBlog.Cn
- 废弃csdn博客,新博客地址为http://leeming.cublog.cn/
- 编译和链接的区别(转载自从入门到放弃的博客http://blog.sina.com.cn/floatingstars)
- 利用JS生成博文目录及CSS定制博客
- 永久博客地址:NealBlog.Cn