建站 | Hexo主題細節配置

文章目錄

• • 前言
  • • 更改代碼顔色
    • 更改連結顯示字型顔色
    • 對首頁标題&描述進行配置

前言

在建站的過程中，可謂是碰到了很多坑，但是作為一個初學者，這些坑也是能讓我更好的消化所接觸的知識，了解一些基礎的東西。是以說實戰還是養人，實際去做，提出問題，後邊系統再學時就會有一種很好的代入感。

其實在初次嘗試中，即便跟着教程走，也不一定能解決遇到的問題，那麼這時就要多思考，多嘗試。教程是死的，而人是活的。

更改代碼顔色

代碼顔色屬于css裡，是以我們首先要想到在主題的css裡修改參數。

定位到themes\主題名\source\css，此外了解到所選主題不同，檔案都可能是對不上的。而我這裡是在css_partial\articles.styl檔案内修改。

思路

在浏覽器中先打開本地網頁，在代碼區右鍵遊覽器檢查元素

可以看到右側style欄的網頁選中區的css樣式，顯示article，是以我們打開articles.styl

輸入自定義樣式(附我的)：

.articles
  .article-entry pre, .article-entry .highlight
    background dark
    padding 1rem
    color shenju           /*字型顔色，可參考https://www.114la.com/other/rgb.htm*/
  .article-entry code
    padding 1rem
    background dark       /*背景顔色*/
           

更改連結顯示字型顔色

對于css檔案，找到對頁面連結進行配置的檔案，

/* Links */
a {
  color: #999;
}

a:hover {
  color: #f33;
}
           

而styl檔案，

a {
  color: #1fa0ae;
  &:hover {
    color #333
	}
}
           

對首頁标題&描述進行配置

/* HEADER   #位于fashion.css檔案夾下，對首頁的标題&描述進行配置
----------------------------------------------- */
.site-header {
	padding: 40px 0 20px;
	}
.site-branding {
	float: left;
	width: 100%;
	}
.site-title {
	margin: 0;
	font-size: 48px;             /*定義字型大小*/
	font-family: Oswald, "Microsoft Yahei", Arial, Helvetica, sans-serif;
	text-transform: uppercase;   /*英文轉為大寫字母*/
	line-height: 1.2em;          /*表示行高*/
	}
.site-title a {
	color: #333;
	text-decoration: none;
	}
.site-description {
	margin-bottom: 20px;
	color: #a6a6a6;             /*字型顔色*/
	font-weight: 300;
	font-family: Oswald, "Microsoft Yahei", Arial, Helvetica, sans-serif;
	font-size: 14px;
	letter-spacing: 2px;        /*字型間距*/
	}