博客園強迫癌晚期者的福音——自定義博客園主題

時間  2019-12-09
標籤 博客 強迫 晚期 福音 自定義 園主 简体版
原文   原文鏈接

  本博客適用於那些對於有些強迫症重症患者，如我，或者對審美有較高追求的人。
  若是對於博客園提供的主題模版均不是很滿意能夠本身手動調控，好比能夠隨意更改本身喜歡的樣式，更改格局，公告欄添加我的額外信息、訪問統計插件，導航欄設置本身想要的logo、將選項和隨筆分類連接關聯，也能夠自定義導航欄選項的相關連接地址。如個人博客DaisyWang88。
  改建博客園主題以前，咱們必須知道如下幾點：
   1.博客園後臺有個"上傳文件"(開通博客可訪問)的功能，文件上傳默認的地址爲http://files.cnblogs.com/files/DaisyWang，DaisyWang是本身的博客地址名。能夠上傳一個圖片，而後在上傳文件列表裏點擊文件名，就能夠在新窗口顯示圖片url就是圖片的鏈接地址。
  2.博客園後臺的"設置"按鈕（開通博客後才能訪問）提供頁面CSS代碼、公告欄、頁首、頁腳的代碼上傳功能，貼入相關代碼並保存，就能夠看到本身主頁的變化。
  3.若是想要上傳js代碼須要發郵件給博客園contact@cnblogs.com申請js權限。
  4.可在本身的博客主頁用瀏覽器如chrome的審查代碼定位元素，可查看元素id、class、標籤名CSS樣式等信息，並能夠臨時修改並顯示樣式。如圖
  經過以上幾點的介紹，相信你們對怎麼改建博客主題有必定的想法了。
  下面開始改建博客：javascript

1、選定基礎模版

  咱們通常在已有的模版基礎上修改，這樣會方便不少，不過也能夠徹底本身定義樣式，若是以爲足夠能夠替換原來主題提供的樣式了，則能夠在設置頁面裏禁用模板默認CSS。
  這裏我選擇的是東東的elf,由於我的比較喜歡左邊的日期欄樣式。
css

2、禁用一些控件。

  如導航欄裏的[博客園] [新隨筆] [聯繫] [訂閱]禁用。進入後臺的[選項]去掉相應勾選按鈕。如圖

  這樣導航欄裏就只剩[首頁] [管理]。（方便以後與隨筆分類關聯）。
  至於去掉的[博客園]是連接到博客園網站首頁的，若是平時不怎麼逛就不須要,須要時能夠直接百度進入，所以我這裏禁用掉了。
  [新隨筆]能夠直接經過http://i.cnblogs.com訪問到後臺（前提是要開通本身的博客並登陸）。
  聯繫能夠直接將我的聯繫方式以html的形式放進公告欄,如圖
        。html

3、開始修改樣式。

  1.新建一個"cnblog.css"文件用來保存修改樣式代碼。
  2.使用chrome上面所說功能定位元素，能夠找到元素id、class、標籤名及CSS樣式。能夠直接調試修改樣式，並能夠直接預覽修改後樣式效果，將本身滿意的效果的相關代碼保存在"cnblog.css"當中。直到全部本身不滿意的地方修改完成。
  3.將"cnblog.css"當中的CSS代碼粘貼到後臺"設置"(開通博客並登陸就可訪問)裏的CSS代碼框裏，並save，如圖

  個人修改包括：隱藏一些模塊、修改導航欄樣式、內容區域的寬度、字體、連接的樣式和顏色、隨筆內容取區域的行高等。個人CSS代碼以下：java

/*字體*/
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.刷新主頁就能夠看到修改後的樣式效果。node

4、設置導航欄logo並關聯到首頁連接和選項關聯到隨筆分類

  1.這部分要用到js代碼，所以先要發郵件contact@cnblogs.com給博客園申請js權限。
  2.將本身選定的logo圖片上傳到文件上傳，點擊圖片名，圖片會重新頁面打開，能夠獲得圖片的url,如圖
git

  3.新建"cnblog.js"文件，寫插入圖片並關聯到[首頁]連接js的代碼。github

$(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代碼。chrome

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>。瀏覽器

6、公告欄添加聯繫信息、人形時鐘、站點訪問統計插件

  在"後臺——設置"的"博客側邊欄公告"裏添加以下代碼：app

//
<!--側邊欄公告欄-->
<!--站點訪問量統計-->
<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。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程