hexo+css遇到的unexpected token問題

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

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

問題背景

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

問題描述

新建頁面，copy進(jìn)去內(nèi)容，hexo server運行，控制臺報錯：

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}}"這句文案。文檔中的效果如下：

分析問題：

報錯信息寫的很明確，unexpected token: !，!是不被期望的。其實這是因為使用了{{...}}導(dǎo)致的，在hexo中雙括號會被解析，雙括號里的內(nèi)容會被當(dāng)做變量解析。

解決問題

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

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

`if="{{!foo}}"`
還是會解析，會報同樣的錯誤，所以`包裹是不能解決問題的。

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

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

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

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

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

圖1：

圖2：

圖3：

總結(jié)

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/112561.html

發(fā)表評論

登陸后可評論

0條評論

haoguo

男|高級講師

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

TA的文章

#yyds干貨盤點# Web應(yīng)用測試

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

閱讀 2989·2019-08-30 15:52
css position屬性為absolute時，其百分值的計算

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

閱讀 1039·2019-08-30 10:58
移動端video局部播放視頻

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

閱讀 3273·2019-08-29 18:36
javascript 運算符

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

hexo+css遇到的unexpected token問題

相關(guān)文章

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

**vue+iview打包報錯Unexpected token: punc (()**

**parcel 錯誤：SyntaxError: Unexpected token function**

Hexo 博客終極玩法：云端寫作，自動部署

Hexo 博客終極玩法：云端寫作，自動部署

發(fā)表評論

0條評論

haoguo

男|高級講師

TA的文章

#yyds干貨盤點# Web應(yīng)用測試

flex-box 速記表

css position屬性為absolute時，其百分值的計算

CSS3 filter（濾鏡）屬性

移動端video局部播放視頻

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

javascript 運算符

CSS方法論（一）

最新活動

資訊專欄INFORMATION COLUMN

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

hexo+css遇到的unexpected token問題

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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