I'm used to ASP.NET MVC, where I can define a section in a Razor view like this:
#Html.RenderSection( "scripts" )
I usually put this at the bottom of my layout view. That way, I can add scripts from my views like this and they will be included at the bottom of the body, where the scripts section is defined:
#section scripts {
<script>
(function () {
// do stuff...
}());
</script>
}
In Phalcon, I can put this at the bottom of my layout view:
$this->assets->outputJs();
Then I can add scripts from my views like this:
$this->assets->addJs('js/whatever.js');
The only downside to this method is the script for this view has to be in a separate file, which means a separate request. I'd like to be able to add the script directly to the view like I can do with Razor and still have it rendered at the bottom of the body. Does Phalcon allow you to do this?
Yes, you can use Partials:
<?php $this->partial("partials/js/whatever") ?>
Where js/whatever is a php template file in views/partials/js/whatever.phtml.
Also you can use Volt template engine and do the same:
{{ partial('partials/js/whatever') }}
or use include:
{% include "partials/js/whatever" %}
In Volt you can use also [Blocks][3] where you can define parts of main layout (such as footer) in main template file and in each view file you can define what should be placed there.
{# templates/base.volt #}
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}{% endblock %}
</div>
</body>
</html>
And in view:
{% extends "templates/base.volt" %}
{% block content %}
<h1>My page</h1>
{% endblock %}
{% block footer %}{{ partial('partials/js/whatever') }}{% endblock %}
Well as I wrote this is for Volt template engine for Phalcon, but if you're using plain PHP then I don't know similar solution. You could create simple service that gathers links to templates in controller and then output them as partials in main template.
Related
I'm extending the layout of my sphinx-book-theme by adding the following to the layout.htmlunder my source\_templatesfolder:
{% extends "!layout.html" %}
{%- block extrahead %}
<script
type="text/javascript"
src="https://utteranc.es/client.js"
async="async"
repo="executablebooks/jupyter-book"
issue-term="pathname"
theme="github-light"
label="đź’¬ comment"
crossorigin="anonymous">
</script>
{% endblock %}
When I build from source with the command:
sphinx-build -b html ....
The html output doesn't render the comment section at the bottom of the pages.
However, if I add the javascript bloc directly to the bottom of a Markdown file, the comment section appears at the bottom of the relevant page.
What am I missing here? When I inspect the page source, I can see that the javascript block is in the head section.
I'm using Sphinx v4.5.0 with the Sphinx-book-theme on a Windows OS
I managed to find an answer to my own question. :-)
Looking at the main 'layout.html', I figured out the template had a different structure and the blocks were using different naming conventions than the ones used in the default Sphinx templates.
So I changed my initial configuration by adding an extra block extraScript inside the block docs_main, then I added a block there under {super}:
{% block extraScript } {% endblock extraScript %}
Then I adapted the code indicated in my former question as shown below:
{% extends "!layout.html" %}
{%- block extraScript %}
<script
type="text/javascript"
src="https://utteranc.es/client.js"
async="async"
repo="executablebooks/jupyter-book"
issue-term="pathname"
theme="github-light"
label="đź’¬ comment"
crossorigin="anonymous">
</script>
{% endblock extraScript %}
If you have a more elegant method to solve this issue, please share your ideas with us.
I code with django and when I am working with django template, I do the below to avoid repeating code. Let me illustrate it with an example:
Suppose I have two pages in my website:
1) home
2) about
In django I code as below:
I first build a base.html :
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}home{% endblock title %}</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/my-base-css.css' %}">
{% block stylesheet %}{% endblock stylesheet %}
</head>
<body>
<h1>this is my site</h1>
{% block body %}{% endblock body %}
</body>
</html>
I then build home.html:
{% extends 'base.html' %}
{% block stylesheet %}<link rel="stylesheet" href="{% static 'css/home-page-css.css' %}">
{% endblock stylesheet %}
{% block body %}
<h2>This is home</h2>
{% endblock body %}
I also build about.html:
{% extends 'base.html' %}
{% block title %}
my-website-about
{% endblock title %}
{% block stylesheet %}<link rel="stylesheet" href="{% static 'css/about-page-css.css' %}">
{% endblock stylesheet %}
{% block body %}
<h2>This is about</h2>
{% endblock body %}
I now want to do the same without having a backend. I have a static website. How can I do the same without having a backend like django or php, etc.?
There is a similar question in here:
Include another HTML file in a HTML file
This can solve my problem. However, it is a little different from what I want. It is loading another html in an html file but I am looking for extending another html; I mean adding to another base.html and having a new html file
It looks like you're using the Django Templating Language which is similar to Jinja (I've only used this one because I've mostly used Flask but the way it works should be similar). Django uses this language in its template engine and the way it works is by basically taking your HTML file, passing it through a backend (Django), and replacing the variables/logic you have there with actual values. In the end, you'll have a fully built HTML file.
The short answer is no.
From my understanding of template engines, you need to have a backend that can actually work out which values (by replacing this syntax { some_variable }) you should put in the final HTML output.
I have a nice little index.html file, it is an extended template and its parent is a base.html file (well in my case base2.html). I was trying to add a google analytics code snippet to some files on my site and it turns out, if I add anything in the tag on my extended templates, it is like the script code is ignored. Is there something I am doing wrong? I know I can add it just fine to base2.html, but then that would track for ever single hit since that is the parent for a lot of my pages on the site.
Without seeing the base2.html and index.html, it's pretty tough to answer, but the most likely culprit is that you forgot to put the <script></script> inside of a {% block %} that exists in the parent template. Remember that for template inheritance in Django, the parent defines a "skeleton" of all the blocks, and children must override those blocks— you can use {{ block.super }} to inherit all of the parent template's content for that block, then add any additional content. Any content in the child template that is not in a block in the parent "skeleton" template that it's extending doesn't get rendered.
# base2.html
<body>
{% block content %}
{% endblock content %}
{% block footer_scripts %}
<script src="foobar"> ...</script>
{% endblock footer_scripts %}
</body>
If you were to just add this, it wouldn't work:
# index.html - DOES NOT WORK
{% extends 'base2.html' %}
<script>
// GA javascript
</script>
You need to include it in a block:
# index.html - DOES WORK
{% extends 'base2.html' %}
{% block footer_scripts %}
{{ block.super }}
<script>
// GA javascript
</script>
{% endblock %}
I want to use phalcon's dynamic routing in the js files.
For example, I have angular js code in the js files and I need to populate a list of objects that I get from a controller action listAction (/users/list) or I need to push changes to an object that is a controller action saveAction (/user/save).
I do not like hardcoding the routes in the js files like
$http.get("http://localhost/sample/users/list").success(function(response){
//my code here
});
I would like to use phalcon's router in the js files like the following:
$http.get("{{ url('users/list')").success(function(response){
//my code here
});
Right now I'm separating the javascript from the controller action's view by creating a partial .volt file and putting all the javascript related to that view in there.
Is there a better way? Is there a way I can have access to the phalcon router in js files? I use FOSJsRoutingBundle in Symfony is there an alternative for phalcon?
this is an example.
put block in Your layout.volt:
<html>
<head>
{% include 'js.volt' %}
{% block js %}{% endblock %}
</head>
<body>
<script>
{% block include_js %}{% endblock %}
</script>
{% block content %}{% endblock %}
</body>
</html>
js.volt:
<script src="path/to/js/file.js"></script>
and in Your view (users/list.volt) do:
{% extends 'layout.volt' %}
{% block js %}
<script src="path/to/js/another/js/file.js"></script>
{% endblock %}
{% block include_js %}
$http.get("{{ url('users/list')").success(function(response){
//my code here
});
{% endblock %}
{% block content %}
BLABLABLA
{% endblock %}
In Django, how can you handle the fact that you need to wait for that a JS file is loaded before actually using it?
let's see the problem with this example:
base.html
<!DOCTYPE html>
<html>
<head>...</head>
<body>
{% include "content.html" %}
<script src="jquery.js"></script>
<script src="awesome-script.js"></script>
</body>
</html>
content.html
<script>
$(document).ready(function(){
...
});
</script>
This logically fail ($ is undefined). I could load jQuery before calling the script, but I'm trying to avoid loading JS file before my main content to keep the website loading as fast as possible.
So, what can I do? Thanks.
Extending Wtower's suggestion - keep his accepted.
I would really insist on using the template inheritance based approach in his examples. I would like to introduce a few more elements to that approach, to cover some other common needs :
<!DOCTYPE html>
<html>
<head>{% block scripts-head %}{% endblock %}</head>
<body>
{% block content %}{% endblock %}
{% block scripts %}
<script src="jquery.js"></script>
{% endblock %}
<script>{% block script-inline %}{% endblock %}</script>
</body>
</html>
There are 3 ideas here:
Adding a placeholder in the header, in case you could need scripts there at some point. Self explanatory.
Including common scripts in the base file. If they are common, the belong in the base file, you should not have to repeat yourself in every template. Yet you put it inside the block, so it can be overriden along the hierarchy.
{% extends "base.html" %}
{% block scripts %}
{{ block.super }}
<script src="a-local-lib.js"></script>
{% endblock %}
The key is in using {{ block.super }} to bring any script that was defined in the parent template. It works especially well when you have several levels of inheritance in your templates. You get to control whether script go before or after inherited scripts. And of course, you can completely override the block, not including {{ block.super }} if you so wish.
Basically the same idea, but with raw javascript. You use it the same way: every template that needs to include some inline javascript will have its {{ block script-inline }}, and will start with {{ block.super }} so whatever the parent put in there is still included.
For instance, I use Ember in my project, and have a couple of initializers to setup project settings and load bootstrap data. My base app-loading templates has a global project settings initializer, and child templates define local settings and data.
Since your script uses jQuery, you can simply use the $(document).ready() and $(window).load() functions of jQuery to bind a function on the event that DOM is ready and all window contents have been loaded, respectively.
If you do not use jQuery, take a look at these relative questions to understand how to imitate the above behaviour with pure JS:
pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
Javascript - How to detect if document has loaded
EDIT 1: The inclusion order matters. You have to include the jQuery scripts before any scripts that require jQuery are executed.
EDIT 2: You can organize your templates better by keeping the scripts separately from the main content, either with a second template:
base.html
<!DOCTYPE html>
<html>
<head>...</head>
<body>
{% include "content.html" %}
{% include "js.html" %}
</body>
</html>
js.html
<script src="jquery.js"></script>
<script src="awesome-script.js"></script>
<script>
$(document).ready(function(){
...
});
</script>
(in this case you render base.html)
Or with blocks (recommended):
base.html
<!DOCTYPE html>
<html>
<head>...</head>
<body>
{% block content %}{% endblock %}
{% block scripts %}{% endblock %}
</body>
</html>
content.html
{% extends 'base.html' %}
{% block content %}
...
{% endblock %}
{% block scripts %}
<script src="jquery.js"></script>
<script src="awesome-script.js"></script>
<script>
$(document).ready(function(){
...
});
</script>
{% endblock %}
(in this case you render content.html)