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标签。