Hexo 框架容許咱們更換合適的主題,以便於構建不一樣風格的網站,這裏介紹目前最常使用的一款主題之一 —— NexThtml
在正式開始講解 NexT 安裝以前,咱們必須明確如下幾個概念:git
在使用 Hexo 框架創建的網站中,存在兩份重要的配置文件,它們的文件名稱都是 _config.yml
github
一份是 站點配置文件,位於 站點根目錄 下,用於網站的基礎配置web
另一份是 主題配置文件,位於 themes 目錄 下,用於主題的相關配置npm
不一樣的主題會有不一樣的主題配置文件,由主題做者所提供canvas
在 站點根目錄 中打開 git bash 窗口,使用以下命令下載 NexT 主題文件到 themes 目錄 中bash
$ git clone https://github.com/iissnan/hexo-theme-next themes/next Cloning into 'themes/next'... remote: Counting objects: 12033, done. remote: Total 12033 (delta 0), reused 0 (delta 0), pack-reused 12033 Receiving objects: 100% (12033/12033), 13.00 MiB | 1.37 MiB/s, done. Resolving deltas: 100% (6991/6991), done. Checking out files: 100% (351/351), done.
注意:若是出現如下錯誤hexo
error: RPC failed; curl 18 transfer closed with outstanding read data remaining fatal: The remote end hung up unexpectedly fatal: early EOF fatal: index-pack failed
請嘗試使用如下命令框架
$ git clone git://github.com/iissnan/hexo-theme-next themes/next
打開 站點配置文件, 將 theme
選項的值改成 next
,注意要在屬性和值之間要加上一個空格dom
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next
此時,登錄本身的站點,應該能夠看到更改已經成功
Scheme 是用於 改變網站佈局 的一個設置項,NexT 目前提供四種 Scheme:
Muse
:默認 Scheme,黑白主調,大量留白Mist
:Muse 的緊湊版本,整潔有序的單欄外觀Pisces
:雙欄 Scheme,小家碧玉的清新Gemini
:新增 Scheme更改時,打開 主題配置文件,經過搜索關鍵字 Scheme Settings
定位,而後將使用的 scheme 打開註釋便可
# --------------------------------------------------------------- # Scheme Settings # --------------------------------------------------------------- # Schemes #scheme: Muse #scheme: Mist scheme: Pisces #scheme: Gemini
更改時,打開 主題配置文件,經過搜索關鍵字 Canvas-nest
定位,而後將 canvas_nest
的值改爲 true
便可
# Canvas-nest canvas_nest: true
默認狀況下,側欄僅在文章頁面(擁有目錄列表時)才顯示,並放置於右側位置
能夠經過修改 主題配置文件 中的 Sidebar Settings
字段控制側欄的行爲
left
:靠左放置right
:靠右放置post
:默認行爲,在文章頁面(擁有目錄列表時)顯示always
:在全部頁面中都顯示hide
:在全部頁面中都隱藏remove
:徹底移除# Sidebar Position, available value: left | right (only for Pisces | Gemini). position: left #position: right # Sidebar Display, available value (only for Muse | Mist): # - post expand on posts automatically. Default. # - always expand for all pages automatically # - hide expand only when click on the sidebar toggle icon. # - remove Totally remove sidebar including sidebar toggle. display: post #display: always #display: hide #display: remove
打開 主題配置文件,搜索關鍵字 Menu Settings
進行定位,各個菜單項經過 # 註釋開啓或關閉
# --------------------------------------------------------------- # Menu Settings # --------------------------------------------------------------- # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives). # Usage: `Key: /link/ || icon` # Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive. # Value before `||` delimeter is the target link. # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded. menu: home: / || home #about: /about/ || user #tags: /tags/ || tags categories: /categories/ || th archives: /archives/ || archive #schedule: /schedule/ || calendar #sitemap: /sitemap.xml || sitemap #commonweal: /404/ || heartbeat
部分菜單項的功能描述以下:
home
:主頁about
:關於tags
:標籤categories
:分類archives
:歸檔這裏演示建立 categories 分類頁面的文件夾,其它菜單項的添加相似
在 站點根目錄 下,打開 git bash,輸入命令 $ hexo new page "categories"
$ hexo new page "categories" INFO Created: C:\Desktop\test\source\categories\index.md
這裏演示添加 categories 分類頁面的文檔頭部,其它菜單項的添加相似
打開新建的 index.md
文件,在 文檔頭部 添加如下描述:
--- title: categories date: 2015-12-04 15:37:22 type: "categories" comments: false ---
打開 主題配置文件, 搜索關鍵字 Sidebar Avatar
進行定位,將 avatar
的值設置成頭像圖片的連接地址便可
# Sidebar Avatar # in theme directory(source/images): /images/avatar.gif # in site directory(source/uploads): /uploads/avatar.gif avatar: <url>
頭像圖片的連接地址能夠是:
打開 主題配置文件,搜索關鍵字 Social Links
進行定位,social
的值按 Key: permalink || icon
格式設置
# Social Links. # Usage: `Key: permalink || icon` # Key is the link label showing to end users. # Value before `||` delimeter is the target permalink. # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded. social: GitHub: https://github.com/Forwhfang || Github CSDN: https://blog.csdn.net/wsmrzx || CSDN cnblogs: https://www.cnblogs.com/wsmrzx || cnblogs
進入 站點根目錄,打開 git bash 窗口,輸入以下命令安裝插件
$ npm install hexo-wordcount --save
而後打開 主題配置文件,進行以下配置
# Post wordcount display settings # Dependencies: https://github.com/willin/hexo-wordcount post_wordcount: item_text: true wordcount: true min2read: true totalcount: true separated_meta: true
在 主題配置文件 中修改 busuanzi_count
字段啓用不蒜子統計功能
# Show PV/UV of the website/page with busuanzi. # Get more information on http://ibruce.info/2015/04/04/busuanzi/ 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:
【參考資料】
【Hexo系列相關文章】