Twig Templates not extending - php

I have just setup a apache server and configured twig. I have two template files one called base.html.twig which has the core template elements and dashboard with blocks that correspond to the base.html.twig
dashboard.html.twig
{% extends "base.html.twig" %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
</p>
{% endblock %}
However when I browse to dashboard.html.twig I just see plain html showing all of the code above. Have I misconfigured something?
I am sure it's something simple so I thank you for your help in advance.

You should not directly "browse" to a twig file, it needs to be parsed and rendered by php objects using classes from Twig libraries.
see http://twig.sensiolabs.org/documentation

To use twig you need PHP installed too. Also you would need Twig PHP library to parse twig templates.

Related

how to use twig in vue

i have simple modal window plan.vue with slot
...
<div class="plan__content">
<slot></slot>
</div>
...
there is also example.vue where it is used
<button
#click="showPlan"
>
Show plan
</button>
<plan
v-if="isPlanVisible"
#closePlan="closePlan"
>
</plan>
and i also have twig file plan.html.twig
{% block field %}
<table id="plan_table">
<caption>
<h2> {{smth.name}} </h2>
</caption>
...
</table>
{% endblock %}
can i add my twig here <plan> </plan> somehow? I tried to find a solution but only found how to add vue to twig and not vice versa
You can not embed a twig file inside a Vue component and render it. You have two alternative options:
You implement you twig template in "Vue Code" and don't use the twig template at all.
You load the rendered twig template via HTTP Request from a backend endpoint and render the response inside you Vue component vie v-html attribute for example.

Including id element, or variable, from another TWIG template

I have picked up the basics of using TWIG to create my site. I suppose I know how to use {%extend%} {%block%} {%include%} and {%set%}, in the most general sense.
I would like to include a block of code from within another twig file without including the whole file - as opposed to {% include 'file.twig' %}.
I have figured out how to set a variable in file.twig and output it using {{ variable | raw }}. I would like to do that in another file, like you would with using jQuery's .load function.
I swear the twig documentation does not seem to touch on this, it seems like really obvious and basic functionality. I have messed around with various combinations of include, for, with, in and only, colons and commas and whatever | is, and nothing.
I believe you are looking for horizontal inheritance via the use tag:
The use statement tells Twig to import the blocks defined in blocks.html into the current template (it's like macros, but for blocks)
The confusing part is that by itself, {% use ... won't actually insert the content of the blocks in the referenced template. To do that, you must use the block(...) function:
index.twig
{% use "blocks.twig" %}
{{ block('name') }}
blocks.twig
{% block name %}
<h1>Alex Weissman</h1>
{% endblock %}
{% block hobby %}
<p>Blanchin'</p>
{% endblock %}
For a working example, see my TwigFiddle (yes, it's a real thing!): http://twigfiddle.com/jjbfug

Header/navbar/footer elements not importing into new page

I'm using UserFrosting and so far I've been able to import all of the default elements into the home page. However, I've now added a second page but nothing happened when I copied the following code from the home page:
{% include 'common/components/head.html' %}
<rest of code>
{% include 'common/components/main-nav.html' %}
<rest of code>
{% include 'common/components/footer.html' %}
{% include 'common/components/jumbotron-links.html' %}
I then used the following php code:
<?php include("../userfrosting/templates/common/components/head.html"); ?>
Which seems to work but the page only shows this code found within the head.html file:
{% for item in includeCSS(page_group|default("common")) %} {% endfor %} {% for item in includeJSTop(page_group|default("common")) %} {% endfor %}
Which obviously is not very useful!
When I keep the home and page2.php file in the same folder (in localhost/userfrosting/templates/common) then I receive Error 404. When I move the file to the default UserFrosting home page directory (which the home.html file isn't actually in) in localhost/public, I get only the above code.
It seems like I'm missing something quite basic here but would appreciate some help. Thanks.
You are confusing PHP files and template files. UserFrosting uses a front controller pattern along with the Twig templating engine. So, you do not need a separate PHP file for each page. Instead, you should create a new template file for your page:
userfrosting/templates/common/page2.html
{% include 'common/components/head.html' %}
// DO NOT use PHP here - just Twig! See the Twig documentation: http://twig.sensiolabs.org/doc/templates.html
{% include 'common/components/main-nav.html' %}
// More Twig
{% include 'common/components/jumbotron-links.html' %}
{% include 'common/components/footer.html' %}
Then you need to link up a URL with this template. That is done in the controller, public/index.php, for example like this:
// Miscellaneous pages
$app->get('/page2/?', function () use ($app) {
$app->render('common/page2.html', [
'page' => [
'author' => $app->site->author,
'title' => "Page Deuce",
'description' => "This is the second page, aight?",
'alerts' => $app->alerts->getAndClearMessages()
]
]);
});
I highly recommend going through the tutorial on adding a new page: https://learn.userfrosting.com/building-pages
You can also learn more about MVC, Slim, and Twig here: https://learn.userfrosting.com/basics/overview
Feel free to join in chat if you are still having trouble.

Is any way to use twig in php?

All of my files are in PHP and now I have problem, because I have to use twig code on my PHP page:
{% block fos_user_content %}
{% endblock fos_user_content %}
Is there any way to include .twig file in .php file? Or does somebody know how to convert this twig code to PHP? Or maybe somebody know some tutorial for FOSUserBundle which is written in PHP?
I dont know why you trying to do, but i'll try to help you :
you can't include twig in php(2 engine for templating, why?)
you can "use php code" in your twig template with twig extension(but please read doc as #Yenne Info said)
You can render twig template with controller method renderView($template, $params)
But do you really use symfony2?

Layout and content pages for pure html [duplicate]

This question already has answers here:
How to create a template in HTML?
(3 answers)
Closed 9 years ago.
I have worked on several ASP.NET applications recentely, and I was simply fascinated by the simplicity of it's HTML layouting.
Basiccaly there is one layout file, in which you write all the static HTML, CSS, JS, or really anything that will stay the same on all pages. Then, there are content pages, in which you only write the content of the pages.
So, for example you have an about.cshtml file that looks like this:
<h1>My name</h1>
<p>I am a junior web developer... etc</p>
<p>Contact me at example#gmail.com</p>
That's all the information needed for the about content page, when requested it will be inserted in the layout page.
So, my question:
Are there any ready-to-use tools to make this happen via html, javascript or php? I found myself implementing it via ajax calls, but that really is just a waste of resources, having to async load all the html files I have.
For pure HTML, you could go down the route of using a static site generator. For example:
Jekyll
Pelican
In Pelican you have a base.html template, which contains everything that you want to appear on all pages, so the header and footer etc (These can also be called .header.html and then referenced in the main.html template.
Page content is written in Markdown, and put into folders called posts or pages, and then you run a generate command, and it will output all the html for you.
And pages can be written like this:
{% extends "base.html" %}
{% block title %}{{ page.title }}{%endblock%}
{% block content %}
<h1>{{ page.title }}</h1>
{% import 'translations.html' as translations with context %}
{{ translations.translations_for(page) }}
{{ page.content }}
{% endblock %}
So it extends the base.html template.
Further reading:
Pelican: a static blog generator for
Pythonistas
Pelican - Getting
started
Check out Model–view–controllers

Categories