I have a supplied HTML file with content in separate <section> tags.
I need to pre-render these sections into individual static pages during build time using Nuxt (preferably) or other generator.
Supplied HTML:
<html>
<head>
...
</head>
<body>
<header>...</header>
<section id="home">...</section>
<section id="features">...</section>
<section id="about">...</section>
<section id="contact">...</section>
<footer>...</footer>
</body>
</html>
Static pages to generate during build:
index.html, features.html, about.html and contact.html
with each page containing the common <head>, <header> and <footer> content.
How do I do this?
For context: The supplied HTML is coming from a site builder so I have no control over the output. I need to generate individual static pages because the final site will be hosted on static hosting like S3.
Related
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.
MY SERVER IS TOO BASIC TO SUPPORT PHP/JAVASCRIPT, ANY SUGGESTIONS?
I have a HTML website with multiple pages. I am using an identical menu on all pages and when I add a page I have to each page and edit the code.
I am wondering is there a way of adding a menu page that can be called?
I am using CSS/HTML is it possible to do anything to help? I have researched a bit and I think it involves PHP, but can PHP be used in conjuncion with CSS/HTML?
You can have the code for your menu in a separate html and call it in all your other html files
<html>
<head>
<title>test page</title>
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="header">
<div id="menu">
</div>
Rest of the Header Content
</div>
<br />
<div id="content">
Main Content
</div>
<br />
<div id="footer">
Footer Content
</div>
<script>
$("#menu").load("menu.html");
</script>
</body>
</html>
You have to use php to be able to do that.
Do 2 separate files, one will be your index.php and the other menu.php
To include menu.php you have to add :
<?php include '../elements/menu.php'; ?>
in your index.php.
All your other elements still can be coded in HTML even if your new extension is .php
You include this menu on all your website pages and if you want to add a page, you just have to add the link in menu.php and it will appear everywhere.
just use #Html.Render("pagename.html");
I've created a new Jekyll page, including the appropriate YAML Front Matter info at the top. My problem is that the page is being rendered without any styles. Upon inspection I see the head tag is empty so the CSS isn't linking. I'm sure I'm missing something painfully obvious but I'm stumped. I see that the style sheet is linked to the index page, just not my new page and I don't know what I'm missing to include the head data that links to my style sheet. Here's what I have in my new page.
---
layout: default
title: New Site
---
<div>
<div>
<h2>
Our Sweet Test Page
</h2>
<section>
<article class="dope-page">
<h1>Test Headline</h1>
</article>
</section>
</div>
</div>
This is exactly what happens when your template is not loaded. Is there a default.html file in your _layouts directory with a link to the stylesheet?
In my point of view, Jekyll render the page alongside index.html using layout parameter and find the layout in the _layouts folder. In your case, you use layout: default so you should check the _layouts/default.html file.
The default.html file generated by jekyll new your_awesome_site should look like below:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div class="page-content">
<div class="wrapper">
{{ content }}
</div>
</div>
{% include footer.html %}
</body>
</html>
And the css files are in _includes/head.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'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>