I have a static site hosted on GitHub Pages which is starting to grow in size. Normally I would use server side includes (<?php include('path to file'); ?>) to bring in header, footer and any navigation files. However php doesn't run on GitHub Pages.
Is HTML5 embedding which adopts a sort of iFrame technique my only option here?
I have seen threads such as this, this, this, this however they do not seem to apply for GitHub pages.
Not really ideal.
Thanks.
Jekyll is a common solution for this. It is a static site generator that allows you to use Liquid templates, and is made to run on GitHub's servers.
A great example of the {% include %} feature can be seen on the documentation pages from Twitter Bootstrap, which make use of includes for header.html and footer.html:
Use templates and preprocess them at build time (as opposed to run time). You could set them up to build as a git commit hook.
There are a lot of tools for doing this listed here, I'm fond of ttree.
I know this is a late answer, but here's something I stumbled on recently.
Turns out that the guys over at http://w3schools.com/ created some simple JavaScript code as an alternative to SSI:
<!DOCTYPE html>
<html>
<script>
function w3IncludeHTML() {
var z, i, a, file, xhttp;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
if (z[i].getAttribute("w3-include-html")) {
a = z[i].cloneNode(false);
file = z[i].getAttribute("w3-include-html");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
a.removeAttribute("w3-include-html");
a.innerHTML = xhttp.responseText;
z[i].parentNode.replaceChild(a, z[i]);
w3IncludeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
}
</script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Here's an example.
I wrote two bashscripts that does what you are looking for (same reason you are askimg actually). Right now it is extremly basic, but it may be helpful for you. Documentation is nonexistamt, but should be easy to figure out and make work for your site.
https://gitlab.com/frc-team-8733/website/-/tree/master/tools
I made a video about how to Import custom HTML templates using AJAX. It will run the script tags in the imported HTML without using eval(), and the script tag you use to make the import call will replace itself with the imported code, so there's no nesting in divs. It's basically a really clean AJAX site builder. Here's the link: https://www.youtube.com/watch?v=ZqD61tIoG2s&t=18s&index=1&list=PLRJ8uW8FBcZJMiFbPNG67lsFHhFF1k322
The source code can be found in the video description.
jQuery load() works well for this.
SSI should be supported!
<!--#include virtual="layout.html" -->
The file that contains the above line must end with ".shtml" or ".shtm" extensions!
Related
I wish to do the following things:
Insert external html blocks into new html pages
Use the same html header from one html file for a number of pages, without recreating the header again for all the pages
Please help!
You can use HTML Imports which is part of Web Components:
<head>
<link rel="import" href="/path/to/your/file.html">
</head>
If your page does not have to be pure HTML, you should consider using PHP or a similar server-side language.
There are plenty of options, depends on you:
1) use iframes (a lot problems with responsibility) http://www.w3schools.com/tags/tag_iframe.asp
2) ajax call in javascript, load external resource and then print it in placeholder tag (example is with jquery) http://www.w3schools.com/jquery/jquery_ajax_load.asp
3) use some server language/preprocessor (php, ruby, nodejs), depend if you can (need to by installed on server)
4) also there are static page generator, you add marks in your html, and they will compile html with marks to full static html http://hyde.github.io/ for example.
What you are talking about appears to be a process called templating. There are many ways to do this, including writing Javascript to insert pre-written HTML templates into the DOM (the webpage). You might also consider using a pre-written templating library such as http://handlebarsjs.com/ or another library which contains templating functions like http://underscorejs.org/. A simple MVC guide like:
http://blog.ircmaxell.com/2014/11/a-beginners-guide-to-mvc-for-web.html
May be helpful too, to get you started.
In a more practical sense, here's one possible solution:
To begin I would recommend putting the 'blocks' you want to insert in a separate folder. In the website I run, for example, I place them in the \templates folder (or subfolders) but you can more or less call it what you want as long as it makes sense to you. For our purposes let's say we've created block.html and put it in our \templates subfolder...
Now, within each template you will have whatever you want to load in; something like this:
<h2>Title of section</h2>
<p>My text.</p>
Or whatever you'd like. Then, you'll probably want to add an element to your main page which calls some Javascript, which loads your HTML template in when a particular condition occurs. For example, if you wanted to load in our block.html file you might write something like this:
<div id="calling-block" onclick="menuClicked('locationToInsert', 'block')"></div>
Which would call a Javascript function called 'menuClicked()' when we click the div with the id 'calling-block'.
Within the function we would write something like this:
<script>
function menuClicked(insertEl, UrlString, onTemplateLoaded) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById(insertEl).innerHTML = xhttp.responseText;
if (onTemplateLoaded) onTemplateLoaded();
};
};
console.log(UrlString);
xhttp.open("GET", UrlString, true);
xhttp.send();
};
</script>
This is a very simple way of doing things and I'm sure people will tell you there are problems with it, so I would definitely recommend doing your own reading as well, but I hope this covers the very basics.
You need tu use a server side functionality like php, aspx ...
I'm using bootstrap and jQuery CDN for my web app and I'm just wondering is there a way to not having to go to bunch of my files and paste the CDN links and scripts and instead just put it all in one place?
Let's say that I can't save bootstrap or jQuery locally or make the web app a single page web app.
I believe Require.js can do this but I'm not sure how or is there another JavaScript libraries that can do this?
First let me state the obvious, that most CDN's include minified versions already.. but there are several options to do this on your own. See here for others.
I've used this one, JShrink.
Here's an example using a list of CDNs:
To include your scripts..
$scripts = array(
"https://code.jquery.com/jquery-2.1.4.js",
"https://code.jquery.com/ui/1.11.4/jquery-ui.js"
);
foreach($scripts as $script)
echo "<script src='minifier.php?url=".urlencode($script)."'></script>\n";
Then minifier.php looks like this..
<?php
include('vendor/autoload.php');
$minifiedCode = \JShrink\Minifier::minify(file_get_contents($_GET['script']));
header("Content-Type: application/javascript");
echo $minifiedCode;
You can inject any CDN in your page's header using the below Javascript in your javascript file of the app. But you at least need same javascript file linked in all pages with this script.
function loadjscss(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined"){
document.getElementsByTagName("head")[0].appendChild(fileref)
}
}
loadjscss("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js", "js");
loadjscss("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css", "css");
I have a static site hosted on GitHub Pages which is starting to grow in size. Normally I would use server side includes (<?php include('path to file'); ?>) to bring in header, footer and any navigation files. However php doesn't run on GitHub Pages.
Is HTML5 embedding which adopts a sort of iFrame technique my only option here?
I have seen threads such as this, this, this, this however they do not seem to apply for GitHub pages.
Not really ideal.
Thanks.
Jekyll is a common solution for this. It is a static site generator that allows you to use Liquid templates, and is made to run on GitHub's servers.
A great example of the {% include %} feature can be seen on the documentation pages from Twitter Bootstrap, which make use of includes for header.html and footer.html:
Use templates and preprocess them at build time (as opposed to run time). You could set them up to build as a git commit hook.
There are a lot of tools for doing this listed here, I'm fond of ttree.
I know this is a late answer, but here's something I stumbled on recently.
Turns out that the guys over at http://w3schools.com/ created some simple JavaScript code as an alternative to SSI:
<!DOCTYPE html>
<html>
<script>
function w3IncludeHTML() {
var z, i, a, file, xhttp;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
if (z[i].getAttribute("w3-include-html")) {
a = z[i].cloneNode(false);
file = z[i].getAttribute("w3-include-html");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
a.removeAttribute("w3-include-html");
a.innerHTML = xhttp.responseText;
z[i].parentNode.replaceChild(a, z[i]);
w3IncludeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
}
</script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Here's an example.
I wrote two bashscripts that does what you are looking for (same reason you are askimg actually). Right now it is extremly basic, but it may be helpful for you. Documentation is nonexistamt, but should be easy to figure out and make work for your site.
https://gitlab.com/frc-team-8733/website/-/tree/master/tools
I made a video about how to Import custom HTML templates using AJAX. It will run the script tags in the imported HTML without using eval(), and the script tag you use to make the import call will replace itself with the imported code, so there's no nesting in divs. It's basically a really clean AJAX site builder. Here's the link: https://www.youtube.com/watch?v=ZqD61tIoG2s&t=18s&index=1&list=PLRJ8uW8FBcZJMiFbPNG67lsFHhFF1k322
The source code can be found in the video description.
jQuery load() works well for this.
SSI should be supported!
<!--#include virtual="layout.html" -->
The file that contains the above line must end with ".shtml" or ".shtm" extensions!
I'm trying to render a .html webpage using #Renderpage() method in Webmatrix but the .html extension is not supported by the method. I guess the method only supports cshtml extensions. Is there a way I can render html pages dynamically on my site (Webmatrix). I dont want to use an iframe because I'll definitely have issues with my jquery files.
I attempted something i feel is safe yet feels unsafe. I resolved to read the html file and inject it to the DOM manually using:
Array html = null;
var mypage = Server.MapPath(page);
if(File.Exists(mypage)){
html = File.ReadAllLines(mypage);
}
After reading the file.....i injected it to the DOM
<div class="s_content s fontfix left s_content2 downdown">
#foreach (var data in html) {
<text>#Html.Raw(data)</text>
}
</div>
All this runs on compilation time before the page is created for rendering.....I attempted some security measures by attempting to inject server-side C# code in the HTML file but was useless. Makes me feel safe atleast. Is this risky? What is the possible threat to this alternative. i wish i can still have an alternative proper solution from the house. Thanks though.
Assuming #Renderpage() doesn't support HTML files, why don't you try Jquery.load or Ajax. There are lots of tutorials based on dynamic loading of html content.
I do something similar but I don't use #Renderpage or an html file. Instead I am using the "onclick" event and a javascript function which opens a cshtml file. You just put this and the java script function in your main cshtml file in the hmtl section. It will open a file in the current directory called my_window.cshtml when clicked
<a onclick=openWin("my_window",700,850);>Open when clicked</a>
<script type="text/javascript">
function openWin(url, width, height)
{
myWindow=window.open(url,'_blank','width='+width+',height='+height);
myWindow.focus();
}
Hope this helps!
I've never been able to figure this out!
Yeah I copy the java script in but what is the html code required and css??
Their website doesn't explain any of that (unless I am missing it!!)
If someone could please break it down for me I would be very grateful
Actually used this in a site before, this is what I have in my code:
In the header, assuming you have it installed in the /soundmanager2/ directory:
<script type="text/javascript" src="soundmanager2/soundmanager2.js"></script>
<script type="text/javascript">
soundManager.url = 'soundmanager2/';
soundManager.useHTML5Audio = false;
soundManager.useFlashBlock = false;
soundManager.debugMode = false;
</script>
Then on each element you want to play a sound with on click, include this attribute:
onClick="soundManager.play('Name','path/to/filename.mp3')"
Or you can simply call soundManager.play wherever you want.
Granted it is not the easiest interface in the world in terms of copy and paste code and your good to go.
However all of the demos on there site have all the CSS / HTML you need to get started writting your own themes and templates.
There site is mor about the JS behind the scenes then the look of the interface.
http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/ (as an example)
Although I am sure you were hoping for downloadable code I hope this at least gets you pointed in the right direction.