hexo博客搭建(二)：主题及界面配置

主题安装

打开终端，执行如下命令

1 2	cd blog git clone https://github.com/iissnan/hexo-theme-next themes/next

或者直接下载zip压缩包，解压后将next文件夹放到themes文件夹中。

主题切换

打开hexo的配置文件，将theme: 项改为next,记住之后所有的配置中冒号后边都先有空格。

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

然后本地运行如下命令，查看是否成功

1 2	hexo g //生成静态文件 hexo s //运行到本地

选择风格
next提供了多种风格供选择，打开next的配置文件（next文件夹下的_config.yml）

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

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

#是注销本行，自己分别试一下，然后hexo s在本地看效果。

菜单设置

打开主题的配置文件，设置分类categories和标签tag

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

# Enable/Disable menu icons.
menu_icons:
  enable: true

home:主页
categories:分类
archives:归档(按时间显示文章)
tags:标签

执行如下命令新建分类和标签

1
2
3

cd blog
hexo new page categories
hexo new page tags

打开blog\source\categories\index.md文件，添加comments: false,关掉comments,添加type

---
type: "categories"
comments: false
---

最后在文章的头部指定分类即可

1	categories: hexo博客搭建

头像设置

将头像放到 source/images/ 目录下
打开hexo的配置文件新增avatar字段添加路径

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /images/head.png

添加搜索服务

打开终端执行

1	cnpm install hexo-generator-searchdb --save

在next的配置文件任意位置添加

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

百度统计

进入百度统计,注册百度统计站长版账号，然后添加自己的网站，并点击获取代码。
进入hexo配置文件，修改如下内容

1 2	# Baidu Analytics ID #baidu_analytics:添加百度统计key

不蒜子统计

打开next主题配置文件，修改如下内容

busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: 本站访客数
  site_uv_footer: 人次
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: 本站总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: 本文总阅读量
  page_pv_footer: 次

由于域名问题，统计次数可能显示不正常，进入如下文件

1	/theme/next/layout/_third-party/analytics/busuanzi-counter.swig

将

1	https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js

替换为

1	https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js

即可。

leancloud阅读次数统计

点击查看具体配置规则
本地预览

1 2	hexo g hexo s

远程部署

1
2
3

hexo clean
hexo g
hexo d

封面图片配置

文章开始添加封面图片代码

1 2	<img class="cover-img" src="hexo博客搭建-二-：主题及界面配置/test.png" > <!-- more -->

修改/themes/next/source/css/_custom/custom.styl文件，在末尾添加代码

.cover-img{
  width: 100%;
  height: 180px;
  object-fit: cover;
}

修改next主题配置文件

1
2
3

auto_excerpt:
  enable: true
  length: 150