博客更新记录

这个博客写了有一段时间了，基础的功能都有了，现在想折腾折腾别的。所以开一篇，以后更新的内容都放在这里。

0.增加Twikoo

---

之前一直没有评论功能，想加一个，看了里面有很多，但是很多都不好用，最后选择了Twikoo。 这个配置本来就有，就是需要安装下云函数。按照教程来就行，下面贴下教程的地址。 Twikoo 中文文档

1.代码托管至 vercel

---

本来准备做博客的SEO的，因为GitHub反爬，所以有人提出了这个方案。然后就找了一下这个网站，发现很多同学都在这上面托管，访问速度也变快了。基于这个处罚，就开始搞了，现在的代码以及托管到 vercel l了。贴一个教程吧，网上一搜一大堆的。这是其中一个 Github和Vercel建站以及配置DNS 。解析这一块我把DNS换成了提供的，之前用GitHub Pages的时候配置了解析，我觉得得把她停掉，所以我停掉了，后面看看有没有影响。

2.SEO

---

这是一个长期的工作，找找教程慢慢来。目前加入百度收录，也加入了百度统计。

现在博客以记录彤宝的生活为主，所以图片居多，但是彤宝的照片还是不想放到图床上，所以就需要优化图片了。

3.图片压缩

---

最先想到的是压缩图片，这种自己能想到的，别人肯定也有，就不重复造轮子了，这边Hexo静态资源压缩有相关的教程。这边有个坑点，最新的gulp-imagemin已经换成ESM这里面的gulpfile.js就会报错。这边提供下解决方案:

# 安装cnpm
npm install -g cnpm -registry=https://registry.npm.taobao.org
# 安装指定版本的 gulp-imagemin
cnpm install gulp-imagemin@7.0.0 --save-dev

这样就能解决以上问题。运行，图片确实压缩了不少。使用Lighthouse测试了下网站的性能，看到了Serve images in next-gen formats，推荐使用 WebP 和 AVIF能够提供更好的压缩。这不看看 gulp有没有相关的东西。这不有大佬已经试水了WebP 图片优化在 Hexo 上的最佳尝试，参照这边操作了下，确实有点提升。贴一下用的gulpfile.js。

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
const webp = require('gulp-webp');

// 压缩css文件
gulp.task('minify-css', async() =>  {
  return await gulp.src('./public/**/*.css')
  .pipe(minifycss())
  .pipe(gulp.dest('./public'));
});
// 压缩html文件
gulp.task('minify-html', async() =>  {
  return await gulp.src('./public/**/*.html')
  .pipe(htmlclean({
    removeComments: true, //清除HTML注释
    collapseWhitespace: true, //压缩HTML
    collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input checked />
    removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
    removeScriptTypeAttributes: false, //删除<script>的type="text/javascript"
    removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
    minifyJS: true, //压缩页面JS
    minifyCSS: true //压缩页面CSS
}))
  .pipe(htmlmin({
    removeComments: true,
    minifyJS: true,
    minifyCSS: true,
    minifyURLs: true,
  }))
  .pipe(gulp.dest('./public'))
});
// 压缩js文件
gulp.task('minify-js', async() =>  {
    return await gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 压缩 public/demo 目录内图片
gulp.task('minify-images', async() =>  {
    await gulp.src('./public/img/**/*.*')
        .pipe(imagemin({
           optimizationLevel: 6, //类型：Number  默认：3  取值范围：0-7（优化等级）
           progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
           interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
           multipass: false, //类型：Boolean 默认：false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest('./public/img'));
});

gulp.task('image', async() => {
    return await gulp.src('./public/img/**/*.*')
        .pipe(webp())
        .pipe(gulp.dest('./public/img'));
});

// 默认任务 gulp 4.0 适用的方式
gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js', 'image', 'minify-images'));

4.代码拷贝格式消失

---

可以参看 解决Hexo Matery主题代码块复制内容不换行问题

// otherwise the text inside "pre" loses all the line breaks!
if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'CODE') {
    newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
}