GitHub+Hexo搭建自己的Blog之-主題配置

前言

前兩章我們已經把Blog的環境全部搭建完畢了，但是還沒有內容，而且hexo默認的主題是不是感覺挺丑的，其實hexo給我們提供了很多主題模板，總有一款是你喜歡的，本篇文章將繼續說一說如何配置主題，怎么創建博文，寫好后又如何發布，一起來看吧!

點我進入hexo官網挑選模板
Loding...

文章總覽

Hexo主目錄作用

Loding...
如圖是我們myblog文件的主目錄，由上往下文件的作用

node_modules：是我們這個hexo整個項目的環境依賴，自動生成的，不用理會。
public：存放的是整個項目的頁面，樣式，及邏輯代碼。
scaffolds：scaffolds是腳手架的意思，當你新建一篇文章(hexo new page 'title')的時候，hexo是根據這個目錄下的文件進行構建的。不用關心。
source：這個目錄很重要，新建的文章都是在保存在這個目錄下的_posts 。_posts 目錄下是一個個 markdown 文件。初始里面有一個 hello-world.md 的文件，文章就在這個文件中編輯。_posts 目錄下的md文件，會被編譯成html文件，放到 public 文件夾下。
themes：是網站的主題目錄，Hexo有很好的主題擴展能力，開源主題也很豐富，該目錄下每一個子目錄就是一個主題。
_config.yml：全局配置文件，我們Blog站點的很多信息都是在這個文件中配置的，比如網站的名字，副標題，網站描述信息，作者等等。
package.json：這個文件里我們可以看到hexo所依賴的插件。

接下來詳細說一說?_config.yml?文件的配置

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/# Site
title: 劉旺學長的技術專欄 #網站標題
subtitle:   #網站副標題
description:  #網站描述
author: RoseSnow  #作者
language:    #語言
timezone:    #網站時區。Hexo 默認使用您電腦的時區。時區列表。比如說：America/New_York, Japan, 和 UTC 。# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://Liuwang0330.com  #你的站點Url
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     #Include code 文件夾
i18n_dir: :lang                #國際化（i18n）文件夾
skip_render:                #跳過指定文件的渲染    # Writing
new_post_name: :title.md # 新文章的文件名稱
default_layout: post     #預設布局
titlecase: false # 把標題轉換為 title case
external_link: true # 在新標簽中打開鏈接
filename_case: 0     #把文件名稱轉換為 (1) 小寫或 (2) 大寫
render_drafts: false  #是否顯示草稿
post_asset_folder: false  #是否啟動 Asset 文件夾
relative_link: false      #把鏈接改為與根目錄的相對位址    
future: true                #顯示未來的文章
highlight:                    #內容中代碼塊的設置    enable: trueline_number: trueauto_detect: falsetab_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: landscape   #主題名稱 # Deployment
## Docs: https://hexo.io/docs/deployment.html
#  部署部分的設置
deploy:type: gitrepo: git@github.com:Liuwang0330/Liuwang0330.github.io.git #這里我們之前部署到github時配置過的baranch: master

更換Next主題

本文介紹Next主題的配置用法，其他的主題用法大體步驟是類似的。
更多詳情：點我了解更多

主題下載：進入到myblog文件目錄下，打開powershell終端，鍵入命令：git clone https://github.com/theme-next/hexo-theme-next themes / next?下載完畢，我們打開themes文件夾，會發現多出一個next的文件夾。
應用主題：打開根myblog目錄下的 _config.yml 文件，修改themes的值為 next 如圖
預覽：進入終端在根目錄?myblog?下依次鍵入如下命令：

hexo clean?先清理一下hexo的緩存
hexo s?本地啟動服務
打開瀏覽器：在地址欄鍵入?http://localhost:4000?預覽，如圖

Next配置

next主題應用成功之后，也是需要友好的配置一下，打開themes文件夾下的next文件會看到也有一個?_config.yml?的文件，有了之前的經驗，我們知道這個就是next主題的全局配置文件了

_config.yml配置

截取了一部分，這里基本上是需要配置的，其他的基本是默認，更多的配置，可看這篇教程點我查看更多炫酷設置

favicon: # 這里配置站點的站標# small: /images/favicon-16x16-next.pngmedium: /images/favicon-16x16-next.pngapple_touch_icon: /images/apple-touch-icon-next.pngsafari_pinned_tab: /images/logo.svg#android_manifest: /images/manifest.json#ms_browserconfig: /images/browserconfig.xml# Set default keywords (Use a comma to separate)
keywords: # 這里放置站點的關鍵字 "前端, HTML, CSS, javascript, Vue.js, Node.js, MySQL, 微信小程序"# 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:footer: # 網站的頁腳設置# Specify the date when the site was setup.# If not defined, current year will be used.since: # 網站的開始運行時間 比如設置2017 則網站底部顯示 2017-2018# Icon between year and copyright info.icon: user # If not defined, will be used `author` from Hexo main config.# copyright:# -------------------------------------------------------------# Hexo link (Powered by Hexo).# powered: true# theme:#   Theme & scheme info link (Theme - NexT.scheme).#   enable: false#   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" href="https://pages.github.com">GitHub Pages</a># ---------------------------------------------------------------
# SEO Settings
# ---------------------------------------------------------------# 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: false# If true, will add site-subtitle to index page, added in main hexo config.
# subtitle: Subtitle
index_with_subtitle: false# ---------------------------------------------------------------
# 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.
menu: # 菜單路徑 注意：下邊的 || 不能去掉 后邊表示的是 對應的圖標home: / || home # 表示主頁tags: /tags/ || tags # 表示標簽categories: /categories/ || th # 表示分類archives: /archives/ || archive #表示歸檔about: /about/ || user 表示關于我life: /life/ || heart#schedule: /schedule/ || calendar #sitemap: /sitemap.xml || sitemap#commonweal: /404/ || heartbeat # 公益活動# Enable/Disable menu icons.
menu_icons: # 這里是圖標設置 和上邊的 || 后面的一致 enable: truehome: hometags: tagscategories: tharchives: archiveabout: userlife: heart# ---------------------------------------------------------------
# Scheme Settings 這里是next主題的樣式排版設置
# ---------------------------------------------------------------# Schemes next給提供了如下四個頁面布局方式 只能選擇其中的一個使用，具體樣式，可自己動手試試，我這里選擇的是Mist
# scheme: Muse
scheme: Mist
# scheme: Pisces
# scheme: Gemini# ---------------------------------------------------------------
# Sidebar Settings 社交設置
# ---------------------------------------------------------------# 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  和  郵箱，下面還可以設置 微博之類的 自己動手設置試試GitHub: https://github.com/Liuwang0330|| githubE-Mail: number_nine@126.com || 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 || skypesocial_icons: # 這里是設置上面社交鏈接 的對應圖標的 對應的設為 true 即可enable: trueGithub: githubicons_only: falsetransition: false# Blog rolls  # 這里是設置一些相關鏈接 我這里設置了一些推薦閱讀的網站，可自行設置
links_icon: link
links_title: 推薦閱讀
# links_layout: block
links_layout: inline
links:w3school: http://www.w3school.com.cn/菜鳥教程: http://www.runoob.com/廖雪峰官網: https://www.liaoxuefeng.com/# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /images/avatar.jpg  # 這里設置自己的頭像# Table Of Contents in the Sidebar # 文章自動顯示的目錄
toc:enable: true# Automatically add list number to toc. 文章是否顯示序號，顯示則設置為truenumber: false# 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# 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 <!-- more --> mark.
scroll_to_more: true# 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: truelength: 120# Post meta display settings
post_meta:item_text: truecreated_at: trueupdated_at: falsecategories: true# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:item_text: truewordcount: truemin2read: truetotalcount: trueseparated_meta: true# Wechat Subscriber 設置微信添加方式
wechat_subscriber:enabled: trueqcode: /images/mywechat.jpgdescription: 掃一掃添加微信好友# Reward  # 設置打賞方式
reward_comment: 如果覺得文章不錯，請我吃根辣條吧~~
wechatpay: /images/wxpay.png
alipay: /images/alipay.png
# bitcoin: /images/bitcoin.png# Declare license on posts
post_copyright:enable: falselicense: CC BY-NC-SA 3.0license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/# ---------------------------------------------------------------
# Misc Theme Settings
# ---------------------------------------------------------------# Reduce padding / margin indents on devices with narrow width.
mobile_layout_economy: false# Android Chrome header panel color ($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: falseimage:# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties

創建其他頁面

首頁和歸檔是默認存在的，不需要我們自己創建，但是其他的幾個諸如分類，標簽，關于是要我們自己創建的
?

創建分類：終端myblog根目錄下鍵入命令?hexo new page categories?之后我們進入?myblog/source目錄下發現多出一個名為?categories?的文件夾, 打開categories下的index.md,可以看到是這樣的如圖 Loding...