Hexo个人免费博客(三) next主题、评论、阅读量统计和站内搜索

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://linsh-tech.blog.csdn.net/article/details/52424573

使用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.百度统计:

用于统计阅读的次数,步骤如下:

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-->

那么在首页显示的部分就是此标签前面的文章内容,而非全文显示:

展开阅读全文

没有更多推荐了,返回首页