Hexo博客主题切换为Melody

生灰了

之前的主题一直是Next，收拾博客换个melody风格，这里仅记录我的博客操作步骤

下载主题

https://gitee.com/Teily/hexo-theme-melody

部署验证

下载完成后，先测试主题是否OK

npm install hexo-server hexo-browsersync hexo-renderer-jade hexo-renderer-stylus hexo-generator-search --save-dev
hexo g
hexo s

部署后，通过访问http://localhost:4000/来确定是否成功

定制Melody功能

主题变更成功后，少许修改下变成自己喜欢的Style

主题颜色修改

melody/_config.yml

theme_color:
  enable: true
  main: "#4DB6AC"
  paginator: "#00C4B6"
  button_hover: "#FFD180"
  text_selection: "#00C4B6"
  link_color: "#858585"
  hr_color: "#B2DFDB"
  tag_start_color: "#FFF3E0"
  tag_end_color: "#FFCC80"
  header_text_color: "#EEEEEE"
  footer_text_color: "#EEEEEE"

添加搜索功能

npm install hexo-generator-search --save
在`root/_config.yml`中添加
1
2
3
4
search:
  path: search.xml
  field: post
  content: true

在`melody/_config.yml`中添加
1
2
3
4
local_search:
  enable: true
  trigger: auto
  top_n_per_article: 1

添加友情链接

links_title: Links
links:
  ANDROID WEEKLY: http://androidweekly.net/
  开发者头条: https://toutiao.io/
  开发技术周报: http://www.androidweekly.cn/

阅读文章时禁止展开左侧

1	sidebar_display: hidden #post # all/index/post/index-none/post-none/hidden

添加主背景图片

1 2	top_img: http://ww1.sinaimg.cn/large/863951d2gy1g8w9dktkj7j20qo0f0jsy.jpg #top_img: true # false or url of img

在文章中添加也类似

1
2
3

title: xxx
tag: []
top_img: url

打开预览自动截取功能

有代码的文章不要开户这功能，有BUG

1
2
3

auto_excerpt:
  enable: false
  length: 150

添加社交图标

Font Awesome图标

1
2
3

social:
  github fa: https://github.com/xuie0000
  weibo fa: http://weibo.com/u/2251903442

自定义图标
这里以添加语雀为例
添加文件source/css/_layout/custom.styl

.fa-yuque{
    background-image: url(/img/yuque.svg);
    width: 28px;
    height: 28px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(20%);
}

melody/_config.yml中添加

social:
  github fa: https://github.com/xuie0000
  weibo fa: http://weibo.com/u/2251903442
  yuque fa: https://www.yuque.com/x-h83zo/aiz6o6

参考

https://molunerfinn.com/hexo-theme-melody-doc/zh-Hans/theme-config.html
https://blog.csdn.net/u010416101/article/details/102986439
https://blog.csdn.net/lijing742180/article/details/87970909
https://hunfan.top/2019/03/25/hexo%E6%B7%BB%E5%8A%A0Gitee%E9%93%BE%E6%8E%A5%E5%9B%BE%E6%A0%87/