hexo+css遇到的unexpected token問題

haoguo 發(fā)布于2019-08-29 13:22 / 1992人閱讀

摘要：?jiǎn)栴}背景使用模擬實(shí)現(xiàn)文檔，頁面和的語法差異遇到問題。文檔中的效果如下分析問題報(bào)錯(cuò)信息寫的很明確，，是不被期望的。遇到問題時(shí)，解決思路可以考慮下轉(zhuǎn)義碼標(biāo)簽。

問題背景

使用hexo+css模擬實(shí)現(xiàn)weex文檔，頁面Weex 和 Vue 2.x 的語法差異遇到問題。

問題描述

新建頁面，copy進(jìn)去內(nèi)容，hexo server運(yùn)行，控制臺(tái)報(bào)錯(cuò)：

FATAL Something"s wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Template render error: (unknown path) [Line 17, Column 9]
  unexpected token: !
    at Object.exports.prettifyError (/Users/weilu/Desktop/weilu/code/document/folder/node_modules/nunjucks/src/lib.js:34:15)
    at Obj.extend.render (/Users/weilu/Desktop/weilu/code/document/folder/node_modules/nunjucks/src/environment.js:469:27)
    at Obj.extend.renderString (/Users/weilu/Desktop/weilu/code/document/folder/node_modules/nunjucks/src/environment.js:327:21)
    at /Users/weilu/Desktop/weilu/code/document/folder/node_modules/hexo/lib/extend/tag.js:66:9
    at Promise._execute (/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/debuggability.js:300:9)
    at Promise._resolveFromExecutor (/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/promise.js:483:18)
    at new Promise (/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/promise.js:79:10)
    at Tag.render (/Users/weilu/Desktop/weilu/code/document/folder/node_modules/hexo/lib/extend/tag.js:64:10)
    at Object.tagFilter [as onRenderEnd] (/Users/weilu/Desktop/weilu/code/document/folder/node_modules/hexo/lib/hexo/post.js:266:16)
    at /Users/weilu/Desktop/weilu/code/document/folder/node_modules/hexo/lib/hexo/render.js:65:19
    at tryCatcher (/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/promise.js:512:31)
    at Promise._settlePromise (/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/promise.js:569:18)
    at Promise._settlePromise0 (/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/promise.js:693:18)
    at Async._drainQueue (/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/async.js:133:16)
    at Async._drainQueues (/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/async.js:143:10)
    at Immediate.Async.drainQueues (/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:574:20)
    at tryOnImmediate (timers.js:554:5)
    at processImmediate [as _immediateCallback] (timers.js:533:5)

定位問題

問題定位到if="{{!foo}}"這句文案。文檔中的效果如下：

分析問題：

報(bào)錯(cuò)信息寫的很明確，unexpected token: !，!是不被期望的。其實(shí)這是因?yàn)槭褂昧?b>{{...}}導(dǎo)致的，在hexo中雙括號(hào)會(huì)被解析，雙括號(hào)里的內(nèi)容會(huì)被當(dāng)做變量解析。

解決問題

以下是幾種可能的解決方案

網(wǎng)上找到方法說使用"可以不解析{{，其實(shí)不然，使用"后會(huì)不解析轉(zhuǎn)義后的特俗字符，例如改為

`if="{{!foo}}"`
還是會(huì)解析，會(huì)報(bào)同樣的錯(cuò)誤，所以`包裹是不能解決問題的。

還有的是說使用"""三個(gè)反引號(hào)，三個(gè)"""確實(shí)可以解決解析方面的問題，但是不能解決我們這里的問題，我們看文檔可以知道，這句if="{{!foo}}"是在表格中的，而"""生成的是代碼塊，所以三個(gè)反引號(hào)是不能最終解決問題的。

轉(zhuǎn)義。一般很多類似unexpected token: ***的問題，都可以使用轉(zhuǎn)義的方法解決，關(guān)于轉(zhuǎn)義字符，可以看我上一篇文章hexo+css創(chuàng)建自己的blog（語法手冊(cè)），里面最底下有各種特殊字符對(duì)應(yīng)的轉(zhuǎn)義碼。以下是我解決問題的三個(gè)過程：

`if="{{!foo}}"`
這種方式時(shí)，`根本不會(huì)把轉(zhuǎn)義過后的內(nèi)容反轉(zhuǎn)義回去，效果圖如下圖1。

圖1的效果并不是我們期望的，只是我們知道`最終在頁面展示的效果是包裹在code中的，所以我們可以用如下方式，效果如下圖2。
if="{{!foo}}"

圖2中可以看出，雙引號(hào)變成了中文的，這也不是我們期望的，需要轉(zhuǎn)義一下，改為如下方式，完美解決問題，結(jié)果如圖3。
if="{{!foo}}"

圖1：

圖2：

圖3：

總結(jié)

使用hexo創(chuàng)建博客寫文章的時(shí)候，遇到的問題幾乎都是特殊字符解析方面的問題，所以應(yīng)該盡可能少寫一些特殊字符，如果實(shí)在需要，可以使用轉(zhuǎn)義碼。遇到問題時(shí)，解決思路可以考慮下轉(zhuǎn)義碼+html標(biāo)簽。