I use assemble.io to generate some static files for a simple webpage.
Now i would like to define a list of partials in YAML Front Matter that should be included in the generated page.
I want this
<div class="slides">
{{>slide-intro}}
{{>slide-welcome}}
{{>slide-goodbye}}
</div>
to be replaced by something like this:
---
slides:
- slide-intro
- slide-welcome
- slide-goodbye
---
<div class="slides">
{{#each slides}}
{{>this}}
{{/each}}
</div>
So, I want to use the variable content stored in this(e.g. slide-welcome) to be used as the name of a partial to be included.
I see that using {{>this}} is not working, but i have no clue where to look for the solution.
Can anybody help me out?
Handlebars 3 introduced Dynamic Partials and you would use them like this:
---
slides:
- slide-intro
- slide-welcome
- slide-goodbye
---
<div class="slides">
{{#each slides}}
{{> (lookup ../slides #index) }}
{{/each}}
</div>
However, assemble 0.4.x is using Handlebars 1, so switch to grunt-assemble, which uses Handlebars 3. grunt-assemble is the same code based, it's just been moved to reflect that it's a grunt plugin.
Related
How to use parameter in handlebar partial I am using grunt-assemble and cant find anything in docs
For Example I will create a partial name heading and use it in my template
<h1 class="tac mt-80 underline">
{{heading}}
</h1>
<body>
{{> heading "Test"}}
</body>
unfortunately, thats not possible with grunt-assemble out of the box.
Their recommended way is to use the parseJSON helper for that:
{{#parseJSON '{"heading": "TEST"}'}}
{{> heading }}
{{/parseJSON}}
But you should take a look at the current implementation of assemble, which includes a updated version of Handlebars (which provides your wished functionality). It seems like they moved away from Grunt in favor of compatibility with Gulp.
I have a hbs file that contains following
//some ohter code
-------------------------------------
{{#each items}}
<li>
{{name}}
{{#if items}}
<ul>
//partial should go here
</ul>
{{/if}}
</li>
{{/each}}
---------------------------------------------------
And I want to use same section recursively replacing //partial should go here. How can I do that? Appreciate any help
Ember used to have parital, render and include template tags, which they are trying to get rid of however.
Now, probably the best way is to make use of components. If you are on ember-cli, just open your terminal and type ember g component my-include. It generates a *.js and a *.hbs file (naming depending on whether you are using pods or not).
Then you put the template code you want to use multiple times in the newly created *.hbs file, and then in your existing template code:
{{#if items}}
<ul>
{{my-include}}
</ul>
{{/if}}
You might want to take a look at: https://guides.emberjs.com/v2.9.0/components/defining-a-component/ for more information
You can also look at this sample working twiddle.
I'd like to literally display a template as code in a meteor app. Something like below:
<template name="current-template">
<pre>
<code>
<template name="template-should-display-as-code">
{{> TMCODE shouldDisplayAsIs}}
</template>
</code>
</pre>
</template>
The template inside the code section should be displayed as code. It shouldn't refer to another template. It is illegal syntax anyway.
Is there anyway to achieve it?
Thanks.
This might help..
Display source code in meteor applications
http://www.meteormade.com/display-source-code-in-meteor-applications
I'm trying to add static site generation to a site in order to make it more organised and easier to contribute to. The index file has a section with with an unordered list and a number of list items that all share the same formatting. I would like to dynamically load these list items from a folder of markdown files.
I'm trying to do something like
{{forEach file in the folder}}
<li>
<div class="container">
<div class="display">
{{markdown content of the file}}
</div>
<div class="code">
<pre>
<code class="language-javascript">
{{ string from YFM in markdown file }}
</code>
</pre>
</div>
</div>
</li>
{{/forEach}}
I don't actually want each markdown file to be assembled into it's own page in my dist folder, just used as a dynamic collection of partials for my index file.
Is this possible?
These two parts of an apparently never finished tutorial explain how to use markdown files as a dynamic collection of partials to integrate on the index site:
http://www.andismith.com/blog/2014/02/getting-started-with-assemble/
http://www.andismith.com/blog/2014/02/creating-a-list-of-posts-in-assemble/
Inside the loop that's iterating the md files I used this construct to get the yfm-stripped content "included" as content on the index site (took me quite a while to figure out):
{{#markdown}}
{{page}}
{{/markdown}}
Also refer to the documentation on Collections on http://assemble.io, but careful, there's some conflicting information out there as to the options hash for collections (name: posts vs. name: post, that is, singular vs. plural and autoinflection vs. inflection: post, but bottom line: stick with the variant in the links above :))
Let's say that I build all my handlebar templates into a build folder as follows:
gulp.src('./source/pages/**/*.hbs')
.pipe(plugins.consolidate('handlebars', config))
.pipe(plugins.extReplace('.html'))
.pipe(gulp.dest('./build'))
.pipe(/* ??? */)
In the last pipe(/* ??? */), I would like to create an index.html file with a list of links to build/**/*.html using the following template:
<ul>
{{#each files}}
<li>
{{this}}
</li>
{{/each}}
</ul>
How can I achieve this?
I would use an approach like gulp-concat, but create a list of file paths instead of buffering the contents: https://github.com/wearefractal/gulp-concat/blob/master/index.js
You might be able to use the gulp-wrap plugin to solve this:
.pipe(wrap(' <li>\n <%= file.path %>\n </li>'))
.pipe(concat('index.html'))
.pipe(wrap('<ul>\n<%= contents %>\n</ul>'))
I think this might be too hackish, but it might work. The biggest issue I see is that file.path probably doesn't link the way you want it to.