Hexo搭建个人博客（三）—— Hexo博客的美化

通过前两节的学习，我们已经搭建好自己的博客，就像盖房子一样要对内部进行装修，也就是对博客进行美化。

安装Hexo博客主题

Hexo博客可以安装不同的主题，这里我们只说最火的Next主题。首先我们在自己电脑里的博客文件夹内（即username.github.io文件夹内）右键选择Git Bash here，在终端窗口内输入以下代码：

代码语言：javascript复制

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

稍等片刻，安装完成后你的themes文件夹内就会多出一个next文件夹，请在站点的配置文件中把主题选为next，即theme: next。

博客的配置

接下来我们对博客的配置主要将在两个_config.yml文件中进行。第一个为Hexo博客的站点配置文件位于你的博客文件夹（即username.github.io文件夹）内；第二个位于next文件夹内。首先让我们看看站点配置文件都有什么：

代码语言：javascript复制

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: why so serious?  # 站点名
subtitle:  # 副标题
description:
author: WoodenRobot  # 作者
language: zh-Hans # 语言，zh-Hans为中文简体
timezone:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://woodenrobot.me # 博客网址
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  #请添加next主题并选择
#theme: landscape
#theme: yilia
# 多说
duoshuo_shortname: woodenrobot  # xxx.duoshuo.com，xxx即是shortname
# 百度  # 需要安装插件 npm install hexo-generator-baidu-sitemap@0.1.1 --save
baidusitemap:
  path: baidusitemap.xml
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/Wooden-Robot/Wooden-Robot.github.io.git
  branch: master
  plugins: -hexo-generator-feed

大家可以根据自己的情况进行设置。接下来是主题的配置文件：

代码语言：javascript复制

# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------
# Place your favicon.ico to /source directory.
favicon: /favicon.ico
# Set default keywords (Use a comma to separate)
keywords: "woodenrobot"
# 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 #此处需要安装插件npm install hexo-generator-feed --save
# Specify the date when the site was setup
since: 2016
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# When running hexo in a subdirectory (e.g. domain.tld/blog)
# Remove leading slashes ( "/archives" -> "archives" )
menu:
  home: /                   #主页
  categories: /categories   #分类页（需手动创建） 教程请往下看！
  about: /about             #关于页面（需手动创建）
  archives: /archives       #归档页
  tags: /tags               #标签页（需手动创建）
  #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.
#   When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes #此为主题内主题，建议选择Mist。个人感觉比较稳定Bug少，改用其他主题可能会出现未知Bug（取决于作者是否在最新版内完善）。
#scheme: Muse
scheme: Mist
#scheme: Pisces
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
#links_title #以下是侧边栏的友情链接，你们的配置文件中可能没有，按我的样式添加即可。
links_title: 友情链接
links:
  瓢虫映像: http://site.douban.com/177837/
# Social links
social:
  weibo: http://weibo.com/u/1561651905
  GitHub: https://github.com/Wooden-Robot
  zhihu: https://www.zhihu.com/people/mu-zhi-robot
# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  Weibo: weibo
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
# default : /images/default_avatar.jpg
avatar: http://7xraal.com1.z0.glb.clouddn.com/avatar.jpg  # 此处为侧边栏里的头像可以放入图片链接，也可将图片放入站点文件的source/uploads中（没有请在source中新建uploads）或者放入theme文件的source/images中。
# TOC 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:  # 此处应为侧边栏左右位置，但并无什么作用，乱选无用或有bug。
  # 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 toggle icon.
  #display: post
  display: always
  #display: hide
  #display: remove
# ---------------------------------------------------------------
# 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
# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true
# Automatically Excerpt
auto_excerpt:
  enable: true
  length: 150
# Use Lato font
use_font_lato: true
# ---------------------------------------------------------------
# Third Party Services Settings
# ---------------------------------------------------------------
# MathJax Support
mathjax:
# Swiftype Search API Key  # 站内搜素，教程请看往下看！
swiftype_key: TChYnQxfabLwWxErgM-L
# Baidu Analytics ID
#baidu_analytics:
# Duoshuo ShortName  # 多说评论，教程请看往下看！
duoshuo_shortname: woodenrobot
duoshuo_hotartical: true
# Disqus
#disqus_shortname:
# Share
#jiathis:
#add_this_id:
# Share
duoshuo_share: true
# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
#google_site_verification:
# Google Analytics
#google_analytics:
# 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: false
  user_id: 0
  #admin_nickname: ROOT
# 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
# 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>
# Tencent analytics ID
# tencent_analytics:
#! ---------------------------------------------------------------
#! DO NOT EDIT THE FOLLOWING SETTINGS
#! UNLESS YOU KNOW WHAT YOU ARE DOING
#! ---------------------------------------------------------------
# Motion
use_motion: true
# Fancybox
fancybox: true
# Static files
vendors: vendors
css: css
js: js
images: images
# Theme version
version: 0.5.0

分类页面，标签页面，关于页面创建

以标签页面为例： 1.首先运行以下命令：

代码语言：javascript复制

# 标签为"tags",分类为"categories",关于为"about"
hexo new page "tags"

在站点/source目录下会生成一个tags文件夹，里面包含一个index.md文件。 2.修改/source/tags目录下的index.md文件

代码语言：javascript复制

title: tags
date: 2015-09-29 14:37:02
type: "tags" # 同理分类为"categories"，关于为"about"
---

3.修改主题配置文件去掉tags的注释

代码语言：javascript复制

menu:
  home: /                       #主页
  categories: /categories	    #分类页（需手动创建）
  #about: /about		        #关于页面（需手动创建）
  #archives: /archives	     	#归档页
  tags: /tags		        	#标签页（需手动创建）
  #commonweal: /404.html        #公益 404 （需手动创建）