butterfly提升访问速度

原先我觉得我博客慢是因为我的源站延迟高，带宽小，因为没备案的缘故使用不了国内的cdn，我也没办法备案，之前也用过vercel，感觉速度还是慢，于是我打开控制台仔细琢磨了一下，发现butterfly有大量的依赖，那些依赖的源都是jsdelivr的，之前确实挺快的，但是现在jsdelivr的备案掉了，国内访问会被指向国外的节点，因为绕路的原因，速度并不好，于是我就去网上找了更改这些依赖链接的方法，这是我更改后的速度

访客看到加载动画结束后的画面大概一秒多，源站是vercel的，还可以部署个qexo随时随地写文章

个别项更改

修改主题配置文件，找到cdn的option这一项改为

option:
    pjax: https://lib.baomitu.com/pjax/0.2.8/pjax.min.js
    lazyload: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vanilla-lazyload/17.3.1/lazyload.iife.min.js
    instantpage: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/instant.page/5.1.0/instantpage.min.js
    fontawesomeV6: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css
    snackbar_css: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.css
    snackbar: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js

`fancybox_css_v4`和`fancybox_v4`需要自己访问jsdelivr下载上传到自己的cdn上格式跟上面一样（老的butterfly写fancybox，我的是4.5的所以写fancybox_v4），接下来就是批量的把其他的jsdelivr链接改为饿了么的cdn（虽然我也不知道为什么饿了么会有这个cdn，网上找到的）

在主题的script文件夹下新建一个js文件，名字随便代码如下

'use strict';
const { filter } = hexo.extend;

// 替换 CDN
filter.register('before_generate', () => {
    const { asset } = hexo.theme.config;
    for (const name in asset) {
        asset[name] = asset[name].replace('//cdn.jsdelivr.net/npm/', '//npm.elemecdn.com/');
        //asset[name] = asset[name].replace('https://cdn.jsdelivr.net/gh/Zfour/Butterfly-double-row-display@1.00/cardlistpost.min.css', 'https://haorblog.adhy.cc/blogimg/cardlistpost.min.css');
    }
    //const { blog_cdn } = hexo.config.butterfly_article_double_row
    //hexo.config.butterfly_article_double_row = blog_cdn.replace('https://cdn.jsdelivr.net/gh/Zfour/Butterfly-double-row-display@1.00/cardlistpost.min.css', 'https://haorblog.adhy.cc/blogimg/cardlistpost.min.css');
}, 11);

//通用注入器
//name 注入插件名称
//item_comfig 注入插件的配置名
//temple_html_text 注入插件的挂载html模板(带有用户自定义的html/js/css)
//js_text 注入js
//css_text 注入css

function common_injector(name, item_comfig, temple_html_text, js_text, css_text) {
    if (item_comfig.enable) {
        if (temple_html_text !== '') {
            var layout_name;
            var layout_type;
            var layout_index = 0;
            if (item_comfig.layout_id) {
                layout_name = item_comfig.layout_id;
                layout_type = 'id';
            } else {
                layout_name = item_comfig.layout.name;
                layout_type = item_comfig.layout.type;
                layout_index = item_comfig.layout.index;
            }
            var get_layout
            if (layout_type === 'class') {
                get_layout = `document.getElementsByClassName('${layout_name}')[${layout_index}]`
            } else if (layout_type === 'id') {
                get_layout = `document.getElementById('${layout_name}')`
            } else {
                get_layout = `document.getElementById('${layout_name}')`
            }
            var user_info_js = `<script data-pjax>function ${name}_injector_config(){
                var parent_div_git = ${get_layout};
                var item_html = '${temple_html_text}';
                console.log('已挂载${name}')
                // parent_div_git.innerHTML=item_html+parent_div_git.innerHTML // 无报错，但不影响使用(支持pjax跳转)
                parent_div_git.insertAdjacentHTML("afterbegin",item_html) // 有报错，但不影响使用(支持pjax跳转)
            }if( ${get_layout} && location.pathname ==='${item_comfig.enable_page}'){

            common_injector_config()
        } </script>`
        }
        hexo.extend.injector.register('body_end', user_info_js, "default");
        if (js_text !== '') {
            hexo.extend.injector.register('body_end', js_text, "default");
        }
        if (css_text !== '') {
            hexo.extend.injector.register('head_end', css_text, "default");
        }
    }
}

hexo.extend.filter.register('after_generate',function() {
    if(hexo.config.butterfly_article_double_row_new.enable){
        var butterfly_article_double_row_comfig = hexo.config.butterfly_article_double_row_new;
        var css_text =`<link rel="stylesheet" href="https://haorblog.adhy.cc/blogimg/cardlistpost.min.css"/>
<style>#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .tags:before {content:"\\A";
  white-space: pre;}#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap > .tags > .article-meta__separator{display:none}</style>
`

        common_injector('butterfly_article_double_row', butterfly_article_double_row_comfig, '', '', css_text)
    }


})

如果你没用`butterfly_article_double_row`的话可以把后面去掉（就是那个让文章并排排列的组件）说白了他就是引入一个css，但是我是在vercel上部署的，还要使用qexo每次部署vercel都会自己安装包，我没办法控制，所以就魔改一下写到这个文件里来改变地址了（里面的链接我已经开防盗链了，不要光想着白嫖🙂 ，只是haorblog.adhy.cc这个开了，剩下的可以放心使用都是大厂的）如果你也用`butterfly_article_double_row`

那么在你主题的根目录下的配置文件里把原来的开关关掉，新增加

butterfly_article_double_row_new:
  enable: true

这个css的文件链接可以在你的node_modules里找到，看hexo开头的就行了，好像是hexo_butterfly_article_double_row，我也忘了🙂 ，找到以后把上面代码中的替换就行了

我的博客：blog.abeginner.cn（现在可能有点慢好久没维护了）