Hexo搭建静态博客（四）——插件安装

Hexo

发布日期: 2020-05-16

作者: Small-Rose / 张小菜

更新日期: 2020-05-16

文章字数: 1.4k

阅读时长: 5 分

阅读次数:

Hexo静态博客插件安装相关内容，本文以安装search和abbrlink插件为例。

注意：安装插件不是非必须，除了部分插件跟着主题必须安装之外，其他插件属于可选。

安装插件命令


npm install   hexo-generator-feed  --save   #订阅

npm install   hexo-generator-search --save  #搜索

npm install hexo-abbrlink --save  #文章永久链接

npm install   hexo-reading-time --save # 阅读时间

hexo-deployer-git --save # git部署

其他插件，具体使用自行搜索，一般是修改配置或添加代码


npm install hexo-generator-index-pin-top –save  #文章置顶插件 

npm uninstall hexo-generator-index –save  #文章置顶插件 

npm i –save hexo-wordcount     #文章字数+阅读时长统计   

npm install hexo-baidu-url-submit –save   #百度链接主动推送   

npm install hexo-deployer-ftpsync –save   #hexo上传至FTP服务器  

npm install hexo-deployer-cos –save   #hexo上传至腾讯云COS  

npm install hexo-deployer-aliyun –save  #hexo上传至阿里云   

npm install –save hexo-admin  #hexo管理插件   

hexo-blog-encrypt(请看文档)   #hexo文章加密码 

npm install leancloud-storage –save   #Valine评论  Valine评论邮件通知  Valine评论提醒 

npm install hexo-deployer-git –save hexo安装git（允许使用git命令）

更多插件请访问插件中心：https://hexo.io/plugins/
使用参考链接参考幻凡ss

修改修改永久链接

Hexo修改修改永久链接的默认格式,方便SEO.

hexo-abbrlink 项目地址在这里

npm install hexo-abbrlink --save

1.安装插件

npm install hexo-abbrlink --save

2.修改配置

# permalink: :year/:month/:day/:title/
# permalink_defaults:
permalink: posts/:abbrlink.html
abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex

3.重启

hexo clean & hexo g & hexo s

点击一篇文章，检查浏览器地址看看是不是发生变化了？

这里只是举个栗子，其他的根据插件官方引导操作就可以，我就不重复写步骤了。

本地搜索插件

这里只是自己刚刚接触hexo时学习做的步骤。现在大部分主题都是已经带有搜索的。

这里说一下添加本地搜索，有的主题已经自己带了搜索功能，只要配置开启即可。如果没有带主题可以自己加上。

特别说明：如果主题自带搜索，看自带搜索操作说明即可，如果主题无搜索看自定义模式说明即可。

步骤一安装插件

第一步：安装搜索插件 npm install hexo-generator-searchdb --save

步骤二修改配置

第二步：根目录_config.yml文件配置添加

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

主题配置_config.yml添加

local_search: 
  enable: true

步骤三添加搜索

第三步:添加搜索框

<div class="search-content">
      <form class="pure-form">
        <input type="text" id="local-search-input" name="q" results="0" autocomplete="off" placeholder="搜索" class="pure-input pure-input-1" style="background-color: rgb(204, 232, 207);">
      </form>
      <div id="local-search-result"></div>
</div>

第1种，主题自带搜索模式，有独立的search页面,生成页面前面已经讲到了，把代码放到source/search/index.md文件中即可。

第2种，自定义模式，直接加在首页，想加哪个位置看自己喜好，位置找主题下的布局文件夹_layout或layout/partials之类的文件夹下,里面有head.ejs或head.swig文件（如果不是请自己查找节点，文件反正就那些）,添加html代码

步骤四引入js文件

第四步：引入js

第1种，主题自带搜索模式，主题下的配置文件一般有scripts设置，直接配置路径，一般都有示例如

scripts:
#- //cdn.bootcss.com/zepto/1.2.0/zepto.min.js
#- /js/xoxo.js
  - /js/search.js

第2种，自定义模式，没有scripts配置,就在找主题下的布局文件夹_layout或layout/中，有js.ejs或srcipt.ejs，
文件可以从这里拿：https://github.com/zhzy2017/hexo-search-plugin-snippets
把search.js 放到source\js目录下,引入使用也有不同的方法

步骤五引入css文件

第五步：css设置
有的带搜索的无须操作，没有的从下载hexo-search-plugin-snippets里面拿拷贝到source/css里面，引入即可，

第1种，主题自带搜索模式，一般不需要配置写在公共文件中，如果没有样式可以在主题下的配置文件一般有stylesheets设置，直接配置路径，一般都有示例：

stylesheets:
# - /css/normalize.css
 - //cdn.bootcss.com/pure/1.0.0/pure-min.css
 - /css/xoxo.css

第2种，自定义模式，跟配引入js类似，找一下主题目录ejs或swig文件引入，或者直接用css或less文件放到source/css目录下的某个文件中，这样不需要引文件

2021年1月20日整理自己用的插件

npm install   hexo-generator-feed  --save   #订阅

npm install   hexo-generator-search --save  #搜索

npm install hexo-abbrlink --save  #文章永久链接

npm install   hexo-reading-time --save # 阅读时间

npm i –save hexo-wordcount

npm i hexo-deployer-git --save # git部署



npm install --save hexo-blog-encrypt