I have this static page built with Jekyll and host with GitHub Pages (repo), and I wanted to track it with Google Analytics.
I was following this tutorial.
But I've reached the step where it says:
Finally, open _includes/head.html and add the following code just before the end tag.
And actually my theme has no _include/head.html file!
So my question is, if I create a file called _include/head.html should it be automatically included in every page built by Jekyll? (I tried creating such a file and adding a placeholder image to see if that worked but it didn't)
The code that follows that quote should be included in every html page built by Jekyll, right? Like, that is what I want for it to work, no? So if I put it in footer.html instead it should work?
If you create that file, as the tutorial suggests, then you can use it everywhere, (in your layout for example) so every time you include it, it gets rendered.
Create the file _includes/head.html with the analytics content.
Then in your layout include it where you want it to appear like:
{% include head.html %}
Then you can place all your code that goes in your head there, so you have a cleaner layout
side note
I prefer to have the analytics code following Google recommendation immediately after the opening <body> tag. So my default layout looks like:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include ganalytics.html %}
{% include header.html %}
{{ content }}
{% include footer.html %}
</body>
</html>
and _includes/ganalytics.html just contain the analytics code.
Simple add analytics marker in _layouts/default.html head tag. No need to add a head include.
Related
.tpl is an extension for templates, used by shop sites. I download the files from a site (nuvemshop.com) and the pages files came with .tpl. By the way, css is with .tpl extension too. What I could do to render these files? Maybe I need a server side renderer? Appreciate for the help :).
I will atach an example:
<div class="page-content pagina container-xs">
{% snipplet "breadcrumbs.tpl" %}
{# Page preloader #}
<div class="page-loading-icon-container full-width hidden-when-content-ready">
<div class="page-loading-icon svg-icon-secondary opacity-80 rotate">
{% include "snipplets/svg/spinner.tpl" %}
</div>
</div>
<div class="visible-when-content-ready user-content">
{{ page.content }}
</div>
</div>
```
`
It's like Jinja or Twig templates.
I try to render the template directly in browser, but obsviously does'nt work.
I partially solve it. .tpl files are templates from smarty lib and to render them, you need to use the class in a php file and start a server. I will atach my php file:
include "smarty/libs/Smarty.class.php";
$smarty = new Smarty();
$smarty->template_dir = "smarty/templates";
$smarty->compile_dir = "smarty/templates_c";
$smarty->config_dir = "smarty/configs";
$smarty->assign("msg", "Hello World!");
$smarty->display("smarty/examples/test.tpl");
The problem is: my "tpl" file is like more twig or jinja, and is not renderer by smarty because the wrong syntax. You can see the true syntax in the docs: https://www.smarty.net/
So, I will keep trying to renderer these files and I update the answer if I find a solution
I've got a Twig base template like so:
{% include "./partials/navigation.html" %}
<!-- Main Wrapper -->
<div id="wrapper">
{% block content %}{% endblock content %}
</div>
I also have a route controller which is outputting the response content to the page using twig:
return template->render('path/to/teplate', args());
where args[] array is all the data needed for this bit: (different on every page)
{% block content %}{% endblock content %}
However my sidebar is being built separately through a menu builder class, and now it needs to render the results of building the menu to my template and populating ./partials/navigation.html.
An easy solution for me is to just append the results of the Menu Builder to the returned response of every controller (I can use a base controller class to do this as this menu appears on every page). However something about this feels unclean as if I have to render the same header/footer every time as well I'll have to be append all 3 outputs to the response. (maybe that is okay?)
Is there a better way of rendering several includes worth of content which each need their own DB lookups and other server-side logic?
Yes. They are called sub requests. Read the documentation here.
Say I'm having a base template like this:
// Default/index.html.twig
{% block javascripts %}
<script>//some script</script>
{% endblock %}
<div>
{{ render(controller(MyControllerBundle:Default:header)) }}
</div>
{{ text }}
<div>
{{ render(controller(MyControllerBundle:Default:footer)) }}
</div>
And this renders controllers having these templates:
// Default/header.html.twig
Header content
{% block javascripts %}
<script>//some additional scripts from the header</script>
{% endblock %}
and
// Default/footer.html.twig
Footer content
{% block javascripts %}
<script>//some additional scripts from the footer</script>
{% endblock %}
Is it possible somehow to use the javascripts block from the rendered sub controllers in the parent template?
I want to have all javascripts cumulated in one place.
Rendering from bottom up with extending is no option here because the template consists of
multiple blocks that are rendered by different controllers.
Is this possible somehow? Or is there a better approach to this?
Anything is possible however design-wise it might not be a good idea.
The render tag is really useful when it comes down to scaling and it used as a way to isolate a request. Each render call is considered as a sub-request and a cache strategy can be applied to it.
I'd highly advise you to read this documentation about HTTP caching and especially the part that talks about Edge Side Includes (or ESI).
When you use the render tag, think of it as a module you want to include in multiple pages and eventually cache.
You shouldn't interact with the master request because the sub request is isolated for caching (depending on the place you embed the render tag, the master request will be different which means you might get some unexpected results).
First of all, I'd create a layout template that every other pages extends. The layout template will declare all the basic blocks (javascript, css, footer, header, <head>, <body> - you can abstract in more templates if you want).
If you have logic for your footer or header split them into Twig functions (or filters) and handle the logic in Twig but keep it light (if it's too complicated or too spaghetti that means there is another way).
Avoid having multiple Javascript or CSS files per page. If you have some css or javascript that appears on some pages but not all of them it's still probably a good idea to merge them into one file (less DNS calls on the client side and once it's cached it will be faster to load the page).
If you have a administrator.js kind-of file, then you could include it as a separate file but if most requests come from administrators then you might want to include it with all the other files.
If you didn't know you can combine assets (js or css) into one file: more info in the Symfony documentation.
I didn't answer your "how" question because I'd strongly advise you to not implement such a system however I believe I've shared good guidelines to make an informed decision.
when extending / rendering other content in TWIG you can call the parent block: http://twig.sensiolabs.org/doc/functions/parent.html
this means that you can leave default as it is and inside header / footer define
{% block javascripts %}
{{ parent() }}
{# other scripts #}
{% endblock javascripts %}
I would suggest that you have different block name for the footer - that way you can include scripts outside of the header.
Also, it might be best to keeps scripts in one place - that way you can use assetic rewrite's later down the line : http://symfony.com/doc/current/cookbook/assetic/asset_management.html#including-javascript-files
exactly what #Pazi says in the comment: Do you need a controller? It looks pretty simple to just include the template by itself, without using a controller.
You might use the include tag to include the subtemplates.
{% include 'MyControllerBundle:Default:header.html.twig' %}
For reusing the javascript block from the rendered sub controllers, you could create a base template that contains the javascripts block. Then extend that base template file in your header and footer. Or just including the base template in them should work, too.
Is there a way to include custom css tags in a jekyll site while using markdown for the entry files; for example, when I want to highlight a certain paragraph?
Markdown nor YAML FrontMatter have this built in. But you can make it yourself.
Say, you have foo.css that you want to include on certain posts.
In _posts/2013-02-03-higligting-foo.markdown:
---
css: foo
title: "Drupal Imagecache security vulnarability with DDOS attack explained"
tags: [drupal, imagecache, security, ddos]
---
Then, in _layouts/default.html:
{% if post && post.css %}
<link rel='stylesheet' type='text/css' href='public/assets/{{ post.css }}.css' />
{% endif %}
If a post is shown, and the post has a variable defined, css, then use that to include the css file with the name. Note that this does not test wether the filename is correct, whether the css-file exists and so on.
If you mean can you give a particular paragraph in your Markdown document a specific class, you technically can, by just typing the paragraph tag the way you want it:
My **first** paragraph
<p class="mySpecialClass">My **second** paragraph</p>
My **third** paragraph
and Markdown will pass your p tag through to the resulting HTML.
However, Markdown gives up on parsing content inside tags you type yourself, so your paragraph's content won't be treated as Markdown — e.g. the word **second** in that paragraph won't show up as bold.
I switched to Textile for Jekyll posts because of this behaviour.
Good luck!
you should be able to put html tags in your markdown document, and it should parse them no problem. for example:
#This
is a paragraph <span style="background-color:yellow">with highlighting</span>
I am (still) trying to introduce http://xoxco.com/clickable/jquery-tags-input into a dedicated bundle. As far, I have a type as a child of text and a data transformer that converts comma-separated strings into arrays of Objects and vice versa.
Now I want to decorate the text field with the JQuery code linked above. As far as I understand, I have to define a block like
{% block manytomanycomboselector_widget %}
{% spaceless %}
{{ block('text_widget') }}
<script>
$(function(){
$("#{{ id }}").tagsInput();
});
</script>
{% endspaceless %}
{% endblock manytomanycomboselector_widget %}
in [MyTypeBundle]Resources/views/Form/fields.html.twig
Now, both the documentation and the answers for this question at StackOverflow state that I have to reference fields.html.twig somewhere either in the template that uses the form or in app/, but this doesn't seem to be necessarily for other field-type bundles, though I cannot see in their code why.
What do I have to configure inside the bundle besides this block in this file?
Also I didn't get where I have to put the css and js requirements for the header and how I deal with general requirements like jQuery itself.
I have the same issue & I resolve it by merging my field template in the twig.form.resources parameter.
So, in the DI extension of my bundle (MyBundle/DependencyInjection/MyBundleExtension.php), I add:
$container->setParameter('twig.form.resources', array_merge(
array('MyBundle:Form:field_widget.html.twig'),
$container->getParameter('twig.form.resources')
));
Be aware, your bundle must be registered after the TwigBundle in your AppKernel.
EDIT:
A form field is not linked to any JS or CSS. So, IMO, you have 2 solutions.
Firstly, you directly wrap your JS & CSS in your field template and your bundle stays stand-alone.
Secondly, you instruct final users that they need to include manually some JSS & CSS each time they use your field type.
The IoFormBundle & GenemuFormBundle uses the second solution like explain in their documentation.