hexo+css遇到的unexpected token問題

問題背景

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

問題描述

新建頁面，copy進去內容，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: !，!是不被指望的。其實這是由於使用了{{...}}致使的，在hexo中雙括號會被解析，雙括號裏的內容會被當作變量解析。

解決問題

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

1. 網上找到方法說使用'能夠不解析{{，其實否則，使用'後會不解析轉義後的特俗字符，例如改成

   `if="{{!foo}}"`
   仍是會解析，會報一樣的錯誤，因此`包裹是不能解決問題的。

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

3. 轉義。通常不少相似unexpected token: ***的問題，均可以使用轉義的方法解決，關於轉義字符，能夠看我上一篇文章hexo+css建立本身的blog（語法手冊），裏面最底下有各類特殊字符對應的轉義碼。如下是我解決問題的三個過程：

   `if="{{!foo}}"`
   這種方式時，`根本不會把轉義事後的內容反轉義回去，效果圖以下圖1。
   
   圖1的效果並非咱們指望的，只是咱們知道`最終在頁面展現的效果是包裹在code中的，因此咱們能夠用以下方式，效果以下圖2。
   <code>if="&#123;&#123;!foo&#125;&#125;"</code>
   
   圖2中能夠看出，雙引號變成了中文的，這也不是咱們指望的，須要轉義一下，改成以下方式，完美解決問題，結果如圖3。
   <code>if=&quot;&#123;&#123;!foo&#125;&#125;&quot;</code>

圖1：

圖2：

圖3：

總結

使用hexo建立博客寫文章的時候，遇到的問題幾乎都是特殊字符解析方面的問題，因此應該儘量少寫一些特殊字符，若是實在須要，可使用轉義碼。遇到問題時，解決思路能夠考慮下轉義碼+html標籤。