Hexo个人博客优化与配置

Posted on | In

    之前讲了Hexo博客的搭建方法，今天就讲一下优化与配置，Hexo的主题还是很多的，可以根据自已的喜欢选择，我用的主题是NEXT。

开始

更换Next主题：

1) 下载主题

1
2
$ cd your-hexo-site     //进入博客主目录
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

2) 启用主题
编辑站点配置文件 _config.yml //位于主目录

1
theme: next     //找到theme，修改成next

添加标签、分类等页面（以标签 tags 为例）：

1) 编辑主题配置文件 _config.yml //位于 themes/next 

1
2
3
4
menu:
  home: /
  tags: /tags
  categories: /categories


2) 新建页面 ( tags 页面位于主目录下的 source 中)

1
$ hexo new page tags

3) 编辑页面类型

1
2
3
4
title: tags
date: 2017-12-06 17:45:25
type: tags
---

设置头像：

方法一
1) 找一张心仪图片命名为 avatar.gif 放入主题下的 source/images/ 中
2) 启动服务就可以看到

提示:
如果不显示则将图片放入博客主目录 public/images/ 中

方法二
1) 将图片命名为avatar.jpg放入博客主目录 public/images/ 中
2) 编辑站点配置文件_config.yml，配置avatar路径如下(注意文件后缀)

设置favicon:

先看看我的效果：

1) 还是先选张图片，然后去 favicon在线制作 制作出心仪的大小。

语言设置:

1) 在站点配置文件_config.yml中加入如下内容，明确指定使用的语言，例如英文

1
language: en


提示：
中文为zh-Hans

添加评论功能:

评论功能我选择的是搜狐的畅言，因为畅言支持微信登录还是比较方便的。
1) 注册帐号后通过添加站点获取畅言秘钥的appid和appkey值，后面要用到
2) 在主题配置文件_config.yml中开启畅言:

1
2
3
4
5
# changyan
changyan：
  enable: true
  changyan_appid: 
  changyan_appkey:


3) 查看效果

侧栏设置:

编辑主题配置文件的sidebar字段，我设置为侧栏一直显示，并且显示在右边：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  position: left
  #position: right

  # Sidebar Display, available value (only for Muse | Mist):
  #  - 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 toggle.
  #display: post
  display: always
  #display: hide
  #display: remove

百度统计:

1) 注册百度统计,复制百度生成的js统计代码中hm.js?后面的那串id值
2) 在主题配置文件中，找到字段baidu_analytics，设置其值为上面复制的id值

加入站内搜索功能:

1) 安装hexo-generator-searchdb

1
$ npm install hexo-generator-searchdb --save        //安装时请位于站点根目录下

2) 在站点配置文件中添加search字段

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

3) 将主题配置文件中的local_search开启

1
2
local_search:
  enable: true

效果如下：

在文章底部增加版权信息:

1) 编辑主题配置文件,修改post_copyright字段如下

1
2
3
4
5
# Declare license on posts
post_copyright:
  enable: true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/deed.zh

效果如下：

给博客添加萌物

效果图：

1) 在站点主目录安装live2d

1
$ npm install -save hexo-helper-live2d

2) 编辑themes/next/layout下面的_layout.swig，在</body>之前添加

1
{{ live2d() }}

3) 编辑站点配置文件_config.yml，添加live2d字段

1
2
3
4
5
6
7
8
9
live2d:
  model: z16
  width: 350
  height: 600
  scaling: 2
  mobileShow: true
  moblieShow: 0.8
  position: left
  bottom: -30

提示：
通过修改model，可以显示不同的萌物，萌物类型可以到 这里 选择