hexo+Next主题详细配置说明
前情
之前的文章已经说明了hexo这一框架的搭建过程，本文对该框架如何配置，以及Next主题的配置来一个说明，按着文章的说明慢慢走一遍，属于自己的博客就可以呈现出来啦。也欢迎到我的博客中观看哦~
配置说明
我个人选择的是Next这一主题，这一主题是由中国人开发，具有中文文档，并且我很喜欢它的设计风格。下面的配置也是围绕这个主题进行的，如果喜欢别的主题，可以到hexo的主题页选择，并根据文档说明尽心配置。
Next主题安装
cd hexo # 进入博客根目录
git clone https://github.com/theme-next/hexo-theme-next themes/nexthexo配置
编辑博客根目录下的_config.yml文件：
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: # 博客名称
subtitle: # 博客子标题
description: # 作者描述
keywords: # 站点关键词，用于搜索优化
author: # 博主名
language: zh-CN # 站点语言
timezone: Asia/Shanghai # 时区
# 注意
# 语言这里需要进入 /***/themes/next/languages/ 目录
# 不同版本的语言名称可能有些许差别
# *** 为博客根目录
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com # 你的域名，如果有
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 # 博文的格式，默认markdown编辑
default_layout: post # 默认发布的为post，即默认发布的是文章
# 共有三种类型，具体见hexo文档
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:
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10 # 首页每页展示的文章数
order_by: -date # 按日期逆序
# 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主题
# Deployment # 下面是第三方扩展，根据个人需求设置，也可不修改以下内容
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:
search: # 实现搜索文章的功能
path: search.xml
field: post
format: html
limit: 100
feed: # 实现博客订阅功能
type: atom
path: atom.xml
limit: 20
sitemap: # 生成站点地图用于SEO优化
path: sitemap.xml
baidusitmap: # 同上
path: baidusitemap.xmlNext配置
编辑 /***/themes/next/_config.yml（其中***为博客根目录）文件：
注意：
该主题内置了大量的第三方插件，使用极其方便，并且在该配置文件中都指明了该三方插件的文档网址，所以在这里只对基础功能进行说明。如果有需求，可浏览相关文档配置出属于自己的博客~
# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------
# To get or check favicons visit: https://realfavicongenerator.net
# Put your favicons into `hexo-site/source/` (recommend) or `hexo-site/themes/next/source/images/` directory.
# Default NexT favicons placed in `hexo-site/themes/next/source/images/` directory.
# And if you want to place your icons in `hexo-site/source/` root directory, you must remove `/images` prefix from pathes.
# For example, you put your favicons into `hexo-site/source/images` directory.
# Then need to rename & redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo.
# 以下设置网站的logo，建议用400*400制作好原图
# 然后访问https://realfavicongenerator.net生成各种类型的logo
# 放置于 ***/themes/next/source/images/目录下，***为博客根目录
favicon:
small: /images/favicon-16x16.png
medium: /images/favicon-32x32.png
apple_touch_icon: /images/apple-touch-icon.png
safari_pinned_tab: /images/safari-pinned-tab.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link, and install hexo-generator-feed: `npm install hexo-generator-feed --save`.
# Set rss to specific value if you have burned your feed already.
rss:
footer:
# Specify the date when the site was setup.
# If not defined, current year will be used.
#since: 2015
# Icon between year and copyright info.
icon:
# Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons
# `heart` is recommended with animation in red (#ff0000).
name: user
# If you want to animate the icon, set it to true.
animated: false
# Change the color of icon, using Hex Code.
color: "#808080"
# If not defined, will be used `author` from Hexo main config.
copyright:
# -------------------------------------------------------------
powered:
# Hexo link (Powered by Hexo).
enable: true
# Version info of Hexo after Hexo link (vX.X.X).
version: false
theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: true
# Version info of NexT after scheme info (vX.X.X).
version: false
# -------------------------------------------------------------
# Any custom text can be defined here.
#custom_text: Hosted by "_blank" rel="external nofollow" href="https://pages.coding.me">Coding Pages
# ---------------------------------------------------------------
# SEO Settings
# ---------------------------------------------------------------
# SEO 相关设置
# 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, remember 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: true # 开启seo优化
# If true, will add site-subtitle to index page, added in main hexo config.
# subtitle: Subtitle
index_with_subtitle: true # 网页搜索及标签页显示副标题
# ---------------------------------------------------------------
# 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.
# 以下为主菜单按键设置，不需要的在行首用#注释掉
# 启用的标签页需要创建相应的目录
# 例如：
# cd *** # 进入微博根目录
# hexo new page about # 创建about页面
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
# Enable/Disable menu icons / item badges.
menu_settings:
icons: true
badges: false
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# 主题风格设置
# 选用哪个就去掉哪个的#
# 样例可在next文档中查看
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
# 主页面菜单栏设置
# Posts / Categories / Tags in sidebar.
site_state: true
# 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/yourname || github
#E-Mail: mailto:[email protected] || envelope
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype
social_icons:
enable: true
icons_only: false
transition: false
# Dependencies: exturl: true in Tags Settings section below.
# To encrypt links above use https://www.base64encode.org
# Example encoded link: `GitHub: aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQ= || github`
exturl: false
# Follow me on GitHub banner in right-top corner.
# Usage: `permalink || title`
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the title and aria-label name.
#github_banner: https://github.com/yourname || Follow me on GitHub
# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
#links:
#Title: http://example.com/
# Sidebar Avatar
# 头像设置
# 将图片放置于 ***/themes/next/source/images/目录下，***为博客根目录
# 图片不要过大，不利于加载
avatar:
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/touxiang.jpg
# If true, the avatar would be dispalyed in circle.
#rounded: false
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1
# If true, the avatar would be rotated with the cursor.
rotated: false
# Table Of Contents in the Sidebar
toc:
enable: true
# Automatically add list number to toc.
number: true
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false
# 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 (only for Pisces | Gemini).
position: left
#position: right
# Manual define the sidebar width.
# If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
#width: 300
# 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
# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12 # 文章索引与顶部的距离
# Back to top in sidebar (only for Pisces | Gemini).
b2t: false # 回到顶部是否置于菜单栏下方
# Scroll percent label in b2t button.
scrollpercent: false
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: false
# ---------------------------------------------------------------
# Post Settings
# ---------------------------------------------------------------
# Automatically scroll page to section which is under mark.
scroll_to_more: false # 是否自动进行“查看全文”标记
# Automatically saving scroll position on each post/page in cookies.
save_scroll: false # 是否记录浏览位置
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true # 是否自动摘录作为前言
# Automatically Excerpt. Not recommend.
# Please use in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150
# Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at:
enabled: true
# If true, show updated date label only if `updated date` different from 'created date' (post edited in another day than was created).
# And if post will edited in same day as created, edited time will show in popup title under created time label.
# If false show anyway, but if post edited in same day, show only edited time.
another_day: true
categories: true
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4
wpm: 275
codeblock:
# Manual define the border radius in codeblock
# Leave it empty for the default 1
border_radius:
# Add copy button on codeblock
copy_button:
enable: false
# Show text copy result
show_result: false
# 微信订阅相关设置
# 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
# Reward # 打赏相关设置
#reward_comment: Donate comment here
#wechatpay: /images/wechatpay.jpg
#alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png
# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
enable: false
title: # custom header, leave empty to use the default one
display_in_home: false
params:
maxCount: 5
#PPMixingRate: 0.0
#isDate: false
#isImage: false
#isExcerpt: false
# Declare license on posts
post_copyright:
enable: false
license: "https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0
# Post edit
# Dependencies: https://github.com/hexojs/hexo-deployer-git
post_edit:
enable: false
url: https://github.com/theme-next/theme-next.org/_posts/tree/master/ # Link for view source.
# url: https://github.com/theme-next/theme-next.org/_posts/edit/master/ # Link for fork & edit.
# ---------------------------------------------------------------
# Misc Theme Settings
# ---------------------------------------------------------------
# Reduce padding / margin indents on devices with narrow width.
mobile_layout_economy: false
# Android Chrome header panel color ($brand-bg / $headband-bg => $black-deep).
android_chrome_color: "#222"
# 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 values: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties # 代码高亮风格
# Enable "cheers" for archive page.
cheers_enabled: true
# ---------------------------------------------------------------
# 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 italic, bold, bold italic
# - Be aware that setting too much fonts will cause site running slowly
# - Introduce in 5.0.1
# ---------------------------------------------------------------
# CAUTION! Safari Version 10.1.2 bug: https://github.com/iissnan/hexo-theme-next/issues/1844
# To avoid space between header and sidebar in Pisces / Gemini themes recommended to use Web Safe fonts for `global` (and `logo`):
# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS
# ---------------------------------------------------------------
# 字体相关设置
# 因为上述的谷歌字体中没有中文支持
# 所以下列一般只改字体大小
font:
enable: true
# Uri of fonts host. E.g. //fonts.googleapis.com (Default).
host:
# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: xx`. Use `px` as unit.
# Global font settings used for all elements in .
global:
external: true
family: Lato
size: 18
# Font settings for Headlines (H1, H2, H3, H4, H5, H6).
# Fallback to `global` font settings.
headings:
external: true
family:
size:
# Font settings for posts.
# Fallback to `global` font settings.
posts:
external: true
family:
# Font settings for Logo.
# Fallback to `global` font settings.
logo:
external: true
family:
size:
# Font settings for and code blocks.
codes:
external: true
family:
size: 14
收工部分
在配置过程中，可运行hexo服务器实时观看配置效果，hexo配置的修改需要重启hexo服务器才能生效，主题配置的修改保存后刷新页面即可生效。配置完成后，需要生成静态文件：
cd ***/
hexo generate
生成的静态文件在 /*/public 目录下，如果是托管在github上的话，在网上查找相关教程即可，教程极其丰富。如果是部署在自己的vps上的话，我将会在下篇文章中写明如何进行配置。