博客园强迫癌晚期者的福音——自定义博客园主题

  本博客适用于那些对于有些强迫症重症患者，如我，或者对审美有较高追求的人。
  如果对于博客园提供的主题模版均不是很满意可以自己手动调控，比如可以随意更改自己喜欢的样式，更改格局，公告栏添加个人额外信息、访问统计插件，导航栏设置自己想要的logo、将选项和随笔分类链接关联，也可以自定义导航栏选项的相关链接地址。如我的博客DaisyWang88。
  改建博客园主题之前，我们必须知道以下几点：
   1.博客园后台有个"上传文件"(开通博客可访问)的功能，文件上传默认的地址为https://files.cnblogs.com/files/DaisyWang，DaisyWang是自己的博客地址名。可以上传一个图片，然后在上传文件列表里点击文件名，就可以在新窗口显示图片url就是图片的连接地址。
  2.博客园后台的"设置"按钮（开通博客后才能访问）提供页面CSS代码、公告栏、页首、页脚的代码上传功能，贴入相关代码并保存，就可以看到自己主页的变化。
  3.如果想要上传js代码需要发邮件给博客园contact@cnblogs.com申请js权限。
  4.可在自己的博客主页用浏览器如chrome的审查代码定位元素，可查看元素id、class、标签名CSS样式等信息，并可以临时修改并显示样式。如图
  通过以上几点的介绍，相信大家对怎么改建博客主题有一定的想法了。
  下面开始改建博客：

一、选定基础模版

  我们一般在已有的模版基础上修改，这样会方便很多，不过也可以完全自己定义样式，如果觉得足够可以替换原来主题提供的样式了，则可以在设置页面里禁用模板默认CSS。
  这里我选择的是东东的elf,因为个人比较喜欢左边的日期栏样式。

二、禁用一些控件。

  如导航栏里的[博客园] [新随笔] [联系] [订阅]禁用。进入后台的[选项]去掉相应勾选按钮。如图

  这样导航栏里就只剩[首页] [管理]。（方便之后与随笔分类关联）。
  至于去掉的[博客园]是链接到博客园网站首页的，如果平时不怎么逛就不需要,需要时可以直接百度进入，因此我这里禁用掉了。
  [新随笔]可以直接通过http://i.cnblogs.com访问到后台（前提是要开通自己的博客并登录）。
  联系可以直接将个人联系方式以html的形式放进公告栏,如图
        。

三、开始修改样式。

  1.新建一个"cnblog.css"文件用来保存修改样式代码。
  2.使用chrome上面所说功能定位元素，可以找到元素id、class、标签名及CSS样式。可以直接调试修改样式，并可以直接预览修改后样式效果，将自己满意的效果的相关代码保存在"cnblog.css"当中。直到所有自己不满意的地方修改完成。
  3.将"cnblog.css"当中的CSS代码粘贴到后台"设置"(开通博客并登录就可访问)里的CSS代码框里，并save，如图

  我的修改包括：隐藏一些模块、修改导航栏样式、内容区域的宽度、字体、链接的样式和颜色、随笔内容取区域的行高等。我的CSS代码如下：

/*字体*/
body {
    font: 14px/1.5 '微软雅黑',tahoma,arial,sans-serif;
}
/*首部背景*/
#header {
    background: #000;
}
#mainContent {
     auto;
    float: none;
    margin-right: 270px;
    font-size: 16px;
}
/*隐藏博客标题栏*/
#blogTitle{
	display:none;
}
#navigator {
     100%;
    height: 60px;
    line-height: 60px;
    overflow: hidden;
}
#navList a {
    height: auto;
    font-family: '微软雅黑';
    font-weight: normal;
}
#navList a :hover{
    text-decoration:none;
}
#navList a:hover:after {
   display:none;
}
#navList a:link {
    color: #bbb;
}
#main {
     auto;
    position: relative;
    padding-left: 10px;
}
#mainContent {
     auto;
    float: none;
    margin-right: 270px;
    font-size: 16px;
}
#mainContent .forFlow {
    float: none;
     auto;
}
.day {
    padding: 5px 20px 10px 20px;
}
.dayTitle {
    height: 55px;
    top: 0;
    padding-top: 10px;
    text-shadow: none;
    font-size: 80%;
    text-align: center;
    font-weight: normal;
     64px;
    color: #666;
    line-height: 1.5em;
    clear: both;
    position: absolute;
    left: -80px;
    background: #fff;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    text-indent: 9px;
}
.postTitle a:link{
	color:#2EB1E8;
	text-decoration: none;
}
.postTitle{
	border-bottom:1px solid  #e0e0e0;
	font-weight:normal;
	font-size:18px;
	font-family:'微软雅黑';
	line-height:40px;
	100%;
	clear:both;
}
.postCon {
    font-size: 16px;
}
.c_b_p_desc {
    line-height: 23px;
}
.postDesc {
    padding-bottom: 5px;
}
.day:after {
    left: -8px;
}
#sideBar {
    position: absolute;
    right: 10px;
    top: 0;
}
#topics .postTitle a {
    line-height: 35px;
    font-size: 18px;
    font-weight: normal;
    text-shadow: none;
}
#topics .postTitle a {
   color:#2EB1E8;
    font-family: '微软雅黑';
}
/*随笔行高*/
.postBody {
    font-size: 16px;
    line-height: 1.6em;
}
#cnblogs_post_body {
    line-height: 2!important;
}
#cnblogs_post_body p, .postBody p{
    line-height: 2!important;
}
/*改变链接的颜色和无下划线*/
#cnblogs_post_body a {
    text-decoration: none;
    color: blue;
}

  这里有参考豪情的博客主题样式，因为个人比较喜欢，有些代码直接从chrome里复制过来可能会有重复。
  4.刷新主页就可以看到修改后的样式效果。

四、设置导航栏logo并关联到首页链接和选项关联到随笔分类

  1.这部分要用到js代码，因此先要发邮件contact@cnblogs.com给博客园申请js权限。
  2.将自己选定的logo图片上传到文件上传，点击图片名，图片会从新页面打开，可以得到图片的url,如图

  3.新建"cnblog.js"文件，写插入图片并关联到[首页]链接js的代码。

  $(document).ready(function(){
     //"MyLinks1_MyHomeLink"是定位到的导航栏里"首页"选项的id
     var home = document.getElementById("MyLinks1_MyHomeLink");
     home.innerHTML = "<img id='mylogo'src='https://files.cnblogs.com/files/DaisyWang/lazydog.bmp' alt='home'>";
  });

  4.进入博客后台添加随笔分类

  进入[编辑分类]添加分类标签

  这样，新随笔发布的时候，可以勾选对应标签，将其分类。（在此之前必须保证勾选了"随笔分类"控件）

  5.在首页可以看到侧边栏可以看到"随笔分类"控件及对应随笔的篇数，点击对应分类标签，页面跳转到对应分类页面。复制其URL保存，并标明对应标签名

  如点击"CSS"标签跳转到的页面url是http://www.cnblogs.com/DaisyWang/category/827272.html。
  6.编写将对应标签对应到导航栏选项的js代码。

 var node = document.getElementById("navList");
        var childNode = node.getElementsByTagName('li');
        childNode[5].style.display = "none";//隐藏会后一个选项"管理"

        var li_js = document.createElement("li");
        li_js.innerHTML = "<a href='http://www.cnblogs.com/DaisyWang/category/827271.html' class = 'menu'>JavaScript</a>";
        node.appendChild(li_js);

    var li_cs = document.createElement("li");
        li_cs.innerHTML = "<a href='http://www.cnblogs.com/DaisyWang/category/827272.html' class = 'menu'>CSS</a>";
        node.appendChild(li_cs);

    var li_html = document.createElement("li");
        li_html.innerHTML = "<a href='http://www.cnblogs.com/DaisyWang/category/827297.html' class ='menu'>html</a>";
        node.appendChild(li_html);
//添加ul子节点li,装自定义的对应标签选项
    var li_jq = document.createElement("li");
        li_jq.innerHTML = "<a href='http://www.cnblogs.com/DaisyWang/category/827316.html' class ='menu'>jQuery</a>";
        node.appendChild(li_jq);

     var  li_ws = document.createElement("li");
       li_ws.innerHTML = "<a href='http://www.cnblogs.com/DaisyWang/category/827300.html' class ='menu'>WebStorm</a>";
       node.appendChild(li_ws);
       
   var  li_other = document.createElement("li");
       li_other.innerHTML = "<a href='http://www.cnblogs.com/DaisyWang/category/827282.html' class ='menu'>其他</a>";
       node.appendChild(li_other);

  可以根据自己标签的不同和个数，写对应js代码
  7.将以上代码加入之前的$(document).ready(function(){}函数类并存入"cnblog.js"文件。
  8.上传js代码。有两种方式：直接将代码包含在<script></script>标签里复制粘贴到"后台——设置"的页脚代码框里，并save；上传"cnblog.js"到文件上传，获取文件url，在页脚代码框里添加<script src="{url}"></script>。

六、公告栏添加联系信息、人形时钟、站点访问统计插件

  在"后台——设置"的"博客侧边栏公告"里添加如下代码：

//
<!--侧边栏公告栏-->
<!--站点访问量统计-->
<a href="http://info.flagcounter.com/09YB">
<img src="http://s09.flagcounter.com/count2/09YB/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_6/viewers_0/labels_0/pageviews_0/flags_0/percent_0/" alt="Flag Counter" border="0">
</a>
<!--人形时钟-->
	 <div id="myTime">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="honehoneclock" align="middle">
		<param name="allowScriptAccess" value="always">
		<param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf">
		<param name="quality" value="high">
		<param name="bgcolor" value="#ffffff">
		<param name="wmode" value="transparent">
		<embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
	</object>
</div>
<!--联系方式及个人信息-->
<p class="para">关于我：<strong>一个逗逼的文艺女青年~</strong></p>
<p class="para">联系我：<a href="mailto:1126484584@qq.com" title="email">1126484584@qq.com</a></p>
<p class="para">博客：<a href="DaisyWang88.github.io" title="DaisyWang's blog" target="_blank">DaisyWang88.github.io</a></p>

博客主页改建完成~改建后效果DaisyWang88。