草梅友仁的博客
0%

Hexo 使用技巧

发表于 更新于 分类于 阅读次数： Valine： 4.7k 4 分钟
搬运和整理了关于 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
版权声明：转载请注明出处！

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

欢迎关注我的其它发布渠道