any ideas why my configuration is exporting njk code instead of content?
<body class="font-sans" id="top" itemscope itemtype="http://schema.org/WebPage">
{{ content | safe }}
<script src="scripts/index.js"></script>
{ % include 'footer.njk' % }
</body>
You've got too many spaces in there.
Change
{ % include 'footer.njk' % }
to
{% include 'footer.njk' %}
Related
CONTEXT:
Eleventy and Nunjucks (and Markdown)
A lot of long-form text (easier to create/edit using markdown).
Complex layouts.
Still new to SSGs
GOAL:
Manage chunks of text content using markdown.
Use these markdown files with template partials.
Assemble partials into a page.
EXPECTED RESULT
Processed html page:
<html>
<body>
<div>
<p>Some content originating from a markdown file.</p>
</div>
<div>
<p>Some content originating from another markdown file.</p>
</div>
</body>
</html>
ATTEMPTED ACTIONS
Here is what I've tried so far...
(Note: I've excluded my base.njk (html doctype shell) for readability.)
1. NJK MAIN with NJK PARTIAL INCLUDES
INPUT
Directory Structure
src/
/_includes
base.njk
_layout-A.njk
_layout-B.njk
main-layout.njk
content-1.md
content-2.md
main-layout.njk
{% extends "base.njk" %}
{% block content %}
{% include '_layout-A.njk' %}
{% include '_layout-B.njk' %}
{% endblock %}
content-1.md
---
layout: _layout-A.njk
---
Some content.
_layout-A.njk
<div>{{ content | safe }}</div>
content-2.md
---
layout: _layout-B.njk
---
Some more content.
_layout-B.njk
<div>{{ content | safe }}</div>
RESULT
Directory structure 'splits'.
dist/
/content-1
index.html
/content-2
index.html
/main-layout
index.html
Markdown content not passed through to parent page. Empty child tags in parent.
main-layout/index.html
<html>
<body>
<div></div>
<div></div>
</body>
</html>
I'm at a loss for how the files are processed and what I can do to do what I set out to.
That's not how 11ty works. Each MD file is a single page.
If you want to include multiple MD files to page, you should add custom filter for 11ty, to render it to html.
See examples in this issue https://github.com/11ty/eleventy/issues/658
I am using Go gin gonic for my web app. How do I use the same template file multiple times in 1 page with different variables passed to the template.
segment.tmpl
{{ define "segment" }}
<div>{{ .Variable }}</div>
{{ end }}
layout.tmpl
<!DOCTYPE HTML>
<html>
<body>
{{ template "segment . }} #with a variable 1
{{ template "segment . }} #with different variable
{{ template "segment . }} #another same template with another
</body>
</html>
main.go
r.GET("/home/", func(c *gin.Context) {
tmpl := template.Must(template.ParseFiles("templates/layout.tmpl", "templates/product_add.tmpl", "templates/segment.tmpl")
r.SetHTMLTemplate(tmpl)
c.HTML(200, "layout", gin.H {
"Variable1": "var1",
"variable2": "var2",
})
}
How do I use segment.tmpl multiple times in the page "home" and passing different kind of variables to the segment.tmpl?
I have searched everywhere and have found nothing, the closest thing is template.Clone, but still couldn't find any examples of it.
You can pass any value as the "pipeline" to the template, it doesn't have to be the "dot", i.e. you could pass the result of a function call, or, in this case, the result of accessing a map's value.
{{ template "segment" .Variable1 }}
and then inside the template "segment" you can refer to the pipeline using the dot, i.e. {{ . }}.
segment.tmpl
{{ define "segment" }}
<div>{{ . }}</div>
{{ end }}
layout.tmpl
<!DOCTYPE HTML>
<html>
<body>
{{ template "segment .Variable1 }}
{{ template "segment .Variable2 }}
{{ template "segment .AnotherVariable }}
</body>
</html>
Not sure how to name this correctly.
Is there any way to write one main template and many fragments and inject required fragment based on URL user requests.
Let's say i have /customers/profile and /customers/projects. I want to write one main customer.html template file and one customer-includes.html file with 2 {{ define "profile" }} and {{ define "projects" }} fragments.
Then i want have 2 handlers to handle /customers/profile and /customers/projects and to execute customer.html template.
But, when user go to the URL /customers/profile i want to inject in main template {{ template "profile" . }} and if he goes to /customers/projects i want to inject {{ template "projects" . }}.
What is the best way to do this?
I assume i need to use some kind of {{ if / else }} there. As example below. But mby there is better way.
{{ if ( eq .Section "customer-profile") }} // Could be replaced with Page ID
{{ template "profile" . }}
{{ else }}
{{ template "projects" . }}
{{ end}}
You may use template blocks for this.
templates/customers-base.html:
<html>
<head>
<title>{{.title}}</title>
<link rel="stylesheet" type="text/css" href="static/styles.css">
<!-- You can include common scripts and stylesheets in the base template -->
</head>
<body>
{{block "BODY" .}}
{{end}}
</body>
</html>
templates/customers-projects.html:
{{define "BODY"}}
<h1>Your Projects</h1>
<p>Normal template goes here</p>
<p>{{.myvar}}<p>
{{end}}
You can copy this format for templates/customers-profile.html.
Your project code:
data := map[string]interface{}{
"title": "Base template example",
"myvar": "Variable example",
}
layoutCustomersBase := template.Must(template.ParseFiles("templates/customers-base.html"))
layoutCustomersProjects := template.Must(layoutCustomersBase.ParseFiles("templates/customers-projects.html"))
// Or layoutCustomersProfile, if you are parsing in the '/customers/profile' handler.
err := layoutError.Execute(w, data)
Notice that you can define the "title" variable when you execute the customers-projects template; it will be used in the base template.
Bit of a beginner here and this issue has been causing me a headache for over a day. I'm using userfrosting as a framework, with the usual twig files for the web pages.
I'm trying to include a datepicker (bootstrap-datepicker.js hasn't worked, neither is the current iteration using jquery-ui) in a form in a twig - but no matter what I do, I can't get it to work!
Here's the basic setup:
{% block head %}
{{ parent() }}
<script src="{{site.uri.js}}/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="{{site.uri.js}}/custom.js" ></script>
{% endblock %}
{% block content %}
.... {{boring stuff missed out}}
<form class="form-inline" role="form">
.... {{boring stuff missed out}}
<div class="form-group row">
<label for="datepicker" class="col-sm-3 form-control-label">Subject Date:</label>
<div class="col-sm-6">
<input type="date" class="form-control" id="datepicker" />
</div>
</div>
.... {{boring stuff missed out}}
</form>
.... {{boring stuff missed out}}
{% endblock %}
{% block javascripts %}
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
{% endblock %}
The box is on the page, you can type a date into it etc, but nothing appears when you click on it (there should be a calendar appearing.)
Anyone have any ideas? I'm at a total loss. I've tried various versions, locally and (as you can see, currently) on a CDN, but nothing works. I'm sure it's probably something basic as I'm not an experienced web dev or anything, but any advice or working examples would be gratefully received!
Uh! facepalm
Well, after some digging and serious consideration of the inspector output (thanks CTRL-SHIFT-I!) it turns out to be a simple case of script loading order and multiple scripts being loaded.
I didn't realise twig loads a whole bucketload of scripts on top of what I ask it to load in the template I was creating. Only after seeing the inspector output for the page did I see that I was trying to load two different versions of jQuery and my own custom script was being loaded out of order - I was loading them here:
{% block head %}
{{ parent() }}
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="{{site.uri.js}}/custom.js" ></script>
{% endblock %}
that block should be reserved for stylesheets. Instead, I should be loading them here:
{% block page_scripts %}
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="{{site.uri.js}}/custom.js"></script>
{% endblock %}
... so that they are loaded AFTER all the default Bootstrap and userfrosting scripts.
https://jqueryui.com/datepicker/ uses type="text" for the input field. When I google the matter it seems that type="date" has at least previously caused problems.
In short: I would try changing type="date" to type="text".
I have an issue with YAML rendering content within partials using Assemble
Here is my breakdown:
layout/deafualt.hbs
<body>
{{pagetitle}} <!-- THIS WILL RENDER 'HELLO WORLD' FINE -->
<header role="banner">
{{> _header }}
</header>
<main role="main">
{{> body }}
</main>
<footer role="contentinfo">
{{> _footer }}
</footer>
</body>
pages/car.hbs
---
pagetitle: "HELLO WORLD"
---
{{#car }}
{{> banner }}
{{> content }}
{{> explore }}
{{> feature }}
{{> social }}
{{/car }}
modules/content.hbs
<h1>{{pagetitle}}</h1> <!-- THIS ***WON'T*** RENDER 'HELLO WORLD'-->
<h>Im a sub-heading</h2>
I imagine that its something to do with the context but I've tried various permutations to no avail.
Any pointers greatly appreciated.
A.
This is a handlebars issue more than Assemble. With handlebars it gets tricky when you use partials in nested blocks.
Given your example, in content.hbs try doing {{car.pagetitle}} since you're inside the {{#car}}...{{/car}} block.