SEO相关

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

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

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

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

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

1
2
3
4
5
6
7
8
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), 比如:

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

最后加入新的deployer

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

实现原理

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

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

每天定时提交

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

文章永久地址

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

安装插件

1
npm install hexo-abbrlink --save

修改根目录下的配置文件

1
permalink: posts/:abbrlink.html

在根目录添加如下配置

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

生成的链接示例

1
2
3
4
5
6
7
8
9
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;

1
2
3
4
## npm 安装 
npm install hexo-external-link --save
## yarn 安装
yarn add hexo-external-link

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

1
2
3
4
5
6
7
8
9
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

1
npm i hexo-permalink-pinyin --save

然后在站点根目录设置

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

加载优化

图片懒加载

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

安装

1
npm install hexo-lazyload-image --save

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

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

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

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

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

安装

1
npm install hexo-lazyload-image --save

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

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

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

1
<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. 进入站点根目录下依次执行下面的命令:

    1
    2
    3
    4
    5
    6
    # 全局安装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,并复制以下内容到文件中,有中文注释,可以根据自己需求修改。

    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
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    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根目录执行安装代码:

1
npm install hexo-neat --save

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#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'

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 未配置时才会启用自定义邮件服务

如何使用阿里云邮件推送

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

1.png

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

来到我们的Leancloud

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

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