說真的，這個操作有點復雜，我也是花了一天時間才搞定，大部分時間都消耗在font-spider的調試上面了。

?

根目錄路徑：

/home/appleyuchi/桌面/Github博客/整體測試/blog_yuchi-12/

?

1.新建

/home/appleyuchi/桌面/Github博客/整體測試/blog_yuchi-12/CDN

CDN下面確保有這些文件：

(python3.6) appleyuchi@ubuntu:CDN$ tree . ├── animate.min.css ├── clipboard.min.js ├── font-awesome.min.css ├── fonts │?? ├── KaTeX_AMS-Regular.eot │?? ├── KaTeX_AMS-Regular.ttf │?? ├── KaTeX_AMS-Regular.woff │?? ├── KaTeX_AMS-Regular.woff2 │?? ├── KaTeX_Caligraphic-Bold.eot │?? ├── KaTeX_Caligraphic-Bold.ttf │?? ├── KaTeX_Caligraphic-Bold.woff │?? ├── KaTeX_Caligraphic-Bold.woff2 │?? ├── KaTeX_Caligraphic-Regular.eot │?? ├── KaTeX_Caligraphic-Regular.ttf │?? ├── KaTeX_Caligraphic-Regular.woff │?? ├── KaTeX_Caligraphic-Regular.woff2 │?? ├── KaTeX_Fraktur-Bold.eot │?? ├── KaTeX_Fraktur-Bold.ttf │?? ├── KaTeX_Fraktur-Bold.woff │?? ├── KaTeX_Fraktur-Bold.woff2 │?? ├── KaTeX_Fraktur-Regular.eot │?? ├── KaTeX_Fraktur-Regular.ttf │?? ├── KaTeX_Fraktur-Regular.woff │?? ├── KaTeX_Fraktur-Regular.woff2 │?? ├── KaTeX_Main-Bold.eot │?? ├── KaTeX_Main-BoldItalic.ttf │?? ├── KaTeX_Main-BoldItalic.woff │?? ├── KaTeX_Main-BoldItalic.woff2 │?? ├── KaTeX_Main-Bold.ttf │?? ├── KaTeX_Main-Bold.woff │?? ├── KaTeX_Main-Bold.woff2 │?? ├── KaTeX_Main-Italic.eot │?? ├── KaTeX_Main-Italic.ttf │?? ├── KaTeX_Main-Italic.woff │?? ├── KaTeX_Main-Italic.woff2 │?? ├── KaTeX_Main-Regular.eot │?? ├── KaTeX_Main-Regular.ttf │?? ├── KaTeX_Main-Regular.woff │?? ├── KaTeX_Main-Regular.woff2 │?? ├── KaTeX_Math-BoldItalic.eot │?? ├── KaTeX_Math-BoldItalic.ttf │?? ├── KaTeX_Math-BoldItalic.woff │?? ├── KaTeX_Math-BoldItalic.woff2 │?? ├── KaTeX_Math-Italic.eot │?? ├── KaTeX_Math-Italic.ttf │?? ├── KaTeX_Math-Italic.woff │?? ├── KaTeX_Math-Italic.woff2 │?? ├── KaTeX_Math-Regular.eot │?? ├── KaTeX_Math-Regular.ttf │?? ├── KaTeX_Math-Regular.woff │?? ├── KaTeX_Math-Regular.woff2 │?? ├── KaTeX_SansSerif-Bold.eot │?? ├── KaTeX_SansSerif-Bold.ttf │?? ├── KaTeX_SansSerif-Bold.woff │?? ├── KaTeX_SansSerif-Bold.woff2 │?? ├── KaTeX_SansSerif-Italic.eot │?? ├── KaTeX_SansSerif-Italic.ttf │?? ├── KaTeX_SansSerif-Italic.woff │?? ├── KaTeX_SansSerif-Italic.woff2 │?? ├── KaTeX_SansSerif-Regular.eot │?? ├── KaTeX_SansSerif-Regular.ttf │?? ├── KaTeX_SansSerif-Regular.woff │?? ├── KaTeX_SansSerif-Regular.woff2 │?? ├── KaTeX_Script-Regular.eot │?? ├── KaTeX_Script-Regular.ttf │?? ├── KaTeX_Script-Regular.woff │?? ├── KaTeX_Script-Regular.woff2 │?? ├── KaTeX_Size1-Regular.eot │?? ├── KaTeX_Size1-Regular.ttf │?? ├── KaTeX_Size1-Regular.woff │?? ├── KaTeX_Size1-Regular.woff2 │?? ├── KaTeX_Size2-Regular.eot │?? ├── KaTeX_Size2-Regular.ttf │?? ├── KaTeX_Size2-Regular.woff │?? ├── KaTeX_Size2-Regular.woff2 │?? ├── KaTeX_Size3-Regular.eot │?? ├── KaTeX_Size3-Regular.ttf │?? ├── KaTeX_Size3-Regular.woff │?? ├── KaTeX_Size3-Regular.woff2 │?? ├── KaTeX_Size4-Regular.eot │?? ├── KaTeX_Size4-Regular.ttf │?? ├── KaTeX_Size4-Regular.woff │?? ├── KaTeX_Size4-Regular.woff2 │?? ├── KaTeX_Typewriter-Regular.eot │?? ├── KaTeX_Typewriter-Regular.ttf │?? ├── KaTeX_Typewriter-Regular.woff │?? └── KaTeX_Typewriter-Regular.woff2 ├── jquery.fancybox.min.css ├── jquery.fancybox.min.js ├── jquery.min.js ├── jquery-ui.min.css ├── jquery-ui.min.js ├── katex.min.css ├── MathJax.js ├── pace.min.js ├── pace-theme-minimal.css ├── require.min.js ├── Roboto-Regular │?? ├── Roboto-Regular.eot │?? ├── Roboto-Regular.svg │?? ├── Roboto-Regular.ttf │?? ├── Roboto-Regular.woff │?? └── Roboto-Regular.woff2 └── scrollreveal.min.js

其中KaTex是數學符號顯示引擎。

Roboto-Regular.xxx是自定義字體,在[3]中上傳自己喜歡的ttf文件后就可以生成一套了。，確保上面所有文件備齊

?

在根目錄下面準備好兩個文件，

_config_origin.yml(與/themes/yelee下面的_config.yml完全一致)

_config_spider.yml

上面兩個都拷貝自/themes/yelee下面的_config.yml，

?

_config_spider.yml中的

CDN:jquery: https://cdn.bootcss.com/jquery/2.2.4/jquery.min.jsrequire: https://cdn.bootcss.com/require.js/2.2.0/require.min.jsfontawesome: https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.cssfancybox_js: https://cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.jsfancybox_css: https://cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.cssanimate_css: https://cdn.bootcss.com/animate.css/3.5.1/animate.min.cssjquery_ui_js: https://cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.jsjquery_ui_css: https://cdn.bootcss.com/jqueryui/1.10.4/css/jquery-ui.min.csspace_js: https://cdn.bootcss.com/pace/1.0.2/pace.min.jsclipboard: https://cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js# mathjax: https://cdn.bootcss.com/mathjax/2.6.1/MathJax.jsscrollreveal: https://cdn.bootcss.com/scrollReveal.js/3.1.4/scrollreveal.min.js

全部改為：

CDN:jquery: /home/appleyuchi/桌面/Github博客/整體測試/blog_yuchi-12/CDN/jquery.min.jsrequire: /home/appleyuchi/桌面/Github博客/整體測試/blog_yuchi-12/CDN/require.min.jsfontawesome: /home/appleyuchi/桌面/Github博客/整體測試/blog_yuchi-12/CDN/font-awesome.min.cssfancybox_js: /home/appleyuchi/桌面/Github博客/整體測試/blog_yuchi-12/CDN/jquery.fancybox.min.jsfancybox_css: /home/appleyuchi/桌面/Github博客/整體測試/blog_yuchi-12/CDN/jquery.fancybox.min.cssanimate_css: /home/appleyuchi/桌面/Github博客/整體測試/blog_yuchi-12/CDN/animate.min.cssjquery_ui_js: /home/appleyuchi/桌面/Github博客/整體測試/blog_yuchi-12/CDN/jquery-ui.min.jsjquery_ui_css: /home/appleyuchi/桌面/Github博客/整體測試/blog_yuchi-12/CDN/jquery-ui.min.csspace_js: /home/appleyuchi/桌面/Github博客/整體測試/blog_yuchi-12/CDN/pace.min.jsclipboard: /home/appleyuchi/桌面/Github博客/整體測試/blog_yuchi-12/CDN/clipboard.min.js# mathjax: /home/appleyuchi/桌面/Github博客/整體測試/blog_yuchi-12/CDN/MathJax.jsscrollreveal: /home/appleyuchi/桌面/Github博客/整體測試/blog_yuchi-12/CDN/scrollreveal.min.js

你沒看錯，所有的網絡路徑全部改成本地路徑并且確保本地路徑上有這些文件，也就是剛才tree命令展示的文件的一部分。

之所以這么處理是因為font-spider不支持remote-path（講人話就是不支持網絡地址）

?

接下來是sed腳本：

#!/bin/sh oldstring="\/\/cdn.bootcss.com\/pace\/1.0.2\/themes\/blue\/pace-theme-minimal.css" newstring="\/home\/appleyuchi\/桌面\/Github博客\/整體測試\/blog_yuchi-12\/CDN\/pace-theme-minimal.css"oldstring1="\/css\/style.css" newstring1="\/home\/appleyuchi\/桌面\/Github博客\/整體測試\/blog_yuchi-12\/public\/css\/style.css"oldstring2="\/lib\/gitalk\/gitalk.css" newstring2="\/home\/appleyuchi\/桌面\/Github博客\/整體測試\/blog_yuchi-12\/public\/lib\/gitalk\/gitalk.css"oldstring3="\/lib\/gitalk\/gitalk.min.js" newstring3="\/home\/appleyuchi\/桌面\/Github博客\/整體測試\/blog_yuchi-12\/public\/lib\/gitalk\/gitalk.min.js"oldstring4="https\:\/\/cdn.jsdelivr.net\/npm\/katex\@0.10.0\/dist\/katex.min.css" newstring4="\/home\/appleyuchi\/桌面\/Github博客\/整體測試\/blog_yuchi-12\/CDN\/katex.min.css" #這里是準備替換目標#################先做好準備工作，所有的ｃｄｎ都改成本地路徑############################# rm themes/yuchi/_config.yml cp _config_spider.yml themes/yuchi/_config.yml hexo clean && hexo g find ./public -name "*.html*" > result.txt # #################開始處理############################# OPTS="$(cat ./result.txt) " #獲取所有使用到字體的文件 a=$OPTS OLD_IFS="$IFS" IFS="," arr=($a) IFS="$OLD_IFS" for s in ${arr[@]} do sed -i "s/$oldstring/$newstring/g" "$s"sed -i "s/$oldstring1/$newstring1/g" "$s"sed -i "s/$oldstring2/$newstring2/g" "$s"sed -i "s/$oldstring3/$newstring3/g" "$s"sed -i "s/$oldstring4/$newstring4/g" "$s"donefont-spider --debug $OPTS --ignore /home/appleyuchi/桌面/Github博客/整體測試/blog_yuchi-12/public/lib/gitalk/gitalk.css# ＃＃＃＃＃＃＃＃＃＃＃＃＃＃所有ｃｄｎ資源恢復到網絡路徑＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ cp _config_origin.yml themes/yuchi/_config.yml #恢復配置文件的網絡路徑配置 cp public/font/Roboto-Regular/* CDN/Roboto-Regular/ #備份生成的精簡版自定義字體pwd hexo clean hexo g #重新生成，這樣就可以回復所有html文件中的網絡路徑配置cp CDN/Roboto-Regular/* public/font/Roboto-Regular/ #替換新生成的部署用的字體# ＃＃＃＃＃＃把原先的完整的字體替換為裁剪過的字體（下面這兩個可能是不需要的）＃＃＃＃＃＃＃＃＃＃＃＃＃＃ cp CDN/fonts/* ./node_modules/katex/dist/fonts/ cp fonts/* ./node_modules/hexo/node_modules/hexo-cli/assets/themes/landscape/source/css/fonts

sed腳本設計思路：
?

font-spider的作用是把網頁上用到的字體篩選出來，并且以此為依據，對完整的源字體文件進行裁剪，最后讓網站加載裁剪后的字體。因為hexo d上傳的只有public文件夾中的文件，所以我們針對的目標就是public文件夾。而網頁中展示給我么看的都是html文件，所以我們要處理的html文件就用fing命令來搞定把所有的*.html文件的路徑賦值給OPTS變量，讓OPTS分詞后形成數組，再對數組中每個html文件使用sed命令進行remote->local path形式的替換。替換完成之后備份好生成的裁剪后的字體。使用hexo clean &&hexo g進行恢復。把備份考的字體拷貝到public文件夾的指定位置。gulp&& hexo 部署

?

腳本運行前需要按照[2]操作一遍，確保終端默認的是bash而不是dash

?

?

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

寫在最后：
git clone appleyuchi.github.io.git

可以看下clone下來的font文件夾大小，只有412KB,原先是162MB

預覽網址為：

appleyuchi.github.io

顯然如此漂亮的繁體字不經過壓縮是不可能這么小的

?

Reference:

[1]https://blog.csdn.net/appleyuchi/article/details/92846473

[2]https://blog.csdn.net/appleyuchi/article/details/93334552

[3]https://www.fontke.com/tool/fontface/

總結

以上是生活随笔為你收集整理的hexo的yelee主题使用自定义字体并用字蛛进行字体压缩的sed脚本的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。