hexo gist plugin 阻塞页面

不知道小伙伴们在给自己写的hexo theme做unit test的时候,有没有发现,那篇tag plugin测试post的gist部分会导致页面加载像是卡住了一样。

hexo对gist标签的处理是这样的:

1
2
3
4
5
function gistTag(args, content) {
var id = args.shift();
var file = args.length ? '?file=' + args[0] : '';
return '<script src="//gist.github.com/' + id + '.js' + file + '"></script>';
}

这是没有问题的,问题在于,<script>元素在不使用deferasync属性的情况下,是会阻塞页面后面内容的解析,再由于国内网络环境,整个页面就像是被卡住了一样,体验非常不好。

于是就想,给上面那段代码的script标签加上deferasync不就好了吗?

嗯,整段gist的内容干脆不显示了。根据console上的提示search之,得到来自MDN的答案如下:

Note: document.write in deferred or asynchronous scripts will be ignored, and you’ll get a message like “A call to document.write() from an asynchronously-loaded external script was ignored” in the error console.

简单来说,'//gist.github.com/xxxx.js'这个js本质上就是用document.write往页面里写东西。你要是在script里加上deferasync还不行,整段代码会被忽略掉导致页面上毛线也没有。

所幸,在github发现在另外一个一样功能的插件:gist-embed

gist-embed是通过ajax来处理目标gist的json版本数据。而这个过程是异步的,所以并不会阻塞后面内容的解析。

具体的使用方法结合gist-embed上所写的,由于我相当于要使用这个来替换hexo默认的gist插件,所以在主题的文件夹下增加了一个scripts/customGist.js,内容如下:

1
2
3
4
5
hexo.extend.tag.register('gist', function (args) {
var id = args.shift();
var file = args.length ? '?file=' + args[0] : '';
return '<code data-gist-id="' + id + '" class="highlight plain"></code>';
});

一切就绪后hexo ghexo s,铛铛铛铛~

Gallery Post

This post contains 4 photos:

  • Widescreen wallpaper
  • Portrait photo
  • Dual widescreen wallpaper
  • Small photo

All photos should be displayed properly.

From Wallbase.cc

www.google.com

This is a link post without a title. The title should be the link with or without protocol. Clicking on the link should open Google in a new tab or window.

日本語テスト

This is a Japanese test post.

私は昨日ついにその助力家というのの上よりするたなけれ。

最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。

がたを知っないはずも同時に九月をいよいよたありた。

もっと槙さんにぼんやり金少し説明にえた自分大した人私か影響にというお関係たうませないが、この次第も私か兄具合に使うて、槙さんののに当人のあなたにさぞご意味と行くて私個人が小尊敬を聴いように同時に同反抗に集っだうて、いよいよまず相当へあっうからいだ事をしでなけれ。

それでそれでもご時日をしはずはたったいやと突き抜けるますて、その元がは行ったてという獄を尽すていけですた。

この中道具の日その学校はあなたごろがすまなりかとネルソンさんの考えるですん、辺の事実ないというご盲従ありたですと、爺さんのためが薬缶が結果までの箸の当時してならて、多少の十月にためからそういう上からとにかくしましないと触れべきものたで、ないうですと多少お人達したのでたた。

From すぐ使えるダミーテキスト - 日本語 Lorem ipsum

中文測試

This is a Chinese test post.

善我王上魚、產生資西員合兒臉趣論。畫衣生這著爸毛親可時,安程幾?合學作。觀經而作建。都非子作這!法如言子你關!手師也。

以也座論頭室業放。要車時地變此親不老高小是統習直麼調未,行年香一?

就竟在,是我童示讓利分和異種百路關母信過明驗有個歷洋中前合著區亮風值新底車有正結,進快保的行戰從:弟除文辦條國備當來際年每小腳識世可的的外的廣下歌洲保輪市果底天影;全氣具些回童但倒影發狀在示,數上學大法很,如要我……月品大供這起服滿老?應學傳者國:山式排只不之然清同關;細車是!停屋常間又,資畫領生,相們制在?公別的人寫教資夠。資再我我!只臉夫藝量不路政吃息緊回力之;兒足灣電空時局我怎初安。意今一子區首者微陸現際安除發連由子由而走學體區園我車當會,經時取頭,嚴了新科同?很夫營動通打,出和導一樂,查旅他。坐是收外子發物北看蘭戰坐車身做可來。道就學務。

國新故。

工步他始能詩的,裝進分星海演意學值例道……於財型目古香亮自和這乎?化經溫詩。只賽嚴大一主價世哥受的沒有中年即病行金拉麼河。主小路了種就小為廣不?

From 亂數假文產生器 - Chinese Lorem Ipsum