前言
之前答應(yīng)一個評論朋友要寫出這篇自定義CSS樣式來修改hexo下的next主題，本來打算要寫很多相關(guān)hexo下主題的一些修改方法和博客優(yōu)化了，由于晚上跟朋友看了電影赁严，導(dǎo)致時間不允許我寫那么多，所以這篇只是來介紹一下如何自己修改一些樣式并生成到博客上。
調(diào)試工具
瀏覽器下的開發(fā)者工具
相信做前端的都知道每個瀏覽器自帶了一個調(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á)到我們的目的。
頭部導(dǎo)航樣式自定義
定位到對應(yīng)標(biāo)簽位置
通過右鍵點擊審查元素或者手動用放大鏡選擇绞吁，通過觀察可以發(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:\hexo\blog\themes\next\source\css
里面有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個文件里的源代碼鸭你，可能后面出問題不好還原屈张。
修改側(cè)面欄
同理
這個的修改和頭部那個差不多擒权，你也只需要定位到對應(yīng)的位置進(jìn)行樣式修改，比如修改背景圖阁谆，顏色之類的碳抄。
注意地方
在修改css的時候盡量寫注釋一定要記得，分模塊來寫场绿，不要頭部寫了又寫其他的部分的CSS剖效，到時候不好維護(hù)
福利
我的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ǔ)上修改了一點而已熬拒，使用起來很簡單爷光。
尾部署名LOGO
我的是一滴水，就是簡單替換了fontawsome里的一個圖標(biāo)而已梦湘。
其他部分修改
提醒
基本上會自定義CSS修改已經(jīng)能讓你修改出你自己想要的風(fēng)格了瞎颗，但是主題的框架布局是不能改變的，你只能改變微小的樣式而已捌议。
其他小修改
背景是用到一個JS來生成的，大家如果感興趣可以在下面評論引有，我可以給一個地址給大家參考使用瓣颅。
網(wǎng)易云播放器也是第三方生成的添加到了生成頁面框架的源代碼里實現(xiàn)的，還有一些文章圖標(biāo)的DIY之類的和美化譬正。
還有首頁的導(dǎo)航如何添加新的一個菜單按鈕進(jìn)去宫补，我后面會說。
我大概會再出一篇文章來給大家講解以上說的點曾我，讓大家都能實現(xiàn)我現(xiàn)在的效果粉怕。
總結(jié)
今天寫的比較匆忙，有些地方我有機(jī)會會重新再修改下抒巢。有任何問題和建議贫贝，可以在下面評論。
個人博客地址 http://www.cduyzh.com
