Lepton博客园页面改版

我大部分时间用手机阅读，博客，新闻，各参考说明 PDF 和 电子书等等，除此之外就是纸质书，所以，渴望自己的博客也能有较好的移动设备阅读体验。之前一直忍受着博客园的 HTML，也用自己的方法，JS，更改某某模板那些神奇的 table 结构。某君批评博客园技术不行的博文里面，我也曾经口出狂言，说你们博客园搞不定就开源让我们来做。年少轻狂无知，多多得罪请见谅。

但这次真的受不了，决定用 bootstrap 改。因为博客园允许我们插入 JS，分别在所谓的页头和页脚（就是 HTML body 内顶部，和最低部），也允许不用模板的 CSS，用自己写的，那么，我就动手了。

修改的内容都在这里:

其实我插入的内容，不是 style 就是 script，全部放 HTML 底部吧。

引入 CSS 、加载 prettify 和设置 media print：

<script type="text/javascript">
  var fileref = document.createElement("link");
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", 'http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css')
  document.getElementsByTagName("head")[0].appendChild(fileref)
var prettify = document.createElement("script");
  prettify.setAttribute("src", "https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css");
  document.getElementsByTagName("head")[0].appendChild(prettify);
</script>

<style media="print">
#sub, .LeftCell, #digg_block, #comment_form, #sideBar{
display:none;
}
</style>

这是我最初没注意原来博客园自己加载了 JQ 的时候写的，原生的，不改了。有兴趣看 PRINT 效果，打开着这页或者任何一篇博文，按 CTRL-P。精美可靠高大上的代码显示，来自上面第七至第九行。它的可爱之处，就是行号，各位用鼠标作范围选择多行，准备进行复制时候，行号不会被选中。很多老一代的 code snippet 显示插件做不到这个。

插入 viewpoint meta 和若干 class:

<script type="text/javascript"> 
$("head").append('<meta name="viewport" content="width=device-width, initial-scale=1">'); 
$("body").addClass("container"); 
$("#header").addClass("navbar navbar-inverse"); 
$("#blogTitle").addClass("navbar-header"); 
$("#navigator").addClass("collapse navbar-collapse"); 
$("#navList").addClass("nav navbar-nav"); 
$("#home").addClass("row"); 
$("#mainContent").addClass("col-md-10 col-md-push-2"); 
$("#sideBar").addClass("col-md-2 col-md-pull-10"); 
$("#nav_next_page a").addClass("btn btn-sm btn-default"); 
</script> 

Bootstrap 要的而它欠缺的，我加上而已。

最后是一堆乱七八糟的 CSS，一边调一边写，懒得改：

blockquote { 
background:#f9f9f9; 
border-left:10px solid #ccc; 
margin:1.5em 10px; 
padding:.5em 10px; 
quotes:"\201C""\201D""\2018""\2019"; 
} 
blockquote:before { 
color:#ccc; 
content:open-quote; 
font-size:4em; 
line-height:.1em; 
margin-right:.25em; 
vertical-align:-.4em; 
} 
blockquote p { 
display:inline; 
} 
a:link { 
text-decoration:none 
} 
.postTitle a:link { 
text-decoration:none; 
font-size: 16px; 
} 
#sideBar li { 
list-style-type:none; 
} 
#sideBar ul { 
margin-left:-16px; 
} 
#sideBar h3 { 
font-size: 16px; 
} 
#blogTitle h1 { 
font-size: 16px; 
color : white; 
padding-left : 16px; 
} 
#blogTitle h2 { 
font-size: 14px; 
color : white; 
padding-left : 24px; 
} 
#navigator .blogStats { 
display: none; 
} 
.clear { 
height : 8px; 
} 
.day { 
margin-bottom : 24px; 
} 
#footer { 
text-align :center; 
margin-bottom: 24px; 
margin-top: 24px; 
} 
.day .dayTitle{ 
display: none; 
} 
#mainContent .forFlow{ 
margin-top: 14px; 
} 
.topicListFooter { 
text-align:center; 
} 
.topicListFooter a { 
text-decoration:none; 
margin-bottom: 24px; 
} 
#nav_next_page a { 
width: 100%; 
}

我在这群里，欢迎加入交流：
开发板玩家群 578649319
硬件创客 (10105555)