Looking for a way to streamline the process of generating webpages by including header/footer content from a single file? Prefer minimal reliance on server side support, iframes, javascript or css tricks.
An ideal solution would be a software template to 'compile' static html pages before uploading via ftp. Any recommendations or insights on how others are addressing this issue?
Thank you
There is a wide range of software available to meet your needs. If you search for static site generators on Google, you will find numerous options. Personally, I prefer the Ruby-based Nanoc, but there are plenty of others to choose from. Another one worth considering is Assemble, which also comes with a Yeoman generator.
Utilizing the include function in PHP to integrate header and footer content into your files, then executing them via the php command will result in the HTML being displayed on the standard output
MovableType offers the option of static file publishing
Currently, my go-to program for designing website templates is Expression Studio 4 by Microsoft. This software enables me to easily construct templates with consistent elements such as headers and footers.
If I understand correctly, you are looking for a solution similar to what I use. You may find this Youtube Video helpful, especially if you prefer creating the template prior to uploading it to your web server.
If you want to use iframes, consider searching for JQuery plugins that support iframe functionality like . Alternatively, you can utilize a JavaScript template engine such as https://github.com/BorisMoore/jquery-tmpl
Update 1:
You have the option to include static elements of your page, like header and footer, in templates and then render them on specific tags within the body upon page load.
Another approach is saving the HTML code of the header into a variable in a JavaScript file. Then, set the inner HTML of the header during onload.
Page 1
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="layout.js" ></script>
</head>
<body>
<div id="content">page 1</div>
</body>
</html>
Page 2
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="layout.js" ></script>
</head>
<body>
<div id="content">
page 2
</div>
</body>
</html>
layout.js
function mylayout(){
var _body = document.getElementsByTagName('body')[0];
var s = '<li>text</li>';
var header_div = document.createElement('div');
header_div.innerHTML = "<p> this is <b style=\"color: blue\"> header</b><br><a href=\"page1.htm\">page1</a> <a href=\"page2.htm\">page2</a></p>";
var footer_div = document.createElement('div');
footer_div.innerHTML = "<p> this is <b style=\"color: red\"> footer</b></p>";
if (_body.firstChild){
_body.insertBefore(header_div, _body.firstChild);
} else {
_body.appendChild(header_div);
}
_body.appendChild(footer_div);
}
window.onload = function() {
mylayout();
};
I am currently in the process of developing the Store page for a web application. I am utilizing Axios to retrieve product data and display it in a Vue template. While the backend functionality is working correctly and the frontend is rendering successfull ...
Is it possible to have a textarea box with fixed dimensions, followed by a table of the same size that does not dynamically resize when the window is resized? I attempted to achieve this by styling the table with table{ table-layout: fixed; width: 100px; } ...
I received some initial code from a tutorial and I've been having trouble setting the correct size. Despite searching through documentation for solutions, it seems like there's a fundamental aspect that I'm overlooking. The main issue is tha ...
Is it possible to create an effect where the image darkens slightly when the mouse hovers over it, followed by buttons appearing on hover like in the image provided? Additionally, when hovering over a button, could it change color to red similar to the pic ...
Which web UI automation frameworks are currently available? I came across an older question about automation tools, but technology has evolved since then. I'm curious if there are newer and better options out there now. In my search, I discovered Ge ...
Right after an anchor tag, I have an H1 element. The line-height of the H1 element is set to '0.9' for design purposes. As a result, the computed height of the H1 becomes shorter, but the actual Text element inside overflows and covers part of t ...
The data from the API is showing as undefined and I'm not sure why. Here is the HTML snippet: $(document).ready(function() { $.getJSON("https://data.iledefrance.fr/api/records/1.0/search/?dataset=repertoire-bibliotheques&q=&refine.typeins ...
ISSUE Imagine we have a min.css file that needs to be imported globally: index.js import ReactDOM from "react-dom"; import App from "src/App"; import "library/library.min.css"; ReactDOM.render(<App />, document.getE ...
Vue offers the v-if and v-for directives that allow you to manipulate elements in the DOM based on certain conditions. In order to animate elements controlled by v-if and v-for, you need to utilize the built-in Transition and TransitionGroup components. Bu ...
I have been struggling to increase the width of an element in my HTML using JS, but it's not working correctly. This is crucial for responsive design as the content should scroll when necessary. I attempted to achieve this with the following code, ...
I created a homepage with multiple sections, each linked to from the main menu: <body> <header> <!-- nav used on all pages --> <a href="#nav" class="toggle-nav"> menu <i class="fa fa-bars">< ...
Hey everyone! I've encountered an issue with my webpage. Feel free to check out the code on my CodePen here. When I view this page on Safari, everything looks perfect. However, when I switch over to Chrome or Firefox, the layout is all messed up. Ele ...
I'm intrigued by the reasons behind this css snippet: select, input, textarea, button { font:99% sans-serif; } that causes the 'submit' button to be pushed below the textarea and positioned at the bottom left corner on this particular ...
Encountering drag and drop issues in Internet Explorer and Safari, while functioning correctly in Firefox 15 (untested on other versions). Dragging and dropping items between dropzones works in Safari, but sorting does not. In Internet Explorer, nothing wo ...
In my HTML, I am struggling with the alignment of a 'row' div that contains a label, text input, and hyperlink. The issue arises when I try to make the width of the input always fill the available space between the label and the hyperlink. Despit ...
Recently, I've been experimenting with the developer tools in Chrome to observe the behavior of websites at different moments. It has proven useful in automating certain tasks that I regularly perform. Currently, my focus is on automating the process ...
Welcome to my first project utilizing Twitter Bootstrap. While using Twitter Bootstrap, I've noticed that whether I use container-fluid or just container for my fixed top navbar, it expands to full width of the browser once it reaches around 980px. T ...
My challenge involves figuring out how to display 3 divs on a webpage in a specific layout. Currently, I am able to get 2 divs to align next to each other using the float:left property. However, the third div always ends up positioned below the first one ...
Currently, I am in the process of enhancing my online portfolio by integrating a bar graph feature. However, I have encountered an issue with its functionality. The goal is for the bar graph to display only when it comes into view during scrolling. Althoug ...
I'm currently working on dynamically adding Bootstrap icons and I want them to display on separate lines, but for some reason they're appearing on the same line as the text. Take a look at this image https://i.sstatic.net/GUZtl.png Here's ...