Add page-specific JavaScript support
Update documentation for new JS variables and rendering pipeline Add script.js file support to content directories Implement cache-busting for JavaScript files Update static file serving to include JavaScript files Document page-specific script loading in base.php
This commit is contained in:
parent
f8a352afce
commit
f1447049e4
6 changed files with 70 additions and 7 deletions
|
|
@ -241,6 +241,33 @@ FolderWeb automatically loads and includes page-specific styles with cache-busti
|
|||
<link rel="stylesheet" href="/portfolio/styles.css?v=abc123def">
|
||||
```
|
||||
|
||||
## Page-Specific Scripts
|
||||
|
||||
For small progressive enhancements, you can add a `script.js` file to a content directory:
|
||||
|
||||
```
|
||||
content/portfolio/
|
||||
├── index.md
|
||||
├── styles.css
|
||||
└── script.js
|
||||
```
|
||||
|
||||
**script.js:**
|
||||
```js
|
||||
// Small enhancement for this page only
|
||||
document.querySelector('.portfolio-grid')?.addEventListener('click', (e) => {
|
||||
// ...
|
||||
});
|
||||
```
|
||||
|
||||
FolderWeb automatically loads the script with `defer` (non-blocking) and cache-busting:
|
||||
|
||||
```html
|
||||
<script defer src="/portfolio/script.js?v=abc123def"></script>
|
||||
```
|
||||
|
||||
The script tag is placed before `</body>`, so it runs after the page has been parsed. This is ideal for progressive enhancement — the page works without JavaScript, but gets enhanced when it's available.
|
||||
|
||||
## Dark Mode
|
||||
|
||||
Add dark mode with CSS variables and `prefers-color-scheme`:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue