前言

Hexo搭建静态博客踩坑日记(一), 我们说到利用Hexo快速搭建静态博客.

这节我们就来说一下主题的问题与主题的基本修改操作.

---

起步

• chrome
• github
• hexo
• git
• node.js

寻找主题

chrome 搜索 github, 接着github全站搜索hexo-theme 相关项目.

为了方便, 这里给出主题地址推荐.

Hexo Star排名靠前的5个主题：

• iissnan/hexo-theme-next, star 15k
• litten/hexo-theme-yilia, star 7.2k
• bolnh/hexo-theme-material, star 3.8k
• ppoffice/hexo-theme-icarus, star 3.3k
• ...
• ...
• 本次以matery作为主题配置
• blinkfox/hexo-theme-matery, star 1.6k

数据由GitHub复制而来，排名请以实际为主

主题下载/配置修改

进入上次提到的hexo初始化目录 blog目录下.

>> cd blog

# 下载主题

>> git clone https://github.com/blinkfox/hexo-theme-matery.git theme/matery

...

...

# 修改配置

>> vim _config.yml # 不熟悉vim操作的 可以用text等文本文件打开修改 theme 对应的主题

...

...

# Extensions

## Plugins: https://hexo.io/plugins/

## Themes: https://hexo.io/themes/

# 找到theme:   按a或者i 进入编辑模式, 把主题修改为matery.

# 然后esc退出编辑模式, 按:键, 然后输入wq 回车即可保存退出

theme: matery

...

...

重启应用

# 清除缓存

>> hexo clean

INFO  Deleted database.

INFO  Deleted public folder.

# 构建生成 generate

>> hexo g

...

...

INFO  128 files generated in 186 ms

# 本地查看

>> hexo s

INFO  Start processing

INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

# 发布到github or gitee

>> hexo d

这样就可以看到主题效果啦, 如果出现没有css样式, 推荐检查一下 theme: name 与 theme文件夹下的 主题文件夹名称是否一致.

效果展示: >>my-hexo-blog

后记

到这里应该可以简单的看到主题效果了, 如需个性化主题, 可阅读github下的readme文档(中英文*看大佬您的选择). 基本操作就是 cnpm install 需要的插件 然后 修改blog下的 _config.yml. 还有就是修改主题文件夹(eg: matery文件夹)下的 _config.yml.

图片会后期根据建议补充, 还请大家有问题多多交流.