How to simplify your websites with HTML includes
Required skills: HTML
Use this when you have pieces of HTML that appear on multiple pages of your website.
Simply including one HTML file from another HTML file feels like a missing feature. Fortunely, we added that feature to Wunderbucket. It's actually really simple.
<div data-merge-include="footer.html"> <!-- Whatever is inside footer.html will appear here --> </div>
How does it work?
The value you that you use inside data-merge-include works just like a URL. You can use a relative url like data-merge-include="../footer.html" or an absolute url like data-merge-include="/footer.html".
A few basic rules:
- The file you include has to exist.
- It has to be a valid path.
- You can use full URLs but they are subject to CORS loading restrictions. I.E. data-merge-include="http://my-site.com/footer.html" will result in an error if my-site.com does not have the correct CORS headers.
We use the open-source Merge.js engine to power HTML includes. If you want to really see how this works, the source code is here: https://github.com/levinunnink/merge.js
- My site loads in stages when I'm on localhost. Will it do that when I publish it?
- Can I include my meta tags with data-merge-include?
- Why am I getting an error when I publish my site?