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

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

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

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

大家打開調試者工具會看到紅色圈里的東西，里面顯示的這個網站的源代碼結構，我們要修改任何東西也是要現在這方面進行樣式修改看下效果，最后才去next里的一些文件進行部分的添加和修改來達到我們的目的。

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

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

注意：通過觀察可以發現右側的CSS樣式都來源于一個main.css里。

找到你主題文件夾里的對應位置
以我的路徑為例子
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  ##這個是關鍵大家注意
// --------------------------------------------------
@import "_custom/custom";

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

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

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

在修改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;
}

//側邊欄信息樣式修改
.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;
}

//側欄按鈕樣式
.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主題已經集成了，我在此基礎上修改了一點而已，使用起來很簡單。

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

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

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

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

還有首頁的導航如何添加新的一個菜單按鈕進去，我后面會說。

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

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