I want to create a page with only one route but I want to split the HTML code into multiple files.
When rendering this route I want the rendered file get the content from all template files and combine it to one page.
For example this template should render the following files:
Header
Intro
Service
About
Contact
Imprint
I just want to keep the code separated because then I can build up a clean structure. Is that possible? Currently I am just able to render one file
router.get('/', (req, res) => {
res.render('myTemplate');
});
I don't need to use Handlebars if there is a way with default HTML logic because I will only have one template for my page.
Suppose you wish to render one file which is your main file and include header and footer files in it. Lets call your main file main.hbs and the header and footer html files as header.html and footer.html
Your route code would look like the following:
router.get('/', (req, res) => {
res.render('main');
});
header.html
<h1> Hi I'm the Header </h1>
footer.html
<h1> Hi I'm the Footer </h1>
You can include the header and footer templates in your main by using jQuery
main.hbs
<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>
Similarly you can include the Intro,Service,About,Contact,Imprint files in your main file by specifying their id's.
Related
I switched from Jade to basic HTML and ran into the following problem:
How can I have one navigation menu for my whole website (in one file)?
In Jade I did the following:
I had my menu in default.jade:
body
.header-site
h1.page-title Christopher Kadé
ul.nav-site
li: a(href='/') About me
li: a(href='/projects') Projects
li: a(href='/contact') Contact
.main-content
block content
And would include default.jade in every other .jade file, and write its content in a block content. This way, I have my header and menu available throughout my website.
But I can't seem to figure out the equivalent method in good old plain HTML.
In order to have the same navigation menu throughout your website, you could either use php or javascript. Using php-
<?php
include_once 'navigation.php';
?>
Using javascript
<div id="navigation">
</div>
<script>
$("#navigation").load("navigation.html");
</script>
You need a server side include (with a server side language) - HTML doesn't support this natively. Or if using jQuery:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#nycontent").load("header.html");
});
</script>
</head>
<body>
<div id="mycontent"></div>
</body>
</html>
header.html
<h1>test</h1>
alternatively, with plain old JS:
<html>
<body>
<script src="myscript.js" />
</body>
</html>
document.write('\
\
<h1>This is my include file</h1>\
\
');
So, I have a server.js file which loads an index.html file.
The question is, is there any way to import another html file in index.html.
To simplify, let's say I have an html file named footer.html and I want to import it in my index.html. How can I do it?
you can inline send your html, or use 'fs' module to read html file and send it.
but it is better to use template engine, like ejs, handlebar, etc.
see this tutorial for more info
https://scotch.io/tutorials/use-ejs-to-template-your-node-application
You can use jquery to accomplish this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$("#includedContent").load("index.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
I'm currently trying to develop a site using node.js. I'm having some trouble due to my unfamiliarity with html and node.js. Is there any mechanism in either node.js or html where I don't have to recreate a header & footer for every single web page (eg: copy paste the html code each time)?
Not sure this will answer you question but it's one way to add header and footer in HTML pages without repeating the code.
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
and in your main index.html file will be
<div id="header"></div>
<div id="content">
Main Content
</div>
<div id="footer"></div>
So the complete index.html will be look like this
<html>
<head>
<title></title>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<div id="content">
Main Content
</div>
<div id="footer"></div>
</body>
</html>
Since you said you are unfamiliar with html and nodejs i assume u are a beginner.
To achieve what you are looking for can be done in multiple ways and one of the ways is given by shehary which renders the page on client side(user's browser) and uses jquery to manipulate DOM to insert the header and footer. other ways include inserting the header and footer on server side using templates. some of the popular templates used in nodejs are ejs jade swig etc. you can also do it client side using jQuery , angularJS ,backboneJS etc. each of them have a their own positive and negative points.
I was wondering how to add a header (or just any html file) into another html file. I tried using iframes, but it just redirected what was inside of the iframe. Once I finish my website, I will probably have a lot of pages, so it will be very useful to just be able to add a header that can be updated by only changing one file, instead of having to change it on all of the pages. Does anyone know how to do this? Thanks in advance.
With jQuery:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
With JavaScript without jQuery:
<html>
<body>
<script src="b.js"></script>
</body>
</html>
b.js:
document.write('\
\
<h1>This is my include file</h1>\
\
');
With PHP:
<?php include('b.html');?>
For this to work you may have to modify the .htaccess file on your web server so php may be interpreted within .html files. You should see, or add, this within your .htaccess file:
RemoveHandler.html
AddType application/x-httpd-php .php .html
With Service Side Includes (SSI):
<!--#include virtual="a.html" -->
With HTML5:
<object name="foo" type="text/html" data="foo.inc"></object>
Alternatively:
<embed type="text/html" src="foo.inc">
I have searched for no javascript way but I couldn't make it work. Here is the simplest way of including HTML
you can create html files for header, footer, content, anything you want to have in a separate file and all you need to do is:
1.put this in your page
<script src="https://www.w3schools.com/lib/w3.js"></script>
you could also download the w3.js and upload it to your server files
<script src="/lib/w3.js"></script>
2.then where ever you want your html code, from the separate file, to be included to your page:
<div w3-include-html="header.html"></div>
for example
Google
<div w3-include-html="footer.html"></div>
<h1>Title of current page</h1>
<div w3-include-html="content.html"></div>
include the next code anywhere after the previous "include" codes
<script>w3.includeHTML();</script>
source w3schools.com How TO - Include HTML
so this is how it can look
<script src="https://www.w3schools.com/lib/w3.js"></script>
<div w3-include-html="header.html"></div>
<script>w3.includeHTML();</script>
I'm a complete beginner in web design. I couldn't find an answer after some search.
I purchased a template to create my personal website, and now I'm editing the navigation bar data. Yet, it seems that I have to copy and paste this in every single html file that has the navigation bar, which doesn't seem right.
Is there a way to have all this data in a single file, and then edit it once so that it's automatically included in all pages?
Thank you.
aa
Just include nav.html where you want it to be(inside your code):
include('nav.html');
You main code must be in index.html.Put the code for nav in nav.html and then include nav.html in index.html where you want your nav to be.
You save nav in single file, ex nav.htm , then included using iframe or java scirpt.
Iframe: <iframe src="nav.htm"></iframe>
Javasciprt, you can using jquery
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function{
$("#nav").load("nav.htm");
});
</script>
</head>
<body>
<div id="nav"></div>
</body>
</html>