关于博客园自定义样式

2020-09-04：重要提示

1、本博客主题已经变更，本文中提到的样式均是以前使用的旧样式，跟当前主题无关联。所以参考下文，是达不到当前效果的。
2、新主题使用的是Cnblogs-Theme-SimpleMemory，具体使用方法可以看官方文档。

------------------------------分割线----------------------------------

导读

断断续续的奋斗了不知道多少个晚上，门面装修终于大功告成。作此文以纪念。

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

思路以及步骤

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

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();
   	
       //返回顶部
       $('#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);
   	}
   }
   </script>
  

• 最后点击保存即可！

最后，再来个总结

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

    `      // 方案1

有些编辑器也可以用:

     ```      // 方案2

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

     ~~~      // 方案3

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

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

=2018-06-23====
补充内容：
经过了这么长的一段时间，发现MarkDown水平稍有上涨，证明方案二中的使用方法是正确的。
如果有人发现自己的博客园使用方案二的方法排版显示错误的话，那么可能是你的设置有问题，可以按照如下方法设置一下：
打开博客后台管理 -> 选项 -> 默认编辑器 -> 选择markdown， 然后保存设置即可。

=2019-11-08====
截取阅读评论数正则有点问题，修改部分如下

    var pattern = new RegExp("阅读(.*?)*");
    var txt = pattern.exec($('.day .postDesc').eq(i).html())[0];

鼠标点击，爱心特效 (页脚 HTML 代码)

!function(e,t,a){
    function n(){
        c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
        o(),
        r()
    }
    function r(){
        for(var e=0;e<d.length;e++)
            d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");
        requestAnimationFrame(r)
    }
    function o(){
        var t="function"==typeof e.onclick&&e.onclick;
        e.onclick=function(e){
            t&&t(),i(e)
        }
    }function i(e){
            var a=t.createElement("div");
            a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)
    }
    function c(e){
        var a=t.createElement("style");a.type="text/css";
        try{
            a.appendChild(t.createTextNode(e))
        }
        catch(t){
            a.styleSheet.cssText=e
        }
        t.getElementsByTagName("head")[0].appendChild(a)
    }
    function s(){
        return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
    }
    var d=[];
    e.requestAnimationFrame=function(){
        return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){
            setTimeout(e,1e3/60)
        }
    }(),
    n()
}
(window,document);