关于博客园自定义样式

导读

众所周知
博客园有一个自由开放的功能
那就是自定义样式
本篇内容不讲述如何调样式等技术知识
只是在此提供一个我是如何去自定义我的博客园样式的思路
供大家参考！ 欢迎拍砖~

思路以及步骤

我在做这个样式自定义的时候，首先的想法是把别人做的好的，直接拿过来用，但是发现总是达不到别人的那种效果，也许是扒代码水平有限，没有拿到关键部分。好吧，最后我只能自己一点点调，下面是我的整体的一个步骤：

1. 首先选一个自己喜欢的主题，或者说是容易改的主题吧，我这里选的是“darkgreentrip”这个主题
2. 然后把这个主题的主要的那部分css扒拉下来，我记得我这个主题好像是“darkgreentrip.css”和“darkgreentrip-mobile.css”
3. 把这两个文件上传到博客园后台，然后在后台设置“页首Html代码”这个区域放入引用代码
4. 接下来在禁用掉模板默认CSS，点击保存，观察效果
5. 如果跟之前主题效果是一样的，那么，我们现在就可以开始在这个基础上调整css样式了
6. 最后把调整后的css上传，保存，那么，就算大功告成了

这里要说明一下的是，虽然步骤很简单，但是你会发现，你需要话大量的时间做倒数第二步的工作，用浏览器一点点选中样式，然后调css是一个很繁琐的过程，至少我是这么觉得的。但是最后完成后是相当开心的！

如何使用我这个样式？

如果你觉的我这个博客的样式还不错哟，那么请别忘了点赞丢硬币丢香蕉~~哈哈哈！回到主题，你可以按照下面的方法去使用它。

• 首先，你需要选择我使用的主题：darkgreentrip

• 然后，通过浏览器的调试模式或是其他的方式，拿到我所使用的css文件：trainoo--web.css、trainoo-mobile.css

• 接着，把这两个文件上传到你的博客园后台

• 最后，在设置那个模块需要加上如下代码段（有些地方需要做修改，改成自己的内容即可）

• 博客侧边栏公告（支持HTML代码）（支持JS代码）

  <!---  自定义侧边栏  --->
  <div class="mySideBar">
  	<p class="nickName">昵称：<a href="http://www.cnblogs.com/Trainoo/">Trainoo</a></p>
  	<p>园龄：大概也就一百年吧~</p>
  	<p>粉丝：999999+</p>
  	<p>关注：999999+</p>
  	<p>邮箱：trainoo@163.com</p>
  	<p>代码库：
  		<a target="_blank" href="https://gitee.com/trainoo" class="glyphicon glyphicon-fire">码云</a>
  		<a target="_blank" href="https://github.com/jj-trainoo" class="glyphicon glyphicon-tint">GitHub</a>
  	</p>
  	<p id="p_b_follow"><a href="javascript:void(0);" onclick="follow('ca5022e9-4171-4a38-e168-08d4ef52ecb5')">+加关注</a></p>
  </div>
  
  <!--- 导入js库  --->
  <script src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
  <canvas id="c_n4" width="860" height="958" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>

• 页首Html代码

  <!-- 链接过来的 css 样式要放在 首页Html代码 里面 才会生效 -->
  <link type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
  <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/Trainoo/trainoo-web.css" />
  <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/Trainoo/trainoo-mobile.css" id="mobile-style" media="only screen and (max-width: 767px)" />
  
  <a id="back-to-top" style="display: inline;" href="javascript:;">
  	 <i class="glyphicon glyphicon-arrow-up"></i>
  </a>

• 页脚Html代码

  <script>
  $(function(){
  	changeIndReadCommentStyle();
  	//changeCatReadCommentStyle();
  
  	//返回顶部
  	$('#back-to-top').click(function(e){ $('html,body').animate({scrollTop:0}, 500) });
  
  	//滑稽~
  	$('#ad_t2').remove();
  	$('#under_post_news').remove();
  	$('#under_post_kb').remove();
  	$('.c_ad_block').remove();
  	$('.c_ad_block').remove();
  	$('#blog-calendar').remove();
  	$('#sidebar_search').remove();
  	$('title').html($('title').html())
  });
  // 修改首页 阅读、评论样式
  function changeIndReadCommentStyle(){	
  	var count = $('.postDesc').length;
  	var pattern = new RegExp("阅读(.*?)<a");
  	for (var i=0; i < count; i++){
  		var html = "";
  		var txt = pattern.exec($('.postDesc').eq(i).html());
  		html += "<span class=\"glyphicon glyphicon-eye-open\"></span>";
  		html += "  " + txt;
  		$('.postDesc').eq(i).html(html);
  	}
  }
  // 修改分类页 阅读、评论样式
  function changeCatReadCommentStyle(){	
  	var count = $('.entrylistItemPostDesc').length;
  	var pattern1 = new RegExp("阅读(.*?)");
  	for (var i=0; i < count; i++){
  		var html = "";
  		var txt = pattern1.exec($('.entrylistItemPostDesc').eq(i).html());
  		html += "<span class=\"glyphicon glyphicon-eye-open\"></span>";
  		html += "  " + txt + "<\/a>";
  		$('.entrylistItemPostDesc').eq(i).html(html);
  	}
  }
  </script>

• 最后点击保存即可！

最后，再来个总结

总结什么呢？第一次用markdown正式编辑博客内容，所以也踩了很多坑，这里记录一个最大的坑！markdown代码段的标记一般使用的是这个符号：

`

有些编辑器也可以用:

甚至我还百度了说可以用这个的：

でも，我在尝试这些之后，发现根本没有办法正常嵌入html代码，html在显示的时候会被转义！所以在尝试N遍之后，终于发现，
只需要在贴入的代码前敲两次table缩进一下就好了~~，好吧，再次暴露了我的markdown水平太低。。。

最后的最后，我是使用 MarkdownPad2 这个编辑器在本地编辑好了在贴到博客园发布的~