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`:
|
||||
|
|
|
|||
|
|
@ -128,6 +128,10 @@ Let's modify `base.php` to add your site name and custom navigation:
|
|||
<small>Generated in <?= number_format($pageLoadTime, 4) ?>s</small>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<?php if (!empty($pageJsUrl)): ?>
|
||||
<script defer src="<?= htmlspecialchars($pageJsUrl) ?>?v=<?= $pageJsHash ?? '' ?>"></script>
|
||||
<?php endif; ?>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
|
@ -301,6 +305,7 @@ $languageUrls // Links to other language versions
|
|||
$translations // Translated UI strings
|
||||
$cssHash // Cache-busting hash for CSS
|
||||
$pageCssUrl // Page-specific CSS URL (if exists)
|
||||
$pageJsUrl // Page-specific JS URL (if exists)
|
||||
$pageLoadTime // Page generation time
|
||||
```
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue