hexo博客系列 next主题详细配置

发表于 | 分类于 | 评论数： | 次阅读

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。

  • 站点配置文件：位于站点根目录下，主要包含 Hexo本身的配置
  • 主题配置文件：位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

修改语言

next主题的所有语言配置文件都在\themes\next\languages文件夹下

要想改为中文，设置站点配置文件

1
language: zh-CN

注意：这里要和语言文件名对应

菜单设置

菜单包括：首页、归档、分类、标签、关于等等

打开 主题配置文件 找到Menu Settings

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

侧边栏设置

1
2
3
4
sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  # position: left
  position: right

头像设置

打开 主题配置文件 找到Sidebar Avatar字段

1
2
3
4
5
6
7
8
9
10
11
12
# Sidebar Avatar
avatar:
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.jpg
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: true

这是头像的路径，只需把你的头像命名为avatar.jpg（随便命名）放入themes/next/source/images中，将avatar的路径名改成你的头像名就OK啦！

设置RSS

先安装 hexo-generator-feed 插件

1
➜  hexo_blog sudo npm install hexo-generator-feed --save

打开 站点配置文件 找到Extensions在下面添加

1
2
3
4
5
6
7
8
9
10
11
12
13
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
# RSS订阅
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

打开 主题配置文件 找到rss，设置为

1
rss: /atom.xml

添加分类模块

新建一个分类页面

1
2
➜  hexo_blog hexo new page categories
INFO  Created: /data/www/hexo_blog/source/categories/index.md

注意：项目根目录下执行

你会发现你的source文件夹下有了categorcies/index.md，打开index.md文件将title设置为title: 分类

1
2
3
4
5
---
title: 分类
date: 2018-12-07 19:01:44
type: categories
---

打开 主题配置文件 找到menu，将categorcies取消注释

把文章归入分类只需在文章的顶部标题下方添加categories字段，即可自动创建分类名并加入对应的分类中
举个栗子：

1
2
title: 分类测试文章标题
categories: 分类名

添加标签模块

新建一个标签页面

1
2
➜  hexo_blog hexo new page tags
INFO  Created: /data/www/hexo_blog/source/tags/index.md

你会发现你的source文件夹下有了tags/index.md，打开index.md文件将title设置为title: 标签

1
2
3
4
5
---
title: 标签
date: 2018-12-07 20:36:03
type: tags
---

打开 主题配置文件 找到menu，将tags取消注释

把文章添加标签只需在文章的顶部标题下方添加tags字段，即可自动创建标签名并归入对应的标签中
举个栗子：

1
2
3
4
5
title: 标签测试文章标题
tags: 
  - 标签1
  - 标签2
  ...

添加关于模块

新建一个关于页面

1
2
➜  hexo_blog hexo new page about
INFO  Created: /data/www/hexo_blog/source/about/index.md

你会发现你的source文件夹下有了about/index.md，打开index.md文件即可编辑关于你的信息，可以随便编辑。

打开 主题配置文件 找到menu，将about取消注释

添加搜索功能

安装 hexo-generator-searchdb 插件

1
➜  hexo_blog npm install hexo-generator-searchdb --save

打开 站点配置文件 找到Extensions在下面添加

1
2
3
4
5
6
# 搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 20

打开 主题配置文件 找到Local search，将enable设置为true

1
2
3
4
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true

设置网站缩略图标

把你的图片（png或jpg格式，不是favicon.ico）放在themes/next/source/images里

打开主题配置文件 找到favicon，将small、medium、apple_touch_icon三个字段的值都设置成/images/图片名.jpg就可以了

1
2
3
4
5
6
7
favicon:
  small: /images/alien.png
  medium: /images/alien.png
  apple_touch_icon: /images/alien.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

添加站点访问计数

pv uv

我是用的不蒜子，使用还比较方便

打开 themes/next/layout/_partial/footer.swig，将下面这段代码添加到里面

1
2
3
4
5
6
7
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">
  总访问<span style="color:#fc6423"><span id="busuanzi_value_site_pv"></span></span>
</span>
<span id="busuanzi_container_site_uv">
  访问人数<span style="color:#fc6423"><span id="busuanzi_value_site_uv"></span></span>
</span>

文章访问量

打开 themes/next/layout/_macro/post.swig，在第一行增加is_pv字段

1
{% macro render(post, is_index, is_pv, post_extra_class) %}

然后插入如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% if not is_index and theme.busuanzi_count.enable and theme.busuanzi_count.post_views %}
  <span class="post-meta-divider">|</span>
  <span class="post-meta-item-icon"
  {% if not theme.post_meta.item_text %} title="{{ __('post.views') }}" {% endif %}>
  <i class="fa fa-{{ theme.busuanzi_count.post_views_icon }}"></i>
  {% if theme.post_meta.item_text %} {{__('post.views') + __('symbol.colon') }} {% endif %}
  <span class="busuanzi-value" id="busuanzi_value_page_pv" ></span>
  </span>
{% endif %}

<!-- 我在这里哦 -->
{% if is_pv %}
  <span class="post-meta-divider">|</span>
  <span id="busuanzi_value_page_pv"></span>次阅读
{% endif %}

再打开 themes/next/layout/post.swig，这个文件是文章的模板，给render方法传入参数（对应刚才添加的is_pv字段）

1
2
3
4
<div id="posts" class="posts-expand">
  <!-- render 增加两个参数 -->
  {{ post_template.render(page,false,true) }}
</div>

最后再打开 themes/next/layout/index.swig，这个文件是首页的模板，给render方法传入参数（对应刚才添加的is_pv字段）

1
2
3
4
5
6
<section id="posts" class="posts-expand">
  {% for post in page.posts %}
    <!-- render 增加一个参数 -->
    {{ post_template.render(post, true, false) }}
  {% endfor %}
</section>

设置阅读全文

在文章中使用<!-- more -->手动进行截断

这种方法可以根据文章的内容，自己在合适的位置添加 <!-- more --> 标签，使用灵活，也是Hexo推荐的方法。

在文章中的front-matter中添加description，并提供文章摘录

这种方式只会在首页列表中显示文章的摘要内容，进入文章详情后不会再显示。

1
2
3
4
5
6
7
---
title: Hello World
categories: 技术
description: 这是hello word
tags:
    - 技术
---

自动形成摘要

在主题配置文件中添加

默认截取的长度为 150 字符，可以根据需要自行设定

1
2
3
auto_excerpt:
  enable: true
  length: 249

三种方式优先级

front-matter中添加description > 文章中使用<!-- more --> > 自动形成摘要