Next的CSS相關樣式配置

前言

在 Hexo & Next 建構部落格這篇有說明到Next主題(theme)套用的方式，其實Hexo還有很多其他的 Theme ，但目前Next的關注度及資源都比其他還要來的高，透過Hexo和Next主題套件能夠快速客製化和其他人不同的排版、字形、顏色等風格的部落格，因此這邊來記錄在使用Next主題的相關樣式配置，特別是針對Gemini這個外觀(Scheme)，但有可能版本不同會有所些微差異，所以有疑問都歡迎留言告知!

基本樣式配置

Next主題的樣式配置主要是在 next\source\css裡面，其中在next\source\css\_variables資料夾有4個Scheme的樣式以及基本大家共用的base.styl，檔案結構如下圖

├── _css
|   ├── _common
|   ├── _custom
|   ├── _schemes
|   ├── _variables
|   ├── _colors.styl
|   ├── _mixins.styl
|   └── main.styl

下面將base.styl、Gemini.styl和Pisces.styl較重要的部份來做紀錄

base.styl

//文章h1 h2...用字的顏色
$text-color                   = $black-light;
//超連結文字的顏色
$link-color                   = $black-light;
//碰到超連結文字顏色
$link-hover-color             = $black-deep;
// Global border color.
$border-color                 = $grey-light;
// Background color for <body>
$body-bg-color                = white;
//sidebar的背底色
$content-bg-color             = white;
// Selection
$selection-bg                 = $blue-deep;
// Dark mode color
$card-bg-color                = $whitesmoke;
//導覽目錄地目前欄位及碰到背底色
$menu-item-bg-color           = $black-light;
// Font size
$font-size-smallest       = .5em; //每一篇文章標題下面的發表時間相關資訊的字型大小
$font-size-smaller        = .8em; //Sidebar上半部的導覽目錄的字型大小
$font-size-small          = .875em; //Sidebar下半部的文章目錄和本章概要的字型大小
$font-size-medium         = 1.3em; //Sidebar本站概要的文章、分類和標籤上面的數字字型大小
$font-size-large          = 1.125em; //文章文字的字型大小
$font-size-largest        = 1.75em; //文章標題的字型大小

Gemini.styl

@import "Pisces.styl";
// Settings for some of the most global styles.
// --------------------------------------------------
$body-bg-color           = #F0F0F0;
// Borders.
// --------------------------------------------------
$box-shadow-inner        = 0 2px 2px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .06), 0 1px 5px 0 rgba(0, 0, 0, .12);
$box-shadow              = 0 2px 2px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .06), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 -1px .5px 0 rgba(0, 0, 0, .09);
// 部落格通用文字的大小
$font-size-base = 15px
// Code字體的大小
$code-font-size = 11px
//依照不同尺寸的縮放比例
$content-desktop         = 85%
$content-desktop-large   = 85%
$content-desktop-largest = 85%
// 設定目錄導覽(site-nav)的sidebar的圓角(回到首頁、關於作者...)
$border-radius-inner = 15px
// 設定文章導覽(本站概要)的sidebar的圓角(文章目錄、本站概要...)
$border-radius = 15px

自行客製化樣式

Gemini有引用(import)Pisces的樣式配置，所以可以進一步對 next\source\css\_schemes\Pisces 裡面的檔案做修改，但自訂義的樣式可以在next\source\css\_custom\custom.styl做加入，有些版本的Next需要自己建立custom.styl檔案，一些可以美化的配置如下

custom\custom.styl

//副標題(Be brave to chase my dreams)的文字配置
.site-subtitle {
	color: #fff;
	font-family: Kosugi Maru;
}

// Sidebar文章導覽的超連結文字(前言...)在激活(active)時(就是目前停留的章節)的配置
.post-toc .nav .active > a {
  color: #06A2E4;
  border-bottom-color: #06A2E4;
}

// Sidebar文章導覽的超連結文字(前言...)碰到的配置
.post-toc ol a:hover {
  color: #06A2E4;
}

// Sidebar導覽目錄(回到首頁、關於...)在激活(active)時(就是目前停留的章節)的配置
#menu > li.menu-item-active > a {
  color: black;
  border: 3px #FFAC55 solid;
}

// 碰到Sidebar導覽目錄(回到首頁、關於...)的配置
#menu > li :hover {
  color: black;
  border: 3px #FFAC55 solid;
}

// 碰到Sidebar導覽目錄(回到首頁、關於...)的超連結文字配置
a:hover,
span.exturl:hover {
  color: #06A2E4;
}

// 在Sidebar導覽目錄碰到顯示黑色小圓點
.menu-item-active a:after,
.menu .menu-item a:hover:after,
.menu .menu-item span.exturl:hover:after {
  background-color: black;
}

// 文章上面邊緣(margin)去掉
.content {
    padding-top: 0px;
}

//首頁的繼續閱讀按鈕下面空白去除
.post-footer{
	display: none;
}

// 部落格標題(Kevin blog)那邊的背景配置
.site-brand-container {
	background: #00FF00;
}

// 部落格標題(Kevin blog)碰到時候的配置
.site-title:hover {
	letter-spacing: 0.05rem;
}

// Sidebar下面的文章目錄和本站概要 碰到的配置
.sidebar-nav li:hover {
  color: #E800E8;
}

// Sidebar下面的文章目錄和本站概要在激活(active)時(就是目前停留的章節)的配置
.sidebar-nav .sidebar-nav-active {
  color: #06A2E4;
  border-bottom-color: #06A2E4;
}

// Sidebar本站概要的(文章、分類、標籤)上面的數字的配置
.site-state-item-count {
  color: #06A2E4;
}

// 碰到本站概要的(文章、分類、標籤)的配置
.site-state div:hover,
.links-of-author-item a:hover{
	color: black;
	background: #F0F0F0;
	letter-spacing: 0.02rem;
}

// 碰到近期文章的配置
.links-of-blogroll-list a:hover{
    color: black;
	letter-spacing: 0.03rem;
	border-bottom: 3px #FFAC55 solid;
}

// markdown寫的文章在h1、h2...前面加上編號
body {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}
h2:before {counter-increment: h2; content: counter(h2) " "}
h3:before {counter-increment: h3; content: counter(h2) "." counter(h3) ") "}
h4:before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) ") "}
h5:before {counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before { content: ""; counter-increment: none }

// 取消首頁和分類頁面的h2編號
.index, .collection-title {
	h2:before {counter-increment: h2; content: ""}
}