Hexo搭建 --- 2、Hexo主题安装与配置

简介

本次演示,使用Hexo最受欢迎的主题,也是本站使用的主题Next

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。

为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件

本文中站点配置文件的路径分别指的是:

  • 站点配置文件/root/blog/_config.yml
  • 主题配置文件/root/blog/themes/next/_config.yml

下载主题

在Hexo根目录下打开cmd,输入以下代码

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

启用主题

打开 站点配置文件 找到theme字段,将其值修改为next

1
theme: next

到此,NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前, 我们最好使用 hexo clean 来清除 Hexo 的缓存。

验证主题

首先启动 Hexo 本地站点,命令是 hexo s 当命令行输出中提示出:
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
此时即可使用浏览器访问 http://localhost:4000,检查站点是否正确运行。

当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题。这是 NexT 默认的 Scheme —— Muse

image_1b959is6t1h57rth1o4l18pe1rscm.png-54.1kB

现在,你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定,包括个性化以及集成第三方服务。

主题设定

选择 Scheme

Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:

  • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
  • Mist - Muse 的紧凑版本,整洁有序的单栏外观
  • Pisces - 双栏 Scheme,小家碧玉似的清新

Scheme 的切换通过更改 主题配置文件,搜索 scheme 关键字。 你会看到有三行 scheme 的配置,将你需用启用的 scheme 前面注释 # 即可。

设置 语言

编辑 站点配置文件, 将 language 设置成你所需要的语言。建议明确设置你所需要的语言,例如选用简体中文,配置如下:

1
language: zh-Hans

语言 代码 设置示例
English en language: en
简体中文 zh-Hans language: zh-Hans
繁体中文 zh-hk language: zh-hk

设置 菜单

菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标, Font Awesome 提供了 600+ 的图标,可以满足绝大的多数的场景,同时无须担心在 Retina 屏幕下 图标模糊的问题。

编辑 主题配置文件 ,修改以下内容:

设定菜单内容

对应的字段是 menu。 菜单内容的设置格式是:item name: link。其中 item name 是一个名称,这个名称并不直接显示在页面上,她将用于匹配图标以及翻译。

1
2
3
4
5
6
7
8
9
10
menu:
home: /
archives: /archives
#about: /about
#categories: /categories
tags: /tags
#commonweal: /404.html

##比如添加一个菜单项,跳转到百度。
baidu: http://www.baidu.com

设置菜单项的显示文本

在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称查找对应的语言翻译,并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml ({language} 为你所使用的语言)。

以简体中文为例,若你需要添加一个菜单项,比如 something。那么就需要修改简体中文对应的翻译文件 languages/zh-Hans.yml,在 menu 字段下添加一项:

1
2
3
4
5
6
7
8
9
10
11
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
commonweal: 公益404
something: 有料
##为我们刚才设置的百度链接设置中文字体显示
baidu: 百度

设置菜单项的图标

可以看到默认的3个菜单前都有小图标
image_1b95eae6judk1a5f1f8r1kg21v719.png-6.6kB

下面我们为刚才设置的百度添加图标。找到 menu_icons 字段。
格式是 item name : icon name,其中item name就是刚才我们设置的名字baidu,而icon nameFont Awesome图标的名称。

1
2
3
4
5
6
7
8
9
10
11
12
menu_icons:
enable: true ##控制是否显示图标,默认为true。
# Icon Mapping.
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat

##为 baidu 设置图标 , 如未配置,则会使用 ? 作为图标。
baidu: bookmark

设置作者昵称

编辑 站点配置文件, 设置 author 为你的昵称。

设置站点描述

编辑 站点配置文件, 设置 description 字段为你的站点描述。站点描述可以是你喜欢的一句签名

创建”关于我”页面

新建一个 about 页面:

1
hexo new page "about"

让菜单显示 “关于我” 链接,在主题配置文件 设置中将 menu 中 about 前面的注释去掉即可

1
2
3
4
5
menu:
home: /
archives: /archives
tags: /tags
about: /about

创建”分类”页面

新建一个页面,命名为 categories 。命令如下:

1
hexo new page categories

编辑刚新建的页面,将页面的类型设置为 categories ,主题将自动为这个页面显示所有分类。

1
2
3
4
5
6
---
title: categories
date: 2017-2-20 22:23:04
type: "categories"
comments: false #禁止评论,可自行选择
---

在菜单中添加链接。编辑主题配置文件 ,将 menu 中的 categories: /categories 注释去掉,如下:

1
2
3
4
5
menu:
home: /
categories: /categories
archives: /archives
tags: /tags

创建”标签”页面

新建一个页面,命名为 tags 。命令如下:

1
hexo new page "tags"

编辑刚新建的页面,将页面的类型设置为 tags ,主题将自动为这个页面显示标签云。

1
2
3
4
title: tags
date: 2017-2-20 22:26:56
type: "tags"
comments: false #禁止评论,可自行选择

在菜单中添加链接。编辑主题配置文件 ,添加 tagsmenu 中,如下:

1
2
3
4
menu:
home: /
archives: /archives
tags: /tags

设置侧边栏头像

编辑站点配置文件,新增字段 avatar, 值设置成头像的链接地址。
其中,头像的链接地址可以是:

完整的互联网 URL,例如:https://avatars1.githubusercontent.com/u/32269?v=3&s=460
站点内的地址,例如:

  • /uploads/avatar.jpg 需要将你的头像图片放置在 站点的 source/uploads/(可能需要新建uploads目录)
  • /images/avatar.jpg 需要将你的头像图片放置在 主题的 source/images/ 目录下。

设置侧边栏社交链接

编辑站点配置文件,新增字段 social,然后添加社交站点名称与地址即可。例如:

1
2
3
4
5
6
7
8
# Social links
social:
GitHub: https://github.com/your-user-name
Twitter: https://twitter.com/your-user-name
Weibo: http://weibo.com/your-user-name
douban: http://douban.com/people/your-user-name
zhihu: http://www.zhihu.com/people/your-user-name
# 等等

编辑主题配置文件, 在social_icons字段下添加社交站点名称(注意大小写)与图标,例如:

1
2
3
4
5
6
7
8
social_icons:
enable: true
# Icon Mappings.
# KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
GitHub: github
Twitter: twitter
Weibo: weibo
Linkedin: linkedin

图标名称可以参考:http://fontawesome.io/cheatsheet/

设置多说评论

  1. 使用多说前需要先在 多说 创建一个站点。具体步骤如下:
  • 登录后在首页选择 “我要安装”。
  • 创建站点,填写站点相关信息。注意,多说域名 这一栏填写的即是你的 duoshuo_shortname
    image_1b9dvj10q8lg7hm1i5u113017n79.png-107.5kB
  1. 编辑站点配置文件 添加 duoshuo_shortname 字段(先搜索,如果有就不用),设置如下
    1
    duoshuo_shortname: your-duoshuo-shortname

添加搜索功能

  • 安装 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
  • 编辑 主题配置文件,启用本地搜索功能,这个字段 local_search 下的 enable 改为 true

    1
    2
    3
    4
    5
    6
    7
    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

开启打赏功能

只需要 主题配置文件 中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。

1
2
3
reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

Next主题常见问题

如何设置阅读全文

大家发布文章后可能会发现,文章直接在主页显示完了,没有阅读全文按钮来的舒服。
官方也给提供了3中解决方案。

  1. 在文章中使用 <!-- more --> 手动进行截断,Hexo 提供的方式。
  2. 在文章的 front-matter 中添加 description,并提供文章摘录
  3. 自动形成摘要,在 ·主题配置文件· 中添加:
    1
    2
    3
    auto_excerpt:
    enable: true
    length: 150 #默认截取的长度为 150 字符,可以根据需要自行设定

建议使用 (即第一种方式),除了可以精确控制需要显示的摘录内容以外, 这种方式也可以让 Hexo 中的插件更好的识别。

如何更改内容区域的宽度?

NexT 对于内容的宽度的设定如下:

  • 700px,当屏幕宽度 < 1600px
  • 900px,当屏幕宽度 >= 1600px
  • 移动设备下,宽度自适应

如果你需要修改内容的宽度,同样需要编辑样式文件。 编辑主题的 source/css/_variables/custom.styl 文件,新增变量:

1
2
3
4
5
// 修改成你期望的宽度
$content-desktop = 700px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

此方法不适用于 Pisces Scheme,关于如何修改 Pisces Scheme 的宽度请参看 这个 Issue

如何设置页面文章的篇数?

在 Hexo 里可以为首页和归档页面设置不同的文章篇数,但可能需要安装 Hexo 插件。详细步骤如下。

1.使用 npm install –save 命令来安装需要的 Hexo 插件。

1
2
3
npm install --save hexo-generator-index
npm install --save hexo-generator-archive
npm install --save hexo-generator-tag

2.等待扩展全部安装完成后,在 站点配置文件 中,设定如下选项:

1
2
3
4
5
6
7
8
9
10
index_generator:
per_page: 5

archive_generator:
per_page: 20
yearly: true
monthly: true

tag_generator:
per_page: 10

需要注意的是,Hexo 3.2 版本不允许配置文件中存在重复的选项设置。 因此,最好检查下 站点配置文件 中是否有存在上述同名的配置。 如果存在,请将两者配置在一起。

坚持原创技术分享,您的支持将鼓励我继续创作!