摘要：添加你修改的代碼找到你主題文件夾里的對應(yīng)位置以我的路徑為例子里面有個文件夾和一個文件，主要用于打包代碼輸出成樣式的文件分析下其源代碼。注意本人不提倡去修改除了下的其他個文件里的源代碼，可能后面出問題不好還原。

之前答應(yīng)一個評論朋友要寫出這篇自定義CSS樣式來修改hexo下的next主題，本來打算要寫很多相關(guān)hexo下主題的一些修改方法和博客優(yōu)化了，由于晚上跟朋友看了電影，導(dǎo)致時間不允許我寫那么多，所以這篇只是來介紹一下如何自己修改一些樣式并生成到博客上。

相信做前端的都知道每個瀏覽器自帶了一個調(diào)試者工具一般都是按F12就能出來，基本上每個瀏覽器的這個調(diào)試工具都類似，所以我以360瀏覽器下的調(diào)試工具來演示（其實360的調(diào)試工具和谷歌是一樣的，我只是覺得360用起來更流暢點）

接著說正題
因為考慮到一部分人是沒接觸過前端的，所以我會講的比較細(xì)，有前端調(diào)試開發(fā)經(jīng)驗的可以看快點，找到你們需要關(guān)注的地方和問題解決方法。

大家打開調(diào)試者工具會看到紅色圈里的東西，里面顯示的這個網(wǎng)站的源代碼結(jié)構(gòu)，我們要修改任何東西也是要現(xiàn)在這方面進(jìn)行樣式修改看下效果，最后才去next里的一些文件進(jìn)行部分的添加和修改來達(dá)到我們的目的。

通過右鍵點擊審查元素或者手動用放大鏡選擇，通過觀察可以發(fā)現(xiàn)整個頭部是包裹在一個header里而且大家把鼠標(biāo)放上去也可以很清楚的看到標(biāo)簽包裹的是哪些部分，那么通過開發(fā)工具可以看到右邊對應(yīng)的是生成在這個標(biāo)簽上class里的一些樣式設(shè)置.

通過觀察右側(cè)css樣式，有前端經(jīng)驗的人可以自己去diy一下，設(shè)置成自己想要的值，改變布局樣式之類的，我就不用多說，改好后請記得把代碼copy下來。

注意：通過觀察可以發(fā)現(xiàn)右側(cè)的CSS樣式都來源于一個main.css里。

找到你主題文件夾里的對應(yīng)位置
以我的路徑為例子
D:hexolog hemes extsourcecss
里面有5個文件夾和一個styl文件，
main.styl主要用于打包CSS代碼輸出成CSS樣式的main.css文件,分析下其源代碼。

// CSS Style Guide: http://codeguide.co/#css



$scheme    = hexo-config("scheme") ? hexo-config("scheme") : "Muse";
$variables = base $scheme custom;
$mixins    = base $scheme custom;



// Variables Layer
// --------------------------------------------------
for $variable in $variables
  @import "_variables/" + $variable


// Mixins Layer
// --------------------------------------------------
for $mixin in $mixins
  @import "_mixins/" + $mixin;



// Common Layer
// --------------------------------------------------

// Scaffolding
@import "_common/scaffolding";

// Layout
@import "_common/outline";

// Components
@import "_common/components";


// Schemes Layer
// --------------------------------------------------
@import "_schemes/" + $scheme;



// Custom Layer  ##這個是關(guān)鍵大家注意
// --------------------------------------------------
@import "_custom/custom";

大家可以看到我在代碼說最后一段代碼很關(guān)鍵，因為這是加載導(dǎo)出自定義設(shè)置的代碼，可以覆蓋到上面已經(jīng)導(dǎo)出的CSS樣式，也就是你可以覆蓋掉以前生成的樣式，而不用去在源文件下修改代碼，如果你想換回去，你只需要將_custom/custom.styl這個里面的代碼刪除即可。

注意：本人不提倡去修改除了_custom下的其他4個文件里的源代碼，可能后面出問題不好還原。

這個的修改和頭部那個差不多，你也只需要定位到對應(yīng)的位置進(jìn)行樣式修改，比如修改背景圖，顏色之類的。

在修改css的時候盡量寫注釋一定要記得，分模塊來寫，不要頭部寫了又寫其他的部分的CSS，到時候不好維護

我將會給大家開源我自己的CSS樣式修改給大家來做參考

// Custom styles.
//首頁文章陰影樣式
.post {
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 25px;
    -webkit-box-shadow: 0 0 14px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 14px rgba(202, 203, 204, .5);
}

//熱評文章
.ds-top-threads li a {
    padding-left: 5px;
    transition: border-width 0.2s linear 0s, color 0.2s linear 0s;
    border-bottom: none;
}

.ds-top-threads li a:hover {
    border-left: 8px solid #4d768c;
}

//首頁頭部樣式
.header {
    background: url("/images/header-bk.jpg");
}

.site-meta {
    float: none;
}

.menu {
    float: none;
}

.logo-line-before,
.logo-line-after {
    display: none;
}

.menu .menu-item a {
    font-size: 14px;
    color: rgb(15, 46, 65);
    border-radius: 4px;
}

.site-meta {
    margin-left: 0px;
    text-align: center;
}

.site-meta .site-title {
    font-size: 28px;
    font-family: "Comic Sans MS", sans-serif;
    color: #fff;
}

//首頁尾部樣式
.footer {
    background: none;
    font-size: 16px;
}

.footer-inner {
    font-family: "Comic Sans MS", sans-serif;
    text-align: center;
    color: #4c618f;
}

//側(cè)邊欄信息樣式修改
.site-author-name {
    margin: 48px 0 0;
    color: #090909;
    font-family: "Comic Sans MS", sans-serif;
}

.links-of-blogroll {
    font-size: 14px;
    margin-bottom: 42px;
}

.links-of-author {
    margin-top: 30px;
    margin-bottom: 58px;
}

.sidebar-inner {
    color: #649ab6;
}

.sidebar {
    box-shadow: inset 2px 2px 40px #bdb2b2;
}

.sidebar a {
    color: #649ab6;
    border-bottom-color: #649ab6;
    border-bottom: none;
}

.sidebar a:hover {
    color: #0c0b0b;
}

.site-state-item {
    display: inline-block;
    padding: 8px 28px;
    border-left: 1px solid #649ab6;
}

.sidebar-nav .sidebar-nav-active {
    color: #649ab6;
    border-bottom-color: #649ab6;
}

.sidebar-nav li:hover {
    color: #0c0b0b;
}

//側(cè)欄按鈕樣式
.sidebar-toggle {
    background: #649ab6;
}

.back-to-top {
    background: #649ab6;
}

//文章目錄樣式
.post-toc .nav .active>a {
    color: #4f7e96;
}

.post-toc ol a:hover {
    color: #7784ba;
}

.sidebar-nav .sidebar-nav-active:hover {
    color: #37596c;
}

a {
    border-bottom: none;
}

//首頁閱讀全文樣式
.post-button {
    margin-top: 30px;
    text-align: center;
}

.post-button .btn {
    color: #fff;
    font-size: 15px;
    background: #686868;
    border-radius: 16px;
    line-height: 2;
    margin: 0 4px 8px 4px;
    padding: 0 20px;
}
.post-button a{
  border-bottom: 1px solid #666;
}
.post-button a:hover {
    color: #7784ba;
}

尾部沒什么好修改的，就是自定義下CSS讓它好看點就行了，我用到了一個不蒜子的插件，next主題已經(jīng)集成了，我在此基礎(chǔ)上修改了一點而已，使用起來很簡單。

我的是一滴水，就是簡單替換了fontawsome里的一個圖標(biāo)而已。

基本上會自定義CSS修改已經(jīng)能讓你修改出你自己想要的風(fēng)格了，但是主題的框架布局是不能改變的，你只能改變微小的樣式而已。

背景是用到一個JS來生成的，大家如果感興趣可以在下面評論，我可以給一個地址給大家參考使用。

網(wǎng)易云播放器也是第三方生成的添加到了生成頁面框架的源代碼里實現(xiàn)的，還有一些文章圖標(biāo)的DIY之類的和美化。

還有首頁的導(dǎo)航如何添加新的一個菜單按鈕進(jìn)去，我后面會說。

我大概會再出一篇文章來給大家講解以上說的點，讓大家都能實現(xiàn)我現(xiàn)在的效果。

今天寫的比較匆忙，有些地方我有機會會重新再修改下。有任何問題和建議，可以在下面評論。