目錄

• 一. 感謝熱心博主分享的攻略
• 二. 進行了哪些美化?
  • 1. Markdown美化
  • 2. 給博客頁面加上滑鼠停留響應
    • Ⅱ. 字體大小font-size發生變化
    • Ⅲ. 給容器添加陰影效果
  • 3. 處理一些細節
• 源碼分享
  • 點擊此處跳轉到Github

註冊博客園賬號有一個多月了, 一切都很好, 但就一直覺得自己的博客頁面比較老土. 在首頁瀏覽時候發現一位博主的頁面挺乾凈整潔的, 而且他分享了製作的思路, 於是下定決心美化一番. 本文將介紹美化的思路, 並貼上所有代碼, 俗話說授之以魚也要授之以漁.

一. 感謝熱心博主分享的攻略

• 致謝要寫在前面, 這位博主把他博客的整套CSS代碼都貢獻出來了, 在此基礎上進行修改變得十分容易. 秉承這種精神, 文章末尾也將奉獻上我的所有定製代碼, 如果哪位朋友想直接體驗以下, 直接複製就行了.
• 該博主的博客地址

二. 進行了哪些美化?

1. Markdown美化

• 首先要美化的就是Markdown的顯示了. 第一次接觸Markdown是在註冊完Github創建一個新倉庫的時候, 寫README必須得用Markdown寫, 當時就覺得怎麼有這麼好看的排版.
• 後來在博客園上第一次用Markdown寫博客, 點完發佈回頭一看...???...
• 當時覺得這個估計是Markdown的變種, 也能湊合著用就沒管了.
• 現在知道了Markdown其實是使文字通過某種CSS樣式美化後顯示出來而已, 既然這樣, 我們可以自己修改Markdown的顯示樣式.
• 這裡貼一段簡單的代碼演示修改的過程, 後面會貼上帶有註釋的完整代碼.

1. 首先選中你要修改的地方, 然後在開發者工具中(谷歌瀏覽器快捷鍵F12)中直接對CSS樣式進行修改. (博主是後端方向, 也沒記得幾個CSS樣式, 基本都是邊查邊改哈)
   
2. 修改得到滿意的CSS樣式後, 把他複製到頁面定製CSS代碼欄中, 可以通過我的博客->管理->設置找到該欄.
   
3. 這樣便完成了一個樣式的美化

2. 給博客頁面加上滑鼠停留響應

• 我覺得現代網頁和十幾年前的網頁不同之處在於當你的滑鼠滑過網頁, 各種模塊就不停的動, 交互感十足. 為了能讓博客看起來更具科技性, 未來性(忍住別笑, 給後端小白一個裝比的機會), 我決定給博客首頁也加上這些效果.

• 本博客製作這種特效目前有三種思路:

  Ⅰ. div容器的寬高發生改變

   
  
   
• 具體的CSS代碼如下:

#header #navigator ul li {
    float: left;
    width: 13%; /*div原來的寬度為13%*/
    text-align: center;
    margin-right: 0px;
    background: #9e9e9e14;
    transition: width 0.5s; /*CSS3中引入的過渡功能, 意思是width屬性將會發生變化, 變化時間為0.5秒*/
    -moz-transition: width 0.5s; /*後面幾個意思一樣, 多寫幾個為了相容不同的瀏覽器*/   
    -webkit-transition: width 0.5s;
    -o-transition: width 0.5s;
}
#header #navigator ul li:hover { /*hover即為滑鼠停留時的樣式*/
    width: 20%; /*寬度變為20%*/
}

Ⅱ. 字體大小font-size發生變化

• 具體代碼如下:

.postTitle, .entrylistPosttitle {
    font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 1.8em;
    padding: 20px 20px 15px 0px;
    background: #fff;
    border-radius: 10px 10px 0px 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: font-size 0.5s; /*這裡改變的是字體的大小*/
    -moz-transition: font-size 0.5s;
    -webkit-transition: font-size 0.5s;
    -o-transition: font-size 0.5s;
}
.postTitle:hover {
    font-size: 2em; 
}

Ⅲ. 給容器添加陰影效果

• 具體代碼如下

.search, .newsItem, .catListPostCategory, .catListPostArchive, .catListTag, .catListView, .catListBlogRank {
    background: #fff;
    margin-bottom: 30px;
    word-wrap: break-word;
    border-radius: 10px;
    margin-top: 10px;
    border: 2px solid #9E9E9E;
    transition: box-shadow 0.5s;
    -moz-transition: box-shadow 0.5s;
    -webkit-transition: box-shadow 0.5s;
    -o-transition: box-shadow 0.5s;
}
/*添加陰影*/
.newsItem:hover, .catListPostCategory:hover, .catListPostArchive:hover, .catListTag:hover, .catListView:hover, .catListBlogRank:hover {
    /* border: 5px solid; */
    box-shadow: 10px 10px 10px #9E9E9E;
}

3. 處理一些細節

• 讓點贊圖標也能旋轉起來.
• 隱藏掉文章數量顯示(感覺都是寫隨筆, 百度了一下文章的功能, 但還是沒有搞懂)
• 修改了一些文本的顏色.
• 在頁面右上角添加Github標簽. (如果你打算使用這套模板, 別忘了在頁首的html代碼中把Github地址修改為自己的Github)

源碼分享

點擊此處跳轉到Github

• 體驗該皮膚你只需要在個人博客頁面->管理->設置中禁用模板預設CSS, 然後把各部分代碼複製到相應的地方即可.
• 頁面定製CSS代碼

• 頁腳html代碼

• 頁首Html代碼

• 溫馨提示: 為了讓JS代碼生效你需要申請代碼許可權.