从零开始的个人博客,更换next主题及配


从零开始的个人博客,更换next主题及配置

- hexo
- NexT
- NexT.mist

ready

在上一篇博客从零开始的个人博客,hexo+githPages搭建 中,我们以及完成了博客的基础功能搭建,接下便是功能的扩充以及美化。我选择的是NexT主题,理由:简洁易用(其实就是菜),好了废话不多说,下面开始正题。
hexo官方主题展示

安装NexT主题

本文使用的版本为5.1.4版本github链接
从零开始的个人博客,更换next主题及配
解压所下载的压缩包至站点的 themes 目录下(也可在使用git clone命令添加到工程的themes里), 并将 解压后的文件夹名称(hexo-theme-next-5.1.4)更改为 next。

从零开始的个人博客,更换next主题及配

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。
为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件。

从零开始的个人博客,更换next主题及配

完成上述步骤后,打开 站点配置文件, 找到 theme 字段,并将其值更改为 next并保存。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

cd 到工程目录下:

$ hexo clean #切换主题后,防止出问题,clean一下
$ hexo g #重新生成静态文件
$ hexo d #将public中有改动的文件上传

打开 xxx.github.io 或者是 已绑定的域名 (或者使用hexo s 访问本地站点) 查看主题是否生效。

更换NexT主题风格

5.1.4版本提供了三种风格可供选择,在 主题配置文件 中,搜索 scheme 关键字,可以进行修改,我比较喜欢mist风格,大家随意选择。

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

当然修改主题风格后需要重新上传才会生效,不要忘记了哦。

详细设置

基本信息修改

修改标题、作者、描述 等。

# Site
title: lostifor的博客
subtitle:
description: 编程的乐趣? 人类的成就感来源于创造或者毁灭。
keywords:
author: 李佳育
language: zh-Hans
timezone:

语言

编辑 站点配置文件,将language修改为简体中文(注意本文使用的是5.1.4版本,6.0以上版本为zh-cn),配置如下:

language: zh-Hans

菜单栏

在 主题配置文件中 编辑菜单栏,以及对于图标的显示:

menu:
  home: / || home
  categories: /categories/ || th
  about: /about/ || user
  tags: /tags/ || tags
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  # commonweal: /404/ || heartbeat

||号后面是图标的名字,所有图标由Font Awesome提供。
重新上传后的效果如下:
从零开始的个人博客,更换next主题及配

修改头像

编辑 主题配置文件, 修改字段 avatar, 值设置成头像的链接地址。
可以直接使用上传的图片如:http://xxx.avatar.png。也可以放置在 source/images/ 目录下,配置为:avatar: /images/avatar.png
我使用的第二种方法。(毕竟图床不稳

其他修改

其他相关的配置,请查阅next官方文档

三方集成

所有三方选择均秉承简单易用的规则选用(真的菜。。。

统计功能 leanCloud

为NexT主题添加文章阅读量统计功能

搜索功能 Local Search

添加百度/谷歌/本地 自定义站点内容搜索(简单粗暴)
安装 hexo-generator-searchdb,在站点的根目录下执行以下命令:

$ npm install hexo-generator-searchdb --save

编辑 站点配置文件,新增以下内容到任意位置:

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑 主题配置文件,启用本地搜索功能:

# Local search
local_search:
  enable: true

添加回复功能

请查阅博客:
从零开始的个人博客,next添加Valine评论功能

enjoy

效果展示:李佳育的个人博客