in my markdown file has these lines:
```python
<link rel="stylesheet" href="{% static 'css/xxx.css' %}">
<script src="{% static 'js/xxx.js' %}"> </script>
```
however, gitbook get error, like:
Template render error: (D:\my\django-toturial\template_base.md) [Line 29, Column 15]
unknown block tag: static (In file 'template_base.md')
why gitbook reserve static as a tag in my markdown files.，how to resolve this problme.
I think it conflicts with templating used by Gitbook
https://toolchain.gitbook.com/templating/
To fix this you can use {% raw %} {% endraw %} between "{% static 'js/xxx.js' %}"
Related
I am building some twig modules that require specific javascript to work.
A javascript file is an asset that can be included as follows:
<script src="{{ asset('what/ever/hello.js') }}">
All cool so far, but knowing that:
Those modules may or may not be present on the final rendered page.
Those modules may appear more than once on the same page.
I don't want to include the javascript in all pages, only when at least one instance of the module that requires it is present.
If I add the script to the module twig file, and if the module is used multiple times, it will result in my page containing multiple calls to the same script.
How can I approach this case?
You can work with an extension to keep track of the scripts you want included,
<?php
class Project_Twig_Extension extends \Twig\Extension\AbstractExtension {
protected $scripts = [];
public function getFunctions() {
return [
new \Twig\TwigFunction('get_scripts', [ $this, 'getScripts']),
new \Twig\TwigFunction('add_script', [ $this, 'addScript']),
];
}
public function getScripts() {
return $this->scripts;
}
public function addScripts($script) {
if (!in_array($script, $this->getScripts()) $this->scripts[] = $script;
}
}
Just some mock-up modules
{% do add_script('modules/module_a.js') %}
<h1>Module A</h1>
{% do add_script('modules/module_b.js') %}
<h1>Module B</h1>
Just a simple base template
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
{% block content %}
{% endblock %}
{% for script in get_scripts() %}
<script src="{{ asset(script) }}"></script>
{% endfor %}
</body>
</html>
Just a simple child template
{% extends "base.html" %}
{% block content %}
{% incude "modules/module_a.html" %}
{% incude "modules/module_b.html" %}
{% incude "modules/module_a.html" %}
{% incude "modules/module_b.html" %}
{% endblock %}
This would output something like
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h1>Module A</h1>
<h1>Module B</h1>
<h1>Module A</h1>
<h1>Module B</h1>
<script src="js/modules/module_a.js"></script>
<script src="js/modules/module_b.js"></script>
</body>
</html>
I'm trying a tutorial to load a ML script into Django.
I've completed the tutorial but right now i'm getting an error
TemplateSyntaxError at /
Invalid block tag on line 9: 'urls'. Did you forget to register or load this tag?
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Home page</title>
</head>
<body>
<h1>Titanic survival prediction</h1>
<form action="{% urls 'result' %}">
{% csrf_token %}
extra code with form items
</form>
URLS file in python:
from django.contrib import admin
from django.urls import path
from djangoweek import views
urlpatterns = [
path('admin/', admin.site.urls),
path('', views.home, name='home'),
path('result/', views.result, name='result'),
]
I've looked at other questions at stack but I don't got the answer.
There is no tag with name urls. But, there is a template tag {% url 'name' %}. So, simply do:
<form action="{% url 'result' %}"> <---- here
{% csrf_token %}
extra code with form items
</form>
write url instead of urls
{% url 'result' %}
instead of
{% urls 'result' %}
I am new to wagtail and I am not able to figure out why I am getting this error: Invalid block tag on line 140: 'wagtailuserbar'. Did you forget to register or load this tag?.
I am attaching the needful code.
--base.html--
{% load static from static %}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<meta charset="utf-8" />
<title>
{% block title %}
Title
{% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}
{% endblock %}
{% block title_suffix %}
{% with self.get_site.site_name as site_name %}
{% if site_name %}- {{ site_name }}{% endif %}
{% endwith %}
{% endblock %}
</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{# Global stylesheets #}
<link rel="stylesheet" type="text/css" href="{% static 'css/mysite_blog.css' %}">
{% block extra_css %}
{# Override this in templates to add extra stylesheets #}
{% endblock %}
{% block head %}
{% endblock head %}
<style> </style>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body class="{% block body_class %}{% endblock %}">
{% wagtailuserbar %}
{% block content %}{% endblock %}
{# Global javascript #}
<script type="text/javascript" src="{% static 'js/mysite_blog.js' %}"></script>
{% block extra_js %}
{# Override this in templates to add extra javascript #}
{% endblock %}
<!-- Other Stuff -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
a similar error occurred for {% static %} tag but was fixed by the 1st line in the above code. Please Help me with a solution to this error.
You can load both tags in the same load statement like this:
{% load static wagtailuserbar %}
from static is not needed.
I've got the following structure in my flask project:
app
-app
-static
-templates
-layouts
footer.html
header.html
main.html
search.html
__init__.py
app.py
MANIFEST.in
setup.py
In app.py:
#app.route('/search')
def show_search_form():
return render_template('search.html')
search.html:
{% extends "layouts/main.html" %}
{% block body %}
Test
{% endblock %}
main.html
{% include 'header.html' %}
{% block content %}
{% endblock %}
{% include 'footer.html' %}
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>App</title>
</head>
<body>
footer.html
</body>
</html>
As you can see, I'm extending main.html into search.html and using (in this case) 'Test' as content to be injected in the body block. But it doesn't work, I'm getting the following error:
jinja2.exceptions.TemplateNotFound: header.html
What's wrong with the code?
Since your footer.html and header.html files are under the layout directory, you need to reference them as such in the main templates:
main.html
{% include 'layouts/header.html' %}
{% block content %}
{% endblock %}
{% include 'layouts/footer.html' %}
I am simply trying to add a bootstrap.min.css file with its corresponding bootstrap.min.js file to an Apostrophe CMS project. I have no idea how to simply add a static resource. I have the following in my app.js
'apostrophe-assets': {
stylesheets: [
{
name: 'bootstrap.min',
minify: false
},
{
name: 'site'
}
],
scripts: [
{
name: 'bootstrap.min',
minify: false
}
]
}
but alas, it does nothing. I have removed the .min versions as well and tried those, still nothing.
On that note, I need to be able to link to a .png that will be used in my navbar, but I have no idea where to store any static resources for the website.
Is there a place I can just drop static files that I don't want pushed as apostrophe-assets so they are rendered and consumed properly?
I am the lead developer of Apostrophe at P'unk Avenue.
For this to work, Apostrophe needs the files to be located at:
lib/modules/apostrophe-assets/public/css/bootstrap.min.css
And:
lib/modules/apostrophe-assets/public/js/bootstrap.min.js
Within your project (don't copy them into node_modules). You create your own lib/modules/apostrophe-assets folder within your own project, to parallel the one in the apostrophe npm module.
This is as documented here in the tutorials on pushing assets.
(If you have trouble pushing the CSS file, try renaming it with a .less extension and let me know you had to do that. It ought to be unnecessary though.)
Of course there is also nothing keeping you from overriding any of the blocks in outerLayoutBase.html in your own templates to insert script and link tags, but that shouldn't be necessary. If you follow the practice I'm recommending your files will minify with everything else in production.
I've used the apostrophe-assets module to push css and js files the same approach as provided by #boutell. For pushing js files it's ok, but for css I've got a parse error related to bootstrap css. So it's because the apostrophe tries to compile it into css whereas it is already css.
To solve this problem I've override the outerLayot.html Nunjucks template. So basically in the file
node_modules/lib/modules/apostrohpe-templates/views/outerLayout.html, we have:
{% extends "outerLayoutBase.html" %}
Which itself extends the outerLayoutBase.html
node_modules/lib/modules/apostrohpe-templates/views/outerLayoutBase.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}{% endblock %}</title>
{{ apos.assets.stylesheets(data.when) }}
{% block standardHead %}
<meta name="viewport" content="width=device-width, initial-scale=1">
{% endblock %}
{% block extraHead %}
{% endblock %}
</head>
<body class="{% block bodyClass %}{% endblock %}">
{% block apostropheMenu %}
{{ apos.adminBar.output() }}
{% endblock %}
{% if data.user %}
<div class="apos-ui">
<div class="apos-context-menu-container">
{{ apos.pages.publishMenu({ publishMenu: data.publishMenu, page: data.page, piece: data.piece, bottom: true }) }}
{{ apos.pages.menu({ contextMenu: data.contextMenu, page: data.page, bottom: true })}}
</div>
</div>
{% endif %}
<div class="apos-refreshable" data-apos-refreshable>
{% block beforeMain %}{% endblock %}
<a name="main"></a>
{% block main %}{% endblock %}
{% block afterMain %}{% endblock %}
</div>
{{ apos.assets.templates(data.when) }}
{{ apos.assets.scripts(data.when) }}
<script type="text/javascript">
{{ data.js.globalCalls }}
{{ data.js.reqCalls }}
</script>
{% block extraBody %}
{% endblock %}
</body>
</html>
Here I have used {% block extraHead %}{% endblock %} block and overrided it into a new file which is:
/lib/modules/apostrohpe-templates/views/outerLayout.html
{% extends "outerLayoutBase.html" %}
{% block extraHead %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
{% endblock %}
In the above file is included CDN of bootstrap css and works as expected. Note the path of this new file. The lib folder is under the root folder not the node_modules.