Made it so blog templates work and stuff

This commit is contained in:
DeaDvey 2023-12-12 17:19:08 +00:00
parent 717a665044
commit 15e116a0c9
5 changed files with 91 additions and 3 deletions

3
blog/blogs.js Normal file
View File

@ -0,0 +1,3 @@
let blogs = [["Test post2", "Testicy Test"],
["Test post", "Testy test!"]]

82
blog/home-template.js Executable file
View File

@ -0,0 +1,82 @@
///////////////////////////
// ADD THE CONTENT
///////////////////////////
let div = document.getElementById('main');
let divText = div.innerHTML;
console.log(divText);
let newPageHTML = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>DeaDvey's Domain</title>
<link rel="icon" href="../favicon.png">
<link rel="stylesheet" type="text/css" href="../index.css">
</head>
<body>
<div class="header main">
<img class="header-image" /><br/><a href="http://deadvey.com">Home page</a> <a href="/blog/index.html">Blogs</a> <a href="/videos/index.html">Videos</a><hr/>
</div>
<div class="main">
${divText}
<div id="links">
</div>
</div>
<div class="footer">
</div>
</body>
</html>`
document.body.innerHTML = newPageHTML //apply the template
///////////////////////////
// ADD THE LINKS
///////////////////////////
function loadContent(page, content, header) {
console.log(page)
let blogText = content
console.log(blogText)
let newPageHTML = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>DeaDvey's Domain</title>
<link rel="icon" href="../favicon.png">
<link rel="stylesheet" type="text/css" href="../index.css">
</h ead>
<body>
<div class="header main">
<img class="header-image" /><br/><a href="http://deadvey.com">Home page</a> <a href="/blog/index.html">Blogs</a> <a href="/videos/index.html">Videos</a><hr/>
</div>
<div class="main">
<h1>${header}</h1>
${content}
<div id="links">
</div>
</div>
<div class="footer">
</div>
</body>
</html>`
document.body.innerHTML = newPageHTML
}
let linksDiv = document.getElementById("links")
let linksText
for (let length = blogs.length; length > 0; length--) {
console.log(length)
linksText += (`<li><a href='#' onclick='loadContent(${length}, "${blogs[length-1][1]}", "${blogs[length-1][0]}")'>${blogs[length-1][0]}</a></li>`)
}
linksText = linksText.slice(9) //Remove the "undefined" at the start of the string
document.getElementById("links").innerHTML = linksText;

View File

@ -1,6 +1,9 @@
<!DOCTYPE html>
<div id="main">
Welcome to the blog page!
</div>
<script src="../template.js">
</script>
<script src="blogs.js">
</script>
<script src="home-template.js">
</script>

BIN
favicon.ico Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

View File

@ -10,7 +10,7 @@ let newPageHTML = `
<meta charset="UTF-8"/>
<title>DeaDvey's Domain</title>
<link rel="icon" href="../favicon.png">
<link rel="stylesheet" type="text/css" href="http://deadvey.com/index.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="header main">