Hexo 其他插件

Hexo搭建
字数统计: 1.4k字   |   阅读时长≈ 6分钟

本篇将介绍一些Hexo好用的插件，可以更加丰富你的Hexo博客的功能。

图片插件

1.设置站点配置 _config.yml

1
post_asset_folder: true

2.安装插件

1
$ npm install https://github.com/CodeFalling/hexo-asset-image -- save

3.引用图片

![例子](例子.png) 这里直接写图片名称即可，hexo在generate 时会生成public文件夹，文章和图片生成在同一目录下。

如果生成的文章图片无法正常显示，请F12看下图片的引用路径，在文章编辑中正确编辑图片路径。

如果出现 /.com/ 这样的路径错误问题，这是插件的bug 请卸载重新安装。

1
2
$ npm uninstall hexo-asset-image
$ npm install https://github.com/CodeFalling/hexo-asset-image --save

上面command 在你博客的主目录下执行,如果不是请先转到该目录下，如： cd MyHexoBlog

Tags & Categories 插件

1.安装Tags&Categories生成插件

1
2
$ npm install hexo-generator-category --save
$ npm install hexo-generator-tag --save

2.生成Tags&Categories Page页面

1
2
$ hexo new page categories
$ hexo new page tags

3.编辑Tags&Categories Page

进入 source/tags/index.md & source/categories/index.md,编辑头部的front-matter 区域分别添加 type: "tags"和type: "categories"

我使用的主题 Ayer 同时还需要分别添加 layout: "tags" 和 layout: "categories"

4.配置tags和categories 路径

到主题文件下的 _config.yml 文件配置 menu中的 tags和categories 路径

1
2
3
4
5
6
7
8
menu:
  home: /
  about: /about
  archives: /archives
  tags: /tags
  categories: /categories
  schedule: /schedule
  sitemap: /sitemap.xml

5.发布新文章使用 「tags」「categories」

只需在文章开头添加如下代码：

1
2
3
4
5
6
---
title: 利用GitHub和HEXO免费搭建个人博客高级
date: 2019-01-29 22:58:56
tags: [hexo建站,hexo部署,github部署,个人博客]      #添加的标签
categories: hexo博客                              #添加的分类
---

小tip:每次的手输入 categories 我们可以在/scaffolds/post.md 添加如下代码，这样每次新建文章，就自动有了。

1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
tags:           #新加
categories:     #新加
---

参考： 参考1

6.实现多个 categories 和嵌套category

下面的分类会将该分章放到 Java/Servlet这个分类下

1
2
3
categories:
  - Java
  - Servlet

同样的作用我们也可以这样写

1
categories: [Java, Servlet]

上面两种方法最终效果一样，都是将文章放在了一个子分类的目录下，效果下图

1
2
|*Java(2)
	|--*Servlet(2)

如果我们的要求是将文章同时分到多个不同的分类中呢，我们应该这样：

1
2
3
categories:
  -[Java]
  -[Servlet]

这样，就可以将上面的文章分类到 Java 和 Servlet 这两个不同的目录中了。

扩展一下，如果我们将其分类到 Java/Servlet 和 Programming 两个不同的目录下，我们应该如下写：

1
2
3
categories:
  -[Java, Servlet]
  -[Programming]

参考：参考2

文章置顶插件

安装置顶插件，输入以下command

1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

在文章的front-matter 区域添加 top: ture

搜索插件

hexo-generator-searchdb 搜索

1
$ npm install hexo-generator-searchdb --save

然后将以下配置复制到你博客根目录下的 _config.yml 里（注意不是ayer目录下的）:

1
2
3
4
5
# hexo-generator-searchdb
search:
 path: search.xml
 field: post
 format: html

订阅插件

hexo-generate-feed RSS

1
$ npm install hexo-generator-feed --save

然后将以下配置复制到你博客根目录下的 _config.yml 里（注意不是ayer目录下的）:

1
2
3
4
5
6
7
8
9
feed:
    type: atom
    path: atom.xml
    limit: 20
    hub:
    content:
    content_limit: 140
    content_limit_delim: ' '
    order_by: -date

文章目录插件

用Tocbot解析文章标题并生成目录

将以下配置复制到你ayer目录下的 _config.yml 里：

1
2
# Toc
 toc: true

当然你可能并不想所有文章都生成悬浮目录，你可以在文章顶部的配置中加一行来进行关闭：

1
2
3
---
toc: false
---

评论插件

很多主题集成了Valine，所以配置起来非常简单，而且页面也是非常简洁。

1.获取appId、appKey

注册登录leancloud，然后创建应用。点击应用进去，设置-安全中心 在Web安全域名中添加白名单

1
2
3
http://localhost:4000
http://luoyedemeng.com
https://luoyedemeng.github.io

设置-应用Keys,拷贝AppID和AppKey

2.Hexo中配置

打开根目录下的theme/ayer下的_config.yml配置文件，因为ayer默认已经支持valine了，所以配置so easy!拿到上步的的appid,appkey。

1
2
3
4
5
6
7
8
9
10
11
12
13
# 1、Valine[一款快速、简洁且高效的无后端评论系统](https://github.com/xCss/Valine)
# 启用Valine必须先创建leancloud应用， 获取 id|key 填入即可
leancloud:  
  enable: true
  app_id: #你的appid
  app_key: #你的appkey
# Valine配置
valine:
  enable: true # 是否启用
  verify: false # 是否启用防垃圾验证
  notify: false # 是否开启邮件提醒(https://valine.js.org/notify.html)
  avatar: mp # 头像样式(https://valine.js.org/avatar.html)
  placeholder: 给我的文章加点评论吧~ # placeholder

参考：https://www.jianshu.com/p/986c4ab61ae5

音乐、视频插件

两个好用的hexo插件：

hexo-tag-aplayer hexo-tag-dplayer

安装音乐播放aplayer

1
$ npm install hexo-tag-aplayer

在markdown内添加以下代码：

1
{% aplayer "歌名" "歌手" "音乐地址"  "封面图片" "autoplay=false" %}

安装视频播放dplayer

1
$ npm install hexo-tag-dplayer

在markdown内添加以下代码：

1
{% dplayer "视频地址"  "pic=封面图片" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}

参考：https://www.jianshu.com/p/26a7fc7cc185

安装插件遇到的问题

安装插件模块一直报错：超时或者网络挂起 network socket hangs up

解决方案：

1.先清除掉以前的代理设置

1
2
npm config set proxy null
npm config set https-proxy null

也可以先通过以下代码查看代理设置，如果返回null那就不需要清理。

1
2
npm config get proxy
npm config get https-proxy

2.重新设置

1
npm config registry http://registry.cnpmjs.org/

参考：https://blog.csdn.net/weixin_42711399/article/details/84350368

打赏
  • 版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！
  • © 2020 悲伤的牛河
  • Powered by Hexo Theme Ayer

请我喝杯latte吧~

支付宝
微信