When using chameleon, I can replace element from a base template using the concept of slot. Where you define a slot and fill it using another tag. As there is no container element in head, how can one add elements to head ? :
The Layout file
<html>
<head>
<div metal:define-slot="extra_head"></div>
</head>
<body>
...
</body>
</html>
The content template that need to specify extra head.
<html metal:use-macro="load: main.pt">
<div metal:fill-slot="extra_head">
<script type="text/javascript" src="http://example/script.js"></script>
</div>
...
</html>
This gets rendered in :
<html>
<head>
<div metal:fill-slot="extra_head">
<script type="text/javascript" src="http://example/script.js"></script>
</div>
</head>
<body>
...
</body>
</html>
But there's no container tag in head so how can one define a slot to add stuff in the head ?
There's an alternative to using tal:omit-tag (which I'm finding annoyingly confusing - more than once I spent many minutes trying to figure out why a certain tag does not appear in the output when it's clearly present in the template, only to find tal:omit-tag neatly tucked in the far corner): if you use xml tags with tal: and metal: namespaces they won't appear in the output:
<html>
<head>
<metal:my-slot define-slot="extra_head"></metal:my-slot>
</head>
<body>
...
</body>
</html>
and in the child template:
<metal:template use-macro="load: main.pt">
<metal:any-descriptive-name fill-slot="extra_head">
<script type="text/javascript" src="http://example/script.js"></script>
</metal:any-descriptive-name>
...
</metal:template>
Note how the template becomes much more readable and self-descriptive and does not contain weird things such as a <div> inside <head> :)
You also can omit tal: and metal: prefixes on attributes when using namespaced tags, so
<h1 tal:condition="..." tal:content="..." tal:omit-tag="">Hi there! Bogus content for added confusion!</h1>
becomes
<tal:greeting condition="..." content="..." />
To remove the tag one has to use tal:omit-tag :
In the content template, use :
<html metal:use-macro="load: main.pt">
<div metal:fill-slot="extra_head" tal:omit-tag="">
<script type="text/javascript" src="http://example/script.js"></script>
</div>
...
</html>
The div is not part of the result. Read the doc.
Related
I’m learning py-script where you can use <py-script></py-script> in an HTML5 file to write Python Code. As a python coder, I would like to try web development while still using python, so it would be helpful if we could output and input information using py-script.
For example, could someone explain how to get this function to work:
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<div>Type an sample input here</div>
<input id = “test_input”></input>
<-- How would you get this button to display the text you typed into the input into the div with the id, “test”--!>
<button id = “submit-button” onClick = “py-script-function”>
<div id = “test”></div>
<div
<py-script>
<py-script>
</body>
</html
I would appreciate it and I hope this will also help the other py-script users.
I checked source code on GitHub and found folder examples.
Using files todo.html and todo.py I created this index.html
(which I tested using local server python -m http.server)
Some elements I figured out because I have some experience with JavaScript and CSS - so it could be good to learn JavaScript and CSS to work with HTML elements.
index.html
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />-->
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<div>Type an sample input here</div>
<input type="text" id="test-input"/>
<button id="submit-button" type="submit" pys-onClick="my_function">OK</button>
<div id="test-output"></div>
<py-script>
from js import console
def my_function(*args, **kwargs):
#print('args:', args)
#print('kwargs:', kwargs)
console.log(f'args: {args}')
console.log(f'kwargs: {kwargs}')
text = Element('test-input').element.value
#print('text:', text)
console.log(f'text: {text}')
Element('test-output').element.innerText = text
</py-script>
</body>
</html>
Here screenshot with JavaScript console in DevTool in Firefox.
It needed longer time to load all modules
(from Create pyodine runtime to Collecting nodes...)
Next you can see outputs from console.log().
You may also use print() but it shows text with extra error writing to undefined ....
An alternative to way to display the output would be to replace the
Element('test-output').element.innerText = text
by
pyscript.write('test-output', text)
I've written some code for deep learning text summarization, and I'm trying to render the template using the Flask library. I'm unable to see the results. The python code can be found below.
text = ' '.join([summ['summary_text'] for summ in res])
print(text)
return render_template('result.html', prediction=text)
I'm trying to print the prediction variable which is present in the above code. Below is the html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
<header>
<div class="container">
<div id="brandname">
Deep Learning App
</div>
<h2>Summarized text</h2>
</div>
</header>
<p style="color:blue;font-size:20;text-align: center;"><b>Result for Text</b></p>
<div class="results">
<p><strong>{prediction}</strong></p>
</div>
</body>
</html>
Below is output image
enter image description here
Can anyone help me how to display text present in prediction variable on web page?
You need double curly braces
<p><strong>{{ prediction }}</strong></p>
I'm trying to understand the Version One - Use Namespace.attr example for accessing descendant attributes in Mako. I have the base page template in page.html, and the index page in index.html which inherits page.html. I want to allow page.html (and page that inherits it) to specify their own Javascript and CSS files to include and allow page.html to handle rendering them.
page.html:
<!DOCTYPE html>
<%namespace name="common" file="common.html"/>
<%
# Scan for scripts and styles to include.
include_scripts = []
include_styles = []
for ns in context.namespaces.values():
if hasattr(ns.attr, 'include_scripts'):
include_scripts.extend(ns.attr.include_scripts)
if hasattr(ns.attr, 'include_styles'):
include_styles.extend(ns.attr.include_styles)
%>
<html>
<head>
<title>${self.attr.title}</title>
% for style in include_styles:
${common.style(style)}
% endfor
% for script in include_scripts:
${common.script(script)}
% endfor
</head>
<body>
${next.main()}
</body>
</html>
common.html:
<%def name="script(src)">
<script type="application/javascript" src="%{src | h}"></script>
</%def>
<%def name="style(href)">
<link rel="stylesheet" type="text/css" href="${href | h}"/>
</%def>
index.html:
<%inherit file="page.html"/>
<%!
# Set document title.
title = "My Index"
# Set document scripts to include.
include_scripts = ['index.js']
# Set document styles to include.
include_styles = ['index.css']
%>
<%def name="main()">
<h1>${title | h}</h1>
</%def>
This all renders the following page:
<!DOCTYPE html>
<html>
<head>
<title>My Index</title>
</head>
<body>
<h1>My Index</h1>
</body>
</html>
The rendered page is missing the styles and javascript includes that I'm expecting which should be:
<!DOCTYPE html>
<html>
<head>
<title>My Index</title>
<script type="application/javascript" src="index.js"></script>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<h1>My Index</h1>
</body>
</html>
In page.html, if I print context.namespaces I get:
{('page_html', u'common'): <mako.runtime.TemplateNamespace object at 0x1e7d110>}
Which indicates that only the imported common.html template is available and but no descendant template namespaces which inherit from page.html. How do I iterate through the inheriting template namespaces and check their attributes? I know I can use next to get the next template namespace, but how do I get the next template namespace after that if it exists?
The code snippet in page.html to check descendent templates for the include_scripts and include_styles attributes has to traverse next of each descendant template namespace to get to the next. Using context.namespaces only appears to list the local namespaces.
import mako.runtime
# Scan for scripts and styles to include.
include_scripts = []
include_styles = []
# Start at the first descendant template.
ns = next
while isinstance(ns, mako.runtime.Namespace):
if hasattr(ns.attr, 'include_scripts'):
include_scripts.extend(ns.attr.include_scripts)
if hasattr(ns.attr, 'include_styles'):
include_styles.extend(ns.attr.include_styles)
# NOTE: If the template namespace does not have *next* set, the built
# in python function *next()* gets returned.
ns = ns.context.get('next')
I have set up a website using webpy.
I have my main page called layout.html. I load foo1.html into layout
$def with (content)
<html>
<head>
<title>Foo</title>
</head>
<body>
$:content
</body>
</html>
And the content inside is foo1.html
<div> Hello </div>
Is it possible to change foo1.html to also load another webpage:
$def with (secondarycontent)
<div> $:secondarycontent </div>
Just define render as template global
template_globals = {}
render_partial = template.render(template_dir, globals=template_globals)
render = template.render(template_dir, globals=template_globals,
base='layout')
template_globals.update(render=render_partial)
So now you can call it from templates
$:render.nested.template()
I have a base.mako template with a if statement to include or not jQuery
<head>
% if getattr(c, 'includeJQuery', False):
<script type="text/javascript" src="jquery.js"></script>
% endif
...
Several templates inherit from base.mako, someone needs jQuery, someone don't.
At the moment I have to set the attribute in the controller before calling render
c.includeJQuery = True
return render('/jQueryTemplate.mako')
but I think this should go directly in child template (i.e. jQueryTemplate.mako)
I tried adding it before inherit
<% c.includeJQuery = True %>
<%inherit file="/base.mako"/>\
but it does not work.
Any tips?
Thanks for your support
You shouldn't be using "c" in your template.
<% includeJquery = True %>
and
% if includeJquery:
...
% endif
should suffice.
I think you are doing this wrong... In your base template you should make a blank def for a jquery block and call it. Then in the inherited template just redefine the block.
base.mako:
<head>
${self.jquery()}
</head>
<%def name="jquery()"></%def>
Then in another template you add jquery with:
<%inherit file="base.mako />
<%def name="jquery()">
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
</%def>
Well, since with the line
<script type="text/javascript" src="jquery.js"></script>
I also need to add some other js I put a jQueryScript %def in child template
##jQueryTemplate.mako
<%def name="jQueryScript()">
<script>
</script>
</%def>
then in base I check if exists and add all accordingly
#base.mako
%if hasattr(next, 'jQueryScript'):
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
${next.jQueryScript()}
%endif
so I don't need to set nothing in the controller.