自定義頁(yè)面樣式(一)

前言

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

調(diào)試工具

瀏覽器下的開(kāi)發(fā)者工具

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

接著說(shuō)正題 因?yàn)榭紤]到一部分人是沒(méi)接觸過(guò)前端的，所以我會(huì)講的比較細(xì)，有前端調(diào)試開(kāi)發(fā)經(jīng)驗(yàn)的可以看快點(diǎn)，找到你們需要關(guān)注的地方和問(wèn)題解決方法。 大家打開(kāi)調(diào)試者工具會(huì)看到紅色圈里的東西，里面顯示的這個(gè)網(wǎng)站的源代碼結(jié)構(gòu)，我們要修改任何東西也是要現(xiàn)在這方面進(jìn)行樣式修改看下效果，最后才去next里的一些文件進(jìn)行部分的添加和修改來(lái)達(dá)到我們的目的。

頭部導(dǎo)航樣式自定義

定位到對(duì)應(yīng)標(biāo)簽位置

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

找到修改地方

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

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

添加你修改的代碼

找到你主題文件夾里的對(duì)應(yīng)位置 以我的路徑為例子 D:\hexo\blog\themes\next\source\css 里面有5個(gè)文件夾和一個(gè)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  ##這個(gè)是關(guān)鍵大家注意
// --------------------------------------------------
@import "_custom/custom";

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

注意：本人不提倡去修改除了_custom下的其他4個(gè)文件里的源代碼，可能后面出問(wèn)題不好還原。
### 修改側(cè)面欄
### 同理
這個(gè)的修改和頭部那個(gè)差不多，你也只需要定位到對(duì)應(yīng)的位置進(jìn)行樣式修改，比如修改背景圖，顏色之類(lèi)的。
### 注意地方
在修改css的時(shí)候盡量寫(xiě)注釋一定要記得，分模塊來(lái)寫(xiě)，不要頭部寫(xiě)了又寫(xiě)其他的部分的CSS，到時(shí)候不好維護(hù)

福利

我的CSS

我將會(huì)給大家開(kāi)源我自己的CSS樣式修改給大家來(lái)做參考

// Custom styles.
//首頁(yè)文章陰影樣式
.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);
}


//熱評(píng)文章
.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;
}


//首頁(yè)頭部樣式
.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;
}


//首頁(yè)尾部樣式
.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;
}


//首頁(yè)閱讀全文樣式
.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;
}

尾部修改

建議

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

尾部署名LOGO

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

其他部分修改

提醒

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

其他小修改

背景是用到一個(gè)JS來(lái)生成的，大家如果感興趣可以在下面評(píng)論，我可以給一個(gè)地址給大家參考使用。

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

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

我大概會(huì)再出一篇文章來(lái)給大家講解以上說(shuō)的點(diǎn)，讓大家都能實(shí)現(xiàn)我現(xiàn)在的效果。

總結(jié)

今天寫(xiě)的比較匆忙，有些地方我有機(jī)會(huì)會(huì)重新再修改下。有任何問(wèn)題和建議，可以在下面評(píng)論。