Split your index.html into smaller, reusable static HTML pieces.
// vite.config.js
import { defineConfig } from 'vite';
import injectHTML from 'vite-plugin-html-inject';
export default defineConfig({
plugins: [injectHTML()],
});<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!-- Loads the specified .html file -->
<load ="src/html/header/branding.html" />
<!-- Loads index.html or index.htm file inside the specified directory -->
<load ="src/html/header" />
<div>
<load ="src/html/body/sidebar.html" />
<load ="src/html/body" />
</div>
<load ="src/html/footer" />
</body>
</html>The plugin also allows you to supply your HTML parts with some basic arguments, so you can reuse the same piece of code in multiple places.
For example you can reuse a similarly styled link somewhere in your index.html:
<!-- index.html -->
...
<div class="some-cool-menu">
<!-- Load a HTML part -->
<load
="src/some-static-link.htm"
label="Go to DuckDuckGo"
href="https://duckduckgo.com/"
/>
<load
="src/some-static-link.htm"
label="Go to Google"
href="https://google.com"
/>
</div>
...And that src/some-static-link.htm:
<!-- src/some-static-link.htm -->
<a href="{=$href}" class="some-cool-link-style">{=$label}</a>This will result in a dev and runtime generated index.html looking like
<!-- generated index.html -->
...
<div class="some-cool-menu">
<!-- Load a HTML part -->
<a href="https://duckduckgo.com/" class="some-cool-link-style">
Go to DuckDuckGo
</a>
<a href="https://google.com" class="some-cool-link-style">Go to Google</a>
</div>
...By default the debugging option is turned off. However, if you encounter issues loading files, you can turn on path logging.
injectHTML({
debug: {
logPath: true,
},
});Love open source? Enjoying my project?
Your support can keep the momentum going! Consider a donation to fuel the creation of more innovative open source software.
| via Ko-Fi | Buy me a coffee | via PayPal |
|---|---|---|
 |
 |
 |