hexo美化（三）进阶：异步加载脚本，加快网站访问

发表于 更新于 分类于 Waline： 本文字数： 899
本篇继续讲述了hexo框架的博客美化，包含合并darkmode切换模式的动态背景异步加载和首页html优化小窍门

基础部分：三分钟快速搭建个性化博客。

第一部分：hexo-Next8博客搭建、美化（darkmode、waline等）

第二部分：hexoNext美化(二)

上一篇我们谈到了如何在网站中引入动态背景、darkmode JS，这一篇笔记中博主将会将它们统一起来同时引入博客中。

网上目前有很多教程，外部脚本加载都放在布局文件里面，实际上hexo并不会异步加载，堵塞主进程。而我们如果不想过多地动模板文件（因为hexo和主题更新换代很快，需要考虑到迁移问题），就可以通过自己脚本里面promise异步加载的方式，提高网页的加载速度。

例如，我的网站需要加载darkmodeJS一个自己写好的toggle按钮和一个动态背景，并且需要调用一些第三方库。因此我们在promise加载脚本完成之后再执行需要的操作。

本篇内容：

异步加载动态背景

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
function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}
Promise.all([
  loadScript('https://cdnjs.cloudflare.com/ajax/libs/Darkmode.js/1.5.7/darkmode-js.min.js'),
  loadScript('https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js'),
]).then(() => {
  return loadScript('https://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.24/vanta.globe.min.js')
})
  .then(() => {
    const globe = VANTA.GLOBE({
    el: '#background',
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.00,
    minWidth: 200.00,
    scale: 1.00,
    scaleMobile: 1.00,
    color: 0xeff6347,
    color2: 0xefb9325,
    size: 1,
    backgroundAlpha: 0.00
    })  
  const backgroundElement = document.querySelector('#background');
  backgroundElement.style.opcaity = 1;
  function changeColor() {
    if (darkmode.isActivated()){
    globe.setOptions({
    color: 0xfb9325,
    color2: 0xffffff,
    })}
    else {
    globe.setOptions({
    color: 0xeff6347,
    color2: 0xefb9325,
    })}}  
  const darkmode =  new Darkmode({
  mixColor: 'transparent', // default: '#fff'
  backgroundColor: 'transparent',  // default: '#fff'
  });
  if(window.matchMedia('(prefers-color-scheme: dark)').matches && !darkmode.isActivated()) darkmode.toggle();
  const checkbox = document.querySelector('.daynight input');
  if (darkmode.isActivated())checkbox.checked = true;
  else checkbox.checked = false;
  changeColor();

  checkbox.addEventListener('change', function() {
    darkmode.toggle();
    changeColor();
  });

  })
  .catch(err => console.error('Failed to load scripts', err));

  document.addEventListener('DOMContentLoaded', function() {
    const daynightDiv = document.querySelector('.daynight');
    daynightDiv.style.opacity = 1;
  });

这样我们只用在模板文件里面引入对于的div元素和该脚本即可。

你可能已经注意到了，在这两个元素的加载事件还额外添加了 style.opacity = 1。这是因为博主观察到hexo的各个元素在加载完成时都不是直接出现的，而是有一个渐变。我们自己的元素直接直愣愣地出现，给人感觉很突兀。因此，我们可以在自定义的 styles.styl文件中添加对于自定义元素的默认隐藏和渐变出现效果：

1
2
3
#background,.daynight
  opacity: 0;
  transition: opacity 0.5s ease-in;

而在 onload事件中，添加 style.opacity = 1;这样其出现就会带有过渡效果了。

或者使用 animateJS库（已经引入过），像这样，也是一样的效果！

1
2
backgroundElement.classList.add('animated');  
backgroundElement.classList.add('fadeIn');

说起来，因为需要自定义css样式，失去了darkmode的切换过渡，本来想写一个过渡加载白天黑夜模式的动画的，但是始终不能遮挡元素、又要让css样式自然显现，还是要归并到差值运算，本末倒置，遂作罢了。

为你的站点添加目录、添加阅读更多按钮

文章太长的话，html爬虫软件会爬不到内容~博主也是才知道这个教训，由此我们通过生成目录、使用阅读全文按钮的方式，仅在博客首页展示大纲方便阅读，有效减少网页首页内容！

使用阅读更多（摘要）
官方推荐使用这种方式，可以让你在觉得适合的地方终止。

1
<!-- more-->

生成目录需要hexo-renderer-markdown-it-plus插件，因此我们需要卸载掉原本用于渲染的hexo-renderer-marked插件，并安装hexo-renderer-markdown-it-plus，它支持很多插件拓展并支持目录生成。

1
2
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it-plus --save

在_config中填入配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
markdown_it_plus:
    highlight: true
    html: true
    xhtmlOut: true
    breaks: true
    langPrefix:
    linkify: true
    typographer:
    quotes: “”‘’
    plugins:
        - plugin:
            name: markdown-it-mark
            enable: false

然后在你想要插入目录的地方使用@[TOC]即可！

你同样可以在vscode里安装markdown all in one插件生成，道理是一样的，也会遇到一样的问题，它不会用特殊的类标识，很麻烦。但hexo-renderer-markdown-it-plus真的有点年久失修了，各有各的好处吧。

开启mermaid

根据官方说明，在_config.yml中加入：

1
2
3
4
highlight:
  ...
  exclude_languages:
    - mermaid

并在next\_config.yml设置mermaid.enable=true。

hexo-optimize插件优化页面加载速度

下载插件npm install hexo-optimize --save，并在_config.yml设置：

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
filter_optimize:
  enable: true
  # static resource versioning
  versioning: false
  css:
    # minify all css files
    minify: true
    excludes:
    # use preload to load css elements dynamically
    delivery:
      - '@fortawesome/fontawesome-free'
      - 'fonts.loli.net'
    # make specific css content inline into the html page
    inlines:
      # support full path only
      - css/main.css
  js:
    # minify all js files
    minify: true
    excludes:
    # remove the comments in each of the js files
    remove_comments: false
  html:
    # minify all html files
    minify: true
    excludes:
  # set the priority of this plugin,
  # lower means it will be executed first, default of Hexo is 10
  priority: 8

开发中的 NODE_ENV 可以禁用此插件以增强 hexo generate ：

export NODE_ENV=development

作者展示的案例说是增强了7%，我一会试试😄