修改Hexo的Next主题

Hexo是高效的静态站点生成框架,她基于 Node.js。 通过 Hexo 你可以轻松地使用 Markdown 编写文章,除了 Markdown 本身的语法之外,还可以使用 Hexo 提供的 标签插件 来快速的插入特定形式的内容。在这篇文章中,假定你已经成功安装了 Hexo,并且使用的是NexT主题(其他主题仅做参考)。

NexT主旨在于简洁优雅且易于使用,主题本身提供了三种样式供用户选择,但色彩过于单一,今天为大家介绍如何修改主题的颜色和增加背景图片。

主题颜色

打开hexo/themes/next/source/css/_variables/base.styl找到Colors代码段,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Colors
// colors for use across theme.
// --------------------------------------------------
$whitesmoke = #f5f5f5
$gainsboro = #eee //这个是边栏头像外框的颜色,
$gray-lighter = #ddd //文章中插入图片边框颜色
$grey-light = #ccc //文章之间分割线、下划线颜色
$grey = #bbb //页面选中圆点颜色
$grey-dark = #999
$grey-dim = #666 //侧边栏目录字体颜色
$black-light = #555 //修改文章字体颜色
$black-dim = #333
$black-deep = #495a80 //修改主题的颜色,这里我已经改成老蓝色了。
$red = #ff2a2a
$blue-bright = #87daff
$blue = #0684bd
$blue-deep = #262a30
$orange = #F39D01 //浏览文章时,目录选中的颜色

其他的可以自行更改,看看效果,我这里只修改了black-deep和orange的颜色。

主题背景

打开hexo/themes/next/source/css/_schemes/Pisces/index.styl(Pisces为NexT提供的三种主题之一,根据使用的主题选择)修改body{}内的值,如下:
背景颜色直接更改即可:body { background: #F0F0F0; }
添加背景:body { background: url('/images/background.jpg'); }(将背景图片放到hexo/source/images中即可。

新版本主题背景修改文件改为hexo/themes/next/source/css/_common/outline/outline.styl中,在body中增加代码,如上。

隐藏网页底部powered By Hexo / 强力驱动

打开hexo/themes/next/layout/_partials/footer.swig,使用”<!— —>”隐藏之间的代码即可(隐藏后代码如下),或者直接删除。

1
2
3
4
5
6
7
8
9
10
11
{% if theme.copyright %}
<!--<div class="powered-by">
 {{ ('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}
</div>
<div class="theme-info">
  {{ ('footer.theme') }} -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
NexT.{{ theme.scheme }}
  </a>
</div>-->
{% endif %}

这时,该行信息即被隐藏,但留有空白,如果你开启了网站流量统计,那么在统计和版权之间会有空行,很不美观,以下方法修改网站流量统计的位置。我这里使用的是不蒜子统计,其他统计类似。
打开hexo/themes/next/layout/_scripts/third-party/analytics/busuanzi-counter.swig将两个<span>标签的class属性改为“powered-by”和“theme-info”,对这里使用了刚才删除hexo和主题信息标签的CSS属性,修改后代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% if theme.busuanzicount.enable %}
<div class="copyright">
{% if theme.busuanzicount.siteuv %}
<span class="powered-by">
{{ theme.busuanzicount.siteuvheader }}
<span class="busuanzi-value" id="busuanzivaluesiteuv"></span>
{{ theme.busuanzicount.siteuvfooter }}
</span>
{% endif %}
{% if theme.busuanzicount.sitepv %}
<span class="theme-info">
{{ theme.busuanzicount.sitepvheader }}
<span class="busuanzi-value" id="busuanzivaluesitepv"></span>
{{ theme.busuanzicount.sitepvfooter }}
</span>
{% endif %}
</div>
{% endif %}

最后,有没有发现我的是一个五角星,默认为心型,在刚才footer.swig文件中找到如下代码:

1
2
3
<span class="with-love">
<i class="fa fa-star"></i>
</span>

修改i标签的class属性fa-love,我这里改成了fa-star,其他图形未测过,有兴趣的朋友可以试试,新版本可以在config文件中直接设置了。