I am totally new to this. I took as an example the body block.
This is my base.html.twig file content:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block header %} {% endblock %}
{% block body %}{% endblock %}
{% block footer %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
and this is my header from app\Resources\views\header\header.html.twig content:
{% extends 'base.html.twig' %}
{% block header %}
Header HeaderHeaderHeaderHeader
{% endblock %}
But this is not working for some reason. Do i need to do smth more ? thx
[UPDATE]
I attached an image to see what i want to achieve:
This is folder structure:
[UPDATE]
The content of the index.html.twig file is:
{% extends 'base.html.twig' %}
{% block body %}
<div id="wrapper">
<div id="container">
afdsfsdfsfasddf
</div>
</div>
{% endblock %}
{% block stylesheets %}
<style>
body { background: #F5F5F5; font: 18px/1.5 sans-serif; }
</style>
{% endblock %}
you should inspire you in this example :
http://symfony.com/doc/current/templating.html#template-inheritance-and-layouts
I suggest you to do that:
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{# header section #}
<div>
{% include ':header:header.html.twig' %}
{% block header %} {% endblock %}
</div>
{# body section #}
<div>
{% block body %}{% endblock %}
</div>
{% block footer %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
header.html.twig
Remove this section
{% extends 'base.html.twig' %}
{% block header %}
Header HeaderHeaderHeaderHeader
{% endblock %}
And make only the header content
index.html.twig
{% extends 'base.html.twig' %}
{% block body %}
<div id="wrapper">
<div id="container">
afdsfsdfsfasddf
</div>
</div>
{% endblock %}
{% block stylesheets %}
<style>
body { background: #F5F5F5; font: 18px/1.5 sans-serif; }
</style>
{% endblock %}
Related
When updating from Symfony3.4 to Symfony4 and verifying the operation, the following error occurred.
When I examined the code, there was no definition in base.twig.html, but there was a definition in the file extending layout.html.
It seems that each is defined and used properly.
How should this be fixed?
Error
Block "contentBackIcon" on template "base.html.twig" does not exist.
layout.html.twig
{% extends 'base.html.twig' %}
{% block body %}
{{ block('contentBackIcon') }}
{% endblock %}
①index.html.twig
{% extends '#AppBundle/Sp/shop_layout.html.twig' %}
{# contentBackIcon #}
{% block contentBackIcon %}
{% if not modal %}
<a class="btn btn-link btn-nav pull-left" href="{{ path("app_shop_default_index")}}" data-ignore="push">
<span class="icon icon-left-nav"></span>
</a>
{% endif %}
{% endblock %}
②input.html.twig
{% extends '#AppBundle/Sp/shop_layout.html.twig' %}
{% block contentBackIcon %}
<a class="btn btn-link btn-nav pull-left" href="{{ path('app_shop_article_index', {"q": {"articleType": "coordinate"}}) }}" data-ignore="push">
<span class="icon icon-left-nav"></span>
</a>
{% endblock %}
Version
symfony v4.0.15
twig/twig 2.14.3
I added it to base.html.twig as below.
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
</head>
<body>
{% block body %}
//Add
{% block contentBackIcon %}{% endblock %}
{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
I have added some of the variables in base.html.twig file
I have another file index.html.twig file in "bundle"
I have extended base.html.twig file in index.html.twig which is working fine as I am able to see all content in base is rendered in browser when i am calling index.html.twig, but when i try to override variables of base.html.twig file from index.html.twig its not working
here is code
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon') }}" />
</head>
<body>
{% set isHeader = (isHeader|default(true)) %}
{% if isHeader == true %}
<div class="container-fluid header">
{% include 'header.html.twig' %}
{% block header %}
{% endblock %}
</div>
{% endif %}
</body>
</html>
index.html.twig
{% extends 'base.html.twig' %}
{% set isHeader = false %}
this should hide header but its still displaying header where as if I do isHeader = false in base.html.twig file it works fine
your method is too weird , i'm not sure why are you doing this ,
According to what I found from question , try to do something like this :
in base :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon') }}" />
</head>
<body>
{%block top_header %}
<div class="container-fluid header">
{% include 'header.html.twig' %}
{% block header %}
{% endblock %}
</div>
{%endblock%}
</body>
</html>
in index :
{% extends 'base.html.twig' %}
{% block top_header %}{% endblock %} //keep this empty , remove the top_header content
I found answer by setting global for twig in symfony config.yml file here is code
config.yml
twig:
debug: "%kernel.debug%"
strict_variables: "%kernel.debug%"
globals:
isFooter: true
isHeader: true
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" type="image/x-icon" href="{{ asset('favicon') }}" />
</head>
<body>
{% if isHeader == true %}
<div class="container-fluid header">
{% include 'header.html.twig' %}
{% block header %}
{% endblock %}
</div>
{% endif %}
{% block body %}
{% endblock %}
{% if isFooter == true %}
<div class="footer">
{% include 'footer.html.twig' %}
{% block footer %}
{% endblock %}
</div>
{% endif %}
<noscript><div class="alert alert-danger">You must enable Javascript on your browser for the site to work optimally and display sections completely.</div></noscript>
</body>
</html>
index.html.twig
{% set isFooter = true %}
{% set isHeader = false %}
{% block body %}
{% endblock %}
variable isHeader = false will remove header from base template so that it will not render on call of index.html.twig
Any other workaround guys please comment your suggestions.
I'm using twig template for my project. now i want create custom block for example
{% addscript %}
<script>
//here is my content script
</script>
{% endaddscript %}
also {% addscript 'footer' %}{% endaddscript %} or {% addscript 'header' %}{% endaddscript %} is good
and the script content will be parse into my php function called addScript
Class Theme{
private $css = array();
public function addScript($script){
$this->css[] = $script;
}
}
after one day search and read document in twig i found this topic but does not work !
How to create a twig custom tag that executes a callback?
i'm using latest version of twig install by composer
From what I can tell from the comments, is that you don't need a custom Tag to do what you want. You can just use blocks for this, tags are used to modify the compiled version of a template, not the content of it.
base.twig.html
<!DOCTYPE html>
<html>
<head>
<title>{{ title | default('Hello World') }}</title>
<link rel="stylesheet" type="text/css" href="theme.css">
{% block css %}
{% endblock %}
</head>
<body>
{% block body %}
<nav>
{% block navigation %}
Link
Link
Link
{% endblock navigation %}
</nav>
<section id="container">
<section id="content">
{% block content %}
{% endblock content %}
</section>
</section>
</section>
{% endblock body %}
{% block scripts %}
{% endblock %}
{% block javascript %}
{% endblock %}
</body>
</html>
child.twig.html
{% extends "base.twig.html" %}
{% block css %}
<link rel="stylesheet" type="text/css" href="child.css">
{% endblock %}
{% block content %}
<h1>Hello Child</h1>
{% endblock %}
{% block javascript %}
<script>
$(function() {
console.log('Hello Child');
});
</script>
{% endblock %}
{% block scripts %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
{% endblock %}
I'm using Symfony2 to create a single page application,
as you can see, the base.html.twig (posted below) is relatively small,
all I want to do is create a route '/' that redirects directly to the base.html without the need of using unnecessary bundle inheritance.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %} Share with me {% endblock %}</title>
{% block stylesheets %}
{% include 'assets/basetemplates.html.twig' %}
{% endblock %}
</head>
<body class="metro mybody">
{% block channel %}
<div id="profile_push_container"></div>
<a href="#channel-close">
<div class="profile-modal-overlay"></div>
</a>
{% endblock %}
{% block content_form %}
<div id="content_form_overlay" class="animated fadeIn"></div>
<div id="content_form" class="animated fadeInDownBig">
<div class="content_form">
<button class="content_cancel_btn" onclick="ContentForm.controller.closeForm();"><i class="icon-cancel-2"></i></button>
<div class="form-items" id="form-items">
<div class="form-item">
<h2 class="content_title">Auto handel</h2>
</div>
</div>
</div>
</div>
{% endblock %}
{% block navbar %}
{% include 'GabrielLayoutBundle:Widgets:navigation.html.twig' %}
{% endblock %}
{% block body %}
<div id="content-loop-container">
<div id="content-push-in"></div>
{% block sidebar %}
<aside class="sidebar bounceInLeft animated light" id="custom-sidebar-css">
<ul id="the_sidebar"></ul>
</aside>
{% endblock %}
</div>
<div id="more-button"></div>
{% endblock %}
{% block footer %} {% endblock %}
{% block javascripts %}
{% include 'assets/basescripts.html.twig' %}
{% endblock %}
</body>
</html>
This doesn't seem to work, it finds the template but prevents me from using the twig functions
$collection->add('home_route', new Route('/', array(
'_controller' => 'FrameworkBundle:Template:template',
'template' => '<path>/views/base.html.twig',
)));
My problem is next:
I have base.html.twig placed in view folder (root)
{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title %}Test Application{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li>Home</li>
<li>Blog</li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block body %}{% endblock %}
</div>
</body>
</html>
and index.html.twig in Blog directory (views/Blog):
{% extends '::base.html.twig' %}
{% block title %}
{{ parent() }}
{% endblock %}
{% block sidebar %}
{{ parent() }}
{% endblock %}
{% block body %}
{% for entry in blog_entries %}
<h2>{{ entry.title }}</h2>
<p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}
My problem is next:
When I render and return that template it is shown just as index.html.twig and it doesn't use any part from the base template. Even I {{ parent() }} doesn't work (is not showing anything). Please help!
EDIT: it shows just articles part
Hah... I made it work... Simply changed ::base.html.twig with AcmeHelloBundle::base.html.twig ;)