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
Related
Is it possible to remove the logo header shown in the web-based output of NelmioApiDocBundle? And if so, how?
I would like to include the output of this endpoint (/api/doc if you're using the default settings) in an existing website. However, that site already has a header, and adding a second header would be a poor user experience IMHO. But I can't find any place in the documentation that describes how to exclude this gloriously 1990s-style piece of web design.
I've provided a screenshot of the default config below, which is what I get when viewing the docs in a tool like Insomnia. As you can see, the green header is covering the page as it scrolls.
Yes, you can do it.
You should override bundle template, say steps bellow :
1 - Create template file in 'templates/bundles/NelmioApiDocBundle/SwaggerUi/index.html.twig'
2 - Put the content bellow :
{% extends '#!NelmioApiDoc/SwaggerUi/index.html.twig' %}
{% block header %}
<a style="text-decoration: none;" id="logo" href="#" target="_blank">
<h1 style="color: black">You personal title</h1>
</a>
{% endblock %}
That's it , we done
I've now tested the answer provided by #Abdelhak-ouaddi, and while it's correct, I realize that I didn't ask the question clearly enough to get the answer I needed. The provided answer does work for changing the CONTENTS of the green header, but it doesn't remove the header entirely.
See this page at the NelmioApiDocBundle GitHub page for details on how to customize the twig template. The actual default template is located in the repo here.
What I found is that you can easily override the {% header %} twig block to change the contents of the header as the accepted answer states, but since the {% header %} tags are INSIDE the <header> HTML tags, doing this can't remove the header entirely.
In order to remove the ENTIRE header, you need to follow the steps in the accepted answer... but instead of just overwriting the {% header %} block, paste in the entire contents of the index.html.twig file. Then, completely delete the <header> HTML tags and everything inside them (including the {% header %} twig tags).
As a bit of extra credit: removing the header entirely leaves you with a large margin above the page title. You can get rid of that by adjusting the <body> tag in your new index.html.twig file to:
<body style="margin: 0px;">
I'm sure there's a cleaner way to do that, but... that's for another ticket.
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
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.
I have a question: how can 1 view/page use 2 controllers to display different data?
For example:
1) Page displays DVD's information using DvdController.
2) On that same page I want to use a Template/Partial view, that displays list of actors, and that list should come from the second ActorsController.
I can add a template view inside another page but the second controller doesn't work:
MainPage on URL: website/dvd
{% block body %}
<div>
<h1>{{ dvd.title }} </h1>
</div>
<div>
{{ include('DVDBundle:Actors:actors.html.twig') }}
</div>
{% endblock %}
Above I use the partial view actors.html.twig to show the actors, strangely the html code/div's and so on are actually displayed and working on the page, however the controllers(ActorsController) method that meant to return this partial view is not executed for some reason.?
But if I go to the view directly via link: website/actors then its working.
The Symfony documentation on embedded controllers explains this nicely.
In short, you will need to do something like this in your template file:
<div>
{{ render(controller(
'DVDBundle:Actors:actors',
{ ... parameters to the controller action here ... }
)) }}
</div>
The important thing is calling the render function, which allows a controller to be rendered, as opposed to simply includeing a template. (This assumes that your have an ActorsController with an actorsAction method; change the names as appropriate to your controller.)
I'm developing a simple page with Symfony2, using Twig as template engine.
I have a list of urls, and I'd like to add the Twitter share button for each url. What I do is a simple cycle on the urls array, and the dinaycally set the url for every Twitter button inside the cycle. It looks like that twig encodes the url at first, and the Twitter script encodes it again. So The Twitter share count doesn't match. The code (inside the cycle) is the following, there is another part of Twitter code at the end of the page:
Tweet
The url I get on the rendered page is: http%253A%252F%252Fwww.example.com%252F (two encoding pass)
instead of http%3A%2F%2Fwww.example.com%2F (one encoding pass, correct). It looks like the % is encoded again to %25.
And this doesn't make Twitter count work, because it consider those two as different urls.
I also tried to use some filters, e.g. {{ s.url|raw }}, but it didn't work.
So my question is: how to avoid this? Is there a way to tell twig (or twitter) to not encode the url?
You can always turn autoescaping off in Twig by using the {% autoescape false %} declaration before the code you want to leave raw. This will leave any strings you output unescaped, and thus your URL will not be escaped twice. Make sure you turn autoescaping back on with {% endautoescape %}
{% autoescape false %}
Tweet
{% endautoescape %}
Full Twig HTML Escaping Documentation
An old post but looks like you can use the "raw" filter now. This should do:
{{ s.url|raw }}
http://twig.sensiolabs.org/doc/api.html#escaper-extension