2017年最新基於hexo搭建我的免費博客——自定義頁面樣式一

時間 2021-04-15

標籤 css 前端 web 瀏覽器 hexo 框架 ide 工具佈局 post 欄目 CSS 简体版

原文原文鏈接

前言

以前答應一個評論朋友要寫出這篇自定義CSS樣式來修改hexo下的next主題，原本打算要寫不少相關hexo下主題的一些修改方法和博客優化了，因爲晚上跟朋友看了電影，致使時間不容許我寫那麼多，因此這篇只是來介紹一下如何本身修改一些樣式並生成到博客上。
css

調試工具

瀏覽器下的開發者工具

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

接着說正題
由於考慮到一部分人是沒接觸過前端的，因此我會講的比較細，有前端調試開發經驗的能夠看快點，找到大家須要關注的地方和問題解決方法。

你們打開調試者工具會看到紅色圈裏的東西，裏面顯示的這個網站的源代碼結構，咱們要修改任何東西也是要如今這方面進行樣式修改看下效果，最後纔去next裏的一些文件進行部分的添加和修改來達到咱們的目的。
web

頭部導航樣式自定義

定位到對應標籤位置

經過右鍵點擊審查元素或者手動用放大鏡選擇，經過觀察能夠發現整個頭部是包裹在一個header裏並且你們把鼠標放上去也能夠很清楚的看到標籤包裹的是哪些部分，那麼經過開發工具能夠看到右邊對應的是生成在這個標籤上class裏的一些樣式設置.
瀏覽器

找到修改地方

經過觀察右側css樣式，有前端經驗的人能夠本身去diy一下，設置成本身想要的值，改變佈局樣式之類的，我就不用多說，改好後請記得把代碼copy下來。hexo

注意：經過觀察能夠發現右側的CSS樣式都來源於一個main.css裏。框架

添加你修改的代碼

找到你主題文件夾裏的對應位置
以個人路徑爲例子
D:\hexo\blog\themes\next\source\css
裏面有5個文件夾和一個styl文件，
main.styl主要用於打包CSS代碼輸出成CSS樣式的main.css文件,分析下其源代碼。ide

// 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個文件裏的源代碼，可能後面出問題很差還原。佈局

修改側面欄

同理

這個的修改和頭部那個差很少，你也只須要定位到對應的位置進行樣式修改，好比修改背景圖，顏色之類的。post

注意地方

在修改css的時候儘可能寫註釋必定要記得，分模塊來寫，不要頭部寫了又寫其餘的部分的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;
}