關於Hexo6.0搭建我的博客(進階篇)

本篇博文將帶你們發現新大陸,教你打造炫酷的我的博客站點.

閱讀本文前建議先行閱讀本人另一遍基礎博文關於Hexo搭建我的博客(基礎篇)

目錄

• 配置博客基本信息
• 配置主題

• 優化主題

  • 上傳頭像,並設置頭像旋轉效果
  • 設置我的社交圖標連接
  • 設置RSS
  • 設置酷炫動態背景
  • 設置主題語言
  • 設置網站logo
  • 設置左上角或者右上角的fork me on github效果
  • 設置頂部滾動加載條
  • 自定義博客底部顯示效果
  • 爲首頁文章添加陰影邊框效果
  • 爲首頁添加自定義菜單欄標籤

配置博客基本信息

在站點根目錄下 _config.yml中進行基礎配置
建議下載個文本編輯器打開,這裏推薦 Sublime Text,

對應顯示效果(顯示效果因主題不一樣而不一樣,只作描述)

固然了,大家的主題和個人確定是不同的,因此下面就開始教你們挑選本身喜歡的主題
並自定義我的喜愛.

配置主題

挑選主題

你能夠點擊這裏選擇你喜歡的Themes,裏面有大量美觀的主題

主題不少,能夠慢慢挑選,挑選好了,直接 clone下來就行了.

我這裏以簡約著稱的Next主題爲例講解,本人用的也是這款主題,固然喜歡炫酷一點的小夥伴們能夠自行選擇,只是優化會略有不一樣.

這裏有下載主題有兩種方式:
1.經過get 命令方式直接安裝
2.直接把整個倉庫clone到本地,再移動到你的站點目錄Themes下

這裏主要教你們用命令行方式

$ cd hexo
$ git clone https://github.com/theme-next... themes/next

進入hexo根目錄下,GitBash

clone成功後,你的Themes文件夾下就會有next主題文件了

首先介紹下next文件夾下_config.yml文件,之後咱們凡是修改主題,都是修改這個文件

而後下一步,咱們先應用咱們剛纔clone下來的主題,看看什麼效果

打開blog(你的博客站點跟目錄)下的_config.yml文件進行設置:
將theme: landscape 修改成 theme: next

而後hexo g和 hexo s 一下 ,咱們來看一下效果:

好了 ,沒錯就是這個樣子(的確是醜了點,因此須要你本身去優化成你本身想要的樣子啦)

固然你也能夠直接clone我配置好了的主題darryrzhong-next.順便star一下最好啦.

優化主題

到如今咱們基礎博客算是搭建完成了,下面手把手教你們美化主題,趕快上車吧

帶你們優化主題以前,先介紹下next目錄結構,瞭解目錄結構能幫助咱們更快的優化

.
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
├── themes
├── _config.yml
└── package.json

最新的next已經把咱們須要的大部分功能都已經集成了,因此咱們須要修改的文件只有那麼幾個

• deploy：執行hexo deploy命令部署到GitHub上的內容目錄
• public：執行hexo generate命令，輸出的靜態網頁內容目錄
• source：站點資源目錄,你寫的文章,須要的素材等等都是放在這個目錄下,包括之後

你須要新建菜單標面目錄也是放在這裏.

• drafts：草稿文章
• posts：成功發佈的文章目錄(你發佈的文章都在這裏面能夠看到 )
• themes：主題文件目錄
• _config.yml：全局配置文件，大多數的設置都在這裏

經常使用的須要瞭解的就是這些目錄了,其中高亮的地方就是整個next的核心部分了

1. 上傳頭像,並設置頭像旋轉效果

設置頭像:
打開themes/next/_config.yml找到avatar: /images/avatar.gif;
其中images文件在themes/next\source\中,將你的頭像圖片放到images中,通常默認
命名爲avatar,記得改下後綴就能夠了.
設置旋轉效果:
打開themes\next\source\css\_common\components\sidebar\sidebar-author.styl,
添加如下注釋代碼

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

   /* 頭像圓形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 鼠標通過頭像旋轉時間 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;


}

 img:hover {
  /* 鼠標通過中止頭像旋轉 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠標通過頭像旋轉360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

作完這一步,頭像也就設置完成了.

2.設置我的社交圖標連接

打開themes/next/_config.yml,找到social;

其中name爲你圖標的名字,你能夠去Font Awesome中挑選你喜歡的,而後複製名字就能夠了
如 icon-user-md 只須要user-md就能夠了,next裏面已經集成好了.若是next找不到圖標的話,圖標就會被一個問號所取代.

3.設置RSS

來到你的站點根目錄(好比個人blog/)下;
執行 GitBash 命令 : $ npm install --save hexo-generator-feed安裝插件,插件會放在
node_modules文件夾裏面.

安裝好插件後,打開全局配置文件_config.yml,在末尾加入如下代碼:

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

而後打開主題配置文件_config.yml,找到rss;
添加配置:rss: /atom.xml ;
到這裏就好了,從新運行一下 hexo g ,hexo s ,你就會看到效果了.

4.設置酷炫動態背景

新版本的next已經支持canvas-nest了,因此直接添加代碼就能夠了
打開next/layout/_layout.swig文件在</body>以前加上如下代碼;

<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

打開主題配置文件_config.yml, 修改如下代碼;

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest: true

從新運行下就能夠了,

5.設置主題語言

你的博客首頁顯示的默認是英文名，而咱們想要有一箇中文的名字的話,就須要設置下語言顯示;
咱們能夠在nextlanguage文件下的zh-CN（中文）語言包下增長相應的字段,還能夠修改其餘的字段;

title:
  archive: 歸檔
  category: 分類
  tag: 標籤
  schedule: 日程表
menu:
  home: 首頁
  archives: 歸檔
  categories: 分類
  tags: 標籤
  about: 關於
  search: 搜索
  schedule: 日程表
  sitemap: 站點地圖
  commonweal: 公益 404
sidebar:
  overview: 站點概覽

改爲咱們本身想要的顯示效果後.在全局配置文件_config.yml中從新配置,
language: zh-CN ,從新運行下服務器記得,只要是全局效果,都須要從新clean一下,在從新運行下,不然看不到效果.

6.設置網站logo

效果以下:

這個小圖標就是你的logo了.
打開主題配置文件_config.yml ,找到字段favicon:;

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

能夠看到有四種效果,通常咱們只需將medium換成咱們本身圖標路徑就好了.
對於圖標大小也是有要求的,看實例就知道了,就不作過多的說明了.

7.設置左上角或者右上角的fork me on github效果

顯示效果以下:

實現方法以下:
固然有不少種顏色和效果,你能夠在這裏選擇你須要的效果;而後複製你選擇效果右側的代碼;

<a href="https://github.com/you"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png" alt="Fork me on GitHub"></a>

打開next\layout\_layout.swig,將剛纔複製的代碼黏貼到<div class="headband"></div>的下面;

從新運行下,看看效果吧;

8. 設置頂部滾動加載條

效果以下:

打開next\layout\_partials\head文件，添加如下代碼:

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

以上加載條就能夠正常顯示了,默認顏色是粉色的,本人以爲粉色的也挺好看就沒改了,
固然你能夠自定義你想要的顏色,作法以下:
在剛纔添加的代碼後面再加上如下代碼:

<style>
    .pace .pace-progress {
        background: #1E92FB; /*進度條顏色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*陰影顏色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上邊框顏色*/
        border-left-color: #1E92FB;    /*左邊框顏色*/
    }
</style>

自定義加載條就大功改爲了;

9.自定義博客底部顯示效果

具體實現以下:
1.隱藏網頁底部powered By Hexo / 強力驅動
打開themes/next/layout/_partials/footer.swig,直接隱藏如下代碼便可,建議不要刪除
代碼以下:

<!--{% if theme.footer.powered.enable %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" target="_blank"' + nofollow + ' href="https://hexo.io">Hexo</a>') }}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{#
#}</div>
{% endif %}

{% if theme.footer.powered.enable and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
 <div class="theme-info">{#
  #}{{ __('footer.theme') }} &mdash; {#
  #}<a class="theme-link" target="_blank"{{ nofollow }} href="https://github.com/theme-next/hexo-theme-next">{#
    #}NexT.{{ theme.scheme }}{#
  #}</a>{% if theme.footer.theme.version %} v{{ version }}{% endif %}{#
#}</div>
{% endif %}-->

2.修改網頁底部的桃心

仍是在themes/next/layout/_partials/footer.swig中，找到字段with-love;

<span class="with-love" id="animate">
    <i class="fa fa-{{ theme.footer.icon.name }}"></i>
  </span>

而後在圖標庫中找到你想要的圖標,修改以下:

<span class="with-love" id="animate">
    <i class="fa fa-heart"></i>
  </span>

其中heart爲圖標名字,只要icon-後面的就好了;

3.實現網站底部訪問量顯示
打開主題配置文件 _config.yml ,
修改以下代碼

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user 
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

10.爲首頁文章添加陰影邊框效果

打開next\source\css\_custom\custom.styl文件,添加如下代碼:

// 主頁文章添加陰影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

從新運行下服務器,效果以下:

11.爲首頁添加自定義菜單欄標籤

效果以下:

實現以下:
進入站點根目錄下,使用GitBash新建頁面;

$ hexo new page "music"
$ hexo new page "photo"
$ hexo new page "welfare"

這裏我新建三個菜單標籤,分別是音樂、攝影、福利.

能夠看到,新建頁面在source文件對於的文件夾裏;

打開主題配置文件_config.yml找到字段menu,添加對應菜單;

添加完菜單標籤項後,效果以下:

能夠看到標籤名仍是英文的,而且pohto項是空白的,以前已經說過,空白表明這個圖標找不到,因此換一個就好了,下面咱們來完善一下,將標籤名改成中文;

打開next\language文件下的zh-CN（中文）語言包,添加菜單標籤項;

menu:
  home: 首頁
  photo: 攝影
  music: 音樂
  welfare: 福利
  archives: 歸檔
  categories: 分類

名稱必定要和咱們主題中的名稱一致,到這裏咱們的菜單欄也就完成了.

到這裏,關於博客的基礎搭建也就所有作好了

本文只要介紹了博客外觀美化的一些小技巧,使得咱們的博客看起來更加的美觀,關於博客內文章的美觀及評論留言區等的優化、以及使用markdown寫下第一篇博文等將會在下一篇高級篇手把手教你們,歡迎關注做者darryrzhong,更多幹貨等你來拿喲.

請賞個小紅心！由於你的鼓勵是我寫做的最大動力！

更多精彩文章請關注

• 我的博客:darryrzhong
• 掘金
• 簡書
• SegmentFault