hexo配置详解(nextT主题)

介绍我们进行nextT主题的详细配置

hexo配置详解(nextT主题)

hexo下的配置,主要分为两部分,一个是站点配置,一个是主题的配置,这里我们也分两部分讲解一下。配置的过程中,可能会需要用到一些插件,使用时需要安装,这里可以参考我的另外一篇文章ubuntu下hexo搭建教程中,需要进行插件的安装。好了,我们开始配置我们的hexo和主题,这里我采用了网络上比较热门的nextT主题,首先我们讲解一下主题的配置

1. 主题配置(nextT)

主题的配置文件,目录主要是在hexo主目录下的themes目录下,我电脑上是/home/eggsy/install/hexo/themes/,这个目录中存放了你下载的主题,我们找到nextT目录,在目录下有一个_config.yml文件,这里就是主题的配置文件,我们打开这个配置文件,后续的配置,都是在这个配置文件中进行

1.1 开启博客的菜单

菜单配置

menu:
  home: / 
  categories: /categories  #分类的目录
  about: /about  #关于的目录
  archives: /archives  #归档的目录
  tags: /tags  #标签的目录
  #commonweal: /404.html  #公益的文件,这里我注释掉

格式: key: 目录路径,注意key:之后有一个空格

菜单对应的图标

menu_icons:
  enable: true #开启图标显示
  #KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
  home: home 
  about: user
  categories: th
  tags: tags
  archives: archive
  #commonweal: heartbeat

格式: key: 图标名称 key要和菜单的配置中的key对应

由于新建的博客,没有安装categories和tags的,如果需要打开分类和标签,这里需要手动新建这两个目录,切换到hexo的主目录(根据每个人情况不同,hexo init时初始化在哪个目录)

cd ~/install/hexo
hexo new page categories
hexo new page tags

这个命令会在你的hexo主目录(本文是~install/hexo)中建立categories和tags目录
~/install/hexo/source/categories和tags目录下,会生成index.md
用gedit打开,如果没有安装gedit,可以使用vim或者其他编辑软件打开文件
编辑/categories目录下的index.md文件

gedit ~/install/hexo/source/categories/index.md

新增type: categories 表示这是一个系统的分类页面
新增comments: false 表示分类页面不出现评论,评论的添加下面会讲到

---
layout: layout_single
title: 分类
date: 2016-08-15 22:29:12
type: categories
comments: false
---

编辑/tags目录下的index.md文件

gedit ~/install/hexo/source/tags/index.md

新增type: tags 表示这是一个系统的标签页面
新增comments: false 表示分类页面不出现评论,评论的添加下面会讲到

---
title: tags
date: 2016-08-15 22:30:31
type: "tags"
comments: false
---

1.2 配置侧边栏社交

_config.yml,新增字段 social,然后添加社交站点名称与地址即可。例如:
社交菜单配置

# Social links
social:
  GitHub: https://github.com/eggsywelsh
  Twitter: https://twitter.com/eggsy_welsh
  微博: http://weibo.com/3083087487
  知乎: https://www.zhihu.com/people/eggsy-78
  # 等等

社交图标配置

\#social icons
social_icons:
  enable: true
  # Icon Mappings.
  # KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
  GitHub: github
  Twitter: twitter
  微博: weibo

配置规则如5中菜单的配置规则

1.3 关闭rss

搜索rss配置,后面配置false,就关闭了rss

rss: false

1.4 更换博客的favicon

搜索favicon配置,将你的图标名称成favicon.ico放入到~/install/hexo/source/ 目录下,或者将图标放入到目录后,将图标名字配置在这里

favicon: /favicon.ico

1.5 博客首页/分类/标签等SEO keyworks

做过SEO的人都知道,页面最关键的几个点中,就有一个是keyworks,这直接关系到搜索引擎对页面收录时后的关键词,所以这里要配置下
搜索keywords配置,在后面配置关键词,这里简单配置”technology blog, open source blog, android blog, java blog”

keywords: "technology blog, open source blog, android blog, java blog"

1.6 设置系统主题

nextT默认有三种主题

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces

需要哪个主题,将其他两个注释掉,好吧,别告诉我你不知道怎么注释,#开头代表注释

1.7 侧边栏位置和显示配置

搜索sidebar配置

sidebar:
  # Sidebar Position, available value: left | right
  position: left
  #position: right

  # Sidebar Display, available value:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  Totally remove sidebar including sidebar toggler.
  #display: post
  display: always
  #display: hide
  #display: remove

修改position: left或者right配置侧边栏放置在左边还是右边
修改display: always/hide设置侧边栏显示与否

1.8 配置文章主题

highlight_theme: night

1.9 文章阅读统计

这里采用leancloud的第三方辅助我们进行文章的统计,nextT主题默认已经支持leancloud,需要我们去leancloud注册账号
leancloud网址
注册之后,创建新应用 “github博客”
在菜单 存储->数据->创建Class 名字为Counter->设置数据条目的默认为无限制
在菜单 设置->应用Key里面存有App ID和App Key获取出来保存,下面配置有用到

搜索leancloud_visitors

leancloud_visitors:
  enable: true
  class: Counter
  app_id: 填写上面获取到的App ID
  app_key: 填写上面获取到的App Key

注意:class代表上文中创建的Class名字,默认不配置class的话,是Counter类,所以这里也可以默认不配置

1.10 关闭多说热评文章

在配置中添加或者修改配置

duoshuo_hotartical: false  #false:关闭热评  true:开启热评

1.11 开启首页文章缩略

在首页显示一篇文章的部分内容,并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式。 也就是说,在首页显示文章的摘录并显示 阅读全文 按钮,可以通过以下方法:

在文章中使用 手动进行截断,Hexo 提供的方式 推荐
在文章的 front-matter 中添加 description,并提供文章摘录
自动形成摘要,在 主题配置文件 中添加:

auto_excerpt:
  enable: true
  length: 150

默认截取的长度为 150 字符,可以根据需要自行设定

建议使用 (即第一种方式),除了可以精确控制需要显示的摘录内容以外, 这种方式也可以让 Hexo 中的插件更好的识别。使用more方式,hexo有限识别more方式的title,如果没有设置more,根据配置自动截取

2. hexo配置

hexo的配置文件,目录主要是在hexo主目录下,我电脑上是/home/eggsy/install/hexo/,这个目录中存放了hexo的相关文件,我们_config.yml文件,这里就是hexo的配置文件,注意区分与主题配置文件目录的区别,别混淆了。我们打开这个配置文件,后续的配置,都是在这个配置文件中进行

2.1 配置博客的标题,描述,作者等基础博客信息

在配置文件的开头,有这几个配置:

title: 蛋西的博客
subtitle: 
description: 我,一直在路上,从未停止攀登的步伐...
author: 蛋西
language: zh-Hans  #语言需要根据你的需求配置,这里配置成中文
timezone:

2.2 设置头像

搜索avatar,这里可以放在/home/eggsy/install/hexo/source/下的images目录下,或者配置成url目录

avatar: /images/avatar.png

2.3 打开搜索栏

在配置文件中添加

search:
  path: search.xml
  field: post

2.4 添加百度访问统计

访问 百度统计 ,注册百度统计后,进入后台
在网站中心->新增网站->输入域名(例如:eggsywelsh.github.io)->保存
网站中心->代码管理->代码获取中->右侧js代码,找到//hm.baidu.com/hm.js?之后的一串ID,拷贝下来
配置在_config.yml中新增baidu_analytics: 拷贝的ID

baidu_analytics: 拷贝的ID

2.5 配置多说评论

访问多说网站
注册多说注册多说之后,记录下你的注册名,新增配置在文件中

duoshuo_shortname: eggsywelsh

2.6 配置github page部署

我们的hexo在配置完,是可以直接部署到github上(使用hexo d命令),这里有需要的可以配置一下属性

deploy:
  type: git #git提交
  repo: git@github.com:eggsywelsh/eggsywelsh.github.io.git #仓库位置
  branch: master #提交分支
  message: '站点更新:{{now("YYYY-MM-DD HH:mm:ss")}}'

2.7 写博客

hexo支持markdown语法,什么你还不知道markdown语法?赶快学习一下把!!!

2.7.1 新建文章

新建一篇主题为hello的blog

hexo new hello

hexo会在 source/_posts/ 下新建hello.md 文件

2.7.2 编辑文章

编辑2.7.1中新建的hello.md,在这个文件里面,你可以配置文总所属的分类和标签,例如:

---
title: ubuntu下hexo搭建教程
date: 2016-08-16 20:44:06
tags:  [ubuntu,hexo搭建]  #设置分类为ubuntu,hexo搭建
categories: hexo  #设置属于hexo分类
---

2.7.3 静态处理,markdown解析成html

静态处理:因为我们的blog要部署到github静态服务器上面,所有我们还要将页面进行静态化,blog根目录下会生成public文件夹

hexo clean   #清理已生成的文件
hexo generate  #重新生成文件

2.7.4 预览文章

hexo s  #部署服务

如果一切正常,clean/generate/s的时候都没有报错,访问http://localhost:4000就能看到生成的页面

2.7.5 部署到github上(已配置了deploy属性)

hexo d