性能优化+自定义图标方法

解决jsdelivr的cdn资源失效

今天一早起来发现打开自己网站用了一分多钟，于是打开Chrome F12排查问题，

image-20221116141809982看来问题出在busuanzi网站访问统计插件和fontawesome的两个字体文件上

我们首先解决报错的问题，自定义的ZhuZiAWan字体文件资源貌似失效了，查了下，是jsdelivr的cdn资源地址出了问题image-20221116142113315

报错：Package size exceeded the configured limit of 50 MB.

查了一下，不能怪人家jsdelivr，是github上资源路径被我改了（我在本地多建了个文件夹放css和js以及字体文件，Git push上去忘了在网站上同步改资源路径了），在定义字体资源路径的custom.css上进行修改

1
2
3
4
5
6
7
8
@font-face {
  font-family: 'tzy';
  /* 字体名自定义即可 */
  /* 原地址src: url('https://cdn.jsdelivr.net/gh/zoulicheng/blog_source/ZhuZiAWan.ttf'); 修改如下*/
  src: url('https://cdn.jsdelivr.net/gh/zoulicheng/blog_source/css/ZhuZiAWan.ttf');
  /* 字体文件路径 */
  font-display: swap;
}

然后再把修改好后的css文件上传到自己的cdn云上即可。

解决hexo打开fontawesome的图标过慢以及自定义图标

方法1 使用其他的图标来源

hexo+butterfly默认的图标来源就是fontawesome，但是这个网站容易被墙，导致图标资源加载半天出不来，因此使用别的国内的图标，百度了下阿里的图标就不错，添加方法参考

打开iconfont的网站，点击导航栏的人像图标，会跳出注册界面，按要求注册账号。

注册并把需要的图标添加到自己的项目，并生成链接

image-20221116181403915

在_config.butterfly.yml文件中找到inject，插入如下代码，注意 custom2.css 要替换成你自己的css的地址，不要用我的否则可能会失败

1
2
3
4
5
6
7
8
inject:
  head:
  	# 注意下面的链接替换成自己新建的custom.css文件的地址（里面的内容可以为空）
    - <link rel="stylesheet" href="https://zoulicheng.oss-cn-shanghai.aliyuncs.com/cssJs/custom2.css" media="defer" onload="this.media='all'">
    # 下面的链接替换成iconfont生成的Font class链接
    - <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3774615_mv5ui8n9elo.css">
    # - <link rel="stylesheet" href="/css/custom.css" >
    # 注意href替换成自己的cdn和iconfont生成的链接

接下来就可以在_config.butterfly.yml自由修改图标了

1
2
3
4
5
6
7
8
9
10
menu:
  首页: / || iconfont icon-shouye
  时间轴: /archives/ || iconfont icon-shijianzhou
  标签: /tags/ || iconfont icon-24gf-tags2
  分类: /categories/ || iconfont icon-fenlei
  资源List||iconfont fa-listList||hide::
    音乐: /music/ || iconfont icon-yinlemusic215
    电影: /movies/ || iconfont icon-dianyingpiao
  友链: /link/ || iconfont icon-lianjie
  关于: /about/ || iconfont icon-dog

但是有些图标不能在_config.butterfly.yml里修改，因此要在自定义的custom.css里修改

以搜索图标为例子，在custom.css里加入如下代码

1
2
3
4
5
6
7
8
9
10
11
.fa-search{
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 这是iconfont你自己选的图标的代码 */
.fa-search:before {
  content: "\e60d";
}

修改的效果如下图，这个搜索图标是自己在iconfont里找的，长得跟原版还是很像的

image-20221116205106669

其他想改的图标同上方法

方法2 更换cdn

这个方法比较省事，直接在_config.butterfly.yml文件中更换cdn源，这里用的是张洪大佬的cdn源，感谢！

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
# Custom format
# For example: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
custom_format: 

option:
  # main_css:
  # main:
  # utils:
  # translate:
  # local_search:
  # algolia_js:
  # algolia_search_v4:
  # instantsearch_v4:
  # pjax:
  # gitalk:
  # gitalk_css:
  # blueimp_md5:
  # valine:
  # disqusjs:
  # disqusjs_css:
  # twikoo:
  # waline_js:
  # waline_css:
  # sharejs:
  # sharejs_css:
  # mathjax:
  # katex:
  # katex_copytex:
  # mermaid:
  # canvas_ribbon:
  # canvas_fluttering_ribbon:
  # canvas_nest:
  # lazyload:
  # instantpage:
  # typed:
  # pangu:
  # fancybox_css_v4:
  # fancybox_v4:
  # medium_zoom:
  # snackbar_css:
  # snackbar:
  # activate_power_mode:
  # fireworks:
  # click_heart:
  # ClickShowText:
  fontawesomeV6: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css
  # flickr_justified_gallery_js:
  # flickr_justified_gallery_css:
  # aplayer_css:
  # aplayer_js:
  # meting_js:
  # prismjs_js:
  # prismjs_lineNumber_js:
  # prismjs_autoloader:
  # artalk_js:
  # artalk_css:

busuanzi访问过慢

我直接把busuanzi给关了，目前还在寻找更好的网站访问统计替代

解决阿里云RSS不能使用字体文件URL的问题

当我们在css里使用的字体url是阿里云RSS上储存的字体文件时，会出现跨域访问的问题，浏览器汇报如下错误

Access to font at ‘https://zoulicheng.oss-cn-shanghai.aliyuncs.com/cssJs/ZhuZiAWan.ttf’ from origin ‘http://localhost:4000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

image-20221123202917596

这需要我们在阿里云RSS里进行设置，打开 对象存储/bucket列表/fdsfdf/跨域设置

image-20221123203406014

然后就能正常加载字体文件了

image-20221123203608463