Hexo之Next主题

由于我们新搭建的基于Hexo的博客默认的博客主题都为主题默认,系统默认多多少少会有点不如人意,那么这就需要我们自己一步步的进行设置了。

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

为了描述方便,在以下说明中,将前者称为站点配置文件, 后者称为 主题配置文件
** 切记所有的配置文件所有属性的设置,其:后必须有一个空格。

安装theme

你可以到Hexo官网主题页去搜寻自己喜欢的theme。那么我们这里以hexo-theme-next为例

next配置文件的文档传送门

终端cd到 blog
目录下执行如下命令:

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

blog目录下_config.ymltheme的名称landscape修改为next

终端cd到blog目录下执行如下命令(每次部署文章的步骤):

$ hexo clean           //清除缓存文件 (db.json) 和已生成的静态文件 (public)
$ hexo g             //生成缓存和静态文件
$ hexo d             //重新部署到服务器

到这里,接着上篇文章的配置,就可以看到如下的界面:

QQ20170801-190321.png

主题设定

选择 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 nameFont 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/文件夹下创建三个文件夹,命名分别为:categoriestagsabout文件夹,在这些文件夹中分别会创建一个以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,将其复制下来。
32352346-7342-4DC5-A633-8127A99BA860.png
  • 主题配置文件设置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一项,跳转到如下图所示的页面:
QQ20170802-111306@2x.png

基于这个页面的Key,编辑站点配置文件,在文件内容最后添加如下图所示的信息,包括 ApplicationIDSearch-Only API KeyAdmin API KeyindexName,其中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主题个性化教程]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容