DIY部落格（3）
阿新 • • 發佈：2018-11-10
github程式碼：https://github.com/numb-men/my_blog
一、為了研究頁面的設計和佈局（還有為了給我的好朋友關注）我註冊了一個部落格園賬號，併成功申請了微博，切換部落格的面板很簡單
之後我選擇了我喜歡的一個面板，併發布了第一篇部落格：
但是這個部落格雖然看起來精美，但是畢竟不是出自自己之手。我還是在開發我的個人部落格上任重道遠。
二、新的介面佈局
之前的介面佈局被我淘汰了：
它太過死板，佈局不精緻，而且不實用。
我參照一些文件頁面的寫法，參考出了以下的佈局：
它並沒有枉費我一個下午的心血，它的左側邊欄和右邊內容顯示是獨立滑動的，介面的色彩也做了修繕。未來在最右邊還可以加入新的介面元素，如參考部落格園的日曆（我非常喜歡）、文章排行、個人介紹、評論等等。整體的佈局還是以精簡實用為核心。
三、原始碼
（1）html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="衡與墨的個人網站"> <meta name="author" content="le"> <title>衡與墨</title> <link rel="stylesheet" type="text/css" href="./css/all.css" charset="utf-8"> <script src="https://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="./js/index.js" charset="utf-8"></script> </head> <body> <div class="wrap"> <div class="menu-fixed" id="menu"> <div class="menu-top"> <div class="row-in space-center"> <img src="./img/hengyumo.jpg" class="my-img"> <div class="my-name">衡與墨</div> </div> </div> <div class="menu-center"> <ul> <li>莊子名言--</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言--</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言--</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言--</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> <li>莊子名言</li> </ul> </div> </div> <div class="contain-unfixed" id="contain"> <p> 一、大知閒閒，小知間間；大言炎炎，小言詹詹。——《莊子•齊物論》 【譯】最有智慧的人，總會表現出豁達大度之態；小有才氣的人，總愛為微小的是非而斤斤計較。合乎大道的言論，其勢如燎原烈火，既美好又盛大，讓人聽了心悅誠服。那些耍小聰明的言論，瑣瑣碎碎，廢話連篇。 【解】立身處世，亦不妨從中借鑑。 </p> <p> 二、吾生也有涯，而知也無涯。以在涯隨無涯，殆已；已而為知者，殆而已矣。——《莊子•養生主》 【譯】人的生命是有限的，而知識是無限的。要想用有限的生命去追求無限的知識，便會感到很疲倦；既然如此還要不停地去追求知識，便會弄得更加疲睏不堪！ 【解】用有限的生命投入到無限的學習之中是不明智的，反應了莊子棄智絕聖的思想。 </p> <p> 三、且夫水之積也不厚，則其負大舟也無力。——《莊子•逍遙遊》 【譯】如果水積的不深不厚，那麼它就沒有力量負載大船。 【解】從大舟與水的關係看，我們至少可以得到這樣的啟示：求大學問，幹大事業，必須打下堅實、深厚的基礎。 </p> <p> 四、相與於無相與，相為於無相為。——《莊子•大宗師》 【譯】相互結交在不結交之中，相互有為於無為之中。 【解】交友要達到相交出於無心，相助出於無為。這才是“莫逆之交”。 </p> <p> 五、庖人雖不治庖，尸祝不越樽俎而代之矣。——《莊子•逍遙遊》 【譯】廚師雖然不做祭品，主持祭祀的司儀是不會越過擺設祭品的几案，代替廚師去做的。 【解】此謂儘管庖人不盡職，尸祝也不必超越自己祭神的職權範圍代他行事。表現了莊子無為而治的思想，成語“越俎代庖”即由此而來。 </p> <p> 六、以無厚入有間，恢恢乎其於遊刃必有餘地矣。——《莊子•養生主》 【譯】以無厚入有隙，所以運作起來還是寬綽而有餘地的。 【解】說明做事要“依乎天理”，“以無厚入有間”，這是莊子養生論的核心。同時說明了要認識自然規律，按自然規律辦事。成語“目無全牛”、“遊刃有餘”這兩條成語，都出自這裡。 </p> <p> 七、以火救火，以水救水，名之曰益多。——《莊子•人間世》 【譯】用火來救火，用水來救水，這樣做不但不能匡正，反而會增加（衛君的）過錯。 【解】假借孔子教導顏回的話，來闡明一種處世之道。成語“以火救火”、“以水救水”出此。八、物無非彼，物無非是；自彼則不見，自知則知之。故曰：彼出於是，是亦因彼。——《莊子•齊物論》 【譯】世上一切事物，無不存在對立的另一面，無不存在對立的這一面。從另一面看不明白的，從這一面就可以看得明白些。所以說，彼出於此，此也離不開彼。即事物對立的兩面，誰也離不開誰。 </p> <p> 一、大知閒閒，小知間間；大言炎炎，小言詹詹。——《莊子•齊物論》 【譯】最有智慧的人，總會表現出豁達大度之態；小有才氣的人，總愛為微小的是非而斤斤計較。合乎大道的言論，其勢如燎原烈火，既美好又盛大，讓人聽了心悅誠服。那些耍小聰明的言論，瑣瑣碎碎，廢話連篇。 【解】立身處世，亦不妨從中借鑑。 </p> <p> 二、吾生也有涯，而知也無涯。以在涯隨無涯，殆已；已而為知者，殆而已矣。——《莊子•養生主》 【譯】人的生命是有限的，而知識是無限的。要想用有限的生命去追求無限的知識，便會感到很疲倦；既然如此還要不停地去追求知識，便會弄得更加疲睏不堪！ 【解】用有限的生命投入到無限的學習之中是不明智的，反應了莊子棄智絕聖的思想。 </p> <p> 三、且夫水之積也不厚，則其負大舟也無力。——《莊子•逍遙遊》 【譯】如果水積的不深不厚，那麼它就沒有力量負載大船。 【解】從大舟與水的關係看，我們至少可以得到這樣的啟示：求大學問，幹大事業，必須打下堅實、深厚的基礎。 </p> <p> 四、相與於無相與，相為於無相為。——《莊子•大宗師》 【譯】相互結交在不結交之中，相互有為於無為之中。 【解】交友要達到相交出於無心，相助出於無為。這才是“莫逆之交”。 </p> <p> 五、庖人雖不治庖，尸祝不越樽俎而代之矣。——《莊子•逍遙遊》 【譯】廚師雖然不做祭品，主持祭祀的司儀是不會越過擺設祭品的几案，代替廚師去做的。 【解】此謂儘管庖人不盡職，尸祝也不必超越自己祭神的職權範圍代他行事。表現了莊子無為而治的思想，成語“越俎代庖”即由此而來。 </p> <p> 六、以無厚入有間，恢恢乎其於遊刃必有餘地矣。——《莊子•養生主》 【譯】以無厚入有隙，所以運作起來還是寬綽而有餘地的。 【解】說明做事要“依乎天理”，“以無厚入有間”，這是莊子養生論的核心。同時說明了要認識自然規律，按自然規律辦事。成語“目無全牛”、“遊刃有餘”這兩條成語，都出自這裡。 </p> <p> 七、以火救火，以水救水，名之曰益多。——《莊子•人間世》 【譯】用火來救火，用水來救水，這樣做不但不能匡正，反而會增加（衛君的）過錯。 【解】假借孔子教導顏回的話，來闡明一種處世之道。成語“以火救火”、“以水救水”出此。八、物無非彼，物無非是；自彼則不見，自知則知之。故曰：彼出於是，是亦因彼。——《莊子•齊物論》 【譯】世上一切事物，無不存在對立的另一面，無不存在對立的這一面。從另一面看不明白的，從這一面就可以看得明白些。所以說，彼出於此，此也離不開彼。即事物對立的兩面，誰也離不開誰。 </p> </div> </div> </body> </html>
（2）css:
@charset "utf-8"; *{ padding:0; margin:0; } body{ font-weight: normal; color: #404040; min-height: 100%; overflow-x: hidden; background: #edf0f2; } .wrap{ } .menu-fixed{ width: 250px; background: #343131; position: fixed; top: 0; left: 0; z-index: 200; } .menu-unfixed{ width: 250px; background: #343131; padding-right: 1050px; } .menu-top{ background: #2980B9; width:226px; height: 100px; padding: 25px 12px; } .my-img{ width: 30px; height: 30px; margin-right: 20px; border-radius: 10%; } .my-name{ line-height: 30px; font-size: 25px; color: #fcfcfc; } .menu-center{ padding: 15px 0; } #menu ul{ list-style: none; } #menu li{ text-align: center; font-size: 14px; color: #d9d9d9; width: 204px; padding: 6px 23px; } .contain-unfixed{ width: 750px; padding: 25px 150px 25px 400px; background: #fcfcfc; } .contain-fixed{ width: 750px; padding: 25px 150px 25px 150px; background: #fcfcfc; position: fixed; top: 0; left: 250px; z-index: 200; } #contain p{ font-size:16px; } .row-in{ display: flex; flex-direction: row; } .column-in{ display: flex; flex-direction: column; } .space-around{ justify-content: space-around; } .space-between{ justify-content: space-between; } .space-center{ justify-content: center; }
（3）js:
var menu_scrollTop = 0
var contain_scrollTop = 0
$(document).ready(function(){
console.log("document ready!")
$("#menu").mouseenter(function(){
contain_scrollTop = $(document).scrollTop()
console.log("contian_scrollTop:", contain_scrollTop)
$("#menu").toggleClass("menu-unfixed menu-fixed")
$("#contain").toggleClass("contain-fixed contain-unfixed")
$(document).scrollTop(menu_scrollTop)
$("#contain").css("top", -contain_scrollTop + "px")
})
$("#menu").mouseleave(function(){
menu_scrollTop = $(document).scrollTop()
console.log("menu_scrollTop:", menu_scrollTop)
$("#menu").toggleClass("menu-unfixed menu-fixed")
$("#contain").toggleClass("contain-fixed contain-unfixed")
$(document).scrollTop(contain_scrollTop)
$("#menu").css("top", -menu_scrollTop + "px")
})
$("#menu li").mouseenter(function(){
$(this).css("background","#4e4a4a")
})
$("#menu li").mouseleave(function(){
$(this).css("background", "#343131")
})
$("#contain p").mouseenter(function(){
$(this).css("color", "#2980B9")
})
$("#contain p").mouseleave(function(){
$(this).css("color", "#404040")
})
})
（4）程式碼簡要說明：
其中js程式碼是實現側邊欄和內容獨立滑動的核心，我使用了JQuery的事件監聽，監聽滑鼠指標進入側邊欄和離開側邊欄，進入和離開時分別賦予側邊欄和內容不同的類佈局，實現它們的獨立。同時還使用兩個全域性的變數分別儲存側邊欄的scrollTop和內容的scrollTop，用來實現切換滑動進度。