hexo-theme-next主題設置

前言

因爲hexo已經搭建好,而且是用的next主體。這裏主要介紹下,next主題相關的一些優化配置。css

讀者能夠在 hexo.io/themes/ 能夠查看你喜歡的主題。 這裏主要介紹NexT主題的相關配置。其餘主題能夠多看看官方文檔。java

安裝主題

安裝的過程就一行代碼,你須要在博客根目錄出打開命令行輸入如下命令:android

git clone https://github.com/iissnan/hexo-theme-next themes/next
複製代碼

啓用主題

修改站點配置文件_config.yml(D:\workspace\hexo_config.yml)git

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
複製代碼

選擇 Scheme:
Scheme 是 NexT 提供的一種特性,藉助於 Scheme,NexT 爲你提供多種不一樣的外觀。同時,幾乎全部的配置均可以 在 Scheme 之間共用。目前 NexT 支持三種 Scheme:github

  • Muse - 默認 Scheme,這是 NexT 最初的版本,黑白主調,大量留白
  • Mist - Muse 的緊湊版本,整潔有序的單欄外觀
  • Pisces - 雙欄 Scheme,小家碧玉似的清新
  • Gemini - 左側網站信息及目錄,塊+片斷結構佈局
    cheme 的切換經過更改 主題配置文件,搜索 scheme 關鍵字。 你會看到有四行 scheme 的配置,將你需用啓用的 scheme 前面註釋 # 去除便可。

設置語言

編輯站點配置文件, 將 language 設置成你所須要的語言。建議明確設置你所須要的語言,例如選用簡體中文,配置以下:web

language: zh-Hans
複製代碼

主頁文章加陰影

打開\themes\next\source\css_custom\custom.styl,向裏面加入:docker

// 主頁文章添加陰影效果
.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);
}
複製代碼

設置網站圖標

默認的網站圖標是一個N,固然是須要制定一個圖了,在網上找到圖後,將其放在/themes/next/source/images裏面,而後在主題配置文件中修改下圖所示圖片位置json

favicon:
  #small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next-docker.jpg
  #apple_touch_icon: /images/apple-touch-icon-next.png
  #safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml
複製代碼

設置側邊欄頭像

編輯主題的 \themes\next_config.yml,新增字段 avatar, 值設置成頭像的連接地址。bash

avatar: /images/java.jpg
複製代碼

設定代碼高亮主題

NexT使用Tomorrow Theme做爲代碼高亮,共有5款主題供你選擇: normal | night | night eighties | night blue | night bright,默認使用的是白色的normal
編輯站點的_config.yml:hexo

highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:
複製代碼

編輯主題的\themes\next_config.yml:

highlight_theme: night
複製代碼

頁面訪客統計

在使用該配置以前,你須要先確保本身使用的Hexo博客的NexT主題。舊版的NexT主題可能不支持改配置,在進行進一步的操做以前,確保本身使用的NexT版本支持對應功能。在這裏,我使用的版本爲5.1.4,你能夠經過查看/theme/next/_config.yml文件搜索「version」來確認本身的NexT版本。

  • 頁面底部總訪客|總訪問量配置
    打開/theme/next/_config.yml,找到以下的配置項:
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>總訪客
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>總訪問量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:
複製代碼

將enable的值由false修改成true後,從新部署便可看到效果。我這裏添加了:總訪客、總訪問量對應的漢字描述。
在你完成部署後,本地預覽可能你會發現,本身網站的PV數和UV數都很是大,以下因此:

訪問量
這是正常狀況,由於使用不蒜子統計的用戶都使用同一個存儲空間,若是你的URL和別人重複,就會出現數據量異常。這樣的狀況通常出如今你使用localhost:4000訪問本身在本地部署的網頁的時候。 hexo d部署後,經過域名訪問既不會出現這樣的狀況。
參考連接: lfwen.site/2016/11/13/…

  • 百度統計

配置好後,到百度統計管理系統中不會馬上有效果,須要等待一會,纔會看到以下效果

百度統計

參考連接:blog.csdn.net/u013066244/…

閱讀次數

使用leancloud實現,效果以下:

閱讀次數

參考連接:lfwen.site/2016/05/31/…

相關文章
相關標籤/搜索