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

2018-06-04 16:08:35 浏览数 (1)

简介

本次演示，使用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

现在，你已经成功安装并启用了 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 是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。

代码语言：javascript复制
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 字段下添加一项：

代码语言：javascript复制
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  commonweal: 公益404
  something: 有料
  ##为我们刚才设置的百度链接设置中文字体显示
  baidu: 百度

设置菜单项的图标

可以看到默认的3个菜单前都有小图标

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

代码语言：javascript复制
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 前面的注释去掉即可

代码语言：javascript复制
menu:
  home: /
  archives: /archives
  tags: /tags
  about: /about

创建”分类”页面

新建一个页面，命名为 categories 。命令如下：

1

hexo new page categories

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

代码语言：javascript复制
---
title: categories
date: 2017-2-20 22:23:04
type: "categories"
comments: false #禁止评论，可自行选择
---

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

代码语言：javascript复制
menu:
  home: /
  categories: /categories
  archives: /archives
  tags: /tags

创建”标签”页面

新建一个页面，命名为 tags 。命令如下：

1

hexo new page "tags"

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

title: tags

date: 2017-2-20 22:26:56

type: "tags"

comments: false #禁止评论，可自行选择

在菜单中添加链接。编辑主题配置文件 ，添加 tags 到 menu 中，如下:

代码语言：javascript复制
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，然后添加社交站点名称与地址即可。例如：

代码语言：javascript复制
# 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字段下添加社交站点名称（注意大小写）与图标，例如：

代码语言：javascript复制
social_icons:
  enable: true
  # Icon Mappings.
  # KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  Twitter: twitter
  Weibo: weibo
  Linkedin: linkedin

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

设置多说评论

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

添加搜索功能

  • 安装 hexo-generator-searchdb，在站点的根目录下执行以下命令： 1npm install hexo-generator-searchdb --save
  • 编辑 站点配置文件，新增以下内容到任意位置： search: path: search.xml field: post format: html limit: 10000

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

开启打赏功能

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

代码语言：javascript复制
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 3auto_excerpt: enable: true length: 150 #默认截取的长度为 150 字符，可以根据需要自行设定

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

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

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

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

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

// 修改成你期望的宽度

$content-desktop = 700px

// 当视窗超过 1600px 后的宽度

$content-desktop-large = 900px

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

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

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

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

代码语言：javascript复制
npm install --save hexo-generator-index
npm install --save hexo-generator-archive
npm install --save hexo-generator-tag

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

代码语言：javascript复制
index_generator:
  per_page: 5

archive_generator:
  per_page: 20
  yearly: true
  monthly: true

tag_generator:
  per_page: 10

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

hexo git

0 人点赞