hexo+css遇到的unexpected token问题

haoguo 发布于2019-08-29 13:22 / 1913人阅读

摘要：问题背景使用模拟实现文档，页面和的语法差异遇到问题。文档中的效果如下分析问题报错信息写的很明确，，是不被期望的。遇到问题时，解决思路可以考虑下转义码标签。

问题背景

使用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中双括号会被解析，双括号里的内容会被当做变量解析。

解决问题

以下是几种可能的解决方案

网上找到方法说使用"可以不解析{{，其实不然，使用"后会不解析转义后的特俗字符，例如改为

`if="{{!foo}}"`
还是会解析，会报同样的错误，所以`包裹是不能解决问题的。

还有的是说使用"""三个反引号，三个"""确实可以解决解析方面的问题，但是不能解决我们这里的问题，我们看文档可以知道，这句if="{{!foo}}"是在表格中的，而"""生成的是代码块，所以三个反引号是不能最终解决问题的。

转义。一般很多类似unexpected token: ***的问题，都可以使用转义的方法解决，关于转义字符，可以看我上一篇文章hexo+css创建自己的blog（语法手册），里面最底下有各种特殊字符对应的转义码。以下是我解决问题的三个过程：

`if="{{!foo}}"`
这种方式时，`根本不会把转义过后的内容反转义回去，效果图如下图1。

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

图2中可以看出，双引号变成了中文的，这也不是我们期望的，需要转义一下，改为如下方式，完美解决问题，结果如图3。
if="{{!foo}}"

图1：

图2：

图3：

总结

使用hexo创建博客写文章的时候，遇到的问题几乎都是特殊字符解析方面的问题，所以应该尽可能少写一些特殊字符，如果实在需要，可以使用转义码。遇到问题时，解决思路可以考虑下转义码+html标签。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112561.html

基于 github issues 实现第三方评论系统

摘要：什么是第三方评论系统博客或系统，一般都是有内容和评论两部分组成。而且垃圾评论和过滤非法关键字难度较大，所以在国内外都有第三评论系统。三评论系统实现预备工作创建。本文只是介绍如何基于 github issues 实现第三方评论系统，对于 Hexo 介绍，本文并不打算详述，如果有童鞋之前还没有了解 Hexo 的，可以先看一下之前文章《静态博客框架 Hexo 入门》，或者直接访问 Hex...

waltr 2019-08-21 16:24 评论0 收藏0
vue+iview打包报错Unexpected token: punc (()

摘要：最近在项目中遇到项目时报错具体报错如下但在安装依赖之前，不会出现这个问题。问题原因无法解析的问题，所以导致打包失败。最近在项目中遇到vue项目build时报错 ERROR in static/js/vendor.7cc64802b7814edeb429.js from UglifyJs Unexpected token: punc (() [./node_modules/iview/...

WrBug 2019-08-21 17:48 评论0 收藏0
parcel 错误：SyntaxError: Unexpected token function

摘要：在使用的时候，很多人遇到了一个问题对于这个错误，很多人似曾相识，以为是配置的问题。但是号称是零配置，是不需要配置的。如果使用全局安装，会发现这个是自身的报错在的文件写着所以是支持版本的。在使用 parcel 的时候，很多人遇到了一个问题： async function bundle(main, command) { ^^^^^^^^ SyntaxError: Unexp...

vvpvvp 2019-08-22 11:15 评论0 收藏0
Hexo 博客终极玩法：云端写作，自动部署

摘要：配置触发方式一般会得到这么个语雀配置配置一个仓库的可以选择所有更新触发或者主动触发，主动触发的意思即发布需要勾选一个选项才会触发。 Hexo + Github + 语雀 + yuque-hexo +travis-ci+severless 打造全自动持续集成个人博客，云端写作，自动部署，完美体验~ 一、Hexo+Github 的痛点 1.为啥要用hexo+github？作为一个程序猿，...

AlphaWallet 2019-08-02 14:04 评论0 收藏0
Hexo 博客终极玩法：云端写作，自动部署

摘要：配置触发方式一般会得到这么个语雀配置配置一个仓库的可以选择所有更新触发或者主动触发，主动触发的意思即发布需要勾选一个选项才会触发。 Hexo + Github + 语雀 + yuque-hexo +travis-ci+severless 打造全自动持续集成个人博客，云端写作，自动部署，完美体验~ 一、Hexo+Github 的痛点 1.为啥要用hexo+github？作为一个程序猿，...

EsgynChina 2019-08-23 14:33 评论0 收藏0