next主题设置方法

发表于
字数统计: 1.5k | 阅读时长 ≈ 5

下载主题：

通过clone最新版本

可以通过git pull 来下载，而不用再次下载压缩包替换（我还是用下载的方法的）在站点根目录

1
git clone https://github.com/iissnan/hexo -theme-next themes/next

下载压缩包

Next版本的发布页面
选择下载 Download 区域下的 Source Code (zip) 到本地
解压重命名为next，放置到themes目录下（我是使用的方法）

启用主题

打开 站点配置文件 _config.yml文件， 找到 theme 字段，并将其值更改为 next

1
theme: next

在切换主题之后、验证之前， 最好使用 hexo clean 来清除 Hexo 的缓存

验证主题

使用hexo s 可以测试主题是否能使用

主题设置

主题特性

目前 NexT 目前支持四种特性，通过修改Scheme可以选择特性，比如：

  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist - Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces - 双栏 Scheme，小家碧玉似的清新
  • Gemini -左侧网站信息及目录，块+片段结构布局

打开 主题配置文件 themes/next/_config.yml 文件，搜索 scheme 关键字。将你需用启用的 scheme 前面注释 # 去除即可。

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

设置语言

编辑 站点配置文件，将language设置成你需要的语言，我用的是简体中文：

1
language: zh-Hans

目前NexT支持的语言如以下表所示：

4209226-60da4a20a211915b

设置菜单

菜单配置包括三个部分，

  1. 第一是菜单项名称
  2. 第二是菜单项显示的文本
  3. 第三是菜单项对应的图标（NexT 使用的是 Font Awesome提供的图标）

编辑 主题配置文件，找到menu字段：

设定菜单项名称
1
2
3
4
5
6
7
8
9
10
11
12
menu:
  home: / || home                          #首页
  archives: /archives/ || archive          #归档
  categories: /categories/ || th           #分类
  tags: /tags/ || tags                     #标签
  about: /about/ || user                   #关于
  #schedule: /schedule/ || calendar        #日程表
  #sitemap: /sitemap.xml || sitemap        #站点地图
  #commonweal: /404/ || heartbeat          #公益404
  
 # 需要哪个菜单就打开哪个菜单
 # 属性值最后一个是相匹配的图标名

NexT默认的菜单项有（解注释即可显示）：

4209226-ce8404be121f470d

设置菜单的显示文本

需要到next目录下的language/zh-Hans.yml（以简体中文为例）文件中，找到menu字段，设置如下（这一步一般是弄好的，不用管）：

1
2
3
4
5
6
7
8
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  commonweal: 公益404
设定菜单项图标
  • enable：控制是否显示图标，改为true则显示图标
  • 之后的就是菜单分别使用哪个图标，可以更改，默认也可以用
1
2
3
4
5
6
7
8
9
10
menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  archives: archive
  categories: th
  tags: tags
  about: user
  commonweal: heartbeat
  #search: search

设置侧栏

修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分（我几乎没动）

  • 是侧栏的位置，
  • 是侧栏显示的时机
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
sidebar:
# Sidebar Position      #侧栏位置（只对Pisces | Gemini两种风格有效）
  position: left        #靠左放置
  #position: right      #靠右放置

# Sidebar Display       #侧栏显示时机（只对Muse | Mist两种风格有效）
  #display: post        #默认行为，在文章页面（拥有目录列表）时显示
  display: always       #在所有页面中都显示
  #display: hide        #在所有页面中都隐藏（可以手动展开）
  #display: remove      #完全移除

  offset: 12            #文章间距（只对Pisces | Gemini两种风格有效）

  b2t: false            #返回顶部按钮（只对Pisces | Gemini两种风格有效）

  scrollpercent: true   #返回顶部按钮的百分比

设置头像

编辑 主题配置文件，修改avatar字段，值设置为头像图片的链接地址。

1
avatar: http://example.com/avatar.png

也可以将图片放置到theme/source/images目录下，命名随意：

1
avatar: /images/master.jpg     #配置

设置作者和描述（hexo的操作中有以下内容）

编辑 站点配置文件：

1
2
3
4
5
6
7
# Site
title:    #博客主页名字
subtitle:  #副标题（第二个名字）
description:  #描述
author:         #作者
language: zh-Hans
timezone:    #时区，可不设置

添加标签页面

因为打开了菜单栏的选项，但是此时如果直接打开新添加的网页时，是打不开的显示page not found 此时需要添加对应的页面（必须通过hexo命令新建才行）

新建页面

在站点的根目录中

1
hexo new page tags    #新建标签页面

输入命令后，在source文件夹里会生成一个tags文件夹，其中有个index.md文件。

设置页面类型

修改index.md，添加type：tags

1
2
3
4
5
---
title: tags
date: 2016-11-15 19:10:05
type:  tags
---

然后标签页中会自动生成对应的几个标签

添加分类/关于页面

和上面其实是一样的操作

1
2
3
hexo new page categories/about  
--------------------------------------  
修改index.md文件中type类型分别为categories和about即可

在关于我页面中可以在index.md里写对应的自己的介绍

添加本地搜索功能（拓展）

安装

在站点根目录安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：

1
npm install hexo-generator-searchdb --save
设置

编辑 站点配置文件，新增以下内容到任意位置：

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

编辑 主题配置文件，启用本地搜索功能：

1
2
3
# Local search
local_search:
  enable: true    #true开启

此时可以在网页中使用搜索功能

问题更新

首页预览不显示全部，减少首页加载资源

  • 进入hexo博客项目的 themes/next 目录

  • 用文本编辑器打开 _config.yml 文件

  • 搜索 auto_excerpt ,找到如下部分：

    auto_excerpt: enable设为false

    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

  • 然后在md文档在需要阶段的地方加：<!-- more --> 会自动截断

在md文档中的多选框通过hexo解析之后变成无序列表

  • 可以切换成代码模式，把两行之间的 > 删除掉