美文网首页
Hexo之Next主题

Hexo之Next主题

作者: 松n_n鼠 | 来源:发表于2017-08-01 22:36 被阅读0次

由于我们新搭建的基于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主题个性化教程]

相关文章

  • Hexo主题设置

    hexo默认主题是landscape,hexo官方也提供了许多主题。推荐使用Next和Yelee。Next简洁美观...

  • Hexo之Next主题

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

  • github hexo 博客搭建

    环境准备: hexo next 主题:https://theme-next.iissnan.com/getting...

  • 为hexo添加站内搜索功能

    前言 最近发现超赞的hexo主题,next! 。喜欢之余,又在上面做了些修改.本文主要写为Hexo-Next主题增...

  • Hexo搭建GitHub博客—打造炫酷的NexT主题--高级(五

    简介 上篇Hexo搭建GitHub博客—打造炫酷的NexT主题--高级(四)讲解到Hexo NexT的相关配置如:...

  • Hexo+Next搭建个人博客

    1. 参考 Hexo官方文档 Next官方文档 Hexo+Next主题优化 2. 环境 Node.js Gi...

  • [转载]hexo-next主题安装看板娘(会说话,会拍照)

    Hexo博客NexT主题美化之新增看板娘(能说话、能换装) 效果图: 教程: 小白水平: hexo的官方是支持看板...

  • Hexo主题_Next

    Hexo主题_Next 1. 安装主题 在博客文件夹下执行命令 2. 启用主题 打开博客目录中_config.ym...

  • hexo next主题

    先在 https://github.com/iissnan/hexo-theme-next 这里下载解压下载的文件...

  • Next主题(Hexo)

    Hexo 有三种默认布局:post , page 和 draft它们分别对应不同的路径,而您自定义的其他布局和po...

网友评论

      本文标题:Hexo之Next主题

      本文链接:https://www.haomeiwen.com/subject/iaojlxtx.html