辛辛苦苦一个多星期，大大小小的细节，总算是把这套博客系统搭建完成了，发现有很多地方是很打磨消耗人时的，所以我做一份归纳，方便后续如果有人踩了坑。
安装
网上的安装文档实在太多了，这一步我不做过多的介绍，不懂的朋友可以去官网看文档就可以完成，戳这里到Hexo官网
官网有很多教程了，俗人的电脑是Mac，所以我就在第一视角做全套傻瓜服务
安装Node.js
双击运行安装包，然后去命令行
node -v
# 这时候会出现你的版本号v10.16.3，安装成功
安装Git
戳这里到Git官网
这个也很简单，这里不多做叙述
brew install git
brew又不知道了？[･｀Д´･ ] 别太过分！ 戳这里到brew官网
安装Hexo
npm install -g hexo-cli
官方这里也提到，如果系统未安装Xcode会遇到问题，这时候去Mac的应用商店搜索
照理来说，到这其实基本所需的基本项都安装完成了。
嗯哼？有人问Mac在哪领取？Ait + F4快捷键领取即可！
建立博客
hexo init <你所放置的文件地址>
cd <你所放置的文件地址>
npm install
此时你就会看到以下的目录结构
这里就介绍几个关键的文件和文件夹
_config.yml
网站的配置的信息都存储在这里面，很关键的文件，文章后面会做到详细阐述
source
这里面是存放用户资源的地方，什么意思呢？
也就是博客内容都放在这里面
进到目录中，就会发现有一个 _post文件夹 ，这个文件夹就是之后的文档主要文件。
themes
主题文件夹，放心，之后恶心你的大部分地方都在这里面！
hexo常用的命令
新建文章
hexo new <文章标题> # 可以简写hexo n <文章标题>
生成静态文件
由于Hexo是用Node.js来进行页面渲染，所以需要生成对应的静态文件
hexo generate # 可以简写hexo g
启动本地服务器
每篇文章总得查看无论是编排、内容，所以我们需要测试，这时候我们就需要本地服务了
hexo server # 可以简写hexo s
但是运行之前需要确保已经安装 hexo-server 插件
npm install hexo-server --save
此时服务器就会开启4000端口供你使用，但是可能你的服务器端口被占用了，会提示以下错误
FATAL Port 4000 has been used. Try other port instead.
此时你需要切换一个端口
hexo s -p 5000 # -p 是可以指定端口的操作
部署网站
辛辛苦苦打理了这么久的博客，不上传到服务器上展（zhuang）示（bi）一下，怎么对得起自己
hexo deploy # 可以简写 hexo d
这里涉及到几个知识点
- 需要先渲染博客，也就是hexo g（可以hexo g -d一步操作）
- 还需要配置博客目录下 _config.yml 文件中的deploy模块
# 之后会教大家如何操作
deploy:
type: git
repo: <git地址>
branch: master
其余的命令实际上用到真的不多，万一需要，百度就可以了
安装主题
这几就看个人喜好了，俗人这就不一一举例了，基本上每一个都是大同小异的，就按俗人所使用的这个吧
该博客的主题hexo-theme-butterfly 是基于Molunerfinn的hexo-theme-melody的基础上进行开发的。
安装hexo-theme-butterfly
在博客的根目录
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
或者想用最新的分支的话
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
替换主题
博客根目录
vim _config.yml
然后将
theme: Butterfly
这时候就成为俗人首页的大致样子了。
博客配置
文章front-matter
---
title:
date:
tags:
categories:
keywords:
description:
top_img: （除非特定需要，可以不寫）
comments: 是否展示评论系统（true.展示 false.不展示）
description: 节选，如果不填就默认从文章中选择配置的长度
cover: 首页缩略图
toc: 是否显示toc
toc_number: 是否显示toc数字
copyright: 是否显示版权
---
# 节选内容
auto_excerpt:
enable: true
length: 150
系统中英文替换
替换主题后你会发现首页的菜单一开始是英文名字，或者不是自己想要的样子，怎么办？
配置 _config.yml
language: zh-CN
但是有人反馈，此时还没有全量变更为中文
# 进入主题文件夹
cd themes/Butterfly
会发现这里也有一个 _config.yml 文件，这个文件是掌管整套系统主题相关的配置，个人觉得重要程度的比重要比前面博客根目录的同名文件要重要，当然缺一不可。
编辑这个文件
# 可以像俗人一样把原本的英文名修改成中文，这样就会完全解决切换不彻底问题
menu:
首页: / || fa fa-home
时间轴: /archives/ || fa fa-archive
留言板: /message/ || fa fa-coffee
标签: /tags/ || fa fa-tags
分类: /categories/ || fa fa-folder-open
链接: /link/ || fa fa-link
关于: /about/ || fa fa-heart
列表||fa fa-list:
- 音乐 || /music/ || fa fa-music
- 视频 || /movies/ || fa fa-film
这里如果需要新增菜单栏目的话，记得这样的规律
- 名称 || 路径 || icon
新增菜单
此时发现点击页面都是空白
这时候就需要新增页面的操作了，但是注意这里的新增和新增文章不同，这里需要加上分类
# 新增标签
hexo new page tags
在博客的根目录访问
source/tags/index.md
发现这是一个文档文件
是的，基本上大同小异，但是要注意，由于主题的底层已经加上了对该页面的效果，所以需要遵循命名规范后修改文档
title: 标签
date: 2019-10-01 10:00:00
type: "tags"
此时首页的标签按钮已经展示对应的页面内容了，其余的页面同理。
友情链接
- 前往你的Hexo根目录
- 输入
hexo new page link - 找到
source/link/index.md这个文件 - 编辑这个文件
title: 链接
date: 2019-10-01 10:00:00
type: "link"
注意，主题中配置友情链接的位置不是在该文件本身，而是需要你去 创建 source/_data 目录，并且新建文件 link.yml
class:
class_name: 友情链接
link_list:
1:
name: 名称
link: 地址
avatar: 头像
descr: 描述
#2:
# name: xxxxxx
# link: https://www.xxxxxxcn/
# avatar: https://xxxxx/avatar.png
# descr: xxxxxxx
同时，可以在themes/Butterfly/_config.yml文件中，写上个人博客的信息，方便他人帮忙转载
Flink:
headline: 友情链接
info_headline: 我的Blog资料
name: Blog 名字： 俗俗俗俗俗人。
address: Blog 地址： https://blog.thatwang.com/
avatar: Blog 头像： https://blog.thatwang.com/img/avatar.png
info: Blog 简介： 做个俗人，知世俗，而不俗
comment: 如果需要交换链接，请给我留言，谢谢~
代码高亮
Butterfly支持五种高亮样式：
- default
- darker
- pale night
- light
- ocean
配置 _config.yml
highlight_theme: light
复制
配置 _config.yml
# Highlight theme
# ---------------
highlight_theme: light
highlight_copy: true #代碼複製按鈕
highlight_lang: true #代碼語言顯示
highlight_shrink: false #代碼框不展開，需點擊 '>' 打開
# copy setting
# 是否禁止複製（如果禁止，highlight_copy的功能將無效)
# copyright 複製的内容後面加上版權信息
copy:
enable: true # true 開啓 / false 禁止
copyright: true
换行
在默认情况下，配置中是不开启换行功能的，如果不希望在代码中有横向滚动条，可以开启这个功能。
配置 _config.yml
code_word_wrap: true
highlight:
enable: true
line_number: false
auto_detect: false
tab_replace:
社交图标
戳这里到对应的图标中心
配置 _config.yml
social:
fa fa-weixin: http://iblog.thatwang.com/qrcode_for_gh_706ce3f91494_258.jpg
fa fa-weibo: http://weibo.cn/wordpole9981
fa fa-qq: https://jq.qq.com/?_wv=1027&k=5E3IUHu
文章版权
配置 _config.yml
post_copyright:
enable: true
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
是否开启版权
copyright: false
文章打赏
配置 _config.yml
reward:
enable: true
QR_code:
- itemlist:
img: /img/wechat.jpg
text: 微信
- itemlist:
img: /img/alipay.jpg
text: 支付宝
头像
配置 _config.yml
avatar: https://xxxx/avatar.png
文章目录
配置 _config.yml
toc:
enable: true
number: true # 显示章节数字
相关文章
配置 _config.yml
related_post:
enable: true
limit: 6 # 显示推荐文章数量
博客年份
配置 _config.yml
since: 2018
页脚
配置 _config.yml
footer_custom_text: <a href="https://blog.thatwang.com/">Everybody's good at something.</a>
夜间模式
Apple都有这模式了，我们也不能输呀
配置 _config.yml
darkmode:
enable: true
阅读模式
阅读模式会去除文章以外的内容
配置 _config.yml
readmode:
enable: true
侧边栏设置
配置 _config.yml
aside:
position: right # left or right
card_author: true
card_announcement: true
card_recent_post: true
card_categories: true
card_tags: true
card_archives: true
card_webinfo: true
访问人数
配置 _config.yml
busuanzi:
site_uv: true
site_pv: true
page_pv: true
运行时间
配置 _config.yml
runtimeshow:
enable: true
start_date: 6/7/2018 00:00:00
##博客开通时间
# 格式: 月/日/年 时间
# 也可以写成 年/月/日 时间
相册
文章页面编辑以下markdown格式内容
{% gallery %}
markdown 圖片格式
{% endgallery %}
评论
其实Hexo能支持很多评论系统，但是用下来，就leancloud这个最舒服，最方便
配置 _config.yml
valine:
enable: true # if you want use valine,please set this value is true
appId: 配置中心查看 # leancloud application app id
appKey: key # leancloud application app key
notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
verify: false # valine verify code (true/false)
pageSize: 10 # comment list page size
avatar: robohash # gravatar style https://valine.js.org/#/avatar
lang: zh-cn # i18n: zh-cn/en
placeholder: 来吧，造作吧，快活吧，肆无忌惮吧！(～￣￣)～ # valine comment input placeholder(like: Please leave your footprints )
guest_info: nick,mail,link #valine comment header info
bg: /img/comment_bg.png # valine background
此时就安装好了评论系统，就这么简单
音乐
同样是使用leancloud服务
前面的注册逻辑与评论一样，接下来就是存储环节
[图片上传失败...(image-62aa11-1573183671188)]
加入单条音乐播放器的页面
{% aplayer "可以了" "陈奕迅" "https://xxx.xxx.com/92b3af330d2274b1fa55.mp3" "https://xxx.xxx.com/xx.png" "autoplay" %}
加入列表音乐播放器的页面
{% aplayerlist %}{"narrow": false,"autoplay": true,"showlrc": 3,"mode": "random","music": [{"title": "美好事物","author": "房东的猫","url": "http://xxx.xxx.com/945198c4909674765644.mp3","pic": "http://xxx.xxx.com/6e0e9e63cb0733f7ff12.png","lrc": ""},{"title": "尚好的青春","author": "云の泣","url": "http://xxx.xxx.com/5b42b829b8ae08ccabe0.mp3","pic": "http://xxx.xxx.com/889df742eca5261f2fc5.png","lrc": ""},{"title": "预谋邂逅","author": "阿肆","url": "http://xxx.xxx.com/1bd4f91441982710bcad.mp3","pic": "http://xxx.xxx.com/f72d61579f74d4ff9ce0.png","lrc": ""}]}{% endaplayerlist %}
即可
分享
配置 _config.yml
sharejs:
enable: true
sites: wechat,weibo,qq
搜索
安装 hexo-generator-search，根据文档做对应配置
配置 _config.yml
local_search:
enable: true
labels:
input_placeholder: 试试看能找到啥宝藏吧!
hits_empty: "客官，本店还未提供该服务: ${query}" # if there are no result
自定义主题
配置 _config.yml
theme_color:
enable: true
main: "#696969"
paginator: "#00c4b6"
button_hover: "#FF7242"
text_selection: "#00c4b6"
link_color: "#99a9bf"
meta_color: '#858585'
hr_color: "#A4D8FA"
read-mode-bg_color: '#FAF9DE'
inline-code-color: '#F47466'
打字效果
配置 _config.yml
activate_power_mode:
enable: true
动态彩带
配置 _config.yml
canvas_ribbon_piao:
enable: true
mobile: false # false 手机端不显示 true 手机端显示
背景线条
配置 _config.yml
canvas_nest:
enable: true
color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
opacity: 0.7 # the opacity of line (0~1), default: 0.5.
zIndex: -1 # z-index property of the background, default: -1.
count: 99 # the number of lines, default: 99.
mobile: false # false 手机端不显示 true 手机端显示
鼠标点击效果
配置 _config.yml
fireworks:
enable: true
# 點擊出現愛心
click_heart:
enable: true
首页弹幕座右铭
配置 _config.yml
# 主頁subtitle
# 打字效果
# (如果有英文逗號' , '，請使用轉義字符 ,)
subtitle:
enable: true
sub:
- 努力不一定能成功,但是永远不会后悔
- Hard work may not always result in success,but it will never result in regret
以上基本上就是全部的基本配置，肯定有很多意犹未尽对吧？
乐崽的博客地址在个人资料了。
