In mysql database, table named "project" contains text data below. Text style(e.g. < h1 >) is included together.
I want to show "description" data of "project" table {{project.description}} in monitor like:
But it keeps showing as it is.
What tags should I use?
I already used div, source, resource, code, pre, p...
Also, I used iframe tag but I don't know how to use...
My html code is:
<!DOCTYPE html>
{% extends "layout.html" %}
{% block body %}
<p>
{{ project.description }}
</p>
{% endblock %}
This template is extended from layout.html and I just wrote p tag example.
Related
I am trying to extend a navbar so it appears in several pages. When I insert {% extend %} {% block content %} {% endblock %}, it only appears as text - the code dosen't work.
Here is my Navbar that I want to extend:
This is how it appears in the browser:
This is the html file I want to include my navbar in:
How it appears:
I want to inherit my navbar, but only the code text appears in the browser.
{% extend %} and so on have no special meaning in HTML.
The syntax is clearly from some template engine. Maybe Nunjucks.
You'll need to pass your source code through the template engine and use the HTML generated from it.
im pretty new to Django (as in no Knowledge so far) and a project requires me to include a Image inside of a hyperlink.
just including the inside of the hyperlinks created the error message
'blocktrans' doesn't allow other block tags (seen "static 'pretix_app/Instagram.png'") inside it
my code so far is
li ><img src="{% static 'pretix_app/YouTube.png' %}" alt="Youtube_icon" style="alignment: left;vertical-align:middle; width: 20px; padding-right: 5px" >
{% with 'target="blank" href="https://www.youtube.com"'|safe as a_attr %}
{% blocktrans trimmed %} <a {{ a_attr }}> Social Media-target {% endblocktrans %}
{% endwith %}</li>
This produces a working hyperlink, but does not include the image (which is required as a social media hyperlink)
The "safe as attr"-method was copied from a working template included in the source code.
Does anybody know if it is possible to include Images in Hyperlinks, and if yes, how?
Thanks in advance for any help
Hello Corinari and welcome to StackOverflow.
As the Django log says, the blocktrans (should be blocktranslate since Django 3.1 ref) may not contain other tags, which in this case is the {% static 'pretix_app/YouTube.png' %} part. We need to remove that part.
One possible way is to use the as statement. You could have the static tag outside your blocktrans block and pass through a variable, like this:
{% static 'pretix_app/YouTube.png' as yt_icon %}
{% blocktrans %}
<li>
<img src="{{ yt_icon }}" alt="Youtube_icon" style="alignment: left;vertical-align:middle; width: 20px; padding-right: 5px"/>
...
</li>
{% endblocktrans %}
This will fix your current error. There are, however several further notes I have. First is the probable typo pretix_app in the static path. The other, much more important, as Abdul says in his comment, you will reach another error with the second blocktrans block. As far as I know from what you have posted here you should not need the second blocktrans nested within the first one. You will be able to translate the whole thing as one.
I want to host some API documentation example code snippets, where the snippets live in different files and are included into a Jekyll page. I'm using Jekyll include tag (https://jekyllrb.com/docs/includes/).
e.g. given this input:
The `br` tag is for line breaks. Example:
<pre>
{% include code-snippet.html %}
</pre>
And code-snippet.html might be like:
<!doctype html>
First line<br>
Second line
I get this output, which has the browser interpreting the tags as HTML:
The `<br>` tag is for line breaks. Example:
<pre>
<!doctype html>
First line<br>
Second line
</pre>
But I'd rather get this output, with the browser interpreting the tags as text:
The `<br>` tag is for line breaks. Example:
<pre>
<!doctype html>
First line<br>
Second line
</pre>
Is there a way to achive this in Jekyll? Is there something like {% include code-snippet.html | htmlEscape %}? I imagine I could fix this with a Ruby plugin (after all, the include tag is just Ruby), but I'd like to avoid writing a plugin if possible.
I found a workaround:
You can read the include into a variable using capture, then include the variable through the xml_escapehttps://jekyllrb.com/docs/includes/ filter:
{% capture code_snippet %}
{% include code-snippet.html %}
{% endcapture %}
<pre>
{{ code_snippet | xml_escape }}
</pre>
The highlight tag also does HTML-escaping:
{% highlight html %}
{% include code-snippet.html %}
{% endhighlight %}
I am currently looking at developing a "static" website, few pages only. However, by design, I can tell there is going to be repetitive layouts/patterns. I am thinking doing a data-oriented approach, with my HTMLs being as reusable as possible. Here is an example:
index.html:
<div>
{% include organisms/topBanner.html
tp-title=site.data.home.topbanner.title
tp-select-blurb=site.data.home.topbanner.select.blurb
button-text=site.data.generic.buttons.getstarted
button-link=site.data.generic.links.gosomewhere
%}
</div>
then my organisms/topBanner.html:
<div class="tb">
<h1>
{{ include.tp-title }}
</h1>
<div>
<h2>{{ include.tp-select-blurb }}</h2>
<div>
{% include atoms/button.html
%}
</div>
</div>
</div>
finally my atoms/button.html:
<a class="button" href="{{ include.button-link }}">{{ include.button-text }}</a>
I have multiple JSON file under _data that basically hold the texts. An example for the button would be a _data/generic/buttons.json:
{
"getstarted": "GET STARTED",
"completesurvey": "COMPLETE THE SURVEY"
}
or links.json:
{
"gosomewhere": "/go-somwhere",
"surveypage": "/survey"
}
So this means you need to pass all your data from the top level include of the organism so every bits in it would have its data. That way the example of that button is that the HTML is defined only once and the data is bound to it. And for a second button to be in the topBanner you could do something like this:
index.html:
<div>
{% include organisms/topBanner.html
tp-title=site.data.home.topbanner.title
tp-select-blurb=site.data.home.topbanner.select.blurb
b-getstarted-text=site.data.generic.buttons.getstarted
b-getstarted-link=site.data.generic.links.gosomewhere
b-survey-text=site.data.generic.buttons.completesurvey
b-survey-link=site.data.generic.links.surveypage
%}
</div>
and in the topBanner.html, you rebind the data to the dedicated button:
<div class="tb">
<h1>
{{ include.tp-title }}
</h1>
<div>
<h2>{{ include.tp-select-blurb }}</h2>
<div id="getstarted">
{% include atoms/button.html
button-text=include.b-getstarted-text
button-link=include.b-getstarted-link
%}
</div>
<div id="survey">
{% include atoms/button.html
button-text=include.b-survey-text
button-link=include.b-survey-link
%}
</div>
</div>
</div>
This approach means everything is data driven, there is no repetition/'copy/paste' of HTML, it all works through includes and you can apply atomic design pattern (http://patternlab.io/).
Wanna change the text of the button from 'GET STARTED' to 'LET'S START'? Go to the data/generic/buttons.json and change it there. The whole website now has the text changed.
The drawback is the fact that all the data has to trickle down from top level. Readability might be bad.
First use of Jekyll for me, and waned to have your opinion on this. What is good practice for static website dev like this? Is it easier to have a buttonGetStarted.html that includes a more generic button.html, and pass the data to button.html from buttonGetStarted.html? Like:
buttonGetStarted.html:
{% include atoms/button.html
button.text=site.data.generic.buttons.getstarted
button.text=site.data.generic.links.gosomewhere
%}
and then include buttonGetStarted every time I need it on the page? But then if I need a new button for the survey, I need to create another html buttonSurvey.html and so on... Sure on the code you see an {% include buttonSurvey.html %} which is easy to read and understandable straight away what this button is about. So this:
{% include button.html button.text=site.data.generic.buttons.getstarted %}
with only one file button for all the buttons, or
{% include buttonGetStarted.html %}
with creation of a new HTML file everytime I need a new button?
Thanks
F.
Disclaimer : As this question is primarily opinion-based (see SO help on this), I've voted to close it.
However, I can give my two cents. Quote are from Atomic Design Methodology.
Atom
[...] elements that can’t be broken down any further without ceasing to be functional
atom/buttons.html
<a class="button" href="{{ include.datas.button-link }}">
{{ include.dats.button-text }}
</a>
Molecule
[...] molecules are relatively simple groups of UI elements functioning together as a unit.
Here the question is : "do we need datas from organism / page for our molecule to work ?"
Yes : Datas will be passed by the parent organism. molecule/buttonGetStarded.html looks like (Note : this molecule is Homonuclear, but is functionnal.)
{% include button.html datas=include.buttonDatas %}
No : Datas will be set from inside the molecule (imaginary data structure)
{% include button.html datas=site.data.buttonDatas.getStarted %}
So in your case, I think that organism/topBanner.html can be composed like this (simplified for readability) :
{{ include.tp-title }}
<h2>{{ include.tp-select-blurb }}</h2>
<div id="getstarted"> {% include molecules/buttonGetStarted.html %}</div>
<div id="survey"> {% include molecules/buttonSurvey.html %}</div>
As I guess that your data files can be used for Internationalization (I18n) purpose. The molecule language doesn't need to be passed all the way down. It can be guessed by the molecule itself.
{% if page.language == nil %}
// if no language variable in page's front matter
// we default to site language set in _config.yml
{% assign language = site.language %}
{% else %}
// language variable present in front matter
{% assign language = page.language %}
{% endif %}
// get datas depending on guessed language
{% assign datas = site.data[language] %}
// this can even be more atomic with
{% assign datas = site.data[language]['buttonSurvey'] %}
// include the atom with correct language datas
{% include atom/button.html datas=datas %}
Note that this logic can even be factorized.
I used django. This is my data from table company field description:
<b>This is description</b>
When I show that data in django template, the bold function not rendered. Instead, it show this on the page:
<b>This is description</b>
Why the html tag <b> not rendered?
Use autoescape in your template as follows:
{% autoescape off %}
{{ company.description }}
{% endautoescape %}