I m looping handlebars {{#each}} in pug template.
Pug displays the error message "unexpected token "indent".
Maybe someone else had a similar error?
script( id="search-result-template" type="text/x-handlebars-template")
.col-xs-12.search-result__item(id="{{index}}")
.search-result__item__title {{title}}
.search-result__item__text {{text}}
.search-result__item__links
{{#each links as link}}
a(href="{{link.url}}").search-result__item__links__item {{link.name}}
{{/each}}
Use gulp width pug
link to CodePen
Found a solution
In this block add |
.search-result__item__links
| {{#each links as link}}
| a(href="{{link.url}}").search-result__item__links__item {{link.name}}
| {{/each}}
Related
I'm looking to get the URL of a post accessed using a {{#foreach posts}}{{/foreach}} helper. The structure I am using right now is :
<div class="pfdflxbx">
{{#get "posts" limit="3" include="tags, authors" filter="featured:true"}}
{{#foreach posts limit="3"}}
{{title}}
{{/foreach}}
{{/get}}
</div>
When I insert a {{url}} helper between {{title}} and {{/foreach}}, the URL that gets returned to me is the url of the site's home page.
If I use the following structure:
<div class="pfdflxbx">
{{#get "posts" limit="3" include="tags, authors" filter="featured:true"}}
{{#foreach posts limit="3"}}
{{#post}}
{{title}}
{{/post}}
{{/foreach}}
{{/get}}
</div>
Nothing renders to the DOM, as in, no posts populate.
Could someone help shed some light on the correct practice here?
The first solution I posted was correct. There is a bug in the back end version I am working with which causes the URL of the blog posts to redirect to the welcome page.
I'm a Ghost beginner, and I know I can get the list of pages doing like below.
{{#get "pages"}}
{{#foreach pages}}
{{{html}}}
{{/foreach}}
{{/get}}
But am I able to fetch a specific page? Let's assume that I have an "about" page that I'd like to fetch in order to show its contents into the blog's sidebar, for example, this is what I tried, but it's not working.
{{#get "pages/slug/about" as page}}
{{page}} // prints undefined
{{/get}}
Any help would be much appreciated.
The first parameter passed to the #get helper specifies the name of the resource you want to query. It should be either posts, tags or authors. In your use case it should be posts.
{{#get "posts" slug="pages/slug/about" as |post|}}
{{#post}}
<h1>{{title}}</h1>
<div class="post-content"> {{content}} </div>
{{/post}}
{{/get}}
In meteor, you can include a template like this
{{> exampleTemplate }}
or we can use
{{> yield}}
another way is
{{> Template.dynamic template=example data=this}}
So what's the difference? Under what situations should we choose?
{{> yield}} is used to load templates according to defined routes in Iron router for example
{{> exampleTemplate}} is used to load a specific template on another template. You can split your templates into different components and load them like that.
{{> Template.dynamic template=example data=this}} is used to render a template dynamically. This means that you can code the logic of which template to render in the template helper 'example' in js file.
I'm working on a Ghost Theme and am having trouble getting the foreach helper to respect the else condition (or negation) in conjunction with #get.
Steps to Reproduce
1) Enable "Public API" in Ghost's "Settings > Labs > Enable Beta Features"
2) Add the following code to any .hbs page
{{!-- Obviously, this tag should not exist --}}
{{#get filter="tags:does-not-exist"}}
{{#foreach posts}}
foo
{{else}}
fails to show up
{{/foreach}}
{{^foreach posts}}
fails to show up
{{/foreach}}
{{!-- Problem persists using #posts shorthand --}}
{{#posts}}
foo
{{else}}
fails to show up
{{/posts}}
{{^posts}}
fails to show up
{{/posts}}
{{/get}}
3) Check that page in your browser
Expected Result: "fails to show up" appears 4 times (once for each reference).
Observed Result: "fails to show up" never appears
Notes
#get works as expected when the tag does exist. In the above code block, you'd see foo appear twice per post found.
{{#foreach}}...{{else}}...{{/foreach}} works as per the documentation when used outside a #get helper. I had no difficulty reproducing their example:
{{#foreach tags}}
{{name}}
{{else}}
<p>There were no tags...</p>
{{/foreach}}
Technical details:
Ghost 0.9.0 and 0.8.0
Node v4.4.7
Chrome v52
sqlite
See Ghost Issue #7242
I opened a github issue, and received a solution there. You should be putting {{each}} directly on {{#get}}:
{{#get "posts" filter="tags:xyz"}}
{{#foreach posts}}
yeah posts
{{/foreach}}
{{else}}
no posts found
{{/get}}
My meteor application has the following basic layout:
<template name="layout">
{{> header}}
{{> yield}}
{{> footer}}
</template>
My header template contains a full-width header:
<template name="header">
<div>
<!--implementation of full-width header-->
<h1>{{pageTitle}}</h1>
<!--insert custom html here, e.g. search input or options (see screenshot)-->
</div>
</template>
Then, I have multiple yield templates, that's where the main content goes.
For each of my yield templates, I want to be able to load custom content "into" my header template:
set the pageTitle attribute, so I have a custom title on every routed page
insert some html content, e.g. to do show some extended options (in this example it's about filtering the result of the query, but basically it's html content)
What's the best way to do this?
For a better understanding I include a screenshot of how the page looks like:
EDIT
I came up with the following. I add another base template to the layout, let's call it headerYield:
<template name="layout">
{{> header}}
{{> headerYield}}
{{> yield}}
{{> footer}}
</template>
All the custom markup would go there, with the disadvantage, that I need 2 custom templates for each view.
This question isn't clear. Is the question how can I include a header template? If so then this would be the answer...
<template name="header">
<div> <!-- abosolute position full div --> </div>
<!-- markup here brah -->
</template>
Now if the question is how can I include a page title? If so then this would be the answer...
Router.route('/user', {
onAfterAction: function() {
document.title = 'page title';
}
});
This assumes you have the iron router package installed. Iron router just controls what template gets rendered when looking at particular pages. For example the route "/user" could be sent to any template that you choose. If you want information on how to install iron Router or what it can do you can see their documentation. It's necessary for meteor applications:
iron router
Update:
After looking at your profile your other questions include iron router so you have used it before. So now I am really confused as to what your question is.