0%

Hexo 使用技巧

Hexo 使用技巧

参考:hexo上有什么好玩的插件?

http://www.mdslq.cn/categories/Hexo/

设置阅读全文功能

参考:http://www.mdslq.cn/archives/122492c.html

方法一

文章中使用设置手动截断(推荐)

1
2
3
4
5
6
7
8
9
10
11
12
# 前言
  GitHub为广大开发者提供了一个非常好的平台,不仅是代码的开源,同时GitHub还提供了开发者可以在GitHub上建立自己的站点(GithubPage)的一个非常有意思的功能。它功能有限只能创建静态的网站。
  本文整理自己的部署过程,意在帮助那些刚刚接触GitHub的新手同学,可以利用GitHub快速创建高逼格的个人博客站点。

<!-- more -->
# 准备工作
- GitHub账号,创建一个仓库,规则为:例如我的账号为mds1455975151,则新建仓库名称为mds1455975151.github.io
- NodeJS环境及相关基本知识,我的环境如下:
- os: Windows_NT 6.1.7601 win32 x64
- node: 8.9.2
- Git基本使用及git for windows安装使用。
- git version: 2.15.0.windows.1

设置并显示文章摘要

设置description属性

1
2
3
4
5
6
7
---
title: Git常见问题解决
date: 2017-12-08 21:40:28
categories: 技术
tags: [Git,常见问题]
description: 日常使用git遇到的各种报错及问题详解
---

方法二

自动形成摘要设置截断长度

在主题配置文件中添加如下配置,默认截取的长度为150 字符,可以根据需要自行设定.

1
2
3
auto_excerpt:
enable: true
length: 150

建议使用(第一种方式),可以精确控制需要显示的摘录内容, 这种方式也可以让Hexo中的插件更好的识别。

Hexo渲染时排除部分文件或目录

参考:http://www.mdslq.cn/archives/6165ee44.html

前言

搜索引擎确认网站所有权时往往会提供一个html文件来进行验证,要是这个文件被渲染了,验证自然就会失败了。或者,有时候会写一些简单的html示例页面,这也是不希望Hexo渲染的。因此有必要针对某个文件或者目录进行排除。Hexo的配置文件中提供了配置项skip_render,可以解决以上问题。

设置

注意

只有source目录下的文件才会发布到public(能够在网络上访问到),因此Hexo只渲染source目录下的文件。skip_render参数设置的路径是相对于source目录的路径。

设置排除项

假设source目录下文件如下:

1
2
3
4
5
6
7
8
9
10
11
source
_data
_posts
about
categories
tags
works
404.html
baidu_verify_84yQGJByTM.html
BingSiteAuth.html
googleec6843bf1010ba92.html

排除单个文件

排除baidu的html验证文件

1
skip_render: ' baidu_verify_84yQGJByTM.html'

排除多个文件

排除所有的html验证文件

1
2
3
4
skip_render:
- 'baidu_verify_84yQGJByTM.html'
- 'BingSiteAuth.html'
- 'googleec6843bf1010ba92.html'

或者

1
skip_render: '*.html'

完成后验证效果

wget修改前后的html页面对比即可

Hexo在文章尾部插入当前文章链接

参考:http://www.mdslq.cn/archives/fcf53e2f.html

前言

用hexo-addlink在文章尾部添加当前文章链接,注明版权,有利于SEO.

部署详解

安装插件

1
$ npm install hexo-addlink --save

在站点配置文件_config.yaml中添加如下配置

1
2
3
4
# 版权信息
addlink:
before_text: __本文作者__:dongsheng<br />__本文地址__:
after_text: <br />__版权声明__:转载请注明出处!

效果展示

看本文结尾即可

Hexo之URL持久化

参考:http://www.mdslq.cn/archives/e7a9455c.html

前言

hexo默认生成的文章地址路径是[网站名称/年/月/日/文章名称].这种链接对搜索爬虫是很不友好的,第一它的url结构超过了三层,太深了. 如何优化呢?

优化详解

安装插件

1
$ npm install hexo-abbrlink --save

在站点配置文件_config.yaml中添加如下配置

1
2
3
4
5
# permalink: :title/
permalink: archives/:abbrlink.html
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex

注:html前缀为:对标题+时间进行md5然后再转base64

效果展示

看本文URL即可

Hexo博客之文章计数实现

参考:http://www.mdslq.cn/archives/437f9945.html

安装插件

使用hexo-wordcount来实现以上功能.

1
$ npm install hexo-wordcount --save

实现以下功能:

  • 字数统计 WordCount
  • 阅读时长预计 Min2Read
  • 阅读速度 Set Reading Speed
  • 总字数统计 TotalCount

配置

NexT主题默认已经集成了文章【字数统计】、【阅读时长】统计功能,如果我们需要使用,只需要在主题配置文件 _config.yml 中打开 wordcount 统计功能即可。如下所示:

1
2
3
4
5
6
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: false
min2read: false

但是调试过程中发现wordcount,min2read项设置true后,生成页面报错,最后参考其他资料自定义添加了该功能。
修改themes\next\layout_macro\post.swig模板,插入的代码以下:

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
32
33
         {# LeanCould PageView #}
{% if theme.leancloud_visitors.enable %}
<span id="{{ url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{{ post.title }}">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>
<span class="post-meta-item-text">{{__('post.visitors')}} </span>
<span class="leancloud-visitors-count"></span>
</span>
{% endif %}

# 以下部分为:字数统计、阅读时长插入代码
<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">字数统计:</span>
<span class="post-count">{{ wordcount(post.content) }}(字)</span>

</span>

<span class="post-time">
&nbsp; | &nbsp;
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">阅读时长:</span>
<span class="post-count">{{ min2read(post.content) }}(分)</span>

</span>
# 以上部分为:字数统计、阅读时长插入代码

Hexo开启站内搜索功能

参考:https://www.jianshu.com/p/519b45730824

根据关键字搜索博文,站内搜索的功能很实用。hexo开启站内搜索很方便,已经有现成的插件可以使用。

1.安装插件

1
2
npm install hexo-generator-search  --save
npm install hexo-generator-searchdb --save

2.配置hexo站点主配置文件_config.yml,添加

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

3.修改next主题配置文件_config.yml,启用local_search

1
2
3
4
local_search:
enable: true
trigger: auto
top_n_per_article: 1

这样就开启了站内搜索。

为hexo添加live2d

参考 https://11.tt/posts/2018/how-to-play-with-live2d-on-hexo/

本文作者:草梅友仁
本文地址: https://blog.cmyr.ltd/archives/2ae60728.html
版权声明:转载请注明出处!

坚持原创技术分享,您的支持将鼓励我继续创作!