Using Handlebars in Post Editor?

Themes
1

Is it possible to include handlebars in the Post/Page editor in Ghost, using the HTML Card, or another Card? (I know I can make it as a Custom Template, but is there a way to inline it?)

So, for example, this…

<style>
.tags-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10vw;
    min-height: 80vh;
}
.topic {
    font-family: 'Source Code Pro', monospace;
    flex-grow: 1;
    max-width: 100vw;
    min-width: 10vw;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: rgba(1, 255, 1, 1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 1px;
}
</style>

<section class="tags-list">
			{{#get "tags" limit="all" include="count.posts" order="name asc"}}
				{{#foreach tags}}
					<div class="topic" style="background-image: url({{img_url feature_image}}) ">
                    <a style="font-size: calc(1em + (0.1 * {{count.posts}}em)" href="/tag/{{slug}}">{{name}}</a>
                    </div>
				{{/foreach}}
			{{/get}}
</section>

??

1 Like
2

The post is provided to the theme as handlebars so it’s not possible.

However, you might be able to use internal tags and javascript to achieve something similar:

  • For the post, add <section class="tags-list"></section> wherever you want to insert the tag list
  • Also add the tag #tag-list

Add this after the post content:

{{{#has tag="hash-tag-list"}}
<template id="tag-list-content">
	{{#get "tags" limit="all" include="count.posts" order="name asc"}}
		{{#foreach tags}}
				<div class="topic" style="background-image: url({{img_url feature_image}}) ">
				<a style="font-size: calc(1em + (0.1 * {{count.posts}}em)" href="/tag/{{slug}}">{{name}}</a>
				</div>
		{{/foreach}}
	{{/get}}
</template>
<script>
const sourceTemplate = document.getElementById('tag-list-content');

for (const element of document.querySelectorAll('.tag-list')) {
  element.appendChild(sourceTemplate.content.cloneNode(true))
}
</script>
{{/has}}
1 Like
3

Thank you @vikaspotluri123 – when you say

Add this after the post content

Are you suggesting to paste that (the handlebars and JS) after the {{content}} at the bottom of post.hbs?

4

Is it possible to use handlebars.js to make handlebars work in HTML Cards and/or Code Injections in the admin of Ghost?

https://handlebarsjs.com/

https://handlebarsjs.com/guide/#what-is-handlebars

5

No. Post content is static html and is not processed at all once it’s created.

1 Like
6

Great. Thank you for clarifying that +++++