I have a project set up like this:
and I'm using gulp-nunjucks-render for templating. My gulpfile.js looks like this:
gulp.task('nunjucks', function() {
// Gets .html and .nunjucks files in pages folder
return gulp.src('pages/**/*.+(html|nunjucks)')
// Renders template with nunjucks
.pipe(nunjucksRender({
path: ['templates']
}))
// output file to main folder
.pipe(gulp.dest('./'));
});
It works well, and creates an index.html in my root folder.
However, whenever i want to include a partial from templates/partials/bottomnav.nunjucks, nothing happens. The index file is created, but the bottomnav html is not included.
I have been following this guide and so my index.nunjucks looks like this:
<!-- index.nunjucks -->
{% extends "layout.nunjucks" %}
{% block content %}
<h1>This is the index page</h1>
{% include "partials/bottomnav.nunjucks" %}
{% endblock %}
-- but why is the partial not included? Is the path wrong?
Well, it turns out the setup above actually works.
Related
I have a base.html template file for Django (4.1.2) as:
<!DOCTYPE html>
<html lang="en">
{% load static %}
{% load i18n %}
<head>
<meta charset="utf-8">
{% block title %}
<title>My Title</title>
{% endblock %}
</head>
<body>
{% block content %}
{% endblock content %}
</body>
</html>
and an index.html page, at the same level in the /templates folder of my app, extending the base one, as:
{% extends "base.html" %}
{% block content %}
<h1>My Django project</h1>
<ul>
<li>{% trans "Admin" %}</li>
<li>{% trans "Foo" %}</li>
</ul>
{% endblock %}
But when I browse the latter page, the server returns the following error:
django.template.exceptions.TemplateSyntaxError:
Invalid block tag on line 6:
'trans', expected 'endblock'.
Did you forget to register or load this tag?
But if I simply add {% load i18n %} at the second line of the index.html, the page loads fine.
What is wrong with the loading of the base template in the index.html page?
This doesn't help as it doesn't differentiate the behaviour encountered here with the fact that loading, e.g. {% load django_bootstrap5 %} in base.html is working very well through all child pages without having to ever specify it again in those pages.
you must always load any tag library in each page if you want to use it.Even if the you have already load it in parent page.
I found a way to globally enable i18n in settings.py:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
# ... some options here ...
},
'builtins': ['django.templatetags.i18n'], # <---- add this line
},
]
Then, apparently, you no more need to load this template tag in every html template. It is not even necessary in base.html anymore.
More on templates built-in backends: https://docs.djangoproject.com/en/4.1/topics/templates/#module-django.template.backends.django
And on writing {% load i18n %} only once: https://code.djangoproject.com/ticket/1193
Inspired by: Load a Django template tag library for all views by default
I have a Django app with frontend in ReactJS..
In which I have two html files and one App.js with two classes..
My Issues is that React executes in the App.js only the first render line segment , and didn't render the element in the second line to the other html page?!
It only renders two elements if i have the two id`s in the same html file!
how to solve this ?!
first html page:
index.html
{% extends 'base.html' %}
{% block content %}
<div id='app'></div>
{% endblock %}
second html page:
arabic_home.html
{% extends 'base.html' %}
{% block content %}
<div id='app_arabic'></div>
{% endblock %}
The App.js:
ReactDOM.render(<App />, document.getElementById('app')); {/* it only executes the first line */}
ReactDOM.render(<App_arabic />, document.getElementById('app_arabic'));
Finally i found the solution,
*don't know why *
but this worked fine in my case:
by using the conditional case in App.js , i rendered the two elements conditionally and it worked well in both html pages ...
now App.jslooks like this:
const indexElement = document.getElementById('app');
if (indexElement) {
ReactDOM.render(<App />, indexElement);
}
const arabic_homeElement = document.getElementById('app_arabic');
if (arabic_homeElement) {
ReactDOM.render(<App_arabic />, arabic_homeElement);
}
Hi thank you for helping, I'm poor in coding.
To point: I'm doing a Django project that pass data form data-base to front-end; but right now i can't even pass anything views of Django into templates, I suspect i'm passing the wrong variable types; please do comment on your thought.
This is my code on views.py:
from django.shortcuts import render
def index (requset):
return render(requset,'myapp/index.html') # link to be able open frountend
def testdex(requset):
text = "hello world"
context ={'mytext' : text }
return render(requset,'myapp/inculdes.html', context)
so my variable will be pass into inculdes where extend to index page
This my codes on in inculdes.html:
{% exntends "myapp/index.html" %}
{% block includes %}
{{ mytext }}
{% endblock includes %}
this my code on index.html:
<body>
{% block includes %} {% endblock includes %}
</body>
Thanks again on giving me your time to help me and appreciate it if could write me some code because try fix this for whole week
You can try something like this:
views.py
from django.template.response import TemplateResponse
def testdex(request, template_name="myapp/includes.html"):
args = {}
text = "hello world"
args['mytext'] = text
return TemplateResponse(request, template_name, args)
includes.html
{% extends "myapp/index.html" %}
{% block includes %}
{{ mytext }}
{% endblock includes %}
And make sure you have set path for templates in settings.py
When you do {% block content %}{% endblock content %} you are telling Django that you want to be able to overwrite this section. Please note the word content can be anything to reflect what you want to overwrite.
When you do {{ variable }} you are telling Django that you want to pass a Context. In this example, variable I want to pass is called Title as the key and Portfolio as the value. Context is a dictionary that you pass in views.py like this:
def portfolio_home(request):
return render(request, 'portfolio/work.html', {'title': 'Portfolio'})
Let's say I want to pass a context (or a variable) into my base template. In this example, I want to pass title in the title tag of the head section of my base template.
In the html file for base.html, you need to have something like this:
<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
<title>{{ title }}</title>
...........
</head>
</html>
In the urls.py of my project and other apps that I want to pass a title into this, I should create the view like this:
def portfolio_home(request):
return render(request, 'portfolio/work.html', {'title': 'Portfolio'})
I found out why Django can't pass variables to HTML because;
I didn't have my apps url activated the function/model in views
I feel so embarrasses, for such simple mistakes.
All I need to do is add this code in my apps url
urlpatterns = [
path('', views.timedex, name='timedex'), #need add this
path('', views.index, name='index'),
]
Add {{block.super}} before {% endblock includes %}
I would like to use gulp and Nunjucks to generate multiple template files at once with varying content. These templates will all have the exact same layout, but pass in different variables for text/images.
I am able to successfully generate a single index.html file, but am unsure how to set this up for multiple files to be created at once. Here is a simplified version of what I have:
gulpfile.js
var nunjucks = require('gulp-nunjucks-render');
var data = require('gulp-data');
gulp.task('nunjucks', function () {
return gulp
.src('./src/layouts/**/*.+(html|nunjucks)')
.pipe(data(function () { return require('./src/data.json'); }))
.pipe(nunjucks({ path: ['./src/templates'] }))
.pipe(gulp.dest('./dist'));
});
layout.nunjucks
<head>
{% block title %} {% endblock %}
</head>
index.nunjucks
{% extends "layout.nunjucks" %}
{% block title %}
<title>{{ title }}</title>
{% endblock %}
data.json
{
"title": "DEFAULT"
}
What is the best way to alter this workflow to generate multiple files where each has a different title?
I've found that I can create multiple index.nunjucks files, but it looks like they all use the same data.json file. I also wouldn't want to make a separate JSON file for each.
Could I add an array to my data.json file to have Nunjucks loop through and create a separate file for each object found? Such as the following:
data.json
{
"files": [{
"title": "DEFAULT",
}, {
"title": "DEFAULT #2"
}]
}
Or is there a way to set variables within the index.nunjucks file without relying on storing them in JSON?
Found the way to do this: in each Nunjucks index file, I set a variable named email to the filename and updated my data.json file with a new object matching the filename with its own content.
default.nunjucks
{% set email = default %}
{% include "index.nunjucks" %}
test.nunjucks
{% set email = test %}
{% include "index.nunjucks" %}
index.nunjucks
{% extends "layout.nunjucks" %}
{% block title %}
<title>{{ email.title }}</title>
{% endblock %}
layout.nunjucks
<head>
{% block title %} {% endblock %}
</head>
data.json
{
"default":
{
"title": "TITLE"
},
"test":
{
"title": "TEST TITLE"
}
}
When compiled through gulp, two separate emails are created with their own title using the same template.
Is it possible to integrate disqus html comments in a blog using github-pages? I like the idea of using github, jekyll and markdown to manage my site and blog for simplicity. However, I'd like to include disqus commenting capability. However, since markdown generates the html - how do I include the html/js code for disqus ?
The easiest and cleanest way to do it is to create a partial with the HTML that disqus provides in your _includes/ folder (e.g. _includes/disqus.html) and then just including it in your posts layout file (e.g. _layouts/post.md):
{% include disqus.html %}
You can see an example here: post layout and disqus partial.
There is an "official" way to accomplish this task. You can find the Disqus indication at this link. In details, the procedure is the following:
Add a variable called comments to the YAML Front Matter (i.e. the header of your post file) and set its value to true. A sample front matter might look like:
layout: default
comments: true
# other options
Create a new template file (i.e. disqus.html) and put the Universal Embed Code there between {% if page.comments %} and {%- endif -%}.
Include the disqus.html file into your post template.
Hope it helps :)
Include the disqus comment in your post.html, and set an identifier for the comment count link:
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '<your-disqus-name>';
var disqus_identifier = '{{ page.id }}';
...
</script>
In your default.html template include the comment count script:
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = '<your-disqus-name>';
...
</script>
Then add the link to the comments using the data-disqus-identifier attribute, so that the comment count will show up after each post in your blog's main page:
Leave a comment
To summarise:
Use 3rd comment service Disqus, create one its account
Associate your site, that is your github site, with disqus
Get Disqus shortname in admin/settings/general/
Edit your _config.yml of github, make sure it contains following content:
disqus:
shortname: <your disqus short name>
Make sure there is disqus.html under _includes and it looks like:
{% if page.comments %}
<div class="comments">
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '{{ site.disqus.shortname }}';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
</div>
{% endif %}
Include disqus.html in _layouts/post.html
To enable comment, add comments:true on your post yaml front matter.
Disable it by setting comments: false or by not including the comments option at all.
Open config.yml and add the following line of code
disqus_shortname: username. Replace username with your Disqus shortname.
Create a file called disqus_comments.html in Jekyll’s _includes folder and add your Disqus Universal Embed Code in between a {% if page.comments %} and a {% endif %} liquid tag
{% raw %}{% if page.comments != false %}
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = '{{ site.disqus_shortname }}';
var disqus_identifier = '{{ page.url }}';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
{% endif %}{% endraw %}
You simply add comments: false in any posts front-matter to turn off that post comments.
Finally, open your post.html file and add the following liquid include tag just after the end </article> tag.
{% if site.disqus_shortname %}
{% include disqus_comments.html %}
{% endif %}
You can follow my detailed blog post on how to add Disqus comments to Jekyll if you get stuck.
That's true Jekyll will render HTML from your Markdown files (locally using Jekyll or remotely by pushing to gh-pages). However it doesn't really matter as this kind of code has to be in a layer, so not in the Markdown source file.
_layouts
`- default.html
`- post.html <- `layout: default` in the YAML header
_posts
`- YYYY-MM-DD-my-post.md <- `layout: post` in the YAML header
By following this tree view, you'll able to render your Markdown files by using your post layout, which can contain your Disqus script.