How to use with hexo

[GabLeRoux]

So I wanted to convert a Craft CMS website into a static website. A quick search on https://staticgen.com led me to Hexo, which mentions it supports Twig templating. It wasn't too clear at first, but it turns out it does support Twig when using the hexo-renderer-twig package, which is neat 👍

npm install hexo-cli -g
hexo init blog
cd blog
npm i --save hexo-renderer-twig

Now I replace the index.ejs template from landscape theme with an index.twig with the following content:

{% set foo = "test" %}
Hello world  {{ foo }}

hexo serve --debug

And it seems to be working well 🎉

Now trying a simple condition just as in your readme:

{% set foo = "true" %}
Hello world {{ "true" if foo else "false" }}

💥

21:08:51.078 DEBUG Rendering HTML index: index.html
Error compiling twig template undefined:
TwigException: Twig.expression.type.variable cannot follow a Twig.expression.type.string at template:6 near 'if...'
Error parsing twig template undefined:
TypeError: Cannot read property 'forEach' of undefined
    at Object.Twig.forEach (/Users/GabLeRoux/blog/node_modules/twig/twig.min.js:8:822)
    at Twig.Template.Twig.parse (/Users/GabLeRoux/blog/node_modules/twig/twig.min.js:8:11203)
    at Twig.Template.render (/Users/GabLeRoux/blog/node_modules/twig/twig.min.js:8:16150)
    at /Users/GabLeRoux/blog/node_modules/hexo-renderer-twig/lib/renderer.js:25:34
    at Theme._View.View._compiled.locals [as _compiled] (/Users/GabLeRoux/blog/node_modules/hexo/lib/theme/view.js:123:48)
    at Theme._View.View.View.render (/Users/GabLeRoux/blog/node_modules/hexo/lib/theme/view.js:29:15)
    at /Users/GabLeRoux/blog/node_modules/hexo/lib/hexo/index.js:349:21
    at tryCatcher (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/util.js:16:23)
    at /Users/GabLeRoux/blog/node_modules/bluebird/js/release/method.js:15:34
    at RouteStream._read (/Users/GabLeRoux/blog/node_modules/hexo/lib/hexo/router.js:123:3)
    at RouteStream.Readable.read (_stream_readable.js:457:10)
    at resume_ (_stream_readable.js:933:12)
    at process._tickCallback (internal/process/next_tick.js:63:19)
21:08:51.084 ERROR Render HTML failed: index.html
TypeError: Cannot read property 'parent' of undefined
    at Function.exports.update (/Users/GabLeRoux/blog/node_modules/cheerio/lib/parse.js:55:26)
    at module.exports (/Users/GabLeRoux/blog/node_modules/cheerio/lib/parse.js:17:11)
    at Function.exports.load (/Users/GabLeRoux/blog/node_modules/cheerio/lib/static.js:22:14)
    at Hexo.hexoMetaGeneratorInject (/Users/GabLeRoux/blog/node_modules/hexo/lib/plugins/filter/meta_generator.js:8:21)
    at Hexo.tryCatcher (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/util.js:16:23)
    at Hexo.<anonymous> (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/method.js:15:34)
    at Promise.each.filter (/Users/GabLeRoux/blog/node_modules/hexo/lib/extend/filter.js:60:50)
    at tryCatcher (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/util.js:16:23)
    at Object.gotValue (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/reduce.js:155:18)
    at Object.gotAccum (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/reduce.js:144:25)
    at Object.tryCatcher (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/promise.js:517:31)
    at Promise._settlePromise (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/promise.js:574:18)
    at Promise._settlePromiseCtx (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/promise.js:611:10)
    at _drainQueueStep (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/async.js:142:12)
    at _drainQueue (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/async.js:131:9)
    at Async._drainQueues (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/async.js:147:5)
    at Immediate.Async.drainQueues [as _onImmediate] (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:705:18)
    at tryOnImmediate (timers.js:676:5)
    at processImmediate (timers.js:658:5)
Unhandled rejection TypeError: Cannot read property 'parent' of undefined
    at Function.exports.update (/Users/GabLeRoux/blog/node_modules/cheerio/lib/parse.js:55:26)
    at module.exports (/Users/GabLeRoux/blog/node_modules/cheerio/lib/parse.js:17:11)
    at Function.exports.load (/Users/GabLeRoux/blog/node_modules/cheerio/lib/static.js:22:14)
    at Hexo.hexoMetaGeneratorInject (/Users/GabLeRoux/blog/node_modules/hexo/lib/plugins/filter/meta_generator.js:8:21)
    at Hexo.tryCatcher (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/util.js:16:23)
    at Hexo.<anonymous> (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/method.js:15:34)
    at Promise.each.filter (/Users/GabLeRoux/blog/node_modules/hexo/lib/extend/filter.js:60:50)
    at tryCatcher (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/util.js:16:23)
    at Object.gotValue (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/reduce.js:155:18)
    at Object.gotAccum (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/reduce.js:144:25)
    at Object.tryCatcher (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/promise.js:517:31)
    at Promise._settlePromise (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/promise.js:574:18)
    at Promise._settlePromiseCtx (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/promise.js:611:10)
    at _drainQueueStep (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/async.js:142:12)
    at _drainQueue (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/async.js:131:9)
    at Async._drainQueues (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/async.js:147:5)
    at Immediate.Async.drainQueues [as _onImmediate] (/Users/GabLeRoux/blog/node_modules/bluebird/js/release/async.js:17:14)
    at runCallback (timers.js:705:18)
    at tryOnImmediate (timers.js:676:5)
    at processImmediate (timers.js:658:5)

Note: Above error is huge, but updating this project's twig version to more recent version

npm i --save git+https://[email protected]/GabLeRoux/hexo-renderer-twig.git#1.13.3

Lead to a smaller error :P

Error compiling twig template undefined:
TwigException: Twig.expression.type.variable cannot follow a Twig.expression.type.string at template:6 near 'if...'
Unhandled rejection TypeError: Cannot read property 'length' of undefined
    at Object.forEachAsync [as forEach] (/Users/gableroux/blog/node_modules/twig/twig.js:7962:23)
    at Twig.Template.Twig.parse (/Users/gableroux/blog/node_modules/twig/twig.js:1167:30)
    at Twig.Template.Twig.parseAsync (/Users/gableroux/blog/node_modules/twig/twig.js:7662:27)
    at Twig.Template.<anonymous> (/Users/gableroux/blog/node_modules/twig/twig.js:1615:36)
    at potentiallyAsyncSlow (/Users/gableroux/blog/node_modules/twig/twig.js:7693:29)
    at Object.potentiallyAsync (/Users/gableroux/blog/node_modules/twig/twig.js:7721:16)
    at Twig.Template.render (/Users/gableroux/blog/node_modules/twig/twig.js:1614:27)
    at /Users/gableroux/blog/node_modules/hexo-renderer-twig/lib/renderer.js:25:34
    at Theme._View.View._compiled.locals [as _compiled] (/Users/gableroux/blog/node_modules/hexo/lib/theme/view.js:123:48)
    at Theme._View.View.View.render (/Users/gableroux/blog/node_modules/hexo/lib/theme/view.js:29:15)
    at /Users/gableroux/blog/node_modules/hexo/lib/hexo/index.js:349:21
    at tryCatcher (/Users/gableroux/blog/node_modules/bluebird/js/release/util.js:16:23)
    at /Users/gableroux/blog/node_modules/bluebird/js/release/method.js:15:34
    at RouteStream._read (/Users/gableroux/blog/node_modules/hexo/lib/hexo/router.js:123:3)
    at RouteStream.Readable.read (_stream_readable.js:457:10)
    at resume_ (_stream_readable.js:933:12)
    at process._tickCallback (internal/process/next_tick.js:63:19)

Okay so the twig example is just wrong, twig can use ternary operators, but not with the if statement, let's write this in a different way:

{% set foo = "true" %}
Hello world {{ "true" ? foo : "false" }}

There you go

Now let's try to use twig for a page

Nuke everything from theme's layout folder and have this:

blog/themes/landscape/layout/index.ejs

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="container">
  <h1>Hello from layout</h1>
  <div id="wrap">
    {% block content %}
      parent content
    {% endblock %}
  </div>
</div>
</body>
</html>

blog/themes/landscape/layout/index.twig

{% extends 'layout.twig' %}

{% block content %}
  Hello from child
  {{ parent() }}
{% endblock %}

result:

Hello from layout
parent content

🔥 Should have been the following output:

Hello from layout
Hello from child
parent content

😢 So looks like the twig's block is failing here (or am-I doing it wrong?), what's going on? Even trying with no twig in index.twig or doing the same with a blog.twig does the same. Or is this an hexo issue? I think I'm lost 🗺

I know blocks in twig.js were rewritten here as they were a bit broken:
twigjs/twig.js#625

But even when using it with twig dependency being updated (see my fork) and #2 , I'm not able to get my theme to use block statements. I think I'll just go back to jekyll for now and convert that twig code into Liquid

If someone passes by and knows the answer, I'm curious to know what's wrong anyway.

[GabLeRoux]

Btw, providing an example theme written in twig would be very handy. If someone manages to get one working, comment here! ✌️

[imme-emosol]

Took a bit different approach..
Made a new directory in themes/ , set the theme-property in the"main" _config.yml to the name of that new folder containg the theme. Added some files in that theme-folder:

- _config.yml containing:
menu:
 Home:

- layout.twig containing:
{{ body }}

- index.twig containing:
{{ extends 'all.page.single.twig' }}

{% block content %}
Feel at home?
{% endblock %}

- all.page.single.twig containg:
<body>{% block content %}No content added in extending file.{% endblock %}</body>

[imme-emosol]

The message says blog/themes/landscape/layout/index.ejs but I'm guessing that is/should-be blog/themes/landscape/layout/layout.twig .