I'm really excited to see that we can apply a block assignment for set through Nunjucks. What would be the correct way to allow HTML to be passed through this approach?
I want to do the following from my initial nunjucks file:
{% set demoSetBlock %}
<div class="mClass">
<p>a header value in a nunjucks set block</p>
</div>
{% endset %}
I then want to call it into my nunjucks template like so...
{{demoSetBlock}}
but...it's printing out the content along with the HTML markup on the web page, just like this...
<div class="mClass"> <p>a header value in a nunjucks set block</p> </div>
How can we render this so that it shows it as...
a header value in a nunjucks set block
Not sure if this is the official way of resolving the situation, but what appears to be working for me now is using |safe as an attribute when the set block is called, like so:
{{demoSetBlock|safe}}
as a result, my HTML is perfectly rendered on the browser.
This is helpful in cases
when I don't want to depend on macros.
when I want to depend on set as an instrumental component for defining and passing data through various parts of my templates.
where I have other include files (i.e. _include-header.njk, _include-footer.njk) that are directly attached to my main template file. I could then use set block for one of these files.
Related
I'm trying to display my terms' content on the page using component 'TermsDescription'.
I try this code on my page :
<...> {% component 'TermsDescription' %} <...> {% component 'TermsDescription|raw' %} <...>
But display same as screen-shot
my content is displayed with <.p> tag. So, tags displayed as text, not as HTML-tags at all. I have either 'only text' without decoration, or pure tags-as-a-text on the page. What am I missing? Where is the solution? :)
You can not use raw in defining component like this {% component 'TermsDescription|raw' %}.
Instead of this, you should have to understand the components in OctoberCMS.
Suppose you are passing data from your TermsDescription component.
$this->page['data']= /Data::find($id);
And it contains title and description. And Description has data as seen in your question.
Then you can do this way
{{ data.description|raw' }} where you want to print description.
I have a website that consists out of a few 'slides'. Each has a fixed structure, used by some scripts, but variable content. I'm hosting it on github and am now trying to use Jekyll to make it easier to add new slides.
I already have each slide in a different html file, which I include in the main page: {% include_relative _slides/about.html %}. Now I'm trying to make it a markdown file, and I wanted to use front matter to make a layout that each slide's file could use. I can include a markdown file, and get it to render by doing:
{% capture myInclude %}{% include_relative _slides/test.md %}{% endcapture %}
{{ myInclude | markdownify }}
However, when I add a front-matter block to it with a layout defined in it, the layout doesn't get applied. It just gets rendered as a horizontal line (for the first ---) and then "layout: slide title: Test Slide —" in plain text.
Is there any way to fix this? Or perhaps a better way to break up my index.html and the slides in it?
Thanks a lot!
Note: Sorry if this was asked before, I Googled everything I could imagine it would be called.
I found something that works for me. I divided my template in two parts, the part above the content, and the part under it. Then in the file I include, there are two includes as well, one at the top and one at the bottom.
So my 'slide' files look like this:
{% include slide_start.html title="About" image="images/about.jpg" %}
... the content of the slide ...
{% include slide_end.html %}
As you can see, in the first include I give some parameters, these will be filled in and can be accessed with the liquid tags {{ include.something }}.
My slide_start.html looks like:
<div class="slide">
<div class="header">
<span>{{ include.title }}</span><!-- no whitespace
--><img src="{{ include.image }}" alt="{{ include.title }}"/>
</div>
<div class="content" markdown="1">
the slide_end.html is just two closing div tags.
You're trying to mix the page/post and the include strategies.
Page/post have a front matter and are decorated with a template, which can itself be decorated. `mypage.html -> layout: page -> layout: default.
Includes are included in page/post but they are only code parts. They cannot be decorated with a template.
You will have to choose.
Take a lool at https://github.com/shower/jekyller this can be helpfull.
On my blog that is powered by GitHub Pages, I'm trying to make it easy to include code snippets in my blog posts. For this, I have created code-snippet.html in the _includes-directory:
<pre><code>{% include {{include.file}} %}</code></pre>
To include a code snippet in a blog post, I use the following code:
Code snippet: {% include code-snippet.html file="snippets/MyPost/MySnippet.cs" %}
However, the content of the file _includes/snippets/MyPost/MySnippet.cs does not get included. If I output {{include.file}} in code-snippet.html I can see that the parameter is passed in correctly, but if I try to include it, I get nothing.
That's a good question. Here is my two cents.
Here, I took the example of your _posts/2012-11-16-idisposable.html post.
Storing code snippets
As code is part of the post's content I logically move it to the _posts folder. Storing it in the _includes folder is not so good as this is a template folder.
Let's copy the idisposable/TryFinallyDispose.cs.html from _includes/code-snippets to _posts/_code or anything you want.
As the code is stored in an underscored folder (_code), it will not be processed as is by Jekyll. We will just 'include' it in our posts.
Note : code snippet can be saved as code.cs
As we will use highligting from Jekyll dependancies (see below), we just rework code snippet by, removing <pre> and <code>.
It becomes :
var x = new X(); // X is a class that implements IDisposable
try
{
// do something with x
}
finally
{
x.Dispose();
}
Displaying code
Jekyll offers various ways to highlight code (markdown, pygments, rouge, ..). Here I demonstrate the pygments way, but it's up to you to explore other solutions.
The base template will be (_includes/code-snippet-csharp.html):
{% capture filePath %}_code/{{include.file}}{% endcapture %}
{% highlight csharp %}
{% include_relative {{filePath}} %}
{% endhighlight %}
note: one drawback here, in the {% highlight csharp %}, code name is hardcoded. I found no way to pass the language to the highlight tag as a variable. If you want to use multiple languages, you'll need to duplicate the include template as code-snippet-csharp.html, code-snippet-js.html, ...
Styling code
In order to beautify our code, we need an extra css file. The basic one is here, but there is many more.
Style is saved as assets/syntax.css and included in _layouts/default.hmtl :
<link rel="stylesheet" href="{{site.baseUrl}}assets/syntax.css">
And it can also be included in your sass process.
Including code in posts
We now just have to call our code in _posts/2012-11-16-idisposable.html.
{% include code-snippets/idisposable/TryFinallyDispose.cs.html %}
Is replaced by :
{% include code-snippet-csharp.html file="idisposable/TryFinallyDispose.cs.html" %}
Result
Better content structure and a nicely highlighted code !
You can include code like this
~~~
{% include snippets/MyPost/MySnippet.cs %}
~~~
Actually the question is in the subj...
Is it possible to make handlebars template framework, to recognize templates within a div tag and not in script tag?
For example I would like to create template with this markup:
<style>
div.text-x-handlebars {display:none;}
</style>
<div class="text-x-handlebars-template">
<h2>I'm template</h2>
<p>{{welcomeMessage}}</p>
</div>
Yes you can put your templates in <div>s rather than <script>s, for example:
http://jsfiddle.net/ambiguous/RucqP/
However, doing so is fraught with danger. If you put your template inside a <div> then the browser will interpret it as HTML before you've filled it in; so, if your template's HTML isn't valid until after it has been filled in, the browser may attempt to correct it and make a mess of things. Also, if you have id attributes in your templates, then you will end up with duplicate ids (one in the template <div> and a repeat in the filled in template that you put in the DOM) and that will cause all sorts of strange and interesting bugs. The browser will also try to download any images inside the templates in a <div>, this may or may not be a problem (if might even be desirable but probably not desirable if the image uses a template variable in its src attribute).
Basically, you can do it but you shouldn't, you should put your templates in <script id="..." type="text/x-handlebars-template"> elements instead.
I have a basic layout page template:
---
layout: default
---
<header class="sidebar">
{{ page.title }}
</header>
<section class="content">
{{ content }}
</section>
My pages that use this as the page template are just Markdown that gets put into the <section> block.
I'm looking for a way to keep all my page content in one file but have it so I can define separate content that gets put into the <header> tag from the page template.
Is there any way to do this and keep all the page's content in one file?
You can do so by defining the content you wish to be separate and reused in the _includes/ directory.
You would then include it by calling for example: {% include file.ext %} to include the of the file name _includes/file.ext (almost as if you just copy and pasted it in).
See section pertaining to the _includes in the Jekyll documentation here.
The YAML Front Matter can be used to directly store additional content for the page. This is done by creating custom key/value variables. The layout/template uses liquid tags to check to see if the secondary content is available. If so, it gets output. Otherwise, the section is skipped.
Here's an example of a layout template that checks to see if a custom variable called myvar1 is set:
---
layout: default
---
<header class="sidebar">
<h2>{{ page.title }}</h2>
{% if page.myvar1 %}
<p>Secondary content here: {{ page.myvar1 }}</p>
{% endif %}
</header>
<section class="content">
{{ content }}
</section>
Note: To match your original example, this layout file calls a parent "default" layout. For this example, the above is in a layout file called "_layouts/nested_layout.html".
To use the new slot, a myvar1 variable is added to the front matter, like this:
---
layout: nested_layout
title: This is the post test layout
myvar1: More here <strong>including bold text</strong>.
---
And here is the page content: The quick brown fox jumps over the lazy dog.
When that page is processed, the secondary content will show up. If you create another page that doesn't have myvar1, nothing will be rendered at that part of the template.
You can add as many custom variables to your pages as necessary. The values can include HTML as shown in this example. (It works for me in Jekyll 0.11.2.) If you have a lot of code that you want to add (instead of something that easily fits on one line), or if you want to have the same content available to turn on/off for multiple pages, you can use the custom variable as a flag. Then, in the {% if %} tag, you would call an include if the value is set.