歡迎訪問我的博客
按照上篇博客中更換Theme的方法,我們已經將主題改爲Next,但是還是有地方我們可以優化和配置的。
一些常見的配置方法參考文檔即可。
語言設置
將languages目錄下面的zh-Hans.yml修改爲zh-CN.yml或者按照文檔中的修改根目錄配置文件也行。
修改樣式
網站標題欄背景顏色
當使用Pisces主題時,網站標題欄背景顏色是黑色的,感覺不好看,可以在source/css/_schemes/Pisces/_brand.styl中修改
.site-meta {
padding: 20px 0;
color: white;
background: $blue-dodger; //修改爲自己喜歡的顏色
+tablet() {
box-shadow: 0 0 16px rgba(0,0,0,0.5);
}
+mobile() {
box-shadow: 0 0 16px rgba(0,0,0,0.5);
}
}
但是,我們一般不主張這樣修改源碼的,在next/source/css/_custom
目錄下面專門提供了custom.styl
供我們自定義樣式的,因此也可以在custom.styl
裏面添加:
// Custom styles.
.site-meta {
background: $blue; //修改爲自己喜歡的顏色
}
修改內容區域的寬度
我們用Next主題是發現在電腦上閱讀文章時內容兩邊留的空白較多,這樣在瀏覽代碼塊時經常要滾動滾動條才能閱讀完整,體驗不是很好,下面提供修改內容區域的寬度的方法。
NexT 對於內容的寬度的設定如下:
- 700px,當屏幕寬度 < 1600px
- 900px,當屏幕寬度 >= 1600px
- 移動設備下,寬度自適應
如果你需要修改內容的寬度,同樣需要編輯樣式文件。
在Mist和Muse風格可以用下面的方法:
編輯主題的 source/css/_variables/custom.styl 文件,新增變量:
// 修改成你期望的寬度
$content-desktop = 700px
// 當視窗超過 1600px 後的寬度
$content-desktop-large = 900px
當你使用Pisces風格時可以用下面的方法:
header{ width: 90%; }
.container .main-inner { width: 90%; }
.content-wrap { width: calc(100% - 260px); }
參考文檔:
http://theme-next.iissnan.com/faqs.html
https://github.com/iissnan/hexo-theme-next/issues/759#issuecomment-202242848
主頁顯示文章摘要
默認情況下在主頁是把文章內容全部顯示出來的,如果在根目錄的_config.yml
中配置分頁:
per_page: 10
那麼每頁顯示10篇文章,這樣的花主頁就看起來不是很精簡了,可以通過下面的方法來配置主頁只顯示文章摘要:
在themes/next/
的_config.yml
中配置:
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150
把enable
項配置爲true
就可以了。
但是我們也可以看到註釋中是不推薦這樣做的,因爲這樣會強制把文章前150個字符做爲摘要的,會出現描述不完整的情況,而且有時候會把文章的源碼顯示出來。
那麼我們就用推薦的在文章中用<!-- more -->
這種方式來作爲文章摘要的方式,可以根據每篇文章的不同情況自己來把控摘要的內容。
或者是在文章中配置description
也是可以的。
---
title: Hexo+GitHub搭建個人博客
categories: Hexo
comments: true
keywords: Hexo, Blog, GitHub
tags: [Hexo, Blog, GitHub]
description: 使用Hexo在GitHub上搭建個人博客
date: 2017-01-010 13:00:00
---
閱讀次數統計(使用LeanCloud)
參考文檔
加入網站縮略圖標
加入後就可以在瀏覽器的標籤欄或者是收藏夾裏面現實網站的縮略圖標了。
在themes/next/
的_config.yml
中配置:
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /images/favicon.ico
然後把圖表放到根目錄的source/images/
下面。
添加友情鏈接頁面
和前面的添加關於頁面、分類頁面類似,不同的是Next主題默認是沒有這個頁面的,需要我們自己添加一些東西,比如文字翻譯,添加對應圖標等。
首先通過下面的命令添加一個頁面:
hexo new page links
會生成source/links/index.md文件。
在Next主題配置文件中添加:
menu:
home: /
......
about: /about
links: /links
添加圖標:
menu_icons:
enable: true
......
links: users
這裏如果找到合適的圖標呢?可以到fontawesome.io這個網站來找 ,Next裏面用的就是這裏面的圖標。
下一步就是要添加翻譯了,要不在菜單欄現實的是 menu.links。
在next/languages/ 下面編輯對應的語言,添加翻譯。
比如在zh-CN.yml中添加:
menu:
...
links: 友情鏈接
然後可以隨意編輯source/links/index.md文件就可以了。