Hexo自用黑色主题

hexo和coding打造静态博客 :
使用hexo一年有余,对所有主题都感觉有所缺陷,便修改了一个自用黑色主题,本主题以黑色和蓝色为主,色彩鲜明,主题明确。

主题图片

主题首页

black-blue主题来源

本主题修改自spfk主题,但之前spfk主题有很多问题,本主题改进如下:

  1. 压缩js,css提高性能
  2. 代码段样式显示更完美
  3. 增加本地搜索
  4. 设置更合适的字体大小
  5. 颜色以黑色和蓝色为主,色彩鲜明
  6. seo适当优化
  7. 删除多说,有言,增加畅言评论
  8. 删除stylus,全部改用css方便修改

主题地址

black-blue

注意:

大家使用主题的时候,把主题配置文件_config.yml以下几项必须修改,项目里实用的是我博客的正式代码,请大家修改成自己的!

1
2
3
4
5
6
7
8
9
10
google_analytics: xxx
baidu_analytics: xxxxxxx
disqus:
on: false
shortname: xxxx
# 畅言评论
changyan:
on: true
appid: xxxx
conf: xxxxx

black-blue主题配置

切换主题

复制主题到themes目录下cd themes && git clone https://github.com/masuoshuan/black-blue,修改_config.yml theme: black-blue

安装常用插件,建议全部安装

1
2
3
4
5
6
7
8
9
## rss插件
npm install hexo-generator-feed --save
## 站点sitemap生成插件
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
## 百度url提交
npm install hexo-baidu-url-submit --save
## 本地搜索插件集成
npm install hexo-generator-search --save

博客全局配置,修改根目录下_config.yml

插件配置

1
2
3
4
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
- hexo-generator-baidu-sitemap

rss设置

1
2
3
4
feed:
type: atom
path: atom.xml
limit: 20

本地搜索配置

1
2
3
search:
path: search.json
field: post

站点地图,seo搜索引擎需要

1
2
3
4
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

主题配置

菜单配置

1
2
3
4
5
6
7
8
9
## 添加单独的页面:hexo new page about,about是页面的路径,也是名称
## Tags Cloud Page: `hexo new page tags`
menu:
# 主页: /archives/
所有文章: /archives/
玩转开发工具: /categories/开发工具/
玩转数码: /categories/digital
认知提升: /categories/cognition
关于我: /about/

评论配置

1
2
3
4
5
6
7
8
9
# 是否开启畅言评论,
changyan:
on: true
appid: xxxx
conf: xxxxxxxxxxxx
# 是否开启disqus,
disqus:
on: false
shortname: mmmmmm

其他配置,详细的配置请下载主题,都有注释

1
2
3
4
5
6
7
# 数学公式支持
mathjax: false
# Socail Share | 是否开启分享
baidushare: true
# 谷歌分析,百度分析,seo分析很有用
google_analytics: xxxxxx
baidu_analytics: xxcxcxcsdsf

自定义配置(对前端技术有了解即可)

显示更多和折叠文章

你的md文件格式需要按下面的来:

1
2
3
4
5
6
7
8
9
10
title: 突破算法第11天-红黑树
date: 2017-10-30 22:35:37
tags: 算法
categories: algorithm
---
** {{ title }}:** <Excerpt in index | 首页摘要>
红黑树
<!-- more -->
<The rest of contents | 余下全文>
正文……

头像配置

在themes/black-blue/source/img/avatar.png,替换此头像即可实现自定义头像

背景图片配置

在themes/black-blue/source/background/,替换为自己喜欢的图片,图片名称不能改

添加评论插件

比如把畅言替换为有言

  1. 先修改themes/black-blue/_config.yml文件

    1
    2
    3
    changyan:
    on: true
    uid: xxxxxxx
  2. 修改themes/black-blue/layout/_partial/comments/changyan.ejs

    1
    2
    3
    4
    5
    <section class="changyan" id="comments">
    <div id="uyan_frame"></div>
    <script type="text/javascript" src="http://v2.uyan.cc/code/uyan.js?uid=<%= uid%>">
    </script>
    </section>
  3. 修改themes/black-blue/layout/_partial/article.ejs

    1
    2
    3
    <%- partial('comments/changyan', {
    uid: theme.changyan.uid
    }) %>
  4. 重新生成页面hexo g

文章目录
  1. 1. 主题图片
  2. 2. black-blue主题来源
  3. 3. 主题地址
  4. 4. 注意:
  5. 5. black-blue主题配置
    1. 5.1. 切换主题
    2. 5.2. 安装常用插件,建议全部安装
    3. 5.3. 博客全局配置,修改根目录下_config.yml
    4. 5.4. 主题配置
    5. 5.5. 其他配置,详细的配置请下载主题,都有注释
  6. 6. 自定义配置(对前端技术有了解即可)
    1. 6.1. 显示更多和折叠文章
    2. 6.2. 头像配置
    3. 6.3. 背景图片配置
    4. 6.4. 添加评论插件
,