当前位置: 首页 > Web前端 > CSS

hexo+css遇到的意想不到的token问题

时间:2023-03-31 12:15:26 CSS

问题背景使用hexo+css模拟weex文档的实现,在页面上存在Weex和Vue2.x语法差异的问题。问题描述新建一个页面,复制内容,运行hexoserver,控制台报错:FATALSomething'swrong。也许你可以在这里找到解决方案:http://hexo.io/docs/troubleshooting.html模板渲染错误:(未知路径)[第17行,第9列]意外令牌:!在Object.exports.prettifyError(/Users/weilu/Desktop/weilu/code/document/folder/node_modules/nunjucks/src/lib.js:34:15)在Obj.extend.render(/Users/weilu/Desktop/weilu/code/document/folder/node_modules/nunjucks/src/environment.js:469:27)在Obj.extend.renderString(/Users/weilu/Desktop/weilu/code/document/folder/node_modules/nunjucks/src/environment.js:327:21)在/Users/weilu/Desktop/weilu/code/document/folder/node_modules/hexo/lib/extend/tag.js:66:9在Promise._execute(/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/debuggability.js:300:9)在Promise._resolveFromExecutor(/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/promise.js:483:18)在在Tag.render(/Users/weilu/Desktop/weilu/code/document/folder/node_modules/hexo/lib/extend/tag.js:64:10)atObject.tagFilter[asonRenderEnd](/Users/weilu/Desktop/weilu/code/document/folder/node_modules/hexo/lib/hexo/post.js:266:16)在/Users/weilu/Desktop/weilu/code/document/folder/node_modules/hexo/lib/hexo/render.js:65:19在tryCatcher(/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/util.js:16:23)在Promise._settlePromiseFromHandler(/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/promise.js:512:31)在Promise._settlePromise(/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/promise.js:569:18)在Promise。_settlePromise0(/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/promise.js:614:10)在Promise._settlePromises(/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/promise.js:693:18)在Async._drainQueue(/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/async.js:133:16)在Async._drainQueues(/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/async.js:143:10)在Immediate.Async.drainQueues(/Users/weilu/Desktop/weilu/code/document/folder/node_modules/bluebird/js/release/async.js:17:14)atrunCallback(timers.js:574:20)attryOnImmediate(timers.js:554:5)atprocessImmediate[as_immediateCallback](timers.js:533:5)定位问题定位到if="{{!foo}}》这句话在文案文档中的效果如下:问题分析:报错信息很明确,意想不到的token:!,!不是预期的。其实这是使用了{{...}}造成的。hexo中会解析双括号,将双括号中的内容解析为变量。解决问题以下是几种可能的解决方案。在网上找了个方法说用'不能解析{{,其实不是这样的。使用'后,转义后的特殊字符将不会被解析。比如改成`if="{{!foo}}"`还是会被解析,报同样的错误,所以`包不能解决问题。还有一种说法是用'''三个反引号,三个'''确实可以解决解析的问题,但是不能解决我们这里的问题。我们从文档中可以看出,if="{{!foo}}"这句话在表格中,'''生成了一个代码块,所以三个反引号最终解决不了问题。逃脱。一般很多类似unexpectedtoken:***的问题都可以通过转义来解决。转义字符可以看我之前的文章hexo+css创建自己的博客(语法手册)。特殊字符对应的转义码。以下是我解决问题时使用的三个流程:`if="{{!foo}}"`这种方式,`完全不会反转转义后的内容Rightback,效果图如图1所示。图1中的效果不是我们所期望的,但是我们知道最终页面显示的效果是用代码包裹的,所以我们可以使用下面的方法,效果如图2所示。if="{{!foo}}"如图2中可以看到,双引号变成了中文,这不是我们所期望的。需要对其进行转义,改成下面的方法,才能完美解决问题。结果如图3所示if="{{!foo}}"图一:图二:图三:总结使用hexo创建博客写文章时遇到的问题几乎都是解析特殊字符的问题,所以应该尽量少写特殊字符。如果你真的需要它,你可以使用转义码。遇到问题可以考虑转义码+html标签作为解决方案。