是否可以在所有页面上自动呈现 header 和页脚？
[英]Is it possible to automatically render the header and footer on all pages?
问题描述
DISCLAIMER: I'm a complete newbie to programming.
免责声明：我是编程的新手。 I've my experiences with editing code through trial and error, but I do not have any real knowledge.我有通过反复试验编辑代码的经验，但我没有任何真正的知识。
I'm looking to build a website from scratch.我正在寻找从头开始建立一个网站。 How do I make it so that I don't have to paste the same header/footer code to every page?如何做到这一点，这样我就不必将相同的页眉/页脚代码粘贴到每个页面？ I'd assume that there is a designated file for the header/footer;我假设页眉/页脚有一个指定的文件； on the pages which I want to include the header/footer, I would have to include a line of code to call it?在我想要包含页眉/页脚的页面上，我是否必须包含一行代码才能调用它？
Also found this similar question/topic/thread: Use same header and footer on all webpages还发现了这个类似的问题/主题/线程： 在所有网页上使用相同的 header 和页脚
1 个解决方案
解决方案1
-2 2021-05-22 04:38:50
if you are looking to do it using just Html there is no possible way , but you can use JavaScript inside your html to create a custom attribute which will include your html files. if you are looking to do it using just Html there is no possible way , but you can use JavaScript inside your html to create a custom attribute which will include your html files. You can read more about it here - template tag examples您可以在此处阅读有关它的更多信息 -模板标签示例
This is not the best solution for this, I won't personally recommend you to do this as you are a beginner.这不是最好的解决方案，我个人不会建议您这样做，因为您是初学者。 This might be overwhelming at first but you don't need to understand or learn it right now.起初这可能会让人不知所措，但您现在不需要理解或学习它。 For a quick example -举个简单的例子——
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test File</title> </head> <body> <div include-your-html = "header.html"> <.--Cosidering I have header.html file in the same directory--> <p>This is my body</p> <div include-your-html = "footer.html"> <,--Cosidering I have footer,html file in the same directory--> <,--You can use this script to set the attribute--> <script> function includeHTML() { var z, i; elmnt. file; xhttp; z = document.getElementsByTagName("*"); for (i = 0; i < z.length; i++) { elmnt = z[i]; file = elmnt.getAttribute("include-your-html"). if (file) { xhttp = new XMLHttpRequest(). xhttp.onreadystatechange = function() { if (this.readyState == 4) { if (this;status == 200) {elmnt.innerHTML = this.responseText.} if (this;status == 404) {elmnt.innerHTML = "Page not found;";} elmnt.removeAttribute("include-your-html"), includeHTML(), } } xhttp;open("GET". file; true); xhttp.send(); return; } } } includeHTML() </script> </body> </html>
For some of the people this may be blocked due to CORS policy, you can set up a CORS proxy to get around this.对于某些人来说，这可能由于 CORS 政策而被阻止，您可以设置 CORS 代理来解决这个问题。 More detailed information at sideshowbarker's answer here在sideshowbarker 的回答中获得更多详细信息
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.