Hexo主题Next

第一次接触到hexo,之后知乎的这个问题第一个便开始推荐的就是Hexo。

有哪些好看的 Hexo 主题?

官方网站

开始使用 - NexT 使用文档

主题配置 - NexT 使用文档

第三方服务集成 - NexT 使用文档

Github-NexT

为什么会喜欢

作为star数最多的主题,非常简单的配置,也有很多人用。

由于在写本篇文章的时候距离答辩博客的文章过了有十来天,所以便不是初探,而是总结。

本文以下代码摘录地址:
hexo-theme-next/_config.yml

博客

菜单

在主题配置文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
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

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

除了home和archives,其他需要自己新建。

如果想隐藏menu icon,我目前俄做法为在双数杠之前添加

1
2
3
4
5
6
7
8

参考的官方说明:[设置 菜单](http://theme-next.iissnan.com/getting-started.html#menu-settings)

#### 404页面

新建 ```404.html``` 页面

在404.md中输入遗下内容:


title: 404
date: 2018-04-09 06:47:40

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

参考的官方说明:
[腾讯公益404页面](http://theme-next.iissnan.com/theme-settings.html#volunteer-404)

### 侧边栏

#### 头像

参考官方说明:
[设置头像](http://theme-next.iissnan.com/getting-started.html#avatar-setting)

在主题配置文件中:

```# sidebar avatar
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
#avatar: /images/avatar.gif

设置头像的链接可以有两种:

  • 完整的互联网地址
  • 站点内的地址

站点内的地址路径在source文件夹中新建

1
2

#### 社交账号

Social Links.

Usage: Key: permalink || icon

Key is the link label showing to end users.

Value before || delimeter is the target permalink.

Value after || delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.

#social:
#GitHub: https://github.com/yourname || github
#E-Mail: mailto:yourname@gmail.com || envelope
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype

social_icons:
enable: true
icons_only: false
transition: false

1
2
3
4
5
6

在双数杠之后的为FontAwesome图标,若没有则显示为小地球。

### 页脚

![](https://i.loli.net/2018/04/26/5ae165015fb57.png)

footer:

Specify the date when the site was setup.

If not defined, current year will be used.

#since: 2015

Icon between year and copyright info.

icon: user

If not defined, will be used author from Hexo main config.

copyright:

-------------------------------------------------------------

Hexo link (Powered by Hexo).

powered: true

theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: true
# Version info of NexT after scheme info (vX.X.X).
version: true

-------------------------------------------------------------

Any custom text can be defined here.

#custom_text: Hosted by GitHub Pages

1
2
3
4

### 字数统计

需要先安装wordcount插件。

npm i --save hexo-wordcount

1
2
3
4
5
6

在```npmjs.com```中的网址:
[hexo-wordcount
](https://www.npmjs.com/package/hexo-wordcount)

之后在主题配置文件中便会出现以下代码:

Post wordcount display settings

Dependencies: https://github.com/willin/hexo-wordcount

post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: true
separated_meta: true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

- wordcount: 单篇字符数
- min2read: 阅读时长
- totalcount: 总计字符数

## 文章相关

### 阅读浏览次数

参考官方说明:

[为NexT主题添加文章阅读量统计功能 | Doublemine](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)

注册的网址:
[leancloud](https://leancloud.cn/)

### 评论

#### Gitment

参考官方说明:

[Gitment:使用 GitHub Issues 搭建评论系统](https://imsun.net/posts/gitment-introduction/)

需要设置的地方:

[OAuth应用程序设置](https://github.com/settings/applications/700138)

该设置需要找到,则在GitHub个人信息中个人设置里的开发模块里找到。

##### 实现评论的重点主要内容

github_user: # MUST HAVE, Your Github ID
github_repo: # MUST HAVE, The repo you use to store Gitment comments
client_id: # MUST HAVE, Github client id for the Gitment
client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment

1
2
3
4

这里后两个为主要的注册之后的密钥。

在主题配置文件中:

Gitment

Introduction: https://imsun.net/posts/gitment-introduction/

You can get your Github ID from https://api.github.com/users/

gitment:
enable: true
mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
count: true # Show comments count in post meta area
lazy: false # Comments lazy loading with a button
cleanly: false # Hide ‘Powered by …’ on footer, and more
language: zh-Hans # Force language, or auto switch by theme
github_user: # MUST HAVE, Your Github ID
github_repo: # MUST HAVE, The repo you use to store Gitment comments
client_id: # MUST HAVE, Github client id for the Gitment
client_secret: # EITHER this or proxy_gateway, Github access secret token for the Gitment
proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled


#### 遇到的问题

无法评论以及初始化。

我此时创建的是一个专门的储存评论的repo。

详细请查看此篇文章:
FelixXiong wechat
产品北里,讲述产品和人性、涉及设计、技术和运营的公众号。
你们的赞赏是我更新的动力~