關於博客園自定義樣式

導讀

斷斷續續的奮斗了不知道多少個晚上，門面裝修終於大功告成。作此文以紀念。

眾所周知，博客園有一個自由開放的功能，那就是自定義樣式，本篇內容不講述如何調樣式等技術知識，只是在此提供一個我是如何去自定義我的博客園樣式的思路，供大家參考！ 歡迎拍磚~

思路以及步驟

我在做這個樣式自定義的時候，首先的想法是把別人做的好的，直接拿過來用，但是發現總是達不到別人的那種效果，也許是扒代碼水平有限，沒有拿到關鍵部分。好吧，最后我只能自己一點點調，下面是我的整體的一個步驟：

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>郵箱：[e-mail]</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);