NexT主题配置

发表于 | 更新于: | 分类于
字数统计: 2.1k 字 | 阅读时长 ≈ 9 分钟

搭建好了hexo这个框架以后可以使用next主题来美化博客

为什么选择next?
知乎：有哪些好看的Hexo主题

在右上角或者左上角实现fork me on github

具体实现方法
点击 这里 或者 这里 挑选自己喜欢的样式，并复制代码。
然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为你的github地址

菜单栏添加菜单(未验证，没试过)

Hexo+Next 添加菜单分类页面

启用本地搜索

编辑主题配置文件启用本地搜索
把enable: false,更改为enable: true

1
2
3
4
5
6
7
8
9
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

为NexT主题添加canvas_nest背景特效

打开 \themes\next\_config.yml,搜索canvas关键字，修改cancas_nest,想要哪种效果就修改后面的参数为true

1
2
3
4
5
6
7
8
9
10
11
# Canvas-nest
canvas_nest: true

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

修改作者头像

打开\themes\next\_config.yml,搜索关键字avatar,在后面放图片的链接地址

1
2
3
4
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: https://ww1.sinaimg.cn/large/007i4MEmgy1fz05j27n6zj30qn0qnab3.jpg # /images/avatar.gif

作者头像圆形并旋转

打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
    border-radius: 80px;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    box-shadow: inset 0 -1px 0 #333sf;

    /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
      (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/


    /* 鼠标经过头像旋转360度 */
    -webkit-transition: -webkit-transform 1.0s ease-out;
    -moz-transition: -moz-transform 1.0s ease-out;
    transition: transform 1.0s ease-out;
  }

  img:hover {
    /* 鼠标经过停止头像旋转
    -webkit-animation-play-state:paused;
    animation-play-state:paused;*/

    /* 鼠标经过头像旋转360度 */
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }

  /* Z 轴旋转动画 */
  @-webkit-keyframes play {
    0% {
      -webkit-transform: rotateZ(0deg);
    }
    100% {
      -webkit-transform: rotateZ(-360deg);
    }
  }
  @-moz-keyframes play {
    0% {
      -moz-transform: rotateZ(0deg);
    }
    100% {
      -moz-transform: rotateZ(-360deg);
    }
  }
  @keyframes play {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(-360deg);
    }
  }


.site-author-name {
  margin: $site-author-name-margin;
  text-align: $site-author-name-align;
  color: $site-author-name-color;
  font-weight: $site-author-name-weight;
}

.site-description {
  margin-top: $site-description-margin-top;
  text-align: $site-description-align;
  font-size: $site-description-font-size;
  color: $site-description-color;
}

可以直接全选粘贴哦，因为这是我直接全部粘贴过来的

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

1
2
3
4
5
favicon:
  small: /images/favicon.png #/images/favicon-16x16-next.png
  medium: /images/favicon.png #/images/favicon-32x32-next.png
  apple_touch_icon: /images/favicon.png #/images/apple-touch-icon-next.png
  safari_pinned_tab: /images/favicon.png #/images/logo.svg

侧边栏社交链接

在主题配置文件找到social把需要的取消注释，然后填好你的链接就可以了，||后面的是图标名称，和菜单的一样，也是使用Font Awesome图标名字

1
2
3
4
5
6
7
8
9
10
11
#social:
  #GitHub: https://github.com/yourname || github
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

你也可以自行添加其他社交方式，按照格式添加即可。

设置首页文章列表不显示全文（只显示预览）

  • 进入hexo博客项目的\themes\next\_config.yml文件，搜索关键字auto_excerpt,

    1
    2
    3
    4
    5
    # Automatically Excerpt. Not recommend.
    # Please use <!-- more --> in the post to control excerpt accurately.
    auto_excerpt:
      enable: false
      length: 150

  • 把enable的参数改为true，length自行设置，保存然后hexo d -g，再进主页查看效果

Hexo添加字数统计、阅读时长

https://www.jianshu.com/p/baea8c95e39b
在根目录下安装 hexo-wordcount,运行$ npm install hexo-wordcount --save
然后在主题的配置文件中，配置如下：

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: true
  separated_meta: true

用编辑器工具打开post.swig文件，路径如下：xxx_blog/themes/next/layout/_macro/post.swig

修改【字数统计】，找到如下代码：

1
2
3
<span title="{{ __('post.wordcount') }}">
    {{ wordcount(post.content) }}
</span>

添加 “字” 到

1
{{ wordcount(post.content) }}

后面，修改后为：

1
2
3
<span title="{{ __('post.wordcount') }}">
    {{ wordcount(post.content) }} 字
</span>

同理，我们修改【阅读时长】，修改后如下：

1
2
3
<span title="{{ __('post.min2read') }}">
    {{ min2read(post.content) }} 分钟
</span>

修改完成后，重新执行启动服务预览就可以了

添加分类及标签

nexT主题的文章分类和标签设置

生成“分类”页并添加tpye属性

打开命令行，进入博客所在文件夹。执行命令
$ hexo new page categories成功后会提示：INFO Created: ~/Documents/blog/source/categories/index.md根据上面的路径，找到index.md这个文件，打开后默认内容是这样的

1
2
3
4
---
title: 文章分类
date: 2017-05-27 13:47:40
---

添加type: “categories”到内容中，添加后是这样的：

1
2
3
4
5
---
title: categories
date: 2017-05-27 13:47:40
type: "categories"
---

保存并关闭文件。

给文章添加“categories”属性

打开需要添加分类的文章，为其添加categories属性。下方的categories: web前端表示添加这篇文章到“web前端”这个分类。注意：hexo一篇文章只能属于一个分类，也就是说如果在“- web前端”下方添加“-xxx”，hexo不会产生两个分类，而是把分类嵌套（即该文章属于 “- web前端”下的 “-xxx ”分类）。

1
2
3
4
5
6
---
title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
categories:
- web前端
---

至此，成功给文章添加分类，点击首页的“分类”可以看到该分类下的所有文章。当然，只有添加了categories: xxx的文章才会被收录到首页的“分类”中。

生成“标签”页并添加tpye属性

打开命令行，进入博客所在文件夹。执行命令$ hexo new page tags成功后会提示：INFO Created: ~/Documents/blog/source/tags/index.md根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：

1
2
3
4
---
title: 标签
date: 2017-05-27 14:22:08
---

添加type: "tags"到内容中，添加后是这样的：

1
2
3
4
5
---
title: 文章分类
date: 2017-05-27 13:47:40
type: "tags"
---

保存并关闭文件。

给文章添加“tags”属性

打开需要添加标签的文章，为其添加tags属性。下方的tags:下方的- jQuery - 表格- 表单验证就是这篇文章的标签了

1
2
3
4
5
6
7
8
9
10
--
title: jQuery对表单的操作及更多应用
date: 2017-05-26 12:12:57
categories:
- web前端
tags:
- jQuery
- 表格
- 表单验证
---

至此，成功给文章添加分类，点击首页的“标签”可以看到该标签下的所有文章。当然，只有添加了tags: xxx的文章才会被收录到首页的“标签”中。

细心的朋友可能已经发现，这两个的设置几乎一模一样！是的，没错，思路都是一样的。所以我们可以打开scaffolds/post.md文件，在tages:上面加入categories:,保存后，之后执行hexo new 文章名命令生成的文件，页面里就有categories:项了。

scaffolds目录下，是新建页面的模板，执行新建命令时，是根据这里的模板页来完成的，所以可以在这里根据你自己的需求添加一些默认值。

教程结束，赶紧去设置吧！

修改文章底部的那个带#号的标签

具体实现方法
修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将#换成<i class="fa fa-tag"></i>

效果图：

参考

NexT官网

干货满满的文章：https://www.jianshu.com/p/f054333ac9e6

0%