知乎表情的實(shí)現(xiàn)方式：貼圖
知乎的表情事實(shí)上是一系列由方括號(hào)包裹的關(guān)鍵字標(biāo)記的圖片，和微信聊天中的表情類(lèi)似。當(dāng)我們將鼠標(biāo)移到表情上時(shí)，就可以看到圖片的alt信息，即表情的關(guān)鍵字：
阻斷圖片加載
看起來(lái)，要想實(shí)現(xiàn)將知乎表情顯示為純文本標(biāo)簽，我們只需要阻斷知乎網(wǎng)頁(yè)對(duì)表情包圖片的加載即可，那根據(jù)HTML語(yǔ)法，圖片的alt屬性就會(huì)顯示在頁(yè)面上，達(dá)到了我們的目的。經(jīng)過(guò)F12開(kāi)發(fā)者工具審查頁(yè)面發(fā)現(xiàn)，這些圖片和正文中出現(xiàn)的其他圖片一樣，都是從形如pic[0-9].zhimg.com這樣的域名下加載的，而一種明顯的區(qū)分方法是這些表情圖片是固定的png，對(duì)應(yīng)的加載URL直接是https://pic[0-9].zhimg.com/v2-xxxxx.jpg這樣的形式，而其他的圖片不論格式會(huì)有一個(gè)額外的source參數(shù)，形如...?source=xxxx。因此，我們可以使用uBlock Origin這樣的廣告攔截插件，基于URL的匹配規(guī)則來(lái)特異性地阻斷這些表情圖片的加載。對(duì)應(yīng)需要配置的過(guò)濾規(guī)則如下：
! 注釋使用單個(gè)!
! uBlock Origin支持子串或EasyList語(yǔ)法的過(guò)濾規(guī)則
||pic*.zhimg.com/*.png
然而，這樣我們會(huì)驚奇地發(fā)現(xiàn)，知乎中的表情消失了，但是相應(yīng)的alt內(nèi)容沒(méi)有呈現(xiàn)，這相當(dāng)于丟失了表情在文中的信息，肯定是不能接受的：
阻斷事件監(jiān)聽(tīng)器
繼續(xù)深挖出現(xiàn)問(wèn)題的HTML段落，我們會(huì)注意到如下情況：
在源代碼中，sticker類(lèi)圖片對(duì)象被標(biāo)記為灰色的，說(shuō)明整體隱藏了，而它們都附有事件監(jiān)聽(tīng)器，會(huì)不會(huì)是這些監(jiān)聽(tīng)器在圖片未成功加載時(shí)改變了圖片的顯示行為呢？我們注意到這些監(jiān)聽(tīng)器的來(lái)源是https://unpkg.zhimg.com，而這個(gè)域名似乎不承擔(dān)其他的功能，那就可以大膽地繼續(xù)配置規(guī)則把它們也阻斷，觀察效果：
! 這次使用子串匹配域名即可
unpkg.zhimg.com
這樣就成功了，說(shuō)明上述的監(jiān)聽(tīng)器就是文字標(biāo)簽被隱藏的原因。個(gè)人對(duì)這種設(shè)計(jì)不太理解，因?yàn)槲淖謽?biāo)簽就是用于在圖片加載失敗時(shí)顯示以表示意義的，而不應(yīng)該被隱藏。不過(guò)總之我們已經(jīng)成功地將知乎表情顯示為純文本標(biāo)簽了。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-825090.html
本文由博客一文多發(fā)平臺(tái) OpenWrite 發(fā)布！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-825090.html
到了這里，關(guān)于使用uBlock Origin將知乎網(wǎng)頁(yè)版表情顯示為純文字標(biāo)簽的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
