hexo+css遇到的unexpected token問(wèn)題

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

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

問(wèn)題背景

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

問(wèn)題描述

新建頁(yè)面，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)

定位問(wèn)題

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

分析問(wèn)題：

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

解決問(wèn)題

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

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

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

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

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

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

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

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

圖1：

圖2：

圖3：

總結(jié)

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

GPU云服務(wù)器云服務(wù)器 unexpected-token 布局遇到的問(wèn)題學(xué)習(xí)遺傳算法遇到的問(wèn)題看apue遇到的有關(guān)問(wèn)題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112561.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

haoguo

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#yyds干貨盤點(diǎn)# Web應(yīng)用測(cè)試

閱讀 2335·2021-11-25 09:43
flex-box 速記表

閱讀 2960·2019-08-30 15:52
css position屬性為absolute時(shí)，其百分值的計(jì)算

閱讀 1919·2019-08-30 15:44
CSS3 filter（濾鏡）屬性

閱讀 999·2019-08-30 10:58
移動(dòng)端video局部播放視頻

閱讀 784·2019-08-29 18:43
css實(shí)現(xiàn)水平垂直居中

閱讀 3241·2019-08-29 18:36
javascript 運(yùn)算符

閱讀 2339·2019-08-29 17:02
CSS方法論（一）

閱讀 1479·2019-08-29 17:01

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

hexo+css遇到的unexpected token問(wèn)題

相關(guān)文章

基于 github issues 實(shí)現(xiàn)第三方評(píng)論系統(tǒng)

**vue+iview打包報(bào)錯(cuò)Unexpected token: punc (()**

**parcel 錯(cuò)誤：SyntaxError: Unexpected token function**

Hexo 博客終極玩法：云端寫作，自動(dòng)部署

Hexo 博客終極玩法：云端寫作，自動(dòng)部署

發(fā)表評(píng)論

0條評(píng)論

haoguo

男|高級(jí)講師

TA的文章

#yyds干貨盤點(diǎn)# Web應(yīng)用測(cè)試

flex-box 速記表

css position屬性為absolute時(shí)，其百分值的計(jì)算

CSS3 filter（濾鏡）屬性

移動(dòng)端video局部播放視頻

css實(shí)現(xiàn)水平垂直居中

javascript 運(yùn)算符

CSS方法論（一）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

hexo+css遇到的unexpected token問(wèn)題

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！