0%

Hexo 博客进阶

文章简介

本文介绍 Hexo 博客的一些进阶操作。

  • 解决 Github Pages 不被百度抓取的问题;
  • 使用 gulp 压缩资源,实现访问加速。
  • 在博客中添加音频和视频;

    Github Pages 不被百度抓取的方法

    并通过域名 CNAME 实现国内外分流,

    Coding Pages

    CODING 静态网站服务 - CODING 帮助中心

私有的 OSS

以阿里云oss为例
开通子目录首页

1
npm install --save hexo-deployer-oss

_config.yml 配置

1
2
3
4
5
6
deploy:
type: oss
accessKeyId: <your accessKeyId>
accessKeySecret: <your accessKeySecret>
bucket: <your bucket>
region: <your region>

其中 region 以北京地区的 oss 为例填 oss-cn-beijing

使用 gulp 压缩资源

使用 gulp 压缩资源,提高访问速度。

1
2
npm install gulp-cli -g
npm install gulp gulp-htmlclean gulp-htmlmin gulp-imagemin gulp-clean-css gulp-uglify --save-dev

项目根目录新建gulpfile.babel.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
import * as gulp from 'gulp'
import cleancss from 'gulp-clean-css'
import uglify from 'gulp-uglify-es'
import htmlmin from 'gulp-htmlmin'
import htmlclean from 'gulp-htmlclean'
import imagemin from 'gulp-imagemin'
import babel from 'gulp-babel'

gulp.task('minify-html', () => {
return gulp.src('./public/**/*.html')
.pipe(htmlclean({
protect: /<\!--%fooTemplate\b.*?%-->/g,
edit: (html) => { return html.replace(/\begg(s?)\b/ig, 'omelet$1'); }
}))
.pipe(htmlmin({
removeComments: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
minifyJS: true,
minifyCSS: true,
}))
.on('error', (err) => {
console.log('html Error!', err.message);
this.end();
})
.pipe(gulp.dest('./public'))
});
gulp.task('clean-css', () => {
return gulp.src('./public/**/*.css')
.pipe(cleancss())
.pipe(gulp.dest('./public'));
});
gulp.task('minify-js', () => {
return gulp.src('./public/js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
gulp.task('minify-images', () => {
return gulp.src('./public/images/**/*.*')
.pipe(imagemin())
.pipe(gulp.dest('./public/images'))
});
gulp.task('default', gulp.parallel('minify-html', 'clean-css', 'minify-js', 'minify-images', (done) => {
done();
}));

由于是 es6 语法, 需要使用 babel 转译。

1
npm install --save-dev gulp-babel @babel/register @babel/preset-env @babel/core

创建.babel.json 文件,添加内容如下:

1
2
3
4
5
6
{
"presets": [
"@babel/env"
],
"plugins": []
}

终端执行如下命令即可:

1
hexo g && gulp

如有报错,可以尝试删除node_modules文件,然后重新执行npm install

在博客中插入音频与视频

音频

更快捷的方案一

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=430 height=86 src="XXX"></iframe>

更强大的方案二(Github

视频

更快捷的标签方式

iframe 将web页嵌入到另一个网页

1
<iframe width="854" height="480" src="//player.bilibili.com/player.html?aid=51918958&cid=90895494&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

更强大的 hexo-tag-dplayer 插件

1
npm install hexo-tag-dplayer --save

PDF

1
2
3
4
<object data="mypdf.pdf" type="application/pdf"
width="800" height="1200" typemustmatch>
<p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file.</a></p>
</object>

参考资料

从对象到iframe - 其他嵌入技术 - 学习 Web 开发 | MDN
使用 Gulp 压缩 Hexo | 栾铸显的博客
引入gulp压缩整站资源进一步提高写作效率 - 说IT

欢迎关注我的其它发布渠道