該系列博客列表請訪問：http://www.cnblogs.com/penglei-it/category/934299.html
摘要
或許在你看到我這篇我文章之前，你已經成功的通過Github+Hexo+NextT搭建個人博客這篇文章搭建了自己的博客系統。但是盡管您已經成功建立博客網站，但是你需要對網站做合適的配置和調整才能迎合你的網站要求。本文主要介紹HEXO的基本操作命令和網站的基本配置方法。而在本篇文章中我將着力講解NextT主題的配置。其他主題的配置與此類似。
安裝
Hexo 安裝主題的方式非常簡單，只需要將主題文件拷貝至站點目錄的 themes 目錄下， 然后修改下配置文件即可。具體到 NexT 來說，安裝步驟如下：
在Hexo目錄，打開命令窗口（打開方式參見Github+Hexo+NextT搭建個人博客這篇文章），輸入如下命令：
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
稍等片刻，Next主題下載完成。
文件內容
在 Hexo 中有兩份主要的配置文件，其名稱都是 _config.yml。 其中，一份位於站點根目錄下，主要包含 Hexo 本身的配置；另一份位於主題目錄下，這份配置由主題作者提供，主要用於配置主題相關的選項。為了描述方便，在以下說明中，將前者稱為站點配置文件， 后者稱為主題配置文件。
- 站點配置文件內容
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: 白衣秀才
subtitle: 青春就是瘋狂的奔跑，然后華麗的跌倒，站起來，再跑……
description: 青春就是瘋狂的奔跑，然后華麗的跌倒，站起來，再跑……
author: 白衣秀才
language: zh-Hans
timezone: Asia/Shanghai
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://penglei.top
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:whitescholars/whitescholars.github.io.git
branch: master
#首頁的分頁設置
index_generator:
per_page: 5
#歸檔頁的分頁設置
archive_generator:
per_page: 30
yearly: true
monthly: true
#標簽頁的分頁設置
tag_generator:
per_page: 20
# 自定義站點內容搜索
# 需要先安裝插件：
# npm install hexo-generator-search --save
search:
path: search.xml
# 如只想索引文章，可設置為post
field: post
#RSS訂閱
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
#打賞
reward_comment: 堅持原創技術分享，您的支持將鼓勵我繼續創作！
wechatpay: http://cgcyg.img48.wal8.com/img48/564414_20170102112604/14833637422.png
alipay: http://cgcyg.img48.wal8.com/img48/564414_20170102112604/148336403046.png
- 主題配置文件內容
# --------------------------------------------------------------- # Site Information Settings # --------------------------------------------------------------- # Put your favicon.ico into `hexo-site/source/` directory. favicon: http://cgcyg.img48.wal8.com/img48/564414_20170102112604/148332830202.png # Set default keywords (Use a comma to separate) keywords: "Hexo, NexT, penglei.top ,blog" # Set rss to false to disable feed link. # Leave rss as empty to use site's feed link. # Set rss to specific value if you have burned your feed already. rss: /atom.xml # Specify the date when the site was setup #since: 2015 # icon between year and author @Footer authoricon: heart # Footer `powered-by` and `theme-info` copyright copyright: true # Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog. # See: https://support.google.com/webmasters/answer/139066 # Tips: Before you open this tag, remeber set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com ) canonical: true # Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization. seo: false # --------------------------------------------------------------- # Menu Settings # --------------------------------------------------------------- # When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives) menu: home: / categories: /categories archives: /archives tags: /tags about: /about #sitemap: /sitemap.xml #commonweal: /404.html # Enable/Disable menu icons. # Icon Mapping: # Map a menu item to a specific FontAwesome icon name. # Key is the name of menu item and value is the name of FontAwsome icon. Key is case-senstive. # When an question mask icon presenting up means that the item has no mapping icon. menu_icons: enable: true #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome home: home about: user categories: th schedule: calendar tags: tags archives: archive sitemap: sitemap commonweal: heartbeat # --------------------------------------------------------------- # Scheme Settings # --------------------------------------------------------------- # Schemes #scheme: Muse #scheme: Mist scheme: Pisces # --------------------------------------------------------------- # Font Settings # - Find fonts on Google Fonts (https://www.google.com/fonts) # - All fonts set here will have the following styles: # light, light italic, normal, normal intalic, bold, bold italic # - Be aware that setting too much fonts will cause site running slowly # - Introduce in 5.0.1 # --------------------------------------------------------------- font: enable: true # Uri of fonts host. E.g. //fonts.googleapis.com (Default) host: # Global font settings used on <body> element. global: # external: true will load this font family from host. external: true family: Lato # Font settings for Headlines (h1, h2, h3, h4, h5, h6) # Fallback to `global` font settings. headings: external: true family: # Font settings for posts # Fallback to `global` font settings. posts: external: true family: # Font settings for Logo # Fallback to `global` font settings. # The `size` option use `px` as unit logo: external: true family: size: # Font settings for <code> and code blocks. codes: external: true family: size: # --------------------------------------------------------------- # Sidebar Settings # --------------------------------------------------------------- # Social Links # Key is the link label showing to end users. # Value is the target link (E.g. GitHub: https://github.com/iissnan) social: GitHub: https://github.com/whitescholars 微博: http://weibo.com/u/3034107691?refer_flag=1001030102_&is_all=1 # Social Links Icons # Icon Mapping: # Map a menu item to a specific FontAwesome icon name. # Key is the name of the item and value is the name of FontAwsome icon. Key is case-senstive. # When an globe mask icon presenting up means that the item has no mapping icon. social_icons: enable: true # Icon Mappings. # KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome GitHub: github Twitter: twitter 微博: weibo # Sidebar Avatar # in theme directory(source/images): /images/avatar.jpg # in site directory(source/uploads): /uploads/avatar.jpg avatar: http://cgcyg.img48.wal8.com/img48/564414_20170102112604/148335731153.png # Table Of Contents in the Sidebar toc: enable: true # Automatically add list number to toc. number: true # Creative Commons 4.0 International License. # http://creativecommons.org/ # Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero #creative_commons: by-nc-sa #creative_commons: sidebar: # Sidebar Position, available value: left | right position: left #position: right # Sidebar Display, available value: # - 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 toggler. display: always #display: always #display: hide #display: remove # Blogrolls #links_title: Links links_layout: block #links_layout: inline links: 博客園: http://www.cnblogs.com/penglei-it/ 長江大學石油軟件實驗班: http://www.petrosoftware-class.com/ # --------------------------------------------------------------- # Post Settings # --------------------------------------------------------------- # Automatically scroll page to section which is under <!-- more --> mark. scroll_to_more: true # Automatically excerpt description in homepage as preamble text. excerpt_description: true # Automatically Excerpt. Not recommand. # Please use <!-- more --> in the post to control excerpt accurately. auto_excerpt: enable: true length: 150 # Post meta display settings post_meta: item_text: true created_at: true updated_at: false categories: true # Wechat Subscriber #wechat_subscriber: #enabled: true #qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg #description: ex. subscribe to my blog by scanning my public wechat account # --------------------------------------------------------------- # Misc Theme Settings # --------------------------------------------------------------- # Custom Logo. # !!Only available for Default Scheme currently. # Options: # enabled: [true/false] - Replace with specific image # image: url-of-image - Images's url custom_logo: enabled: false image: # Code Highlight theme # Available value: # normal | night | night eighties | night blue | night bright # https://github.com/chriskempson/tomorrow-theme highlight_theme: normal # --------------------------------------------------------------- # Third Party Services Settings # --------------------------------------------------------------- # MathJax Support mathjax: enable: false per_page: false cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML # Swiftype Search API Key #swiftype_key: # Baidu Analytics ID baidu_analytics: 23d814c46207990b1bb576bcdf937df8 # Duoshuo ShortName duoshuo_shortname: penglei # Disqus #disqus_shortname: # Hypercomments #hypercomments_id: # Gentie productKey #gentie_productKey: # Baidu Share # Available value: # button | slide # Warning: Baidu Share does not support https. #baidushare: ## type: button # Share jiathis: true # Warning: JiaThis does not support https. #add_this_id: # Share duoshuo_share: true duoshuo_hotartical: true # Google Webmaster tools verification setting # See: https://www.google.com/webmasters/ #google_site_verification: # Google Analytics #google_analytics: # CNZZ count cnzz_siteid: 1261104557 # Application Insights # See https://azure.microsoft.com/en-us/services/application-insights/ # application_insights: # Make duoshuo show UA # user_id must NOT be null when admin_enable is true! # you can visit http://dev.duoshuo.com get duoshuo user id. duoshuo_info: ua_enable: true admin_enable: true user_id: 6370865374186963713 admin_nickname: 博主 # Facebook SDK Support. # https://github.com/iissnan/hexo-theme-next/pull/410 facebook_sdk: enable: false app_id: #<app_id> fb_admin: #<user_id> like_button: #true webmaster: #true # Facebook comments plugin # This plugin depends on Facebook SDK. # If facebook_sdk.enable is false, Facebook comments plugin is unavailable. facebook_comments_plugin: enable: false num_of_posts: 10 # min posts num is 1 width: 100% # default width is 550px scheme: light # default scheme is light (light or dark) # Show number of visitors to each article. # You can visit https://leancloud.cn get AppID and AppKey. leancloud_visitors: enable: true app_id: ErKf3oTlvgx8tsfSYNbUTu2I-gzGzoHsz app_key: MPPjt8qkE6WgiqYi4QWyy0OE # 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: 本站訪客數 site_uv_footer: 人次 # custom pv span for the whole site site_pv: true site_pv_header: 本站總訪問量 site_pv_footer: 次 # custom pv span for one page only page_pv: false page_pv_header: 本文總閱讀量 page_pv_footer: 次 # Tencent analytics ID tencent_analytics: 60261186 # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO baidu_push: true # 自動生成sitemap # 自動生成sitemap sitemap: path: sitemap.xml baidusitemap: path: baidusitemap.xml # Google Calendar # Share your recent schedule to others via calendar page # # API Documentation: # https://developers.google.com/google-apps/calendar/v3/reference/events/list calendar: enable: false calendar_id: <required> api_key: <required> orderBy: startTime offsetMax: 24 offsetMin: 4 timeZone: showDeleted: false singleEvents: true maxResults: 250 # Algolia Search algolia_search: enable: false hits: per_page: 10 labels: input_placeholder: Search for Posts hits_empty: "We didn't find any results for the search: ${query}" hits_stats: "${hits} results found in ${time} ms" #! --------------------------------------------------------------- #! DO NOT EDIT THE FOLLOWING SETTINGS #! UNLESS YOU KNOW WHAT YOU ARE DOING #! --------------------------------------------------------------- # Motion use_motion: true # Fancybox fancybox: true # Script Vendors. # Set a CDN address for the vendor you want to customize. # For example # jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js # Be aware that you should use the same version as internal ones to avoid potential problems. # Please use the https protocol of CDN files when you enable https on your site. vendors: # Internal path prefix. Please do not edit it. _internal: lib # Internal version: 2.1.3 jquery: # Internal version: 2.1.5 # See: http://fancyapps.com/fancybox/ fancybox: fancybox_css: # Internal version: 1.0.6 # See: https://github.com/ftlabs/fastclick fastclick: # Internal version: 1.9.7 # See: https://github.com/tuupola/jquery_lazyload lazyload: # Internal version: 1.2.1 # See: http://VelocityJS.org velocity: # Internal version: 1.2.1 # See: http://VelocityJS.org velocity_ui: # Internal version: 0.7.9 # See: https://faisalman.github.io/ua-parser-js/ ua_parser: # Internal version: 4.6.2 # See: http://fontawesome.io/ fontawesome: # Internal version: 1 # https://www.algolia.com algolia_instant_js: algolia_instant_css: # Assets css: css js: js images: images # Theme version version: 5.1.0
啟用主題
與所有 Hexo 主題啟用的模式一樣。 當 克隆/下載 完成后，打開站點配置文件， 找到 theme 字段，並將其值更改為 next。
theme: next
到此，NexT 主題安裝完成。下一步我們將驗證主題是否正確啟用。在切換主題之后、驗證之前， 我們最好使用 hexo clean 來清除 Hexo 的緩存。
首先啟動 Hexo 本地站點，整個命令是 hexo server。 在服務啟動的過程，注意觀察命令行輸出是否有任何異常信息，如果你碰到問題，這些信息將幫助他人更好的定位錯誤。 當命令行輸出中提示出：
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
此時即可使用瀏覽器訪問 http://localhost:4000，檢查站點是否正確運行。若出現如下界面則證明主題啟用成功！
當然你可能看到的界面和我有些不一樣，但是不要緊，下面的教程中接着告訴大家該如何設置成和我的這種風格。
主題設定
- 選擇 Scheme
Scheme 是 NexT 提供的一種特性，借助於 Scheme，NexT 為你提供多種不同的外觀。同時，幾乎所有的配置都可以 在 Scheme 之間共用。目前 NexT 支持三種 Scheme，他們是：
- Muse - 默認 Scheme，這是 NexT 最初的版本，黑白主調，大量留白
- Mist - Muse 的緊湊版本，整潔有序的單欄外觀
- Pisces - 雙欄 Scheme，小家碧玉似的清新
Scheme 的切換通過更改 主題配置文件，搜索 scheme 關鍵字。 你會看到有三行 scheme 的配置，將你需用啟用的 scheme 前面注釋 # 即可。而我使用的就是第三種主題。
Muse主題樣式
Mist主題樣式
- 設置語言
編輯 站點配置文件， 將 language 設置成你所需要的語言。建議明確設置你所需要的語言，例如選用簡體中文，配置如下：
language: zh-Hans
- 設置菜單
菜單配置包括三個部分，第一是菜單項（名稱和鏈接），第二是菜單項的顯示文本，第三是菜單項對應的圖標。 NexT 使用的是 Font Awesome 提供的圖標， Font Awesome 提供了 600+ 的圖標，可以滿足絕大的多數的場景，同時無須擔心在 Retina 屏幕下 圖標模糊的問題。
編輯 主題配置文件，修改以下內容：
設定菜單內容，對應的字段是 menu。 菜單內容的設置格式是：item name: link。其中 item name 是一個名稱，這個名稱並不直接顯示在頁面上，她將用於匹配圖標以及翻譯。
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
home: /
categories: /categories
archives: /archives
tags: /tags
about: /about
#sitemap: /sitemap.xml
#commonweal: /404.html
設置菜單項的顯示文本。在第一步中設置的菜單的名稱並不直接用於界面上的展示。Hexo 在生成的時候將使用 這個名稱查找對應的語言翻譯，並提取顯示文本。這些翻譯文本放置在 NexT 主題目錄下的 languages/{language}.yml 。
以簡體中文為例，若你需要添加一個菜單項，比如 something。那么就需要修改簡體中文對應的翻譯文件 languages/zh-Hans.yml，在 menu 字段下添加一項：
menu:
home: 首頁
archives: 歸檔
categories: 分類
tags: 標簽
about: 關於
search: 搜索
- 設置側欄
默認情況下，側欄僅在文章頁面（擁有目錄列表）時才顯示，並放置於右側位置。 可以通過修改 主題配置文件 中的 sidebar 字段來控制側欄的行為。側欄的設置包括兩個部分，其一是側欄的位置， 其二是側欄顯示的時機。
設置側欄的位置，修改 sidebar.position 的值，支持的選項有：
- left - 靠左放置
- right - 靠右放置
sidebar:
position: left
設置側欄顯示的時機，修改 sidebar.display 的值，支持的選項有：
- post - 默認行為，在文章頁面（擁有目錄列表）時顯示
- always - 在所有頁面中都顯示
- hide - 在所有頁面中都隱藏（可以手動展開）
- remove - 完全移除
sidebar:
display: post
- 設置頭像
編輯 主題配置文件， 新增字段 avatar， 值設置成頭像的鏈接地址。其中，頭像的鏈接地址可以是
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
avatar: http://cgcyg.img48.wal8.com/img48/564414_20170102112604/148335731153.png
- 設置作者昵稱,描述,Title
編輯 站點配置文件， 設置 author 為你的昵稱。
title: 白衣秀才
subtitle: 青春就是瘋狂的奔跑，然后華麗的跌倒，站起來，再跑……
description: 青春就是瘋狂的奔跑，然后華麗的跌倒，站起來，再跑……
author: 白衣秀才
language: zh-Hans
timezone: Asia/Shanghai
- 設置友情鏈接和自己博客的地址
編輯主配置文件， 設置友情鏈接地址以及自己博客的地址。
# Blogrolls #links_title: Links links_layout: block #links_layout: inline links: 博客園: http://www.cnblogs.com/penglei-it/ 長江大學石油軟件實驗班: http://www.petrosoftware-class.com/ # Social Links # Key is the link label showing to end users. # Value is the target link (E.g. GitHub: https://github.com/iissnan) social: GitHub: https://github.com/whitescholars 微博: http://weibo.com/u/3034107691?refer_flag=1001030102_&is_all=1
- 配置站點建立時間
這個時間將在站點的底部顯示，例如 © 2013 - 2015。 編輯 主題配置文件，新增字段 since。
since: 2013
頁面添加
- 添加“標簽”頁面
新建“標簽”頁面，並在菜單中顯示“標簽”鏈接。“標簽”頁面將展示站點的所有標簽，若你的所有文章都未包含標簽，此頁面將是空的。 底下代碼是一篇包含標簽的文章的例子：
title: 標簽測試文章
tags:
- Testing
- Another Tag
---
-
- 在終端窗口下，定位到 Hexo 站點目錄下。使用 hexo new page 新建一個頁面，命名為 tags ：
$ cd your-hexo-site
$ hexo new page tags
-
- 編輯剛新建的頁面，將頁面的類型設置為 tags ，主題將自動為這個頁面顯示標簽雲。頁面內容如下：
title: 標簽
date: 2017-1-11 12:39:04
type: "tags"
---
-
- 在菜單中添加鏈接。編輯 主題配置文件 ， 添加 tags 到 menu 中，如下：
menu:
home: /
archives: /archives
tags: /tags
- 添加"分類"頁面
新建"分類"頁面，並在菜單中顯示"分類"鏈接。"分類"頁面將展示站點的所有分類，若你的所有文章都未包含分類，此頁面將是空的。 底下代碼是一篇包含分類的文章的例子：
title: 測試文章
categories: Testing
---
-
- 在終端窗口下，定位到 Hexo 站點目錄下。使用 hexo new page 新建一個頁面，命名為 categories：
$ cd your-hexo-site
$ hexo new page categories
-
- 編輯剛新建的頁面，將頁面的類型設置為 categories，主題將自動為這個頁面顯示標簽雲。頁面內容如下：
title: 分類
date: 2017-1-11 12:39:04
type: "categories"
---
-
- 在菜單中添加鏈接。編輯 主題配置文件 ， 添加 categories到 menu 中，如下：
menu:
home: /
archives: /archives
categories: /categories
注意：如果有啟用 多說 或者 Disqus 評論，頁面也會帶有評論。(下一篇文章將告訴大家如何啟用評論) 若需要關閉的話，請添加字段 comments 並將值設置為 false，如：
title: 分類
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---
- 添加"404"頁面
騰訊公益404頁面，尋找丟失兒童，讓大家一起關注此項公益事業！效果如下 http://www.ixirong.com/404.html
使用方法，新建 404.html 頁面，放到主題的 source 目錄下，內容如下：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8;"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="robots" content="all" /> <meta name="robots" content="index,follow"/> </head> <body> <script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="your site url " homePageName="回到我的主頁"> </script> </body> </html>
使用404頁面的好處是當站點出現問題，或參數錯誤，頁面不存在就會跳轉到404頁面。
以上基本包好hexo-next所有的基本配置，設置完成這些，你的全新的博客將展現在你的面前。當然，即便配置了這么多，其實還有很多完善的地方。我將在下一片博客中繼續講解關於hexo的配置，包括集成第三方服務，以及百度推廣相關的知識。
最后博客的訪問地址是：http://penglei.top/
結語
如果你還需要了解更多技術文章信息，請繼續關注白衣秀才的博客
個人網站：http://penglei.top/
Github：https://github.com/whitescholars
微博：http://weibo.com/u/3034107691?refer_flag=1001030102_&is_all=1