前情
之前的文章已經說明了hexo這一架構的搭建過程，本文對該架構如何配置，以及Next主題的配置來一個說明，按着文章的說明慢慢走一遍，屬于自己的部落格就可以呈現出來啦。也歡迎到我的部落格中觀看哦~
配置說明
我個人選擇的是Next這一主題，這一主題是由中國人開發，具有中文文檔，并且我很喜歡它的設計風格。下面的配置也是圍繞這個主題進行的，如果喜歡别的主題，可以到hexo的主題頁選擇，并根據文檔說明盡心配置。
Next主題安裝
cd hexo # 進入部落格根目錄
git clone https://github.com/theme-next/hexo-theme-next themes/next
hexo配置
編輯部落格根目錄下的_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:
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: # 首頁每頁展示的文章數
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:
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:
feed: # 實作部落格訂閱功能
type: atom
path: atom.xml
limit:
sitemap: # 生成站點地圖用于SEO優化
path: sitemap.xml
baidusitmap: # 同上
path: baidusitemap.xml
Next配置
編輯 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-x16.png
medium: /images/favicon-x32.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:
# 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 <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a>
# ---------------------------------------------------------------
# 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: // || 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 to to set the opacity of the avatar.
opacity:
# 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:
# Pisces | Gemini:
#width:
# 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: # 文章索引與頂部的距離
# 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 <!-- more --> 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 <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length:
# 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:
wpm:
codeblock:
# Manual define the border radius in codeblock
# Leave it empty for the default
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:
#PPMixingRate:
#isDate: false
#isImage: false
#isExcerpt: false
# Declare license on posts
post_copyright:
enable: false
license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA </a>
# 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 <body>.
global:
external: true
family: Lato
size:
# 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 <code> and code blocks.
codes:
external: true
family:
size:
收工部分
在配置過程中，可運作hexo伺服器實時觀看配置效果，hexo配置的修改需要重新開機hexo伺服器才能生效，主題配置的修改儲存後重新整理頁面即可生效。配置完成後，需要生成靜态檔案：
cd ***/
hexo generate
生成的靜态檔案在 /*/public 目錄下，如果是托管在github上的話，在網上查找相關教程即可，教程極其豐富。如果是部署在自己的vps上的話，我将會在下篇文章中寫明如何進行配置。
ENG
![我的電腦組態遊戲參數N卡設定#穿越火線[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)