Next主题配置

发表于 | 分类于 ，

前言

  • 开了个博客，使用的是Hexo加NexT主题。
  • 今天就给自己的博客加了些特效和改了背景。

加入背景特效

该特效主要借鉴了诗与远方博主。个人觉得这个效果很是酷炫，于是将此加入至自己的博客。

保存js文件

这个特效是由js文件提供的，这里是地址。我选择将它保存在本地，防止日后失效。

在我们的next\source\js\src下，添加文件canvas-nest.min.js，将上述地址的内容拷贝进去。

使用js文件

  1. 打开next\layout_layout.swig，在之前添加如下代码:
1
2
3
{% if theme.canvas_nest %}
    <script type="text/javascript" src="{{ url_for(theme.js) }}/src/canvas-nest.min.js"></script>
  {% endif %}
  1. 打开\next_config.yml，将
1
2
# Canvas-nest
canvas_nest: flase

改成

1
2
# Canvas-nest
canvas_nest: true
1
（如若没有可自行添加）

添加背景（或图片）

个人是直接在next\source\css\_custom\custom.styl中，编写CSS代码。

我直接添加了背景颜色，所以代码是：

1
2
3
body{
background-color: #EEEEEE;
}

如果要添加图片（图片放在next\source\images下），也是同理：

1
2
3
body{
    background-image:url(/images/background.jpg);
}

至此，大功告成。

添加头像

编辑主题的 _config.yml，新增字段 avatar， 值设置成头像的链接地址。

其中，头像的链接地址可以是：

  1. 完整的互联网 URL
  2. 站点内的地址，例如：
  • /uploads/avatar.jpg 需要将你的头像图片放置在 站点的 source/uploads/（可能需要新建uploads目录）
  • /images/avatar.jpg 需要将你的头像图片放置在 主题的 source/images/ 目录下。

设置文章不显示全文

方法一

  • 进入hexo博客项目的themes/next目录
  • 用文本编辑器打开_config.yml文件
  • 搜索”auto_excerpt”,找到如下部分：
1
2
3
4
5
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

把enable改为对应的false改为true。

方法二

只需要在文章开头写好摘要后，另起一行键入<!−− more −−>即可，就像这样：

1
2
3
4
---
这是摘要
<!-- more -->
这是正文

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

打开themes/next/layout/_partials/footer.swig,使用<!-- -->隐藏之间的代码即可，或者直接删除。位置如图：

设置网站的图标Favicon

找一张（32*32）的ico图标,或者去别的网站下载或者制作，并将图标名称改为favicon.ico，然后把图标放在/themes/next/source/images里，并且修改主题配置文件：

1
2
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico