hexo+github教程之三：hexo next主题配置

到了这一步，相信你们都已经搭建好hexo博客，以及配置好github。下面开始讲解hexo主题配置。

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

为了描述方便，在以下说明中，将前者称为 站点配置文件，后者称为 主题配置文件。

安装NexT主题

Hexo 安装主题的方式非常简单，只需要将主题文件拷贝至站点目录的 themes 目录下，然后修改下配置文件即可。具体到 NexT 来说，安装步骤如下。

1、安装主题

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

2、启动主题

与所有 Hexo 主题启用的模式一样。当克隆/下载完成后，打开 站点配置文件，找到 theme 字段，并将其值更改为 next。

theme: next

到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前，我们最好使用 hexo clean 来清除 Hexo 的缓存。

3、验证主题

首先启动 Hexo 本地站点，并开启调试模式（即加上 --debug），整个命令是 hexo s --debug。在服务启动的过程，注意观察命令行输出是否有任何异常信息，如果你碰到问题，这些信息将帮助他人更好的定位错误。当命令行输出中提示出：

INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。
当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题。这是 NexT 默认的 Scheme —— Muse
hexo+github教程之三：hexo next主题配置
现在，你已经成功安装并启用了 NexT 主题。

hexo 站点配置文件

我们打开站点下的_config.yml文件

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 网站
title: Tenken blog   #网站标题
subtitle: 爱好游戏的码农 #网站副标题
description: 各种宅，各种懒，爱好游戏的码农 #网站描述
author: Tenken   #博主的名字
language: zh-Hans  #网站使用的语言
timezone:      #网站时区。Hexo 默认使用您电脑的时区
# URL 网址
## 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
url: http://whatcode.cn  # 你网站的url
permalink: :year/:month/:day/:title/    #生成文件名字的格式我改成blog/:title:year:month:day/
permalink_defaults:
# Directory 目录配置
source_dir: source   #源文件夹，这个文件夹用来存放内容。
public_dir: public   #公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags   #标签文件夹
archive_dir: archives   #归档文件夹
category_dir: categories   #分类文件夹
code_dir: downloads/code    #nclude code 文件夹
i18n_dir: :lang   #国际化（i18n）文件夹
skip_render:   #跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。
# Writing 文章
new_post_name: :title.md   # 新建文章默认文件名
default_layout: post   # 默认布局
titlecase: false   # Transform title into titlecase
external_link: true   # 在新标签中打开一个外部链接，默认为true
filename_case: 0   #转换文件名，1代表小写；2代表大写；默认为0，意思就是创建文章的时候，是否自动帮你转换文件名，默认就行，意义不大。
render_drafts: false   #是否渲染_drafts目录下的文章，默认为false
post_asset_folder: false   #启动 Asset 文件夹
relative_link: false   #把链接改为与根目录的相对位址，默认false
future: true   #显示未来的文章，默认false
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   #每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page   #分页目录
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next ## hexo主题
## Rss
feed:
  type: atom       #feed 类型 (atom/rss2)
  path: atom.xml   #rss 路径
  limit: 20        #在 rss 中最多生成的文章数(0显示所有)
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy: 
type: git 
  repository: git@github.com:Tenke007/Tenke007.github.io.git
  branch: master

上面的备注都很清楚了，基本没有什么需要更改的，网站title等根据自己修改就可以了。下面开始说说主题配置文件（重点）

hexo 主题配置文件

我们打开D:\Blog\themes\next下的_config.yml文件，下面会有中文注释
1、开启侧边栏社交链接

# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  微博: http://weibo.com/your-user-name
  豆瓣: http://douban.com/people/your-user-name
  知乎: http://www.zhihu.com/people/your-user-name
  # 等等

2、开启打赏功能

reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

3、开启友情链接

links_title: Links
links:
  MacTalk: http://macshuo.com/
  Title: http://example.com/

4、多说评论显示 UA

# 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: 123456
  admin_nickname: Tenken

5、开启订阅微信公众号

wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！

6、站点建立时间

since: 2013

7、设置头像

avatar: http://example.com/avtar.png

8、选择 Scheme

#scheme: Muse
#scheme: Mist
scheme: Pisces

下面是_config.yml文件的全部配置

# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico #站标 可以放在hexo文件夹下的/source里

# Set default keywords (Use a comma to separate)
keywords: "Tenken, Tenken blog, whatcode.cn, greeghost.com" ##网站关键字

# 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: #rss这里不设置 站点配置文件已经配置了 需要安装插件

# Specify the date when the site was setup
since: 2015 网站时间 从xx开始 类似 2015-2016

# 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: #菜单路径设置 如果hexo在二级目录放置要去掉/
  home: /
  categories: /categories #分类
  tags: /tags #标签
  archives: /archives #归档
  about: /about # 关于我
  #sitemap: /sitemap.xml #这个可以不用开启，给搜索引擎用的，需要安装插件
  commonweal: /404.html #公益404

# 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: #上面menu的icon
  enable: true
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home
  about: user
  categories: th
  schedule: calendar
  tags: tags
  archives: archive
  sitemap: sitemap
  commonweal: heartbeat

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes #next主题的三个schemes(默认是Muse)
#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,weibo,qq等
  #LinkLabel: Link
  #GitHub: https://github.com/Tenke007
  #Wechat: /images/wechat.png


# 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: #对应的社交icon
  enable: true
  # Icon Mappings.
  # KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  Twitter: twitter
  Weibo: weibo
  Wechat: wechat


# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
avatar: /images/avatar.jpg #博主头像（可以放外链）


# 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: #侧边栏，貌似只对scheme: Pisces有效，可以设置左边或右边
  # 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: post
  #display: always
  #display: hide
  #display: remove


# Blogrolls
links_title: 友情链接
#links_layout: block
links_layout: inline
links:
  极客幽灵: http://www.greeghost.com
  discuz开发者: http://addon.discuz.com/?@24443.developer


# ---------------------------------------------------------------
# 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: #设置为true,首页文章会显示 阅读全文
  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: /images/wechat.png #微信二维码图片路径
  description: 扫一扫添加微信好友 #微信二维码描述



# ---------------------------------------------------------------
# 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:

# Duoshuo ShortName #多说评论，需要自己注册账号
duoshuo_shortname: tenke

# 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:
# Warning: JiaThis does not support https.
#add_this_id:

# Share #多说分享，上面有百度分享，jiathis分享，因为我开启了多说，所以这里我只有多说分享
duoshuo_share: true

# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
#google_site_verification:


# Google Analytics
#google_analytics:

# CNZZ count
#cnzz_siteid:

# 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 #开启显示UA
  admin_enable: true #是用于显示 「博主」 文字
  user_id: 123456 #多说账号的秘钥
  admin_nickname: Tenken #博主名字


# 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: false
  app_id: #<app_id>
  app_key: #<app_key>

# 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>&nbsp&nbsp阅读数
  page_pv_footer:


# Tencent analytics ID
# tencent_analytics:

## 打赏
reward_comment: 请我吃辣条吧~~
wechatpay: /images/wxpay.png
alipay: /images/alipay.jpg


# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

# 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 next的主题配置文件，各位可以参考一下。下一步重点讲解如何配置第三方插件，如：多说评论，搜索，RSS，404页面等

请参考next主题文档

我的hexo博客地址：http://blog.greeghost.com

秒客网