added a footer and made the blog template stuff better TODO: Make the template more centralised as I have 3
This commit is contained in:
DeaDvey
parent
ecd35774fa
commit
09160485f2
@ -1,3 +1,4 @@
|
||||
let blogs = [["Test post2", "Testicy Test"],
|
||||
["Test post", "Testy test!"]]
|
||||
let blogs = [["I didn't like Wordpress","So... Yeah, I didn't like wordpress very much, it's pretty clunky and I don't have much control over the webpage, and it's kinda not that fun to use, I'm glad I tried it out though because I kind of know how to use it know I suppose, I might copy over the wordpress back over to this so I can use it myself for fun I suppose."],
|
||||
["Test post2", "Testicy Test"],
|
||||
["Test post", "Testy test!"]]
|
||||
|
||||
|
||||
@ -1,82 +0,0 @@
|
||||
///////////////////////////
|
||||
// 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;
|
||||
|
||||
@ -5,5 +5,5 @@
|
||||
|
||||
<script src="blogs.js">
|
||||
</script>
|
||||
<script src="home-template.js">
|
||||
<script src="template.js">
|
||||
</script>
|
||||
|
||||
123
blog/template.js
Executable file
123
blog/template.js
Executable file
@ -0,0 +1,123 @@
|
||||
///////////////////////////
|
||||
// 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="../index.html">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">
|
||||
<hr/>
|
||||
<li>
|
||||
Internal:
|
||||
<li><a href="theunderlandcouk" >theunderland webpages (internal link)</a></li>
|
||||
<li><a href="experiments.html" >Experiments (internal link)</a></li>
|
||||
<br/>
|
||||
External:
|
||||
<li><a href="https://github.com/DeaDvey" >Github (external link)</a></li>
|
||||
<li><a href="https://gitlab.com/deadvey" >Gitlab (external link)</a></li>
|
||||
<li><a href="https://mastodon.social/@DeaDvey" >Mastadon.social (external link)</a></li>
|
||||
</li>
|
||||
</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">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header main">
|
||||
<img class="header-image" /><br/><a href="../index.html">Home page</a> <a href="/blog/index.html">Blogs</a> <a href="/videos/index.html">Videos</a><hr/>
|
||||
</div>
|
||||
<div class="main">
|
||||
<h1 class="blog-title">${header}</h1>
|
||||
<p class="blog-content">${content}</p>
|
||||
<div id="links">
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<hr/>
|
||||
<li>
|
||||
Internal:
|
||||
<li><a href="theunderlandcouk" >theunderland webpages (internal link)</a></li>
|
||||
<li><a href="experiments.html" >Experiments (internal link)</a></li>
|
||||
<br/>
|
||||
External:
|
||||
<li><a href="https://github.com/DeaDvey" >Github (external link)</a></li>
|
||||
<li><a href="https://gitlab.com/deadvey" >Gitlab (external link)</a></li>
|
||||
<li><a href="https://mastodon.social/@DeaDvey" >Mastadon.social (external link)</a></li>
|
||||
</li>
|
||||
</div>
|
||||
</body>
|
||||
</html>`
|
||||
document.body.innerHTML = newPageHTML
|
||||
}
|
||||
|
||||
function escapeQuotes(value) {
|
||||
return value.replace(/["'&<>]/g, function (char) {
|
||||
switch (char) {
|
||||
case '"':
|
||||
return """;
|
||||
case "'":
|
||||
return "'";
|
||||
case "&":
|
||||
return "&";
|
||||
case "<":
|
||||
return "<";
|
||||
case ">":
|
||||
return ">";
|
||||
default:
|
||||
return char;
|
||||
}
|
||||
});
|
||||
}
|
||||
let linksDiv = document.getElementById("links")
|
||||
|
||||
let linksText
|
||||
|
||||
let length = blogs.length
|
||||
|
||||
for (let page = 0; page < length; page++) {
|
||||
console.log(length)
|
||||
|
||||
linksText += (`<li><a href='#' onclick='loadContent(${page}, "${escapeQuotes(blogs[page][1])}", "${escapeQuotes(blogs[page][0])}")'>${escapeQuotes(blogs[page][0])}</a></li>`)
|
||||
}
|
||||
|
||||
linksText = linksText.slice(9) //Remove the "undefined" at the start of the string
|
||||
|
||||
document.getElementById("links").innerHTML = linksText;
|
||||
16
index.css
16
index.css
@ -2,7 +2,7 @@
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.header-image {
|
||||
content: url("header-image.png");
|
||||
@ -37,3 +37,17 @@ a:active {
|
||||
color: pink;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.blog-content {
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
10
index.html
10
index.html
@ -3,16 +3,6 @@
|
||||
Welcome to my personal website! I hope you have a good time<br/>
|
||||
Feel free to click the links above for more content!<br/>
|
||||
Also, see below for links to my other situations<br/>
|
||||
<ol>
|
||||
Internal:
|
||||
<li><a href="theunderlandcouk" >theunderland webpages (internal link)</a></li>
|
||||
<li><a href="experiments.html" >Experiments (internal link)</a></li>
|
||||
<br/>
|
||||
External:
|
||||
<li><a href="https://github.com/DeaDvey" >Github (external link)</a></li>
|
||||
<li><a href="https://gitlab.com/deadvey" >Gitlab (external link)</a></li>
|
||||
<li><a href="https://mastodon.social/@DeaDvey" >Mastadon.social (external link)</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<script src="template.js">
|
||||
|
||||
11
template.js
11
template.js
@ -20,6 +20,17 @@ let newPageHTML = `
|
||||
${divText}
|
||||
</div>
|
||||
<div class="footer">
|
||||
<hr/>
|
||||
<li>
|
||||
Internal:
|
||||
<li><a href="theunderlandcouk" >theunderland webpages (internal link)</a></li>
|
||||
<li><a href="experiments.html" >Experiments (internal link)</a></li>
|
||||
<br/>
|
||||
External:
|
||||
<li><a href="https://github.com/DeaDvey" >Github (external link)</a></li>
|
||||
<li><a href="https://gitlab.com/deadvey" >Gitlab (external link)</a></li>
|
||||
<li><a href="https://mastodon.social/@DeaDvey" >Mastadon.social (external link)</a></li>
|
||||
</li>
|
||||
</div>
|
||||
</body>
|
||||
</html>`
|
||||
|
||||
Loading…
Reference in New Issue
Block a user