简体   繁体   English

如何在每个html文件中包含链接列表(样式表,javascript文件)

[英]How to include a list of links (stylesheets, javascript files) in every html file

I was wondering if it was possible to include a list of links into many HTML files. 我想知道是否可以在许多HTML文件中包含链接列表。 I based my idea off W3 School's W3 Include which allows you to include blocks of HTML code in many files which is super useful for changing lots of files at once. 我的想法基于W3 School的W3 Include,它使您可以在许多文件中包含HTML代码块,这对于一次更改许多文件非常有用。

Heres the link to the W3 article: https://www.w3schools.com/howto/howto_html_include.asp 这是W3文章的链接: https : //www.w3schools.com/howto/howto_html_include.asp

What I want to be able to do is something like this: 我想要做的是这样的:

 <html>
   <head>
    <script src="https://www.w3schools.com/lib/w3.js"></script>
  </head>
  <body>
    <h1>test</h1>
  <div w3-include-html="links.html"></div>
  </body>
</html>

Where the links.html file has a bunch of links. 其中links.html文件具有许多链接。 eg 例如

<link rel="stylesheet" href="style1"> <link rel="stylesheet" href="someframework"> <link rel="stylesheet" href="somescript">

I want to be able to do this as when online resources change their links that I can easily update them by updating the one links file and then it will roll out across my whole website. 我希望能够做到这一点,因为当在线资源更改其链接时,我可以通过更新一个链接文件轻松地对其进行更新,然后它将在我的整个网站上推广。

I understand that there are most likely issues regarding being able to load files this way, but if anyone has any suggestions in how to do something along these lines that would be great. 我了解最有可能以这种方式加载文件的问题,但是如果有人对如何按照这些方法进行操作有任何建议,那就太好了。

Well, you can use partial rendering in any programming language. 好了,您可以在任何编程语言中使用部分渲染。 If your page has static HTML and is not powered by any programming language, you could add a link to a JavaScript file in the head of your page and from within the file, you load the stylesheets and scripts of your choice. 如果您的页面具有静态HTML并且不受任何编程语言的支持,则可以在页面顶部添加一个指向JavaScript文件的链接,然后从该文件内加载您选择的样式表和脚本。 (look for how to load stylesheets and scripts with JavaScript). (寻找如何使用JavaScript加载样式表和脚本)。

This way, you have a single place in which you manage head assets. 这样,您就可以在一个地方管理总资产。

LE: https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports this will be a thing in the future 😁 LE: https : //developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports这将是将来的事情😁

You could maybe make your header an include depending how you set it up. 您可以根据设置方式将标头设置为包含。 Could use <?php include "your/file/location" ?> 可以使用<?php include "your/file/location" ?>

This will allow you to just add this piece of code at the top of each of your pages. 这将使您只需在每个页面的顶部添加这段代码。 Then in the location file is where you would add all of the and tags which would clean up your HTML quite a bit and also increase page load time. 然后在位置文件中添加所有和标记,这将清理HTML并增加页面加载时间。 Using this method for quite a lot of things could slow it down but the perfect amount will allow you to get 100/100 on google page speed hoping that analytics is hosted locally so you don't get a issue with that caching. 对很多事情使用此方法可能会减慢它的速度,但是最理想的方法是让您在Google页面上获得100/100的速度,希望分析是在本地托管的,这样就不会出现缓存问题。

Went a tad off topic but hope this helps :) 做了一点点的话题,但希望这会有所帮助:)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM