Static site, set default HTML markup for all pages

Asked

Viewed 128 times

2

In a static site you should create each page individually. If you want equal pages, simply copy the HTML and make the necessary changes.

It is also possible to define the CSS and Javascript of all pages with a file /arquivo.css and /arquivo.js, but with the marking HTML is different.

I was looking for solutions to make everything a little more dynamic, and I decided to create a file js which carries the marking inside the body, so if I changed the marking of a page would change all with the same script, but with this script it is difficult to change large codes because the line break is done with \n and ends up leaving everything confused and difficult to change.

Is there any simpler way to do that?

Code example:

window.onload = function load(){
  document.getElementById("b").innerHTML = "<div>Texto</div>\n<span>Texto</span>"
}
<body id="b">
</body>

javascript html

  • Take a look at this topic see if it helps https://answall.com/questions/69710

  • 1

    Put HTML between `, so you can use broken lines smoothly

  • I’m not sure I understand what you need. But because you do not make a file with the base template(header,footer,etc) and then inside the body you insert, using js, the content of the page

3 answers

0


Using strings template you can write HTML code as a string and have the freedom to break the line in the editor and indent, greatly facilitating reading and maintenance:

window.onload = function load(){
   
   var html =
   `
   <div>
      Texto1
   </div>
   <span>
      Texto2
   </span>
   `;
   
  document.getElementById("b").innerHTML = html;
}
<body id="b">
</body>

Anything between the bass accents (``) will be code. Read to documentation (in Portuguese).

0

Place the content you need to share between other HTML pages in a separate HTML file and load the content with Javascript.

//index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>

<body bgcolor="#FFFFFF" onload="loadWholePage('anotherpage.html')">

<script src="ajax.js" type="text/javascript"></script>
<script src="responseHTML.js" type="text/javascript"></script>

<div id="storage" style="display:none;">
</div>

<div id="displayed">
</div>

</body>
</html>

//ajax.js

 function createXHR() 
    {
        var request = false;
            try {
                request = new ActiveXObject('Msxml2.XMLHTTP');
            }
            catch (err2) {
                try {
                    request = new ActiveXObject('Microsoft.XMLHTTP');
                }
                catch (err3) {
            try {
                request = new XMLHttpRequest();
            }
            catch (err1) 
            {
                request = false;
            }
                }
            }
        return request;
    }

//responseHTML.js

    function getBody(content) 
    {
       test = content.toLowerCase();    // to eliminate case sensitivity
       var x = test.indexOf("<body");
       if(x == -1) return "";

       x = test.indexOf(">", x);
       if(x == -1) return "";

       var y = test.lastIndexOf("</body>");
       if(y == -1) y = test.lastIndexOf("</html>");
       if(y == -1) y = content.length;    // If no HTML then just grab everything till end

       return content.slice(x + 1, y);   
    } 

    function loadHTML(url, fun, storage, param)
    {
        var xhr = createXHR();
        xhr.onreadystatechange=function()
        { 
            if(xhr.readyState == 4)
            {
                if(xhr.status == 200)
                {
                    storage.innerHTML = getBody(xhr.responseText);
                    fun(storage, param);
                }
            } 
        }; 

        xhr.open("GET", url , true);
        xhr.send(null); 

    } 

    function processHTML(temp, target)
    {
        target.innerHTML = temp.innerHTML;
    }

    function loadWholePage(url)
    {
        var y = document.getElementById("storage");
        var x = document.getElementById("displayed");
        loadHTML(url, processHTML, x, y);
    }

// anotherpage.html 

 <html>
    <head>
    <title>HTML page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body bgcolor="#FFFFFF">
    <p>
    <b>Lorem Ipsum<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis ligula tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus odio nibh, dapibus et vulputate a, maximus sed nisi. Mauris pellentesque lobortis nunc, et rhoncus metus feugiat sit amet. Etiam nibh massa, dapibus sit amet ultricies vehicula, faucibus ac erat. Etiam vulputate auctor sapien, a condimentum leo aliquam vel. Vivamus placerat dolor a iaculis feugiat. Proin sollicitudin vel sem ut fermentum. Mauris luctus libero arcu, a rhoncus sem sodales in. Integer dolor arcu, condimentum et elementum vitae, lacinia at enim. Sed non odio purus. Maecenas efficitur placerat felis. Vestibulum ullamcorper sit amet urna eget gravida. Morbi id eleifend lacus. 
    </b>
    </p>
    </body>
    </html>

Reference: https://www.xul.fr/ajax/responseHTML-attribute.php

-1

To make dynamic creation you can create element by element and attach them via "appendchild", so you don’t need to include everything in innerHTML. See the example below:

let div = document.createElement("div");
let span = document.createElement("span");

span.textContent = "Teste";

div.appendChild(span);

document.body.appendChild(div);

https://jsfiddle.net/2ac4qume/

  • 1

    That way what was confusing gets more laborious and leaves aside the whole purpose of leaving everything in a simpler way..

  • Okay, you can use those quotes para não precisar quebrar a linha document.getElementById("b").innerHTML = &#xA; <div>Text</div> <span>Text</span> `;

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.