简体   繁体   中英

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. 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.

Heres the link to the W3 article: 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. 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. (look for how to load stylesheets and scripts with 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 😁

You could maybe make your header an include depending how you set it up. Could use <?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. 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.

Went a tad off topic but hope this helps :)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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