Hexo主题设置

Posted on | In |

原本的主题比较丑，重新配置一下hexo主题，亲测在设置deploy key的情况下可以直接覆盖原来远程分支中的内容。

1. hexo与github Pages的关系

使用hexo init [folder_name]创建一个网站后，会在相应的目录下生成如下结构：

1
2
3
4
5
6
7
8
9
/root
|--_config.yml 主站设置
|-- package.json
|-- scaffolds
|-- source 存放网站内容md文件
    |--_posts
|-- themes 存放主题，设置网站渲染
    |--next
        |-- _config.yml 主题设置

相关配置完成之后（运行hexo s或hexo g或hexo d之后），目录呈现如下结构

1
2
3
4
5
6
7
8
9
10
11
12
/root
|--_config.yml 主站设置
|-- package.json
|-- package-lock.json
|-- db.json
|-- scaffolds
|-- public 这个文件存放由原始md文档生成的html文档，也就是最终要推到github Pages的所有内容
|-- source 存放网站内容md文件
    |--_posts
|-- themes 存放主题，设置网站渲染
    |--next
        |-- _config.yml 主题设置

所以在本地仓库中保留着所有的以上目录，在远程github.io仓库只有public中的内容。

2. hexo主站设置与主题设置

hexo主站设置

主要配置网站基本信息以及部署信息。最重要的是设置hexo一键部署deploy：
在deploy中填写:

1
2
3
4
deploy:
  type: git
  repository: git@github.com:username/username.github.io.git
  brance: master

要使用hexo的一键部署，还需要在github.io仓库中添加deploy key。参考https://segmentfault.com/a/1190000005125610

  • 查看 ~/.ssh，查看是否存在id_rsa.pub
  • 使用ssh-keygen生成密钥 ssh-keygen -t rsa -C "your_email@example.com"
  • 如果选用默认文件名保存就会保存在id_rsa中，简化可以不用加密码，全部enter通过
  • 在github.io仓库中添加deploy key。“Settings->Deploy Keys->Add deploy key”
  • cat ~/.ssh/id_rsa.pub 复制public key到仓库deploy key中
  • 检查是否配置成功 ssh -T git@github.com
  • 如果出现以下就证明配置成功：
1
2
Hi FloodShao/FloodShao.github.io! 
You've successfully authenticated, but GitHub does not provide shell access.
  • 之后使用hexo d对网站进行一键部署

主题设置

主要是更改了如下几个地方：

  1. menu的改变：添加了categories, tags, about等菜单内容
1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

注意每添加一个菜单内容点进去都是一个page。需要在source中添加该页面。
更新（20200320）： 最近更新了hexo之后发现出现了标签得不到相应。
出现Cannot GET /tags/%20/的问题。
解决方法是去掉上边显示的/ || home中/与||之间的空格。

1
2
hexo new page "categories"
INFO  Created: ~/GitHub/test/source/categories/index.md

并修改index.md如下：

1
2
3
4
5
---
title: categories
date: 2019-10-09 14:41:11
type: "categories" #这一行是添加的
---

也可以在下方添加内容，比如在about中添加相关信息。

  1. 设置sidebar来实现每一篇post的目录显示等功能：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#添加社交网络
social:
  GitHub: https://github.com/floodshao || github
  E-Mail: mailto:guoliang_shao@u.nus.edu || envelope

#post目录显示
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

# 博客头像显示
avatar: /images/avatar.png
  1. 博文设置：
1
2
3
4
# 主目录设置自动隐藏内容
auto_excerpt:
  enable: true
  length: 150
  1. 第三方库设置：
1
2
3
4
5
#使用latex渲染
mathjax:
  enable: true
  per_page: false
  cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML

3. hexo部署

hexo s查看生成本地网站，可以实时更新
远端部署首先要hexo g 生成所有的文件，然后在hexo d。

4. hexo 中结合valine添加评论

  • 在LeanCloud中注册登录，并进行实名验证。
    LeanCloud官网登录入口
  • 创建应用APP，获得AppID和AppKey
  • Next主题已经获得valine支持，所以在主题设置下进行配置：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Valine.
    # You can get your appid and appkey from https://leancloud.cn
    # more info please open https://valine.js.org
    valine:
      enable: true # 是否开启
      appid:                            # 填上之前获取的AppID
      appkey:                           # 填上之前获取的AppKey
      notify: false # 新留言是否需要通知 https://github.com/xCss/Valine/wiki
      verify: false # 是否需要验证，验证比较反人类建议false关闭
      placeholder: Just to go # 默认留言框内的文字
      avatar: mm # 默认头像
      guest_info: nick,mail # 默认留言框的头部需要访问者输入的信息
      pageSize: 10 # pagination size #默认单页的留言条数
    至此不用改变其他状态就可以添加评论，直接进行部署就可以了。

5. latex公式渲染出现问题

更换 Hexo 的 markdown 渲染引擎，hexo-renderer-kramed 引擎是在默认的渲染引擎 hexo-renderer-marked 的基础上修改了一些 bug ，两者比较接近，也比较轻量级。

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save