Blank lines within and especially at the top of an HTML source file look untidy to me.
A common template code (in this case, Jinja2) may look like this:
{% block header %}
{% include "templates/partials/something_header.html" %}
{% endblock header %}
{% block body %}
{% include "templates/partials/something_body.html" %}
{% endblock body %}
{% block footer %}
{% include "templates/partials/something_footer.html" %}
{% endblock footer %}
Now, without even adding indentation issues to make the above more presentable, it already has the adverse effect of generating 2 empty lines due to the 2 carriage returns within the templating code:
.
.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=....
Whilst I can utilize a minifier/post-processor in this particular case, I'm wondering what others do to keep their template code easy on the eyes whilst preventing unnecessary blank lines?
EDIT: To eliminate the blank lines at the head of the generated source code, the above example of template code would appear as below (much less readable):
{% block header %}{% include "templates/partials/grid_header.html" %}{% endblock header %}
{% block body %}
...
My original question was a bit of an "I know this can be done, but is there another way?".
Thanks to the feedback from David and Lajos, confirming that post-processing of the generated HTML from the template engine is the most common way to alleviate unwanted blank lines and spacing.
Lajos also suggested a concept of maintaining both a "clean" and "correct" version of each template itself, whereby the developer may work unperturbed with clean template code and upon any modification, another version of the file will be ghost-written, but reformatted so that generating HTML from it would in fact produce clean HTML without any unwanted artifacts due to templating.
Whilst I tend towards the common post-processing method and chain any such cleaning up of HTML along with combining and minifying CSS/JS, etc, there would be scenarios that Lajos's implementation definitely would be beneficial (ie, if you don't/should't have control outside of the templating stage).
Related
I'd like to create something like a shortcode for a blockquote in Jekyll. It should include the quote source in a nicely formatted way.
The shortcode could look like this:
{% quote author="My Author" %}
This is the quoted content
spanning multiple lines
And paragraphs
{% endquote %}
What's the best way to achieve this in Jekyll? Can it be that there is no way to provide multiple arguments to a Jekyll tag plugin?
I have found a blog post that provides multiple attributes using string concatenation or JSON.
My Research
I have found two systems in Jekyll that can be used similar to shortcodes:
HTML Includes
Custom Tags
To summarize, both methods only provide a single attribute to the Ruby code, the content. Below, you will find the limitations of both solutions.
HTML Includes limiations
https://jekyllrb.com/docs/includes/
An include in use looks like this:
{% include note.html content=download_note %}
It is possible to use content from captures for parameters, so we could create the following include file:
<blockquote>
{{ include.quote | markdownify }}
<p><em>{{ include.author }}</em></p>
</blockquote>
And use it in a blog post like this:
{% capture quote %}
This is the quote content
spanning multiple lines
And paragraphs
{% endcapture %}
{% include quote.html quote=quote author="My Author" %}
It works, but in my opinion, it's not really a nice approach to use when writing blog posts.
Custom Tags limiations
https://jekyllrb.com/docs/plugins/tags/
Sounds promising, but the documentation only shows two ways to use them:
{% render_time page rendered at: %}
and
{% render_time %}
page rendered at:
{% endrender_time %}
I'm working on a personal Django project where my plan is to make some sort of function in my site in form of a CSS Marquee (scrolling text).
I was able to make a marquee.html file with the code from here, and use it on several pages on my site using {% include "marquee.html" %} blocks, but the displayed string in the marquee is within the HTML file itself (marquee.html) between <p>-tags
Is there any way to send a variable/string along with a {%include "" %} block that replaces/adds to the <p> tags at the end of the marquee code?
(e.g. {% include "marquee.html" {{ stringToDisplay }} %} )
The current context is available for the included template. You can use the "with" option to send any additional context.
{% include "marquee.html" with message="Hello" %}
and in your marquee.html template
<div>{{ message }}</div>
The include documentation is here
I have the following setup:
base.html
...
{% block main-content %}
{% endblock main-content %}
...
admin.html
{% extends "base.html" %}
{% load staticfiles %}
{% block main-content %}
{% include users.html %}
{% endblock main-content %}
The file users.html uses tags like '{{ users }}' because it renders from a view that also returns several variables. Right now, if I call admin.html I can see the template of users.html (basic html, css) without the variables. I don't think the template is rendering from my views.py.
Is there anyway I can obtain the variables that the view is returning?
Note: base.html and admin.html are in the same django app, while users.html is in a different one.
Thank you!
This seems to be a common misapprehension.
Templates do not belong to views. The only relationship is that a view may (or may not) render a template: but a template itself may be rendered by one or many views, and has no actual knowledge of any of them. So when you "include" your template inside your admin template, there is no relationship to any other view that might also render it; if you need some variables in that view, you'll need to pass them there yourself.
Note that this sort of thing - that is, including a template along with some specific context variables - is usually best handled as an inclusion tag
I use GitHub Pages for my blog, and am running into a problem with Jekyll. My post.html has a block like this:
{% for testpost in site.posts %}
{% four %}
{% lines of %}
{% processing %}
{% goes here %}
{% endfor %}
The part in the middle doesn't matter. The important part is the end of the line which is outside of the {% %} markup, and is therefore rendered into the html. Since this is in a loop, it's putting about 1000 blank lines into the middle of by HTML page. It doesn't affect the display, but it make a View/Source troublesome.
Any ideas on how to avoid those extra blank lines?
Since Liquid v4 (included in Jekyll from v3.5) there is a Whitespace control, which finally resolved case with blank line, white space, etc.
Link to documentation: https://shopify.github.io/liquid/basics/whitespace/
There's a nice workaround, that I found out in https://github.com/plusjade/jekyll-bootstrap/blob/master/_includes/JB/setup, and which is compatible with github pages.
Just enclose your loop in a capture statement, and assign nil to the resulting var.
{% capture cache %}
{% for p in site.posts %}
do stuff here
{% endfor %}
{% endcapture %}{% assign cache = nil %}
How about
{{ page.content | escape | strip_newlines }}
There is Jekyll plugin that strips the whitespace.
Jekyll plugins by Aucor: Plugins for eg. trimming unwanted
newlines/whitespace and sorting pages by weight attribute.
You can get it directly from its Github repository. So basically you wrap your code with {% strip %}{% endstrip %}. Even if this doesn't suit you needs, you can easily change the ruby script.
For example:
{% strip %}
{% for testpost in site.posts %}
{% four %}
{% lines of %}
{% processing %}
{% goes here %}
{% endfor %}
{% endstrip %}
However, please remember the nature of Jekyll plugins, you can't run them on the Github Pages server.
Quote from Jekyll Doccumentation:
GitHub Pages is powered by Jekyll, however all Pages sites are generated using the --safe option to disable custom plugins for security reasons. Unfortunately, this means your plugins won’t work if you’re deploying to GitHub Pages.
You can still use GitHub Pages to publish your site, but you'll need to convert the site locally and push the generated static files to your GitHub repository instead of the Jekyll source files.
Actually there is a new solution for this problem which works without any plugin.
A Jekyll layout that compresses HTML. At a glance:
removes unnecessary whitespace;
removes optional end tags;
removes optional start tags;
removes comments;
preserves whitespace within <pre>;
GitHub Pages compatible;
ignores development environments;
configurable affected elements;
profile mode;
automatically tested.
http://jch.penibelst.de/
If you - for some reason - do not want to use this here is a nice article, which describes some workarounds:
Compressing Liquid generated code - sylvain durand
I'm developing a web portal using
- Django 1.2
- Apache
- Mod WSGI
I've several HTML files which are being served by apache.
I want to render those static HTML pages under my base template in order to keep my header / footer and dynamic menus intact.
One way I could thought its using iframes. Another way is to do read HTML files and return string while rendering but in that case I'm loosing advantage of apache, so I want to know if there would be any better way of doing it, is there any existing solution provided by django stuff ?
I'm not sure if this is exactly what you're asking for, but you can insert an html file (or even another template) in a template with the ssi and include tags, depending on your needs:
{% ssi '/path/to/file.html' %}
{% include 'relative/path/to/template.html' %}
yes, it's the include tag
Loads a template and renders it with the current context. This is a way of "including" other templates within a template.
it's as simple as
{% include "templates/static_template_1.html" %}
or, if you create a variable in the view side:
{% include template_name_variable %}
it shares the context with the base template (the one including them)
Edit:
Perhaps you ment to load html-files outside the template-system. Then my way will not suffice.
An option is to extend your base template.
Your base template should not be aware of the sub templates as that would be logically wrong.
Example:
base_template.html:
<html>
<div id='header'></div>
{% block content %}
This text can be left out else it it will shown when nothing is loaded here
{% endblock %}
sub_template.html:
{% extends "base_template.html" %}
{% block content %}
<h1>This is my subpage</h1>
{% endblock %}
You can read more here:
https://docs.djangoproject.com/en/1.2/topics/templates/