专栏首页小康的自留地Hexo博客推荐安装的插件

Hexo博客推荐安装的插件

SEO相关

百度主动提交连接(hexo-baidu-url-submit)

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

首先,在Hexo根目录下,安装本插件:

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

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

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), 比如:

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

最后加入新的deployer

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

实现原理

推送功能的实现,分为两部分:

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

每天定时提交

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

文章永久地址

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

安装插件

npm install hexo-abbrlink --save

修改根目录下的配置文件

permalink: posts/:abbrlink.html

在根目录添加如下配置

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

生成的链接示例

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;

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

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

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

npm i hexo-permalink-pinyin --save

然后在站点根目录设置

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

加载优化

图片懒加载

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

安装

npm install hexo-lazyload-image --save

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

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

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

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

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

安装

npm install hexo-lazyload-image --save

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

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

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

<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代码压缩方式

  1. 进入站点根目录下依次执行下面的命令: # 全局安装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
  2. 在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: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理 unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/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函数现在只支持两个参数,分别是任务名和运行任务的函数
  3. 以后的执行方式有两种:
    • 直接在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根目录执行安装代码:

npm install hexo-neat --save

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

#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'

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

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 : 邮件服务提供商,支持 QQ163126Gmail"Yahoo"...... ,全部支持请参考 : Nodemailer Supported services。 如 SMTP_SERVICE 中没有你使用的邮件服务提供商, 也可以进行自定义。 参数配置如下:
    • SMTP_HOST : 邮件服务提供商 SMTP 地址,如 qq : smtp.qq.com此项需要自行查询或询问其服务商
    • SMTP_PORT : 邮件服务提供商 SMTP 端口, 此项需要自行查询或询问其服务商
    • SMTP_SECURE : 是否启用加密, 默认为 true,一般不需要设置,如有特殊请自行配置。 此项需要自行查询或询问其服务商
  • SENDER_NAME : 寄件人名称。
  • TEMPLATE_NAME:邮件模板,目前内置了两款主题,分别为 defaultrainbow

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

如何使用阿里云邮件推送

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

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

来到我们的Leancloud

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Hexo记一次gulp压缩体验

    对于我的博客来说,我的全部静态文件都在GitHub上,并且使用jsdeliver加速引用。因此对我来说真正压缩的其实也就是html。

    Dreamy.TZK
  • 五、express实战-英雄管理系统

    由于我们的上传目录(uploads)没有暴露,因此外部不可以访问到,需要将此目录暴露出去,这样就能解决图片无法加载的问题。

    Dreamy.TZK
  • 前端课程——HTML概述

    CSS 是个缩写形式,其全称为 Cascading Style Sheets,翻译成中文的含义为层叠样式表。

    Dreamy.TZK
  • hexo 博客支持PWA和压缩博文

    目标网站 https://blog.rmiao.top/ PWA yarn add hexo-offline 然后在root config.yml里新增 # o...

    Ryan-Miao
  • Gulp-自动化编译sass和pug文件

    xing.org1^
  • Gulp学习笔记

    csxiaoyao
  • n ../../node_modules/@storybook/channels/dist/index.d.ts:25:9 - error TS1086: An accessor cannot ...

    用户1437675
  • 将 ES6 代码转换成 ES5

    本文介绍用 Gulp 和 Babel 6 来将 ES6 代码转换成 ES5 代码。

    Joel
  • 5G:中国硬核新巨头,也是每一个中国人的机遇

    从2018年末频谱发放,到今年6月发放牌照、如今正式启动商用,我国5G商用推进速度比预期的早了一年。

    华章科技
  • gulp + gulp-better-rollup + rollup 构建 ES6 开发环境

    关于 Gulp 就不过多啰嗦了。常用的 js 模块打包工具主要有 webpack、rollup 和 browserify 三个,Gulp 构建 ES6 开发环境...

    用户6167509

扫码关注云+社区

领取腾讯云代金券