Logo

雖然 NexT 的主題很漂亮熊楼，但問題是太受歡迎了斗忌，都快爛大街了。
好在它是一個開源項目市栗，我們可以通過修改它的代碼來個性話你的博客缀拭。
這篇教程要涉及到一些前端知識，可能沒有那么 Novice friendly填帽。

因為涉及到對 NexT 代碼的修改蛛淋，搞不好，可能引起 Hexo 無法工作篡腌。所以強烈建議使用 Git 對 NexT 進行備份褐荷。
具體使用方法請自行 Google。

準備工作

1. 一顆能折騰的心哀蘑。
2. 一定的前端知識诚卸。

Start

最簡單的方法

美化你的 Hexo 的最簡單方法 -> 安裝我修改過的 NexT
在 Hexo 目錄中使用命令

$ git clone https://github.com/Mogeko/hexo-theme-next.git themes/next

*記得刪掉原來安裝過的 NexT葵第。

手動美化 Hexo

如果有能力绘迁，推薦跟我一起手動改代碼。
最好能明白我給你的代碼都是做什么的卒密，將來萬一出了問題缀台，也有個找到問題的方向。

圓形頭像（頭像旋轉(zhuǎn)）

NexT 默認的頭像是方的哮奇。也不是說不好看膛腐，就是覺得不習慣睛约，這個要看個人喜好。
在 /source/css/_custom/custom.styl 中添加一下代碼就可以吧頭像弄成圓的

// 圓形頭像
.site-author-image {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    transition: 1.4s all;
}

然后哲身，添加以下代碼可以讓頭像在鼠標停留時旋轉(zhuǎn) 180°

// 頭像旋轉(zhuǎn)
.site-author-image:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -transform: rotate(360deg);
}

點擊頭像跳轉(zhuǎn)到 關(guān)于我 頁面

第一次用 Next辩涝，習慣性點了一下頭像，本以為會跳轉(zhuǎn)到什么頁面勘天，結(jié)果什么都沒有發(fā)生怔揩，才發(fā)現(xiàn)那根本不是超鏈接。加上 關(guān)于我 頁面正好沒地方放脯丝，（覺得官方把 關(guān)于我 頁面放進 menu 里很蠢）所以決定為頭像增加一個超鏈接商膊，跳轉(zhuǎn)到 關(guān)于我 頁面。
首先需要新建一個 about 頁面宠进，在 Hexo 文件夾中使用一下命令

$ hexo new page "about"

在 [Hexo 文件夾]/source/about/index.md 中編輯介紹自己的內(nèi)容晕拆。

然后在 /layout/_macro/sidebar.swig 中，用一個 <a> 標簽把頭像包起來就可以了
像這樣

<!--只節(jié)選了一部分材蹬，忽略上面的內(nèi)容-->
          <a href="/about/">
            <img class="site-author-image" itemprop="image"
               src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
               alt="{{ theme.author }}" />
            <p class="site-author-name" itemprop="name">{{ theme.author }}</p>
          </a>
<!--忽略下面的內(nèi)容-->

跳轉(zhuǎn)到‘關(guān)于我’頁面

修改側(cè)邊滾動條的樣式

同樣的实幕，看個人喜好。你可以將側(cè)邊滾動條的樣式修改得和我一樣堤器，（只對 webkit 內(nèi)核的瀏覽器有效）只需要在 /source/css/_custom/custom.styl 中添加

// 更好的側(cè)邊滾動條
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
::-webkit-scrollbar-button:start:increment,::-webkit-scrollbar-button:end:decrement {
  display: none;
}
::-webkit-scrollbar-corner {
  display: block;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(0,0,0,.2);
}
::-webkit-scrollbar-thumb:hover {
  border-radius: 8px;
  background-color: rgba(0,0,0,.5);
}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb {
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
}
::-webkit-scrollbar-track:hover {
  background-color: rgba(0,0,0,.15);
}
::-webkit-scrollbar-button:start {
  width: 10px;
  height: 10px;
  background: url(../images/scrollbar_arrow.png) no-repeat 0 0;
}
::-webkit-scrollbar-button:start:hover {
  background: url(../images/scrollbar_arrow.png) no-repeat -15px 0;
}
::-webkit-scrollbar-button:start:active {
  background: url(../images/scrollbar_arrow.png) no-repeat -30px 0;
}
::-webkit-scrollbar-button:end {
  width: 10px;
  height: 10px;
  background: url(../images/scrollbar_arrow.png) no-repeat 0 -18px;
}
::-webkit-scrollbar-button:end:hover {
  background: url(../images/scrollbar_arrow.png) no-repeat -15px -18px;
}
::-webkit-scrollbar-button:end:active {
  background: url(../images/scrollbar_arrow.png) no-repeat -30px -18px;
}

頂部閱讀進度條

這個要稍微復雜點茬缩，需要改動 4 個文件。
完成后就可以擁有向我一樣的頂部閱讀進度條吼旧。

首先凰锡，在/layout/_partials/header.swig 模板文件里加上進度條的 div：

<div class="top-scroll-bar"></div>

在這個位置

頂部閱讀進度條

.top-scroll-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: none;
    width: 0;
    height: 2px;
    background: #6d6d6d;
}

再然后，新建一個 js腳本 文件 /source/js/src/custom/custom.js圈暗，來控制我們的進度條掂为。

$(document).ready(function () {
  $(window).scroll(function(){
    $(".top-scroll-bar").attr("style", "width: " + ($(this).scrollTop() / ($(document).height() - $(this).height()) * 100) + "%; display: block;");
  });
});

最后，將我們新建的那個 js腳本引入到模板员串，使其生效勇哗。
在 /layout/_scripts/commons.swig 中，加入

'src/custom/custom.js'

在這個位置

頂部閱讀進度條

原文地址：https://mogeko.github.io/2017/003
歡迎關(guān)注我的博客 (?ω?) ノ：Mogeko`s Blog