使用Hexo+Github搭建屬於本身的博客（進階）

主題的配置：這裏以NexT主題做爲題材

一、安裝NexT，在其文件夾中鼠標右鍵，點擊Git Base Here。輸入命令：git clone https://github.com/iissnan/hexo-theme-next themes/next

 

二、啓用主題，在站點目錄中（blog），打開配置文件_config.yml，修改theme：next

 

 

三、驗證主題，端口號被佔用仍是得先修改端口號，而後啓動服務

 

 

若是看到以下界面，說明成功安裝了NexT主題

 

 

四、主題設定，在next主題目錄下的_config.yml文件中將scheme設定爲Pisces

 

 五、語言設定，在站點根目錄下修改配置文件_cofig.yml中的language爲zh-Hans（簡體中文）

 

 

六、修改菜單項，在主題目錄下修改配置文件_cofig.yml中的menu，增添一個something（注：千萬不要在這設置中文，後面的值那是查找文件的地方！若你的站點運行在子目錄中，請將連接前綴的 / 去掉）

 

這些配置都要與你主題目錄下的languages文件中對應的yml文檔裏配置相關聯。好比你在站點根目錄中的配置文件設置language爲zh-Hans，那麼就要進入到主題目錄下的languages文件中修改zh-Hans.yml，這樣才能顯示出菜單項新增的中文內容（以something爲例子）

 

 七、設置菜單項圖標，對應的字段是menu_icons。格式爲item name：icon name，其中item name與所配置的菜單名字對應，icon name是Font Awesome圖標的名字。而 enable 可用於控制是否顯示圖標，你能夠設置成 false 來去掉圖標。（本機出問題，沒法顯示icon，還未解決，求指導）

 

 

八、設置側欄位置，修改主題目錄下sidebar的position值

 

九、設置頭像，在站點根目錄下載配置文件中新增avatar，值設置爲頭像的連接地址。地址能夠是網絡地址，也能夠是本地地址（放置在source/images/ 目錄下）

 

 

十、設置文章代碼主題，在主題目錄下修改配置文件highlight_theme，默認值爲nomal。能夠設置爲night

 

十一、添加標籤頁面，前面經過修改next主題下的_config.yml文件中的menu選項，能夠在主頁面的菜單欄添加標籤選項，可是此時點擊標籤，跳轉的頁面會顯示page not found。此時咱們要新建一個頁面

 

在新建的index.md文件中添加type: "tags"

 

當要爲某一篇文章添加標籤，只需在blog/source/_post目錄下的具體文章的tags中添加標籤便可，如：

 

成功後的頁面爲

 

十一、添加關於我頁面，步驟和以上差很少

 

 

在新建的index.md文件中添加以下內容

 

十二、在首頁添加github導航條，點擊這裏選擇須要的樣式，而後將代碼複製到themes/next/layout/_layout.swig 

 

並將href改成你的github地址，最終界面如圖

1三、實現點擊出現桃心效果，點擊這裏將代碼copy到/themes/next/source/js/src裏面新建的love.js中，而後打開\themes\next\layout\_layout.swig文件,在末尾（在前面引用會出現找不到的bug） ，引用love.js

 

1四、修改做者頭像並旋轉，打開\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;

  /* 設置循環動畫 [animation: (play)動畫名稱 (2s)動畫播放時長單位秒或微秒 (ase-out)動畫播放的速度曲線爲以低速結束 
    (1s)等待1秒而後開始動畫 (1)動畫播放次數(infinite爲循環播放) ]*/


  /* 鼠標通過頭像旋轉360度 */
  -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);
}

/* Z 軸旋轉動畫 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

 

1五、在網站底部加上訪問量，打開\themes\next\layout\_partials\footer.swig文件,在類copyright前加上畫紅線這話：

 

代碼：

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

 

而後在合適的位置添加顯示統計的代碼(位置仍是上述這個文件)，如圖：

 

 

代碼：

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站訪客數:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

 

 1六、修改底部的官方logo，找到 \themes\next\layout\_partials\下面的footer.swig文件，打開會發現，以下圖的語句：

 

第一個框 是下面側欄的「日期❤ XXX」

若是想像我同樣加東西，必定要在雙大括號外面寫。如：xxx{{config.author}},固然你要是想改完全能夠變量都刪掉，看我的意願。

第二個，是圖一當中 「由Hexo驅動」 的Hexo連接，先給刪掉防止跳轉，若是想跳轉固然也能夠本身寫地址，至於中文一會處理。注意刪除的時候格式不能錯，只把<a>...</a>標籤這部分刪除便可，留着兩個單引號'',不然會出錯哦。

第三個框也是最後一個了，這個就是更改圖一後半部分「主題-Next.XX」,這個比較爽直接將<a>..</a>都刪掉，一樣中文「主題」一會處理，刪掉以後在上一行 ‘-’後面能夠隨意加上你想顯示的東西，不要顯示敏感信息喲，請自重。

 

接下來，處理剩餘的中文信息。找到這個地方\themes\next\languages\ 下面的語言文件zh-Hans.yml（這裏以中文爲例，有的習慣用英文的配置文件，道理同樣，找對應位置便可）

 

看到了吧，這個就是傳值傳過去的，你想顯示什麼就在這裏面大肆的去改動吧。其實在第二個框中，就能夠把值都改掉，不用接受傳值的方式，徹底本身能夠重寫。不過我不建議那樣作，由於傳值這樣只要是後續頁面須要這幾個值那麼就都會經過取值去傳過去，要是在剛纔footer文件中直接寫死，後續不必定哪一個頁面須要傳值，可是值爲空了或者仍是原來的，可就尷尬了。因此仍是這樣改動吧。

 

參考列表：1.使用hexo搭建github博客

2.使用Hexo+Github一步步搭建屬於本身的博客（基礎）

3.使用Hexo+Github一步步搭建屬於本身的博客（進階）