add custom element for footer
This commit is contained in:
parent
3735f70a93
commit
5a31509318
6 changed files with 52 additions and 41 deletions
|
@ -9,7 +9,7 @@ class blogFooter extends HTMLElement {
|
|||
blog.forEach((element) => {
|
||||
let li = document.createElement("li");
|
||||
let a = document.createElement("a");
|
||||
a.href = "/post.php?id=" + element["id"];
|
||||
a.href = "/post.html?id=" + element["id"];
|
||||
a.innerText = element["title"];
|
||||
li.appendChild(a);
|
||||
ul.appendChild(li);
|
||||
|
|
|
@ -11,7 +11,7 @@ class BlogIndex extends HTMLElement {
|
|||
<article class="breakWord">
|
||||
<h2>${element["title"]}</h2>
|
||||
<p breakWord>${element["content"]}</p>
|
||||
<p class="center"><a href="/post.php?id=${element["id"]}"><button>Mehr lesen</button></a></p>
|
||||
<p class="center"><a href="/post.html?id=${element["id"]}"><button>Mehr lesen</button></a></p>
|
||||
</article>
|
||||
`;
|
||||
});
|
||||
|
|
47
js/customElements/footer.js
Normal file
47
js/customElements/footer.js
Normal file
|
@ -0,0 +1,47 @@
|
|||
class Footer extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.innerHTML = `
|
||||
<footer>
|
||||
<div id="blueBar"></div>
|
||||
<div id="footerContent">
|
||||
<div>
|
||||
<a href="/datenschutzerklaerung.php">Datenschutzerklärung</a><br>
|
||||
<a href="/bildquellen.php">Bildquellen</a><br>
|
||||
<a href="/impressum.php">Impressum</a><br>
|
||||
</div>
|
||||
<div id="newestPost">
|
||||
<h3>Neueste Beiträge:</h3>
|
||||
<jl-footer_blog></jl-footer_blog>
|
||||
</div>
|
||||
<div class="center">
|
||||
<p class="center">
|
||||
<a href="https://www.instagram.com/jonasled1/">
|
||||
<jl-svg data-name="instagram"></jl-svg>
|
||||
</a>
|
||||
|
||||
<a href="https://www.thingiverse.com/jonasled/designs/">
|
||||
<jl-svg data-name="3d_model"></jl-svg>
|
||||
</a>
|
||||
|
||||
<a href="https://paypal.me/jonasled/">
|
||||
<jl-svg data-name="paypal"></jl-svg>
|
||||
</a>
|
||||
|
||||
<a href="https://matrix.to/#/@jonasled:jonasled.de">
|
||||
<jl-svg data-name="matrix"></jl-svg>
|
||||
</a>
|
||||
|
||||
<a href="https://twitter.com/jonasled1">
|
||||
<jl-svg data-name="twitter"></jl-svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<jl-cookie_notice></jl-cookie_notice>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("jl-footer", Footer);
|
|
@ -13,4 +13,5 @@ require("./customElements/commentsDisplay");
|
|||
require("./customElements/newComment");
|
||||
require("./customElements/contactMailButton");
|
||||
require("./customElements/header");
|
||||
require("./customElements/mainMenu");
|
||||
require("./customElements/mainMenu");
|
||||
require("./customElements/footer");
|
|
@ -2,44 +2,7 @@
|
|||
function getFooter(){
|
||||
echo (<<<EOF
|
||||
</div>
|
||||
<footer>
|
||||
<div id="blueBar"></div>
|
||||
<div id="footerContent">
|
||||
<div>
|
||||
<a href="/datenschutzerklaerung.php">Datenschutzerklärung</a><br>
|
||||
<a href="/bildquellen.php">Bildquellen</a><br>
|
||||
<a href="/impressum.php">Impressum</a><br>
|
||||
</div>
|
||||
<div id="newestPost">
|
||||
<h3>Neueste Beiträge:</h3>
|
||||
<jl-footer_blog></jl-footer_blog>
|
||||
</div>
|
||||
<div class="center">
|
||||
<p class="center">
|
||||
<a href="https://www.instagram.com/jonasled1/">
|
||||
<jl-svg data-name="instagram"></jl-svg>
|
||||
</a>
|
||||
|
||||
<a href="https://www.thingiverse.com/jonasled/designs/">
|
||||
<jl-svg data-name="3d_model"></jl-svg>
|
||||
</a>
|
||||
|
||||
<a href="https://paypal.me/jonasled/">
|
||||
<jl-svg data-name="paypal"></jl-svg>
|
||||
</a>
|
||||
|
||||
<a href="https://matrix.to/#/@jonasled:jonasled.de">
|
||||
<jl-svg data-name="matrix"></jl-svg>
|
||||
</a>
|
||||
|
||||
<a href="https://twitter.com/jonasled1">
|
||||
<jl-svg data-name="twitter"></jl-svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<jl-cookie_notice></jl-cookie_notice>
|
||||
<jl-footer></jl-footer>
|
||||
<script src="/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in a new issue