hexo+css遇到的unexpected token問題

haoguo 發布于2019-08-29 13:22 / 1984人閱讀

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

問題背景

使用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標簽。

GPU云服務器云服務器 unexpected-token 布局遇到的問題學習遺傳算法遇到的問題看apue遇到的有關問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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