I am trying to use twig / include to pull content from two files where the second file passes as a variable the 'set' content from the first. The problem is that the 'set' content cannot be seen when it comes from a file. As an example, this works
{% set localContent %}
<div> someContent </div>
{% endset %}
{% include 'MyBundle:Templates:some.html.twig' %}
{% include 'MyBundle:Templates:main.html.twig' with {
'includedContent': localContent,
} %}
where main.html.twig is simply:
{% block form_row %}
<div> mainContent </div>
{{includedContent}}
{% endblock form_row %}
and some.html.twig contains:
{% set fileContent %}
<div> someContent </div>
{% endset %}
When I change the includedContent variable to fileContent which is defined in a file I get an exception that indicates fileContent cannot be located.
Is what I am trying to do possible ?
Can anyone help me, I would like to get this application finished before the world ends in a few days :-).
I found another mechanism to accomplish the same task. If I pass the include path into the main twig file and use that to access the fileContent everything works as expected.
Related
Hi all Im calling data from a json file. Whe I create the following loop:
{% for item in resume.applications %}
<span class="expanded uppercase">{{ item.fields.Job }}</span>
{{ item.fields.intro | safe }}
{% endfor %}
The span renders with the correct html content. However if I try to set a variable without a loop:
{% set job = resume.applications %}
<span>{{ job.fields.intro }}</span>
I get nothing? Not sure what I'm doing wrong. Thanks.
I get nothing
I have a YAML array in a file called navigation.yml as follows:
docs:
- title: Home
url: index.md
id: index
- title: Support
url: support.html
id: support
- title: About
url: about.md
id: about
I am creating a navigation bar as follows:
<section id="navigation" class="clearfix">
{% for item in site.data.navigation.docs %}
<span>{{ item.title }}</span>
{% endfor %}
</section>
What should I put in place of index.md to get the item.url that I want from the YAML file.
I am totally new to GitHub Pages, YAML, and Jekyll.
At the moment, the link tag doesn't seem to support variables.
There's a pull request trying to change this, but it has not been merged into the main Jekyll repo yet.
So if you want to do this now, you need to use some tricks.
The solution suggested by flyx in his comment (replace {% link index.md %} by {{ item.url }}) basically works, but shows the original filename written in the data file.
⇒ If index.md is automatically renamed to index.html while rendering the site, your link won't work anymore.
(or if support.html becomes support/index.html)
That's probably why you wanted to use the link tag instead.
Without using the link tag, you need to loop your data file, loop through all pages to find the respective page, and show that page's actual URL in your link:
<section id="navigation" class="clearfix">
{% for item in site.data.navigation.docs %}
{% for page in site.pages %}
{% if page.path == item.url %}
<span>{{ item.title }}</span>
{% endif %}
{% endfor %}
{% endfor %}
</section>
This even takes stuff like explicitly set permalinks (permalink: /whatever/ in the page's front matter) into account.
I am attempting to create pagination in Jekyll under the path '/notes/'.
In my _config.yml, I have:
paginate: 2
paginate_path: "/notes/:num/"
In my /notes/index.html, I have:
<div class="pagination">
{% if paginator.previous_page %}
Previous
{% else %}
<span class="previous section link">Previous</span>
{% endif %}
<span class="page_number section">{{ paginator.page }} / {{ paginator.total_pages }}</span>
{% if paginator.next_page %}
Next
{% else %}
<span class="next section link">Next</span>
{% endif %}
</div>
When I load http://localhost:4000/notes, I see that the 'Previous' link is not linking to /notes/2, but instead it simply links to /notes/, the page that I am already on. Additionally, when looking in the generated _site folder, I see that /notes/2 has not been created, despite having more than two posts created.
So, I suppose my question is, how can I fix this and get jekyll to paginate properly?
Here is my use case
I have a file that pulls pieces together (holy-grail.njs) that then is extended by the actual page I want (single.njs). Problem is that the blocks defined in included files are ignored by the actual page template. You can see the extended sidebar text is not appearing in screenshot <p>Here is some additional content for the sidebar extended in</p>
Just for grins I moved that block code from sidebar.njs to holy-grail.njs and yes it is extended by single.njs so it is indeed as I suspected.
Is the a bug?, a non-feature? How about a work around? Or will Jade do what I want? I assumed that "included" files were just included as in before further processing but maybe they are processed then included? Without being able to do this my whole groovy way of organizing my template pieces/partials and then extending/customizing the content will be a no go.
this same question was asked three years ago and no one answered
Blocks in included files not being filled by extended templates
single.njs
{% extends "layouts/holy-grail.njs" %}
{% block sidebar %}
<p>Here is some additional content for the sidebar extended in</p>
{% endblock %}
{% block article %}
{% raw %}
{{ Hugo code here to grab the article title and content }}
{% endraw %}
{% endblock %}
holy-grail.njs
{% set reg = "regions/" %}
{% set cmp = "components/" %}
{% include "regions/head.njs" %}
<body class='page'>
{% include reg + "header.njs" %}
<div class="rollover-wrapper">
{% include reg + "topbar.njs" %}
<main>
{% include reg + "sidebar.njs" %}
<section id="content">
{% block article %}
{# This is where one melds in article content #}
{% endblock %}
</section>
</main>
{% include reg + "footer.njs" %}
</div>
{% include cmp + "javascripts.njs" %}
</body>
sidebar.njs
<aside id="sidebar" class="sidebar">
<p> some sidebar content set in the sidebar.njs file </p>
{% block sidebar %}
{# This is where one melds in more sidebar content #}
{% endblock %}
</aside>
This from one of the maintainers of Nunjucks
Your guess is correct: includes operate at a "higher level" than
template inheritance. So an included template can have blocks, and can
have its own "extends" tag, and a totally separate template
inheritance hierarchy, but its blocks don't in any way interact with
the blocks of the including template's inheritance hierarchy.
So the solution I came up with is to use another tool (gulp plugin) to pre-assemble the partials then run them through nunjucks like this.
N.B my preprocessor file uses extension *.pnjs and outputs to a corresponding *.njs file which then is processed/extended in the single.njs.
var merge = require('gulp-file-include')
var rename = require("gulp-rename");
gulp.task('html:pre', function() {
gulp.src(['assets/html/nunjucks/layouts/*.pnjs'])
.pipe(merge({
prefix: '##',
basepath: 'assets/html/nunjucks'
}))
.pipe(rename({extname: ".njs"}))
.pipe(gulp.dest('assets/html/nunjucks/layouts/'));
});
var nunjucks = require('gulp-nunjucks-render');
gulp.task('html:njs',['html:pre'], function() {
gulp.src('assets/html/nunjucks/*.njs')
.pipe(nunjucks({ path: ['assets/html/nunjucks'] // String or Array
}))
.on('error', console.log)
.pipe(gulp.dest('./builds/dev/'));
});
and then you'd have to change your include syntax to that supported by gulp-file-include
like this.
##include('regions/head.njs')
<body class='page'>
##include('regions/header.njs')
<div class="rollover-wrapper">
##include('regions/topbar.njs')
<main>
##include('regions/sidebar.njs')
<section id="content">
{% block article %}
{# This is where one melds in article content #}
{% endblock %}
</section>
</main>
##include('regions/footer.njs')
</div>
##include('components/javascripts.njs')
</body>
TLDR - How do I access the current user path in octopress/jekyll?
On my Octopress blog, I would like to display an HTML element only when the user is on the root path. The trouble is that {{page.url}} returns /index.html on the root path, while my root path in _config.yml is set to '/'.
Thus, this conditional does not work:
{% if page.url == site.root %}
<div class="blurb">
<p>{{ site.description }}</p>
</div>
{% endif %}
When I change the root in _config.yml to match /index.html it breaks all of the CSS. Why is page.url pointing to index.html? There is no /index.html in the url of my live website. Is /index.html referencing a controller somewhere?
Is there an easy way to access the current user path in Octopress/Jekyll?
For reference - I am pulling the page.url variable from a Jekyll doc. {{site.root}} refers to the root value in the _config.yml file.
Thanks!
I solved this by hardcoding '/index.html' into the conditional.
{% if page.url == 'index.html' %}
<div class="blurb">
<p>{{ site.description }}</p>
</div>
{% endif %}
In source/_layouts/default.html
{% if page.front_page %} {% include front_page.html %}{% endif %}
and then add front_page: true
in index.html
---
layout: default
navbar: Blog
front_page: true
---