使用Next主题美化界面:
安装好hexo之后,主题使用的是hexo默认自带的landscape
主题,Next主题是iissnan设计的,使用指南其实可以直接参考Next官方网:http://theme-next.iissnan.com/
1.Next主题下载:
打开Git shell,在当前项目根目下使用git从github上checkout主题的代码,输入指令:
git clone https://github.com/iissnan/hexo-theme-next themes/next
下载完成后,在hexo\theme目录下回多出一个next文件夹,里面就是next主题所需的文件,当然我们也可以看到在theme文件目录还有一个landscape文件夹,这也就是hexo默认的主题。
2.配置主题:
之前我们配置hexo的时候,有用到_config.yml
文件,称其为站点配置文件,而我们打开next主题文件夹,发现里面也有一个_config.yml
文件,我们称这个为主题配置文件。在hexo中启用next主题的方式:就是打开站点配置文件,找到theme
字段,将其值改为“next”,如下:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
配置完成后,在Git shell中使用hexo server
指令启动本地博客,在浏览器中访问http://localhost:4000可以看到如下结果:
3.next的样式选择:
next的样式其实有三种:Muse、Mist和Pisces,步骤2中看到的其实是next默认的模式Muse,根据官方说明三个样式的特点如下:
- Muse: 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
- Mist: Muse 的紧凑版本,整洁有序的单栏外观
- Pisces: 双栏 Scheme,小家碧玉似的清新
切换的控制其实很简单,使用next主题配置文件中的scheme
字段来控制,假设我们选择Mist样式(个人认为最好看的样式),操作步骤是:打开next文件夹中的_config.yml
文件,找到scheme
字段,将其设置为“Mist”,如下所示:
# ------------------------------------------------------
# Scheme Settings
# ------------------------------------------------------
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
重新启动博客,刷新浏览器可以看到:
额外的优化:
1.设置favicon:
favicon的全称Favorites Icon,即地址栏左侧的图标:
有个在线工具可以上传自己的图片去生成指定规格的favicon.ico文件:http://www.atool.org/ico.php。打开主题配置文件_config.yml
可以看到favicon的配置信息:
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico
根据说明,我们将图标取名为favicon.ico
然后放到当前工程的hexo\source目录下,重启博客即可生效。
2.菜单栏控制:
我们看到页面顶部的菜单栏,其实是由主题配置文件中的menu
字段控制的,例如原本的样子是这样:
我们修改一下主题配置文件,如下把about页面前面的注释去掉,即让此页签处于显示状态:
# ------------------------------------------------------
# Menu Settings
# ------------------------------------------------------
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
home: /
#categories: /categories
about: /about
archives: /archives
tags: /tags
#commonweal: /404.html
重启博客可以看到效果如下:
然而,点击打开About却出现了“Cannot GET /about/”的页面错误,这是因为我们还没有about这个页面,需要使用hexo new page "页面名称"
进行创建:
hexo new page about
执行结果就是在hexo\source目录下面多出了一个about文件夹,里面有index.md,这就是点击About会展示的内容页面。同理,也可以创建tags页面。
3.语言设置:
在站点配置文件中假如如下内容,明确指定使用的语言,例如中文:
language: zh-Hans
设置完毕后,发现菜单栏也发生了变化:
4.侧栏设置:
在主题配置文件的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
5.设置头像和作者名称:
在站点配置文件中,新加一个字段avatar
,值就是头像的连接地址,这里我使用站内地址,将avatar.png放到本地目录hexo\source\images中;作者名称直接设置站点配置文件中author
字段的值:
# Site
title: Linsh-何乐不为~
subtitle:
description:
author: Linshuhe
avatar: /images/avatar.png
language: zh-Hans
timezone:
第三方服务:
1.多说评论:
进入多说官网,登录后点击“我要登录”,填写相关信息,注意要记住多说域名
这个字段填写的内容,http://(duoshuo_shortname).duoshuo.com
,这个duoshuo_shortname将用于我们站点配置文件中的配置。步骤:在站点配置文件中新建一个duoshuo_shortname
的字段,填写注册使用的duoshuo_shortname,例如:
duoshuo_shortname: linshuhe1
2.百度统计:
用于统计阅读的次数,步骤如下:
- 登录百度统计官网:http://tongji.baidu.com/web/welcome/login定位到站点的代码获取页面;
- 复制
hm.js?
后面的那串id; - 在站点配置文件中,新增一个字段
baidu_analytics
,设置其值为上面复制的百度统计的id - 阅读次数统计,使用LeanCloud来实现,详情查看:https://notes.wanghao.work/2015-10-21-%E4%B8%BANexT%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E6%96%87%E7%AB%A0%E9%98%85%E8%AF%BB%E9%87%8F%E7%BB%9F%E8%AE%A1%E5%8A%9F%E8%83%BD.html#%E9%85%8D%E7%BD%AELeanCloud
3.Swiftype搜索
使用 Swiftype 之前需要前往 Swiftype 配置一个搜索引擎。 而后编辑 站点配置文件, 新增 swiftype_key 字段,值为你的 swiftype 搜索引擎的 key。 详细的配置请参考: http://theme-next.iissnan.com/third-party-services.html#swfitype
Local Search:添加百度/谷歌/本地 自定义站点内容搜索:
- 安装hexo-generator-search:
npm install hexo-generator-search --save
- 在站点配置文件中加入:
search:
path: search.xml
field: post
最终结果可以查看我的博客:https://linshuhe1.github.io/
补充:
可能有人跟我一样遇到了带你麻烦,那就是主页面的文章列表中,博客内容全部显示出来而不是只显示文章一部分和 阅读全文》
按钮,这样显得首页的列表很杂乱和冗长,其实要解决这个问题很简单,只需要在我们编写markdown内容的时候,在适当的位置假如如下标签:
<!--more-->
那么在首页显示的部分就是此标签前面的文章内容,而非全文显示: