互聯網 - 大數據

沖沖火火，改來改去花了一天左右時間，最終能這樣還算滿意，下面這張圖是一開始的想法。

果然夠丑，原本的想法是將導航欄放到右邊，但發現結構不太好改，雖然現在已經知道怎么弄了。來看最終效果

官方的導航條我覺得用戶體驗太差了，如下：

這個導航條都是什么跟什么啊，于是導航條的改版也是重點對象，至于怎么改的，自有妙計。還有右邊的列表太丑了，也得改，我覺得最難受的就是列表，找起東西來太麻煩了，于是為了干凈整潔，列表的第一篇或者置頂的文章給顯示摘要，其他的只顯示標題，還有內容頁的評論也得改，嚴重的用戶體驗太不好了，如下：

評論框應該放在評論列表的上面才對，不然用戶還得拉到最下面。接下來講一些細節。

在沒有改版之前是這樣的：

首先想改版得到博客后臺修改一些東西，如下：

把“禁用模板默認CSS”勾上，這樣就不會影響我們寫的樣式。接下來重點了我們會發現我們的導航長這樣

如果想調整這個樣式，打開瀏覽器的審查元素，如下：

既然我們知道了它的結構和ID以及Class，那就好辦了，在審查元素上調唄，如下

調好了就可以把這些樣式復制到這里面，如下

然后點保存，就OK了，當然這還只是剛剛開始，又如如首頁列表的第一條顯示詳情和內容，我們只需要這樣。

找到對應的結構，把它們隱藏。實際上這些都還好辦，但如果碰到結構復制的，就需要動點腦筋了，還是說導航條吧，你會發現官方根本沒有提供給我們修改導航列表的地方，于是來想來想去也就只有JS能夠勝任這項工作了。于是我打算重寫列表項，將原有的內容給替換掉，代碼如下：

(function(){
        var navList = document.getElementById('navList');
        var navListStr = '';
        var navListTitle = [
          {
            'title':'首頁',
            'href':'http://www.cnblogs.com/pssp/'
          },
          {
            'title':'CSS指南',
            'href':'http://www.cnblogs.com/pssp/category/788821.html'
          },
          {
            'title':'HTML5',
            'href':'http://www.cnblogs.com/pssp/category/792058.html'
          },
          {
            'title':'Javascript',
            'href':'http://www.cnblogs.com/pssp/category/786428.html'
          },
          {
            'title':'學會生活',
            'href':'http://www.cnblogs.com/pssp/category/786458.html'
          },
          {
            'title':'我有話說',
            'href':'http://www.cnblogs.com/pssp/p/5995901.html'
          }
        ];
        for(var i=0;i<6;i+=1){
          navListStr += '<li><a href="'+ navListTitle[i].href +'" title="' + navListTitle[i].title + '">' + navListTitle[i].title + '</a></li>';
        }
        navList.innerHTML = navListStr;
}())

這樣就完美了，里面的鏈接就是這個

反正自己也是瞎想出來的，不過默認博客園是不允許你使用JS的，所有還得申請，具體看這個

如果沒有這個，你就得申請一下。其他地方的修改和這個也差不多，不能使用的就用JS來操作，其他地方有什么不懂的可以留言哈。