next主题设置

发表于 | 更新于 | 分类于

主题风格

通过修改next主题下的_config.yml的scheme字段，配置不同的风格。 

1
2
3
4
5
# Schemes
#scheme: Muse
scheme: Mist  #推荐
#scheme: Pisces
#scheme: Gemini

菜单

通过修改next主题下的_config.yml的menu字段，选定显示的菜单项。 可自己修改字段和目录名，||之后为配套的小图标。我添加了links字段，但是当前语言是简体中文，页面上无法给我翻译出来，去添加language/zh-CN.yml里的对应字段即可。 

1
2
3
4
5
6
7
menu:
  home: /home/ || home
  about: /about/ || user
  #tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  links: /links/ || calendar

头像

在主题下的source/images/下替换原有的头像文件avatar.gif，并在_config.yml中查找Sidebar Avatar字段，添加url字段内容： /images/avatar.gif

头像旋转

找到位于 source/css/_common/components/sidebar/sidebar-author.syl 模板文件里侧边栏头像的样式 .site-author-image

将内容修改为

1
2
3
4
5
6
.site-author-image {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    transition: 1.4s all;
}

然后添加 .site-author-image:hover 样式，由 rotate() 方法实现，旋转 360° 

1
2
3
4
5
6
.site-author-image:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -transform: rotate(360deg);
}

文章代码主题

Next主题总共支持5种主题，默认主题是白色的normal。通过修改next主题下的_config.yml的highlight字段，来设置代码主题。 推荐 night 。

标签、分类

在存在标签页、分类页的情况下，在写文章的时候，在文章头部添加 tags、categories 字段。

1
2
tags: [npm, hexo, github]
categories: 搭建博客

搜索功能

安装 hexo-generator-searchdb

1
$ npm install hexo-generator-searchdb --save

在站点myBlog/_config.yml中添加search字段，如下

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

修改next主题下的_config.yml的Local search字段

1
enable: true

hexo博客底部页脚

找到/themes/next/layout/_partials/footer.swig文件 内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="copyright" >
  {% set current = date(Date.now(), "YYYY") %}
  © {% if theme.since and theme.since != current %} {{ theme.since }} - {% endif %}
  <span itemprop="copyrightYear">{{ current }}</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">{{ config.author }}</span>
</div>

<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>

删除class 为powered-by的div和theme-info的div。

github标识

在网站上选择一个喜欢的标识类型，复制粘贴代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为个人github地址 。

首页隐藏指定文章

有时候我们可能只想在首页显示关于编程之类的内容，而个人日记之类的文章放在其他分类之下而不在首页显示。可以从、分类、标签、归档中查看文章。

自定义front-matter的参数

例如，自定义添加一个notshow参数，值为true，用来提供判断

1
2
3
tags: [npm, hexo, github]
categories: 搭建博客
notshow: true

修改主题的themes/next/layout/index.swig文件,将

1
2
3
4
5
6
7
8
9
{% block content %}
  <section id="posts" class="posts-expand">
    {% for post in page.posts %}
		{{ post_template.render(post, true) }}
    {% endfor %}
  </section>

  {% include '_partials/pagination.swig' %}
{% endblock %

添加过滤条件

1
2
3
4
5
6
7
8
9
10
11
{% block content %}
  <section id="posts" class="posts-expand">
    {% for post in page.posts %}
		{% if post.notshow != true %}
			{{ post_template.render(post, true) }}
		{% endif %}
    {% endfor %}
  </section>

  {% include '_partials/pagination.swig' %}
{% endblock %}