I want to make my GAE application webapp2 compatible.
This code worked great with webapp:
insert = '<p><font color="red"><b>some text</b></font></p>'
template_values = {
'insert': insert,
...
}
path = ...
self.response.out.write(template.render(path,template_values))
The content of the variable insert was just put into the web page output by webapp. Now the content of the variable is "analyzed" by webapp2 and the content is changed when it is inserted in the webpage.
webapp2 inserts this:
<p><font color="red"><b>some text</b></font></p>
How can I go back to the old behavior?
Thanks for any help.
Have a look at
safe : https://docs.djangoproject.com/en/dev/ref/templates/builtins/#safe &
autoescape : https://docs.djangoproject.com/en/dev/ref/templates/builtins/#autoescape.
Eg:
{{ insertHTML|safe }} OR
{% autoescape off %}{{ inserHTML }}{% endautoescape %}
Related
I am creating a personal blog website with Flask and sqlalchemy.
While posting my blogs, I want the blog to be published with well formatted html.
Here is my model for Blogs:
class Blog(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(), index=True)
description = db.Column(db.Text(), index=True)
content = db.Column(db.Text(), index=True)
timestamp = db.Column(db.DateTime, index=True, default=datetime.utcnow)
likes = db.Column(db.Integer, default=0)
dislikes = db.Column(db.Integer, default=0)
comments = db.relationship('Comment', backref='commented_by', lazy='dynamic')
def __repr__(self):
return 'Title <>'.format(self.title)
And here is my form for adding blog:
{% extends 'base.html' %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1 class="code-line text-center" data-line-start="14" data-line-end="15">Add Blog</h1>
<br>
</div>
</div>
<form action="" method="POST" novalidate>
{{ form.hidden_tag() }}
<p>
{{ form.title.label }}<br>
{{ form.title(size=30) }}<br>
</p>
<p>
{{ form.description.label }}<br>
{{ form.description(size=30) }}<br>
</p>
<p>
{{ form.content.label }}<br>
{{ form.content() }}<br>
</p>
<p>
{{ form.submit() }}
</p>
</form>
{{ ckeditor.load() }}
{{ ckeditor.config(name='content') }}
{% endblock %}
This is how I am rendering my blog:
{% extends 'base.html' %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h1 class="code-line text-center" data-line-start="14" data-line-end="15">{{ blog.title }}</h1>
<br>
{{ blog.content }}
</div>
</div>
</div>
{% endblock %}
While adding blog, I am using a text editor
But once it has been posted and I render it on view blog page, no html content is being rendered not even linebreaks
How can I save html content and tags in my sql database and then render it using jinja template?
first, what is wrong:
the text you get from the text field in the form is not the same thing as HTML that renders it, what you are getting is the text.
in case you want to get the HTML generated inthat form, you should integrate a rich text editor, like quilljs.com, or tiny.cloud in your template, that will have a field that you can use, to grab the HTML it generated, and it will also allow you to create nice looking blog articles.
if you do not want this either, to get html from that form, writing HTML directly in that form will give you what you want.
In the context of markdown, it is actually possible to apply the same format to your database-saved content. You can use a few packages to help you work with HTML in your database.
To begin, let me suggest Stackoverflow QA forms. Notice how it has enabled markdown editing and a nice little preview of the text being written. To enable the preview, you can install the flask-pagedown package in your virtual environment.
(venv)$ pip3 install flask-pagedown
Initialize a pagedown object in your application's instance, say in __init__.py file, or whatever other file you are using.
# __init__.py
from flask import Flask
from flask_pagedown import PageDown
app = Flask(__name__)
pagedown = PageDown(app)
Within your head tags in HTML, add this CDN call whose files you do not need to have in your application.
<!-- base.html -->
{% block head %}
{{ pagedown.html_head() }}
{% endblock %}
Or this:
<head>
{{ pagedown.html_head() }}
</head>
If you prefer to use your own JavaScript source files, you can simply include your Converter and Sanitizer files directly in the HTML page instead of calling pagedown.html_head():
<head>
<script type="text/javascript" src="https://mycdn/path/to/converter.min.js"></script>
<script type="text/javascript" src="https://mycdn/path/to/sanitizer.min.js"></script>
</head>
Now, simply update your forms to use PageDownField:
# forms.py
from flask_pagedown.fields import PageDownField
class Post(FlaskForm):
post = PageDownField('Comment', validators=[DataRequired()])
Or this:
<form method="POST">
{{ form.pagedown(rows=10) }}
</form>
That's it! You should be able to have a client-side post preview right below the form.
Handling Rich Text in the Server
When the post request is made, then only raw markdown will be sent to the database and the preview will be discarded. It is a security risk to send HTML content to your database. An attacker can easily construct HTML sequences which don't match the markdown source and submit them, hence the reason why only markdown text is submitted. Once in the server, that text can be converted back to HTML using a Python markdown-to-html convertor. There are two packages that you can make use of. Install then in your virtual environment as seen below:
(venv)$ pip3 install markdown bleach
bleach is used to sanitize the HTML you want converted to allow for a set of tags.
At this point, the next logical step would be to cache your content field content while in the database. This is done by adding a new field, let us say content_html, in your database specifically for this cached content. It is best to leave your content field as it is in case you would want to use it.
# models.py
class Blog(db.Model):
content = db.Column(db.String(140))
content_html = db.Column(db.String(140))
#staticmethod
def on_changed_body(target, value, oldvalue, initiator):
allowed_tags = ['a', 'abbr', 'acronym', 'b', 'blockquote', 'code',
'em', 'i', 'li', 'ol', 'pre', 'strong', 'ul',
'h1', 'h2', 'h3', 'p']
target.content_html = bleach.linkify(bleach.clean(
markdown(value, output_format='html'),
tags=allowed_tags, strip=True))
def __repr__(self):
return f'Title {self.title}'
db.event.listen(Blog.content, 'set', Blog.on_changed_body)
The on_changed_body() function is registered as a listener of SQLAlchemy’s “set” event for body , which means that it will be automatically invoked whenever the body field is set to a new value. The handler function renders the HTML version of the content and stores it in content_html , effectively making the conversion of the Markdown text to HTML fully automatic.
The actual conversion is done in 3 steps:
markdown() function does an initial conversion to HTML. The result is passed to clean() function with a list of approved HTML tags
clean() function removes any tags that are not in the whitelist.
linkify() function from bleach converts any URLs written in plain text into proper <a> links. Automatic link generation is not officially in the Markdown specification, but is a very convenient feature. On the client side, PageDown supports this feature as an optional extension, so linkify() matches that functionality on the server.
In your template, where you want to post your content you can add a condition such as:
{% for blog in blogs %}
{% if blog.content_html %}
{{ blog.content_html | safe }}
{% else %}
{{ blog.content }}
{% endif %}
{% endfor %}
The | safe suffix when rendering the HTML body is there to tell Jinja2 not to escape the HTML elements. Jinja2 escapes all template variables by default as a security measure, but the Markdown-generated HTML was generated by the server, so it is safe to render directly as HTML.
I created jinja module as example, which looks like this
{% from 'snippet.j2' import module with context %}
{% call module() %}
logic [$size(din.data)-1 : 0] res;
assign res = din.data * din.data;
{% if params['half'] %}
assign dout.data = res / 2;
{% else %}
assign dout.data = res;
{% endif %}
assign din.ready = dout.ready;
assign dout.valid = din.valid;
{% endcall %}
How should I use this module inside PyGears?
Okay, I think this should work.
If I understood correctly you are trying to create a Jinja template for a module that will multiply with 1/2 (in other words divide by two). First of all, make sure your Jinja file and module are named the same (this is a must so PyGears would know which Jinja template to use).
Having all this in mind let's say our module name is mulh
Python file would be something like this:
from pygears import gear, Intf, reg
from pygears.typing import Uint
from pygears.hdl import hdlgen
#gear
def mulh(din: Uint,*,half=False)->b'din*din':
pass
mulh(Intf(Uint[8]))
hdlgen('/mulh', outdir='.')
This code will call your Jinja file and the HDL output would look like something like this:
module mulh
(
input logic clk,
input logic rst,
dti.consumer din, // u8 (8)
dti.producer dout // u16 (16)
);
typedef logic [7:0] din_t; // u8
typedef logic [15:0] dout_t; // u16
din_t din_s;
dout_t dout_s;
assign din_s = din.data;
assign dout.data = dout_s;
logic [$size(din.data)-1 : 0] res;
assign res = din.data * din.data;
assign dout.data = res;
assign din.ready = dout.ready;
assign dout.valid = din.valid;
endmodule
To make it easier to picture all of this I made this picture bellow
I’m working on an email template for Mailjet written in MJML that uses an array value provided through Vars to generate a list of items the sender wants to receive from the mail recipient. All values in the array are plain text values.
The data passed to the API request looks like this:
{
"FromEmail":"sender#email.com",
"FromName":"Chris Crumble",
"Subject":"Data Request",
"MJ-TemplateID":"200000",
"MJ-TemplateLanguage":true,
"Recipients":[
{
"Email":"recipient#email.com",
"Name":"Hans Henson"
}
],
"Vars":{
"mailTitle":"Data Request",
"userName":"Chris Crumble",
"imageUrl":"http://my.host.com/image.jpg",
"userBirthDate":"1.3.1982",
"recipientName":"Hans Henson",
"uploadUrl":"https://my.upload.com/",
"authVideoUrl":"https://my.authvideo.com",
"records":["Document A","Document B"],
"authPhone":"113777840097"
}
}
The template uses var:records like this:
...
</mj-text>
<mj-raw> {% if var:records:false %} </mj-raw>
<mj-text>
<p>
I, <strong>{{var:userName}}, born on {{var:userBirthDate}}</strong> am asking you to provide the following documents:
</p>
</mj-text>
<mj-raw> {% for item in var:records %} </mj-raw>
<mj-text>
{{item}}
</mj-text>
<mj-raw> {% endfor %} </mj-raw>
<mj-raw> {% else %} </mj-raw>
<mj-text>
<p>
I, <strong>{{var:userName}}, born on {{var:userBirthDate}}</strong>, am asking you to provide all my existing documents.
</p>
</mj-text>
<mj-raw> {% endif %} </mj-raw>
<mj-text>
...
As long as var:records isn’t set in the data sent with the request, the mail is sent as expected. As soon as an (not empty) array value is provided with the request, the mail is blocked by Mailjet on sending without giving any further information on the reason.
No idea how to get this working.
UPDATE:
Thanks to Zhivko’s hint to the error reporting mechanism provided by Mailjet I was able to gain a little more insight into the problem.
The template produces the following error:
expression parsing error ## Unknown identifier: var:records:false ## near ## var:records:false ##
This still doesn’t make any sense to me as the line mentioned is an if condition with a default value of false defined for the case that no value for var:records is provided with the api request.
Also the template only produces this error when the value is explicitely set in Vars and is not empty.
My tests so far make me guess that it may have to do with the provided value being an array value as the line doesn’t cause any problems if the value is plain string.
I had the same problem and after asking the MJML team on their Slack I add an answer. Just use the defined() method :
Example :
{% if defined(var:employees) %}
My employees :
<ul>
{% for employee in var:employees %}
<li>{{employee.firstname}} {{employee.lastname}}</li>
{% endfor %}
</ul>
{% endif %}
This method is correct and a core maintainer of MJML just says :
It's not publicly documented yet
PS : Their Slack is a good place to ask this kind of question and I had a response in minutes. (mjml.slack.com)
The message is probably blocked due to an error in the template language. To receive details about the error, enable the error reporting mechanism. If you have troubles debugging the error message, open a support ticket with Mailjet for in depth investigation for the specific template.
As far as I know, Mailjet doesn't allow arrays as a personalized var.
DataType: the type of data that is being stored (this can be either a
str, int, float or bool)
https://dev.mailjet.com/guides/#manage-contacts
Solution:
<% if(typeof bar !== 'undefined') { %>
variable 'bar' is defined in payload:
<b><%= bar %></b>
<% } else {%>
variable 'bar' is not defined in payload
<% }%>
I have container.twig including component.twig and passing an object called 'mock'.
In container.twig:
{% set mock = {
title : "This is my title"
}
%}
{% include 'component.twig' with mock %}
This is working fine but I want to move the mock data to its own file. This isnt working:
Container.twig
{% include 'component.twig' with 'mock.twig' %}
In mock.twig
{% set mock = {
title : "This is my title"
}
%}
Im using gulp-twig but it works like standard twig in most respects. https://github.com/zimmen/gulp-twig
The problem
Twig context is never stored in the template object, so this will be very difficult to find a clean way to achieve this. For example, the following Twig code:
{% set test = 'Hello, world' %}
Will compile to:
<?php
class __TwigTemplate_20df0122e7c88760565e671dea7b7d68c33516f833acc39288f926e234b08380 extends Twig_Template
{
/* ... */
protected function doDisplay(array $context, array $blocks = array())
{
// line 1
$context["test"] = "Hello, world";
}
/* ... */
}
As you can see, the inherited context is not passed to the doDisplay method by reference, and is never stored in the object itself (like $this->context = $context). This deisgn allow templates to be reusable, and is memory-friendly.
Solution 1 : using global variables
I don't know if you are aware of Global Variables in Twig. You can do a bunch of hacks with them.
The easiest usage is to load all your globals inside your twig environment.
$loader = new Twig_Loader_Filesystem(__DIR__.'/view');
$env = new Twig_Environment($loader);
$env->addGlobal('foo', 'bar');
$env->addGlobal('Hello', 'world!');
Then, you can use {{ foo }} and {{ Hello }} in your whole application.
But there are 2 problems here:
As you're trying to load variables from twig files, I assume you have lots of variables to initialize depending on your feature and don't want to load everything all time.
you are loading variables from PHP scripts and not from Twig, and your question want to import variables from a twig file.
Solution 2 : using a Twig extension
You can also create a storage extension that provide a save function to persist some template's context somewhere, and a restore function to merge this stored context in another one.
proof_of_concept.php
<?php
require __DIR__.'/vendor/autoload.php';
class StorageTwigExtension extends Twig_Extension
{
protected $storage = [];
public function getFunctions() {
return [
new Twig_SimpleFunction('save', [$this, 'save'], ['needs_context' => true]),
new Twig_SimpleFunction('restore', [$this, 'restore'], ['needs_context' => true]),
];
}
public function save($context, $name) {
$this->storage = array_merge($this->storage, $context);
}
public function restore(&$context, $name) {
$context = array_merge($context, $this->storage);
}
public function getName() {
return 'storage';
}
}
/* usage example */
$loader = new Twig_Loader_Filesystem(__DIR__.'/view');
$env = new Twig_Environment($loader);
$env->addExtension(new StorageTwigExtension());
echo $env->render('test.twig'), PHP_EOL;
twig/variables.twig
{% set foo = 'bar' %}
{% set Hello = 'world!' %}
{{ save('test') }}
twig/test.twig
{% include 'variables.twig' %}
{{ restore('test') }}
{{ foo }}
Note: if you only want to import variables without actually rendering what's inside twig/variables.twig, you can also use:
{% set tmp = include('variables.twig') %}
{{ restore('test') }}
{{ foo }}
Final note
I'm not used to the JavaScript twig port, but it looks like you can still extend it, that's your go :)
Because of Twig's scoping rules (which I assume are replicated by the gulp version), you cannot pass variables up from a child template without creating a helper function. The closest thing you can do is to use inheritance to replicate this.
As such, your mock.twig file would become
{% set mock = {
title : "This is my title"
}
%}
{% block content %}{% endblock %}
Your container.twig would then become
{% extends 'mock.twig' %}
{% block content %}
{% include 'component.twig' with mock %}
{% endblock %}
This achieves your goals of separating the mock content from the templates for the most part and, using dynamic extends, you can do something like
{% extends usemock == 'true'
? 'contentdumper.twig'
: 'mock.twig' %}
with a contentdumper.twig file that is just a stub like so
{% block content %}{% endblock %}
and then set the usemock variable to determine if you will be using the mock data or not.
Hopefully this helps, even though it doesn't really solve the exact problem you are having.
I am trying to create a dynamic hyperlink that depends on a value passed from a function:
{% for item in field_list %}
<a href={% url index_view %}{{ item }}/> {{ item }} </a> <br>
{% endfor %}
The problem is that one of the items in field_list is "Hockey Player". The link for some reason is dropping everything after the space, so it creates the hyperlink on the entire "Hockey Player", but the address is
http://126.0.0.1:8000/Hockey
How can I get it to go to
http://126.0.0.1:8000/Hockey Player/
instead?
Use the urlencode filter.
{{ item|urlencode }}
But why are you taking the name? You should be passing the appropriate view and PK or slug to url which will create a suitable URL on its own.
Since spaces are illegal in URLs,
http://126.0.0.1:8000/Hockey Player/
is unacceptable. The urlencode filter will simply replace the space with %20, which is ugly/inelegant, even if it does kind of get the job done. A much better solution is to use a "slug" field on your model that represents a cleaned-up version of the title field (I'll assume it's called the title field). You want to end up with a clean URL like:
http://126.0.0.1:8000/hockey_player/
To make that happen, use something like this in your model:
class Player(models.Model):
title = models.CharField(max_length=60)
slug = models.SlugField()
...
If you want the slug field to be pre-populated in the admin, use something like this in your admin.py:
class PlayerAdmin(admin.ModelAdmin):
prepopulated_fields = {"slug": ("title",)}
....
admin.site.register(Player,PlayerAdmin)
Now when you enter a new Player in the admin, if you type "Hockey Player" for the Title, the Slug field will become "hockey_player" automatically.
In the template you would then use:
{% for item in field_list %}
<a href={% url index_view %}{{ item.slug }}/> {{ item }} </a> <br>
{% endfor %}
There is this builtin filter .
http://docs.djangoproject.com/en/dev/ref/templates/builtins/#urlencode
Although you should be using one of these
http://docs.djangoproject.com/en/dev/ref/models/fields/#slugfield