首页 > 嗟来之食 > 博客园强迫癌晚期者的福音——自定义博客园主题 – DaisyWang88 –
2016
08-12

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

  本博客适用于那些对于有些强迫症重症患者,如我,或者对审美有较高追求的人。
  如果对于博客园提供的主题模版均不是很满意可以自己手动调控,比如可以随意更改自己喜欢的样式,更改格局,公告栏添加个人额外信息、访问统计插件,导航栏设置自己想要的logo、将选项和随笔分类链接关联,也可以自定义导航栏选项的相关链接地址。如我的博客DaisyWang88。
  改建博客园主题之前,我们必须知道以下几点:
   1.博客园后台有个"上传文件"(开通博客可访问)的功能,文件上传默认的地址为http://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 {
width: auto;
float: none;
margin-right: 270px;
font-size: 16px;
}
/*隐藏博客标题栏*/
#blogTitle{
display:none;
}
#navigator {
width: 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 {
width: auto;
position: relative;
padding-left: 10px;
}
#mainContent {
width: auto;
float: none;
margin-right: 270px;
font-size: 16px;
}
#mainContent .forFlow {
float: none;
width: 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;
width: 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;
width: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='http://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。

最后编辑:
作者:
这个作者貌似有点懒,什么都没有留下。

留下一个回复