I have been searching for this all over, but can not find an answer or example.
Can a Ractive template be used to construct head elements that are consistant across pages, and can that be loaded from a separate file?
For example: all html, head, and title tag info is loaded via a referencable template from an external file into an index page.
+html+
+head+
+title+
+/title+
+/head+
And if so, how do you do it? As I try to wrap my head around it, jquery and ractive.js would need to load. Is there a different/better solution?
It is possible. But it's not practical and it raises other issues.
Here's a basic implementation that shows how <head> can be templated but without concentrating on putting the template in an external file. This works for me in Chrome and IE.
<html>
<head id="output"></head>
<script id="template" type="text/html">
<title>{{ title }}</title>
</script>
<script type="text/javascript" src="ractive.min.js"></script>
<script type="text/javascript">
var ractive = new Ractive({
template: "#template",
el: "#output",
data: {
title: "This is the title"
}
});
</script>
<body>
...
</body>
</html>
You'll run into problems with this approach because the head elements won't be loaded until after the page has loaded and Ractive kicks in. This may cause the following problems:
Search engines might not be able to read the page title and meta tags
Any javascript you need to load into <head> may not work (I tried some simple examples and was able to get the javascript to run but it failed to reference any elements in the body. Maybe it's a context issue and maybe Ractive has support to overcome this but this is an area I'm unfamiliar with.)
If you require valid HTML, this probably won't work for you because script tags can't be direct children of <html>, and <head> is supposed to have <title> as a direct child.
You're better off using a server-side solution to template <head>.
Related
I am trying to get cloudflare stream to work in angular. I have tried the solution given here: Angular attribute for HTML stream.
However, it is always a hit or a miss:
Out of 10 reloads, one loads the player.
But anytime I make a
change to the <stream> tag, and angular re-compiles, the player is
loaded. After this if I refresh the browser, it is a blank screen
again.
The component which shows the video is deep in the tree and the component belongs to a module that is lazy loaded:
In the index.html file:
<!doctype html>
<html lang="en">
<head>
...............
</head>
<body>
<app-root></app-root>
</body>
<script src="https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js" id="video_embed" defer="" async=""></script>
</html>
In the videoFile.component.ts:
<stream src="5d5bc37ffcf54c9b82e996823bffbb81" height="480px" width="240px" controls></stream>
Found a solution here: https://github.com/angular/angular/issues/13965
So everytime the component loads, the script is removed and reattached using ngOninit, like so:
document.getElementById("video_embed").remove();
let testScript = document.createElement("script");
testScript.setAttribute("id", "video_embed");
testScript.setAttribute("src", "https://embed.cloudflarestream.com/embed/r4xu.fla9.latest.js");
document.body.appendChild(testScript);
If anyone has any other solutions, please do let me know.
gotemplates
Hello!
I'm learning Go language now and trying to port some simple WEB code (Laravel 4).
Everything was well, until I tried to reproduce Blade templates into text templates.
I found that Go can load my CSS and JavaScript files only from the catalog with a name "bootstrap" only.
Here is my catalog tree which I tried to use:
start-catalog
bootstrap (link to bootstrap-3.3.1)
bootstrap-3.3.1
css
bootstrap.min.css
js
bootstrap.min.js
jquery
jquery (link to jquery-2.1.1.min.js)
jsquery-2.1.1.min.js
go_prg.go
Here are my templates:
base_js.tmpl
{{define "base_js"}}
{{template "login_1"}}
<script src = "/bootstrap/js/jquery"></script>
<script src = "/bootstrap/js/bootstrap.min.js"></script>
{{end}}
base_header.tmpl
{{define "base_header"}}
<head>
<title>PAGE TITLE</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
</head>
{{end}}
If the catalog name differs from "bootstrap" Go language or Firefox can't load files from the templates above: bootstrap.min.css, bootstrap.min.js, jquery.
If I use not the link but the catalog name directly "bootstrap-3.3.1" than Go or Firefox can't load.
If all required files are moved under "bootstrap" I'm getting the results I expected (exactly the same as in Laravel 4).
To launch go language code the command go run go_prg.go was used.
Environment: Ubuntu 14.04, go-1.3.3, Firefox 31.
Who's wrong: Go language, Firefox or me?
Any help will be highly appreciated!
The problem described was caused by
http.Handle("/bootstrap/", http.StripPrefix("/bootstrap/", http.FileServer(http.Dir("bootstrap"))))
before any template was handled. It allowed access files under the directory 'bootstrap' only.
The problem was fixed by changing to
http.Handle( , http.StripPrefix(, http.FileServer(http.Dir("."))))
and adding to pathes for CSS and JavaScript files. Like so
/bootstrap/js/jquery">.
I'm writing a custom template tag that wraps an HTML element with some code to make it editable. This is backed up by some CSS, and JS that takes care of sending the data to the server to save it.
This component requires the inclusion of
<script type="text/javascript" src="../myscript.js"></script>
at the bottom of the page and
<link rel="stylesheet" type="text/css" href="../mystyle.css">
at the top.
I already have two "js" and "css" template blocks in the page template.
My question - is there a way for for the custom template tag to include these scripts once in the relevant page blocks, if my tag is present?
IE I put in:
{ % mytag %} <div>editable element</div> { % endmytag %}
and the "js" and "css" template blocks gets populated with the relevant script\link tags?
(I don't want to preinclude those in every page, as only some of my pages will use this tag)
You might try using Django-Sekizai from within the template your custom tag renders to add CSS and JS files to another block, which is what Sekizai is designed to do. I use it extensively with Django-CMS based projects, but I haven't tried your use case.
I have a pretty straight forward question, in regards to joomla templates.
The end result being : http://css3playground.com/flip-card.php
What I want to do is simple, in a sense, but need to know where to look;
I want to have the entire page wrapped in two divs, all the PHP code, to which class i can define in css and drop in some javascrpt so I can apply page transitions to that div. All of which I know how to do except for where to do it in, the PHP structure of joomla is new to me.
and also, after the first step is accomplished, create a second div after the content that would be dynamically loaded with content from clicked links on the page from within the template, but thats two questions at once lol.
Any ideas on the first part?
If you just want to use a div to encompass the entire template, do exactly that: wrap the template in a div and give it a custom class or id:
<html>
<head>
//stuff here
</head>
<body>
//insert the wrapper here
<div id="wrapper">
//template structure here
</div>
</body>
</html>
The file you want to edit will likely be named index.php located at public_html/templates/your_template/index.php.
For some templates, such as those by Yootheme, you will instead want to edit the file at public_html/templates/your_template/layouts/template.php (or /public_html/templates/your_template/styles/current_profile/layouts/template.php if you're using a profile other than the default).
I am attempting to create a template using Smarty for php. I would like the template to be reusable so I inheriting it and substituting values using blocks. This works fine except when I need to access these block values in sub-templates. I am calling these sub-templates using smarty's {include} function.
Example:
Template-Parent (template.tpl):
<html>
<head>
{include file=sub_template.tpl}
</head>
<body>
{block name=title}No Title Provided{/block}
</body>
</html>
Sub-Template (sub_template.tpl)
<title>{block name=title}No Title Provided{/block}</title>
Template-Child (template_child.tpl)
{extends file="template.tpl"}
{block name=title}My Website!{/block}
When I view the site, the output is:
<html>
<head>
<title>No Title Provided</title>
</head>
<body>
My Website!
</body>
</html>
After doing some reaserch I did see a note on smarty's website about enclosing {include} functions in dummy {block} tags but have had varied levels of success getting this to work.
Note:
If you have a subtemplate which is included with {include} and it
contains {block} areas it works only if the {include} itself is
called from within a surrounding {block}. In the final parent
template you may need a dummy {block} for it.(http://www.smarty.net/docs/en/advanced.features.template.inheritance.tpl)
Due to this, I have tried:
<html>
<head>
{block name=dummy}{include file=sub_template.tpl}{/block}
</head>
<body>
{block name=title}No Title Provided{/block}
</body>
</html>
This seems to work until I make any change to sub-template. As soon as a change to the sub-template is made, it once again stops responding to the block values set in the child.
Have I misunderstood what the notice was referring to about placing the {include} in dummy block tags or is this a bug with smarty? I am not currently using caching but my other thought was that maybe this is a sub-template caching problem.
Any insight would be greatly appreciated, thanks!
It is true that these templates are compiled and cached into the templates directory. This is why clearing the templates directory temporarily fixed the issue. The template caching is different than the explicit caching that smarty also supports. I have found that the template caching can be overridden with:
$smarty->compile_check = true;
$smarty->force_compile = true;
This allows changes to the template to be made with out needing to delete the cache after change while in development.