由于我们新搭建的基于Hexo的博客默认的博客主题都为主题默认,系统默认多多少少会有点不如人意,那么这就需要我们自己一步步的进行设置了。
在 Hexo 中有两份主要的配置文件,其名称都是_config.yml
。 其中,一份位于站点根目录下(Blog目录下),主要包含 Hexo 本身的配置;另一份位于主题目录下(Blog-->themes-->next),这份配置由主题作者提供,主要用于配置主题相关的选项。
为了描述方便,在以下说明中,将前者称为站点配置文件, 后者称为 主题配置文件。
** 切记所有的配置文件所有属性的设置,其:
后必须有一个空格。
安装theme
你可以到Hexo官网主题页去搜寻自己喜欢的theme。那么我们这里以hexo-theme-next为例
终端cd到 blog
目录下执行如下命令:
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
将blog
目录下_config.yml
里theme
的名称landscape
修改为next
终端cd到blog
目录下执行如下命令(每次部署文章的步骤):
$ hexo clean //清除缓存文件 (db.json) 和已生成的静态文件 (public)
$ hexo g //生成缓存和静态文件
$ hexo d //重新部署到服务器
到这里,接着上篇文章的配置,就可以看到如下的界面:
主题设定
选择 Scheme
NexT为我们提供了多种不同的外观,我们可以根据自己的喜好进行配置。
- Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
- Mist - Muse 的紧凑版本,整洁有序的单栏外观
- Pisces - 双栏 Scheme,小家碧玉似的清新
修改的话去主题配置文件下搜索scheme
取消前边的#即可。
#scheme: Muse
#scheme: Mist
scheme: Pisces
设置预览摘要
设置完模式后,读者们会发现,尽管首页显示的是所有文章的列表,但是每一篇文章都显示了所有内容,这样感觉看起来不舒服,这时候可以启用预览摘要模式,在主题配置文件中找到auto_excerpt
属性,将enable
设置为true
,将length
设置为想要预览到的字数
auto_excerpt:
enable: true
length: 150
设置语言
编辑站点配置文件
搜索language
设置你需要的语言,例如简体中文:
language: zh-Hans
设置菜单
菜单配置包括三个部分,第一是菜单项(名称和链接),第二是菜单项的显示文本,第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标, Font Awesome 提供了 600+ 的图标,可以满足绝大的多数的场景,同时无须担心在 Retina 屏幕下 图标模糊的问题。
编辑主题配置文件
搜索menu字段,菜单内容的设置格式是:item name: link
。其中 item name 是一个名称,用于匹配图标以及翻译。
menu:
home: /
archives: /archives
#about: /about
#categories: /categories
tags: /tags
#commonweal: /404.html
设置菜单项的显示文本。在上一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称查找对应的语言翻译,并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml ({language} 为你所使用的语言)。
当我们需要增加我们自定义的菜单选项的时候,可以采用下边的方法
以简体中文为例,若你需要添加一个菜单项,比如 something。那么就需要修改简体中文对应的翻译文件 languages/zh-Hans.yml,在 menu 字段下添加一项:
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
commonweal: 公益404
something: 有料
设定菜单项的图标,对应的字段是 menu_icons
。 此设定格式是 item name: icon name
,其中 item name
与上一步所配置的菜单名字对应,icon name
是 Font Awesome
图标的 名字。而 enable
可用于控制是否显示图标,你可以设置成 false
来去掉图标。(注意严格区分大小写)
menu_icons:
enable: true
# Icon Mapping.
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat
然后在Hexo根目录执行指令如下:
// 添加分类页面
hexo new page "categories"
// 添加标签页面
hexo new page "tags"
// 添加关于页面
hexo new page "about"
执行完上述指令后,在Hexo根目录/source/
文件夹下创建三个文件夹,命名分别为:categories
、tags
、about
文件夹,在这些文件夹中分别会创建一个以index
命名的Markdown
文件,对这三个Markdown
文件内容进行修改,使之分别为:
---
title: categories
date: 2017-03-12 22:06:24
type: "categories"
---
---
title: 标签
date: 2017-03-12 17:27:16
type: "tags"
---
---
title: about
date: 2017-03-12 22:07:26
type: "about"
---
完成文件的修改,然后部署Hexo即可完成菜单选项的添加。
设置侧边栏
可以通过修改 主题配置文件
中的 sidebar
字段来控制侧栏的行为。侧栏的设置包括两个部分,其一是侧栏的位置, 其二是侧栏显示的时机。
sidebar:
position: left 或者 right
设置侧栏显示的时机,修改 sidebar.display
的值
- post - 默认行为,在文章页面(拥有目录列表)时显示
- always - 在所有页面中都显示
- hide - 在所有页面中都隐藏(可以手动展开)
- remove - 完全移除
sidebar:
display: post
设置头像
编辑 主题配置文件
, 修改字段 avatar
, 值设置成头像的链接地址。其中,头像的链接地址可以是:
完整的互联网url: http://example.com/avatar.png
站点内的地址: 将头像放置主题目录下的 source/uploads/(新建 uploads 目录若不存在)
配置为:avatar: /uploads/avatar.png
或者 放置在 source/images/ 目录下
配置为:avatar: /images/avatar.png
avatar: uploads/avatar.png
设置作者昵称
设置站点配置文件
,编辑author
字段。
站点描述/个性签名
设置站点配置文件
,编辑description
字段。
阅读次数统计
阅读统计我这边使用的是LeanCloud。参考 Doublemine 的文章 为NexT主题添加文章阅读量统计功能
集成流程如下:
进入LeanCloud注册账号且验证邮箱之后。
点击控制台 --------> 点击创建应用-------->弹出的对话框,给应用起个相对有意义的名字-------->左边的侧边栏点击创建class-------->新建的class命名为Counter
,权限设置为无限制-------->点击页面侧边栏上的设置按钮-------->点击应用Key-------->赋值AppID和AppKey-------->在主题配置文件
的相应位置填入既可(在配置文件中搜索leancloud_visitors
进行填写,防止重复设置):
leancloud_visitors:
enable: true
app_id: joaeuuc4hsqudUUwx4gIvGF6-gzGzoHsz
app_key: E9UJsJpw1omCHuS22PdSpKoh
为了安全起见,选择刚才的设置界面下的安全中心,在Web 安全域名
中填入我们自己的博客域名,来确保数据调用的安全.
添加社交链接
我们如果希望在个人博客中加入自己的简书和Github链接以提高访问量,接下来了解一下社交链接如何添加:
- 添加链接
在主题配置文件
中找到social
属性,在其下方添加社交链接,其格式为:社交平台名称:链接
。例如:
social:
Github: https://github.com //这里写你个人的github的主页地址
- 添加链接图表
链接的图标全部来自于Font Awesome ,其配置方式也很简单,在主题配置文件中找到social_icons
,修改其状态值为true
,然后配置对应链接的图标,其格式为:社交平台名称(与添加链接名称保持一致): Font Awesome中的图标的名字(区分大小写)
social_icons:
enable: true
Github: github
添加评论功能
- 注册有言账号
打开友言官网,单击“注册”按钮后,按照流程注册账号。 - 获取uid
注册完成之后会在下方看到后台管理,点击进入可看到自己的用户ID,将其复制下来。
- 主题配置文件设置uid
打开主题配置文件
在其中找到属性youyan_uid
,然后在:后添加之前复制的uid
youyan_uid: 你刚才复制的有言uid
到这里,进行部署,在我们的博客上就能看到评论功能了。
添加搜索功能
更多搜索服务可以点击这里传送门
- 注册Algolia,创建Index
在Algolia官网注册一个账户,完成账户注册后,创建一个Index,如下图:
![Uploading QQ20170802-104759@2x_135446.png . . .]
- 安装Hexo Algolia(我按照官方给出的教程进行安装,当我
Hexo Algolia
的时候提示我FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
,网上查了下,说可能是因为git的版本太新,卸载换旧版本就好。为此我放弃了这种方法。)
在Hexo根目录执行如下指令,进行Hexo Algolia的安装:
npm install --save hexo-algolia
执行完指令后,读者们可能会发现安装失败,或发现安装成功后实现的搜索功能可以搜索但是不可以点击搜索到的文章,这是因为5.1.0版本NexT在package.json
文件的配置中存在错误。
到Hexo
的根目录,在其中找到package.json
文件,修改其中的hexo-algolia
属性值为^0.2.0
"hexo-algolia": "^0.2.0"
然后再执行上述的安装指令。
- 获取Key,修改站点配置
完成Hexo Algolia后,回到Algolia官网的Dashboard,在左侧导航栏选择API Keys一项,跳转到如下图所示的页面:
基于这个页面的Key,编辑站点配置文件,在文件内容最后添加如下图所示的信息,包括 ApplicationID
、Search-Only API Key
、 Admin API Key
和indexName
,其中apiKey
就是Search-Only API Key
:
algolia:
applicationID: 'applicationID'
apiKey: 'apiKey'
adminApiKey: 'adminApiKey'
indexName: 'indexName'
chunkSize: 5000
当配置完成,在站点根目录下执行 hexo algolia
来更新 Index。请注意观察命令的输出。
![Upload QQ20170802-134155@2x.png failed. Please try again.]
更改主题配置文件
,找到 Algolia Search
配置部分:
# Algolia Search
algolia_search:
enable: false
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}"
hits_stats: "${hits} results found in ${time} ms"
将 enable
改为 true
即可,根据需要你可以调整 labels 中的文本。
Local Search搜索服务(这个搜索服务相对简单,只需要简单三步就能实现搜索服务)
- 安装
hexo-generator-searchdb
,在站点的根目录下执行以下命令:
$ npm install hexo-generator-searchdb
- 编辑
站点配置文件
,新增以下内容到任意位置:
search:
path: search.xml
field: post
format: html
limit: 10000
- 编辑
主题配置文件
,启用本地搜索功能:
# Local search
local_search:
enable: true
添加友情链接功能
相信我们的朋友之间也有很多使用其他博客搭建工具如wordpress、jekyll等来搭建自己的博客,写的文章多了,当然希望可以收获更多的流量,这时候好友之间就会互相帮忙,在自己的博客上添加好友的博客链接。实现功能如下:
在主题配置文件中找到links
属性,修改links_title
属性的值为“友情链接”(也可以是其他文案),然后添加上好友的博客名称和博客地址,其格式如下:
博客名称: 博客链接
例如:
links_title: 友情链接
links:
Mr_默: https://moandroid.github.io
部署好之后,这样就实现了友情链接了,大家可以去自己博客地址看下。
更多炫酷的效果可以参照[ hexo的next主题个性化教程]