Hexo博客推荐安装的插件

SEO相关

百度主动提交连接（hexo-baidu-url-submit）

地址：https://github.com/huiwang/hexo-baidu-url-submit

首先，在Hexo根目录下，安装本插件：

代码语言：javascript复制

npm install hexo-baidu-url-submit --save

然后，同样在根目录下，把以下内容配置到_config.yml文件中:

代码语言：javascript复制

baidu_url_submit:
  count: 1000 ## 提交最新的一个链接
  host: alili.tech ## 在百度站长平台中注册的域名
  token: xxxxx ## 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里
  xz_appid: 'xxxxxx' ## 你的熊掌号 appid
  xz_token: 'xxxxxx' ## 你的熊掌号 token
  xz_count: 10 ## 从所有的提交的数据当中选取最新的10条,该数量跟你的熊掌号而定

其次，记得查看_config.ym文件中url的值，必须包含是百度站长平台注册的域名（一般有www），比如:

代码语言：javascript复制

# URL
url: http://www.antmoe.com
root: /
permalink: :year/:month/:day/:title/

最后加入新的deployer

代码语言：javascript复制

deploy:
- type: baidu_url_submitter # 百度
- type: baidu_xz_url_submitter # 百度熊掌号

实现原理

推送功能的实现，分为两部分：

新链接的产生， hexo generate 会产生一个文本文件，里面包含最新的链接
新链接的提交， hexo deploy 会从上述文件中读取链接，提交至百度搜索引擎

每天定时提交

关于这部分，我在网上没有找到合适的插件，于是利用Leancloud开发了一款扩展工具。具体方法请参照这篇文章

文章永久地址

地址:https://github.com/rozbo/hexo-abbrlink

安装插件

代码语言：javascript复制

npm install hexo-abbrlink --save

修改根目录下的配置文件

代码语言：javascript复制

permalink: posts/:abbrlink.html

在根目录添加如下配置

代码语言：javascript复制

abbrlink:
  alg: crc32  #算法 crc16(default) and crc32
  rep: hex    #进制 dec(default) and hex 十进制和十六进制，默认为10进制。

生成的链接示例

代码语言：javascript复制

crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html

外链跳转插件

地址：https://github.com/hvnobug/hexo-external-link

hexo-external-link是一个跳转外链相关插件。自动为所有html文件中外链的a标签生成对应的属性。比如设置target=’_blank’, rel=’external nofollow noopener noreferrer’ 告诉搜索引擎这是外部链接,不要将该链接计入权重。同时自动生成外链跳转页面,默认在根目录下 go.html;

代码语言：javascript复制

## npm 安装 
npm install hexo-external-link --save 
## yarn 安装 
yarn add hexo-external-link

然后在站点根目录的设置中设置如下

代码语言：javascript复制

hexo_external_link: 
  enable: true 
  enable_base64_encode: true 
  url_param_name: 'u' 
  html_file_name: 'go.html' 
  target_blank: true 
  link_rel: 'external nofollow noopener noreferrer' 
  domain: 'https://www.antmoe.com/' # 如果开启了防盗链 
  safety_chain: true

enable - 是否开启hexo_external_link插件 - 默认 false
enable_base64_encode - 是否对跳转url使用base64编码 - 默认 fasle
url_param_name - url参数名,在跳转到外链传递给html_file_name的参数名 - 默认 ‘u’
html_file_name - 跳转到外链的页面文件路径 - 默认 ‘go.html’
target_blank - 是否为外链的a标签添加target='_blank' - 默认 true
link_rel - 设置外链的a标签的rel属性 - 默认 ‘external nofollow noopener noreferrer’
domain - 如果开启了防盗链,除了 localhost 和 domain 之外调用会跳到主页,同时也是判断链接是否为外链的依据 - 默认 window.location.host
safety_chain - go.html 为了防止外链盗用对域名进行的判断 - 默认 false

中文转拼音

地址https://github.com/viko16/hexo-permalink-pinyin

代码语言：javascript复制

npm i hexo-permalink-pinyin --save

然后在站点根目录设置

代码语言：javascript复制

permalink_pinyin:
  enable: true #是否开启
  separator: '-'   # default: '-'链接符

加载优化

图片懒加载

地址：https://github.com/Troy-Yang/hexo-lazyload-image

安装

代码语言：javascript复制

npm install hexo-lazyload-image --save

之后在站点配置文件下添加下面的代码：

代码语言：javascript复制

lazyload: 
	enable: true # 是否开启图片懒加载 
	onlypost: false # 是否只对文章的图片做懒加载 
	loadingImg: /medias/loading.gif #显示的图片

如果在markdown或html中指定img标记的属性，也可以禁用延迟进程

代码语言：javascript复制

<img no-lazy src="abc.png" />

这里推荐给大家机长图片最为候选哦！。

安装

代码语言：javascript复制

npm install hexo-lazyload-image --save

之后在站点配置文件下添加下面的代码：

代码语言：javascript复制

lazyload: 
	enable: true # 是否开启图片懒加载 
	onlypost: false # 是否只对文章的图片做懒加载 
	loadingImg: medias/loading.gif

如果在markdown或html中指定img标记的属性，也可以禁用延迟进程

代码语言：javascript复制

<img no-lazy src="abc.png" />

https://ws1.sinaimg.cn/large/832afe33ly1gbh4a43va4g209g09gmy4.gif https://ws1.sinaimg.cn/large/832afe33ly1gbh4a49p3xg20r00lc776.gif https://ws1.sinaimg.cn/large/832afe33ly1gbh4a44p6xg20b40b4weq.gif https://ws1.sinaimg.cn/large/832afe33ly1gbh4a444wwg20ee0d4gmz.gif https://ws1.sinaimg.cn/large/832afe33ly1gbh4a44yb4g20m80godif.gif

代码压缩

代码压缩这里有两种方式第一种通过gulp代码压缩方式

进入站点根目录下依次执行下面的命令： # 全局安装gulp模块 npm install gulp -g # 安装各种小功能模块执行这步的时候，可能会提示权限的问题，最好以管理员模式执行 npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save # 额外的功能模块 npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save
在Hexo根目录新建文件 gulp.js，并复制以下内容到文件中，有中文注释，可以根据自己需求修改。 var gulp = require("gulp"); var debug = require("gulp-debug"); var cleancss = require("gulp-clean-css"); //css压缩组件 var uglify = require("gulp-uglify"); //js压缩组件 var htmlmin = require("gulp-htmlmin"); //html压缩组件 var htmlclean = require("gulp-htmlclean"); //html清理组件 var imagemin = require("gulp-imagemin"); //图片压缩组件 var changed = require("gulp-changed"); //文件更改校验组件 var gulpif = require("gulp-if"); //任务帮助调用组件 var plumber = require("gulp-plumber"); //容错组件（发生错误不跳出任务，并报出错误内容） var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件) var isDebug = true; //是否调试显示编译通过的文件 var gulpBabel = require("gulp-babel"); var es2015Preset = require("babel-preset-es2015"); var del = require("del"); var Hexo = require("hexo"); var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象 // 清除public文件夹 gulp.task("clean", function () { return del(["public/**/*"]); }); // 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return // 创建静态页面（等同 hexo generate） gulp.task("generate", function () { return hexo.init().then(function () { return hexo .call("generate", { watch: false }) .then(function () { return hexo.exit(); }) .catch(function (err) { return hexo.exit(err); }); }); }); // 启动Hexo服务器 gulp.task("server", function () { return hexo .init() .then(function () { return hexo.call("server", {}); }) .catch(function (err) { console.log(err); }); }); // 部署到服务器 gulp.task("deploy", function () { return hexo.init().then(function () { return hexo .call("deploy", { watch: false }) .then(function () { return hexo.exit(); }) .catch(function (err) { return hexo.exit(err); }); }); }); // 压缩public目录下的js文件 gulp.task("compressJs", function () { return gulp .src(["./public/**/*.js", "!./public/libs/**"]) //排除的js .pipe(gulpif(!isScriptAll, changed("./public"))) .pipe(gulpif(isDebug, debug({ title: "Compress JS:" }))) .pipe(plumber()) .pipe( gulpBabel({ presets: [es2015Preset] // es5检查机制 }) ) .pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩 .pipe(gulp.dest("./public")); //输出到目标目录 }); // 压缩public目录下的css文件 gulp.task("compressCss", function () { var option = { rebase: false, //advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）] compatibility: "ie7" //保留ie7及以下兼容写法类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9 兼容模式] //keepBreaks: true, //类型：Boolean 默认：false [是否保留换行] //keepSpecialComments: '*' //保留所有特殊前缀当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀 }; return gulp .src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css .pipe(gulpif(!isScriptAll, changed("./public"))) .pipe(gulpif(isDebug, debug({ title: "Compress CSS:" }))) .pipe(plumber()) .pipe(cleancss(option)) .pipe(gulp.dest("./public")); }); // 压缩public目录下的html文件 gulp.task("compressHtml", function () { var cleanOptions = { protect: //g, //忽略处理 unprotect: /<script [^>]*btype="text/x-handlebars-template"[sS] ?</script>/gi //特殊处理 }; var minOption = { collapseWhitespace: true, //压缩HTML collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input /> removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input /> removeScriptTypeAttributes: true, //删除<script>的type="text/javascript" removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css" removeComments: true, //清除HTML注释 minifyJS: true, //压缩页面JS minifyCSS: true, //压缩页面CSS minifyURLs: true //替换页面URL }; return gulp .src("./public/**/*.html") .pipe(gulpif(isDebug, debug({ title: "Compress HTML:" }))) .pipe(plumber()) .pipe(htmlclean(cleanOptions)) .pipe(htmlmin(minOption)) .pipe(gulp.dest("./public")); }); // 压缩 public/medias 目录内图片 gulp.task("compressImage", function () { var option = { optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级） progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片 interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染 multipass: false //类型：Boolean 默认：false 多次优化svg直到完全优化 }; return gulp .src("./public/medias/**/*.*") .pipe(gulpif(!isScriptAll, changed("./public/medias"))) .pipe(gulpif(isDebug, debug({ title: "Compress Images:" }))) .pipe(plumber()) .pipe(imagemin(option)) .pipe(gulp.dest("./public")); }); // 执行顺序：清除public目录 -> 产生原始博客内容 -> 执行压缩混淆 -> 部署到服务器 gulp.task( "build", gulp.series( "clean", "generate", "compressHtml", "compressCss", "compressJs", "compressImage", gulp.parallel("deploy") ) ); // 默认任务 gulp.task( "default", gulp.series( "clean", "generate", gulp.parallel("compressHtml", "compressCss", "compressJs","compressImage") ) ); //Gulp4最大的一个改变就是gulp.task函数现在只支持两个参数，分别是任务名和运行任务的函数
以后的执行方式有两种：
- 直接在Hexo根目录执行 gulp或者 gulp default ，这个命令相当于 hexo cl&&hexo g 并且再把代码和图片压缩。
- 在Hexo根目录执行 gulp build ，这个命令与第1种相比是：在最后又加了个 hexo d ，等于说生成、压缩文件后又帮你自动部署了。
值得注意的是：这个加入了图片压缩，如果不想用图片压缩可以把第154行的 "compressImage", 和第165行的 ,"compressImage" 去掉即可

第二种方法通过插件完成，也是我目前使用的方法

地址：https://github.com/rozbo/hexo-neat

但是这个插件是有Bug的：

压缩 md 文件会使 markdown 语法的代码块消失
会删除全角空格

Hexo根目录执行安装代码：

代码语言：javascript复制

npm install hexo-neat --save

在Hexo配置文件_config.yml 末尾加入以下配置(此配置仅针对Matery主题)：

代码语言：javascript复制

#hexo-neat 优化提速插件（去掉HTML、css、js的blank字符）
neat_enable: true
neat_html:
  enable: true
  exclude:
    - '**/*.md'
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/**/instantpage.js'
    - '**/matery.js'

当然了，如果你是其他主题可以使用网上的通用配置，但我没有尝试过

代码语言：javascript复制

neat_enable: true
neat_html:
  enable: true
  exclude:
neat_css:
  enable: true
  exclude:
    - '*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

扩展优化

邮件通知

地址：https://github.com/zhaojun1998/Valine-Admin

作者博客：http://www.zhaojun.im/hexo-valine-admin/

相关配置操作请查看作者博客。这里只说说自定义环境变量及使用阿里云邮件推送

SITE_NAME : 网站名称。
SITE_URL : 网站地址, 最后不要加 / 。
SMTP_USER : SMTP 服务用户名，一般为邮箱地址。
SMTP_PASS : SMTP 密码，一般为授权码，而不是邮箱的登陆密码，请自行查询对应邮件服务商的获取方式
SMTP_SERVICE : 邮件服务提供商，支持 QQ、163、126、Gmail、"Yahoo"、...... ，全部支持请参考 : Nodemailer Supported services。如 SMTP_SERVICE 中没有你使用的邮件服务提供商, 也可以进行自定义。参数配置如下:
- SMTP_HOST : 邮件服务提供商 SMTP 地址，如 qq : smtp.qq.com，此项需要自行查询或询问其服务商。
- SMTP_PORT : 邮件服务提供商 SMTP 端口, 此项需要自行查询或询问其服务商。
- SMTP_SECURE : 是否启用加密, 默认为 true，一般不需要设置，如有特殊请自行配置。 此项需要自行查询或询问其服务商。
SENDER_NAME : 寄件人名称。
TEMPLATE_NAME：邮件模板，目前内置了两款主题，分别为 default 与 rainbow

注: 配置自定义邮件服务器的话，请不要同时配置 SMTP_SERVICE。当 SMTP_SERVICE 未配置时才会启用自定义邮件服务

如何使用阿里云邮件推送

首先在阿里云创建好发信地址类型选择：触发邮件

发信地址随便写，然后设置好SMTP密码。

来到我们的Leancloud

按照框框圈的设置好自己的配置即可

代码语言：javascript复制

SMTP_USER:刚刚创建的发信地址
SMTP_PASS：刚刚设置的STMP密码
SMTP_HOST：使用阿里云提供的即可 smtpdm.aliyun.com
SMTP_PORT：我使用的https协议端口465，可以自行选择
SMTP_SECURE：如果没有使用https可以改为false

gulp javascript html tcp/ip 文件存储

0 人点赞