I am trying to include my CSS and JS files on my Twig template like this
{% block stylesheets %}
<link href="{{ asset('bootstrap.min.css') }}" rel="stylesheet" />
{% endblock %}
{% block javascripts %}
<script src="{{ asset('jquery-3.2.1.slim.min.js') }}"></script>
<script src="{{ asset('popper.min.js') }}"></script>
<script src="{{ asset('bootstrap.min.js') }}"></script>
{% endblock %}
I get an error on Slim like this
Unknown "asset" function.
How do I include my CSS and JS files in Twig via Slim?
There’s no such function by default. Either install an Asset extension or hardcore links by yourself.
Related
To my understanding, by using twig's extends method, it should be possible to add code to the footer from within a template that is included anywhere else.
Like if we render the main page and have a <form> there in a template edit_form.html.twig and we know we need special javascript here (only for that form) so we decide to add this javascript tags in the footer at the end of the page like this:
edit_form.html.twig
{% block edit_form %}
<form id="editForm">
<!-- form html here -->
</form>
{% endblock edit_form %}
{{ include('edit_form_js.html.twig') }}
We want this javascript to be at the end of the page:
edit_form_js.html.twig
{% extends "footer.html.twig" %}
{% block js %}
{{ parent() }}
<script>
// special js code only needed for the <form>
</script>
{% endblock js %}
footer.html.twig
{% block js %}
<script src="jquery.js"></script>
{% endblock js %}
But doing this does not add the custom form javascript at the end after the jquery inclusion but results in the block js being twice on the page (after the form and in the footer)
Is my understanding of twigs extends wrong?
Q: Is there any way to add code from anwywhere to the footer?
Included templates don't know anything from the template it's being called from. There for an included template cannot alter a block from that said template. You might want to have a look at the deferred extension
I'm trying to setup a clean structure for my Craft CMS install, but having issues with some very basic twig and a nice way to structure my things.
See this gist - why would my Navbar not show in this example?
Even better, I would like to structure my site like this - but it doesn't show anything? - another gist
Am I mixing the extend/block pattern the wrong way somehow? This feels so very basic and thus it's extremely frustrating. I would appreciate any help.
In your first gist, in index.twig, you extend base.twig correctly. However, you don't specify the contents of the navbar block, so the block defaults to the empty content that is set in base.twig.
You can change base.twig to include navbar.twig using the include function:
...
<div id="content">
{% include "navbar.twig" %}
{% block content %}{% endblock %}
</div>
...
You should also not extend base.twig in navbar.twig to prevent infinite recursion (base includes navbar, which extends base, which includes navbar, ...).
If you want the navbar to be overridable in index.twig and other files, you can retain the navbar block in base.twig and set its default contents to include navbar.twig:
...
<div id="content">
{% block content %}
{% include "navbar.twig" %}
{% endblock %}
{% block content %}{% endblock %}
</div>
...
Then, in index.twig, if you omit {% block navbar %}{% endblock %}, the navbar will use the contents from navbar.twig. Or you can also override the navbar block's contents:
{% extends "base" %}
{% block navbar %}
<h2>Overridden navbar</h2>
{% endblock %}
{% block content %}
<h2>Main content</h2>
{% endblock %}
In your second gist, in index.twig, you can change {% block head %}{% endblock %} to {% include "head.twig" %} and so on. In head.twig and other files, you should again not extend index.twig to prevent infinite recursions.
I recommend taking a look at Twig's documentation about the extends tag to see how blocks and templates actually work. In your two gists, blocks and templates are not used correctly.
First off, I am using Jekyll 3.5.1
I have enabled Pagination in my Jekyll config and have added the following to my _config.yml file:
#pagination
paginate: 5
paginate_path: "blog/page:num"
In my root directory, I have created a folder called 'blog' with inside of it an 'index.html' file. Yet, when I try to serve the file I get the warning that pagination can not find an index.html file.
I have also tried to just use the index.html file under root, but that was unsuccesfull as well.
Here you can see the github repo in case that would be of any help.
I have tried to play with the paginate_path as well as with the index.html file. Any help would be appreciated!
The concrete error message is:
Pagination: Pagination is enabled, but I couldn't find an index.html page to use as the pagination template. Skipping pagination.
Any help would be greatly appreciated.
One cause of this error message: The Brackets Editor 'Beautifier' command doesn't recognize YAML code when it executes, so it sees the top YAML of your index.html file:
---
layout: default
title: Jekyll Title
---
... and transforms the 4 lines into one continuous line:
--- layout: default title: Jekyll Themes ---
Jekyll responds with the error message:
Pagination: Pagination is enabled, but I couldn't find an index.html page to use as the pagination template. Skipping pagination."
index.html must not be empty. The pagination template file (as referred by pagination_path should contain the code to generate each page with the list of posts, as docs suggests, create blog/index.html:
---
layout: default
title: My Blog
---
<!-- This loops through the paginated posts -->
{% for post in paginator.posts %}
<h1>{{ post.title }}</h1>
<p class="author">
<span class="date">{{ post.date }}</span>
</p>
<div class="content">
{{ post.content }}
</div>
{% endfor %}
<!-- Pagination links -->
<div class="pagination">
{% if paginator.previous_page %}
Previous
{% else %}
<span class="previous">Previous</span>
{% endif %}
<span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
{% if paginator.next_page %}
Next
{% else %}
<span class="next ">Next</span>
{% endif %}
</div>
I seen similar questions here but none of them not working for me.
In addition these are old questions for older symfony2 version (different parameters). This can also happen in symfony3.
I need query version parameter to my production JS and CSS assets to avoid using old files. (by users ofc) For now generated asset looks like this:
<script type="text/javascript" src="/js/56a0cb5.js"></script>
In my template:
{% javascripts '#XBundle/Resources/public/js/jquery-1.9.1.min.js'
'#XBundle/Resources/public/js/ga.js'
'#XBundle/Resources/public/js/somejs.min.js'
'#XBundle/Resources/public/js/main.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
And now also I added some lines in configuration file according to documentation:
framework:
assets:
version: 'v2'
version_format: '%%s?ver=%%s'
but still my asset url looks the same.
How can I achieve this?
<script type="text/javascript" src="/js/56a0cb5.js?ver=v2"></script>
Thank you
You could declare version in templating section of framework like this:
framework:
templating:
engines: ['twig']
packages:
js:
version: 'v2'
version_format: '%%s?version=%%s'
In template:
{% javascripts '#XBundle/Resources/public/js/jquery-1.9.1.min.js'
'#XBundle/Resources/public/js/ga.js'
'#XBundle/Resources/public/js/somejs.min.js'
'#XBundle/Resources/public/js/main.js' package='js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
I am working on integrating Assetic into an application that I am building. The application follows the MVC pattern but does not use any frameworks. Twig is used for templating.
I have read the documentation and have looked at a few helpful blog posts.
The application is structured like this:
application
twig_templates
js
css
public_html
js
css
images
The twig templates are rendered and then returned by the application, so that is quite straight forward. The js and css folders underneath the application folder would hold the raw javascript and css files.
My plan is that combined and minified js and css files would be stored in the js and css folders under the public_html folder.
Since I don't plan to optimize any images using assetic, they will be placed in the images folder underneath public_html directly.
Now the question:
I understand that by using assetic from twig, combined and minified assets can be exported to my public_html directories:
{% stylesheets '/path/to/sass/main.sass' filter='sass,?yui_css' output='css/all.css' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
In this case is the css/all.css file regenerated everytime that template is rendered?
To make the application portable (it could be hosted using a virtual host, or perhaps even in a folder) and to ensure things work in a site with routed URLs like http://site.com/controller/action, does assetic provide anyway "rewrite" URLs for images into absolute ones (i.e. images/a.jpg into http://mysite.com/images/a.jpg)?
Does assetic work when using nested templates?
parent.twig:
<!DOCTYPE html>
<html>
<head>
{% block head %}
<link rel="stylesheet" href="mainstyle.css" />
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
<body>
</body>
</html>
child.twig:
{% extends "parent.twig" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ parent() }}
<link rel="stylesheet" href="childstyle.css" />
{% endblock %}
In this case, how can I let assetic know that it should combine childstyle.css and mainstyle.css and serve it as 1 file?
as for this answer it is not possible to combine inherited stylesheets from parent with child's
Combining Assetic Resources across inherited templates