前言
由於hexo已經搭建好,並且是用的next主體。這裡主要介紹下,next主題相關的一些優化配置。
讀者可以在 hexo.io/themes/ 可以檢視你喜歡的主題。 這裡主要介紹NexT主題的相關配置。其他主題可以多看看官方文件。
安裝主題
安裝的過程就一行程式碼,你需要在部落格根目錄出開啟命令列輸入以下命令:
git clone https://github.com/iissnan/hexo-theme-next themes/next
複製程式碼
啟用主題
修改站點配置檔案_config.yml(D:\workspace\hexo_config.yml)
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
複製程式碼
選擇 Scheme:
Scheme 是 NexT 提供的一種特性,藉助於 Scheme,NexT 為你提供多種不同的外觀。同時,幾乎所有的配置都可以 在 Scheme 之間共用。目前 NexT 支援三種 Scheme:
- Muse - 預設 Scheme,這是 NexT 最初的版本,黑白主調,大量留白
- Mist - Muse 的緊湊版本,整潔有序的單欄外觀
- Pisces - 雙欄 Scheme,小家碧玉似的清新
- Gemini - 左側網站資訊及目錄,塊+片段結構佈局
cheme 的切換通過更改 主題配置檔案,搜尋 scheme 關鍵字。 你會看到有四行 scheme 的配置,將你需用啟用的 scheme 前面註釋 # 去除即可。
設定語言
編輯站點配置檔案, 將 language 設定成你所需要的語言。建議明確設定你所需要的語言,例如選用簡體中文,配置如下:
language: zh-Hans
複製程式碼
主頁文章加陰影
開啟\themes\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);
}
複製程式碼
設定網站圖示
預設的網站圖示是一個N,當然是需要制定一個圖了,在網上找到圖後,將其放在/themes/next/source/images裡面,然後在主題配置檔案中修改下圖所示圖片位置
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, 值設定成頭像的連結地址。
avatar: /images/java.jpg
複製程式碼
設定程式碼高亮主題
NexT使用Tomorrow Theme作為程式碼高亮,共有5款主題供你選擇:
normal | night | night eighties | night blue | night bright,預設使用的是白色的normal
編輯站點的_config.yml:
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數都非常大,如下所以:
hexo d
部署後,通過域名訪問既不會出現這樣的情況。參考連結:lfwen.site/2016/11/13/…
- 百度統計
配置好後,到百度統計管理系統中不會立刻有效果,需要等待一會,才會看到如下效果
參考連結:blog.csdn.net/u013066244/…
閱讀次數
使用leancloud實現,效果如下: