Hexo--Next主題優化

我的博客原文地址

歡迎訪問我的博客

按照上篇博客中更換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文件就可以了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章