I have a parent template with this code
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
{% load static %}
<link rel="stylesheet" href="{% static 'base.css' %}"/>
{% block additionalStyles %}{% endblock %}
</head>
and I have a child template with this code
{% extends 'base.html' %}
{% load static %}
{% block additionalStyles %}<link rel="sytlesheet" href="{% static 'rants.css' %}"/>{% endblock %}
this doesn't seem to work and I don't get an error either. The base.css loads fine and when I inspect element on the webpage I can see <link rel="sytlesheet" href="static/rants.css"/> in the HTML code but it doesn't have any affect on any of the elements that it should. Is there a better way of doing this? and why is it not working?
Edit: It magically started working?? idk why or how, here is the new code if anyone has the same problem, in child:
{% extends "base.html" %}
{% load static %}
{% block title %}Rants{% endblock %}
{% block additionalStyles %}
<link rel="stylesheet" href="{% static 'rants.css' %}"/>
{% endblock %}
in parent:
{% load static %}
<title>{% block title %}{% endblock %} </title>
<link rel="stylesheet" href="{% static 'base.css' %}"/>
{% block additionalStyles %} {% endblock %}
Kindly check the path to the folder that has the CSS file.
When everything seems to work correctly, remember to clear your browser cache or load the site/app in incognito mode(for Google Chrome users).
In the child
{% extends "base.html" %}
{% load static %}
{% block title %}Rants{% endblock %}
{% block additionalStyles %}
<link rel="stylesheet" href="{% static 'path_to_folder/rants.css' %}"/>
{% endblock %}
In the parent
{% load static %}
<title>Parent site{% block title %}{% endblock %} </title>
<link rel="stylesheet" href="{% static 'path_to_folder/base.css' %}"/>
{% block additionalStyles %} {% endblock %}
Need to give the <link> it's own line
{% extends "base.html" %}
{% load static %}
{% block title %}Rants{% endblock %}
{% block additionalStyles %}
<link rel="stylesheet" href="{% static 'rants.css' %}"/>
{% endblock %}
Now works
Related
I am trying to dynamic header and footer page but I cannot success. I tried many ways but the header is not loading and I cannot find any sample for Node.Js. No errors occurs but only body content is loaded. All files are at the same directory.
Here the codes are I am tried to.
layout.twig
<!doctype html>
<html lang="en-US">
..
<body>
<header>
<!-- HEADER -->
{% block header %}{% endblock %} //Also tried here in index.
</header>
{% block body %}{% endblock %}
</body>
</html>
index.twig
{% extends 'layout.twig' %}
{% block body %}
<body>
<header>
<!-- HEADER -->
{% block header %}{% endblock %} //Also tried here in layout.
</header>
...
{% endblock %}
header.twig
{% extends 'index.twig' %} //Also tried with {% extends 'layout.twig' %}
{% block header %}
<div class="header js-header js-dropdown">
<div class="container">
...
{% endblock %}
footer.twig is same with header.
EDIT:
Delete extend tags which include on layout.twig and it's solved.
I have a problem, I am using twig templates and am trying to use blocks to separate my code but I have the following error:
Twig_Error_Loader: Template "index.html.twig" is not defined in "requestchange/main.twig" at line 1
index.html.twig is my main template layout
I have added in: {% block content %}{% endblock %}
then in my main.twig , I am extending the index.html.twig file and then putting my content within another {% block content %}{% endblock %}
Can someone please help me here?
You should understand how Template Inheritance works in Twig.
Here is simple example:
default.twig as a default layout
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
index.twig as a home page
{% extends 'default.twig' %}
{% block title %}Home page{% endblock %}
{% block content %}
<h1>Hello world!</h1>
{% endblock %}
And be attentive with path that you point in the extends tag.
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.
i need to get meta data of the page in twig, for replace them by my values, but i don't find how get them.
For now i have :
{% if spec.name matches '{meta}' %}
{% set getdatas = app.request.server.get('REQUEST_URI') %} // use uri for test, i need the same but with meta_title, meta_description...
{{ dump(uri|replace({'domaine': spec.name})) }}
{% endif %}
If you want to override anything in Twig, you need to create a block for it. As an example:
base.html.twig
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
{% block meta %}{% endblock %}
<title>{% block title %}{% endblock %}</title>
{% block stylesheets %}{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
parent.html.twig
{% extends 'base.html.twig' %}
{% block stylesheets %}
# My extra styles...
{% endblock %}
{% block body %}
<div>
{% block content %}{% endblock %}
</div>
{% endblock %}
child.html.twig
{% extends 'parent.html.twig' %}
{% block title %}My page{% endblock %}
{% block meta %}
<meta key="value">
{% endblock %}
{% block content %}My content{% endblock %}
my parent template :
{% extends 'DesignBundle::Front/layout.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('bundles/extension/css/flag-icon.min.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/extension/css/main.css') }}">
{% endblock %}
{% block title %}
{{ _("Caractéristiques des noms de domaine") ~ " ." ~ extension.nomExt|idna_decode }}</code>
{% if extension.countryName is not empty %}
{{ " - " ~ extension.countryName|utf8_fix }}
{% endif %}
{% endblock %}
{% block content %} // view in first post is call here
{% include 'ExtensionBundle:New_fiche:show_content.html.twig' %}
{% endblock %}
I have layout template
<html>
<body>
{% block content %}{% endblock %}
</body>
</html>
And many child templates like this
{% extends 'layout/default.twig' %}
{% block content %}
<p>content</p>
{% endblock %}
And it's very annoying that every single child template in Twig must include {% block content %}...{% endblock %} to be extended by parent block, otherwise there will be error: A template that extends another one cannot have a body.
Is there any solution to bind all child template output(that is not located in any block) in some variable, and then use it to paste in parent template? Like this:
Layout
<html>
<body>
{{ _context.childOutput }
</body>
</html>
Child
{% extends 'layout/default.twig' %}
<p>content</p>
It will make child templates code more compact and there will be no dependency from parent templates blocks name.
UPD Submitted new issue on Twig's GitHub https://github.com/twigphp/Twig/issues/2027
The 2 lines you have in each template allows you aswell to redefine many blocks in one template. I can't see how the solution you want can do that.
<html>
<head>
{% block meta %}{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
you can see include and embed but if you really have only one block in your templates twig is maybe not the solution you need
While seeing in this GitHub issue that you define variables in the controller, I had the following idea. I'll assume that the child template only contain static code since you didn't describe this point.
You can modify the function in your controller in order to fetch the content of the child template then pass it to the parent template directly:
function acmeAction()
{
// …
return $this->render(
'AcmeBundle:layout:default.html.twig',
array(
'title' => $title,
'description' => $description,
'content' => file_get_contents(
$this->container->get('kernel')->locateResource(
'#AcmeBundle/Resources/views/layout/child.html.twig'
)
)
)
);
}
And the parent template:
<head>
<title>{% block title %}{{ title }}{% endblock %}</title>
<meta name="description" content="{% block description %}{{ description }}{% endblock %}" />
</head>
<body>
{% block body %}{{ content }}{% endblock %}
</body>
This way you won't need to define the parent in the child template.
You can define some variables in the child and display them in the parent:
Layout
<html>
<body>
{{ myValue }
</body>
</html>
Child
{% set myValue %}
<p>content</p>
{% endset %}
{% include 'layout/default.twig' %}
This works because:
Included templates have access to the variables of the active context.
Source: http://twig.sensiolabs.org/doc/tags/include.html
And it's very annoying that every single child template in Twig must include {% block content %}...{% endblock %} to be extended by parent block
While it may sound annoying when you only have one variable, you will see the benefits of this approach when you will have to define also the title of the page, the JavaScript code, etc. In this case the use of multiple {% block … %} is really useful.
See this example:
Layout
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
{% block javascript %}{% endblock %}
</body>
</html>
Child
{% extends 'layout/default.twig' %}
{% block title %}
My title
{% endblock %}
{% block content %}
<p>content</p>
{% endblock %}
{% block javascript %}
<script>…</script>
{% endblock %}