Make HTML template configurable: (Make <head> tag fully customizable)
See original GitHub issue👏 for starting a static site generator using a modern framework with 0kb client-side JS by default and optional client-side hydration!
Currently the HTML template is statically defined in Page.ts
:
page.htmlString = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
${page.headString}
</head>
<body class="${page.request.route}">
${layoutHtml}
${page.hydrateStack.length > 0 ? page.beforeHydrate : '' /* page.hydrateStack.length is correct here */}
${page.hydrateStack.length > 0 ? page.hydrate : ''}
${page.customJsStack.length > 0 ? page.customJs : ''}
${page.footerStack.length > 0 ? page.footer : ''}
</body>
</html>
`;
It would be great if this template would be configurable, so for instance html[lang]
could easily be changed.
Maybe this can be offered through a hook, or by introducing a src/template.html
file like in Sapper.
This would help with #6, as I’m currently forced to overwrite the html[lang]
with a hook:
{
hook: 'html',
name: 'setHtmlLang',
description: 'Overwrite html[lang="en"] with html[lang="{ request.locale }"]',
priority: 50,
run: ({ htmlString, request }) => {
return {
htmlString: htmlString.replace('<html lang="en">', `<html lang="${ request.locale }">`),
};
},
},
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:12 (9 by maintainers)
Top Results From Across the Web
How to Customize an HTML Template - Web Design TutsPlus
To edit an HTML template all you need to know is which tags represent the parts of the page you want to change,...
Read more >Create the HTML Layout Templates - Weebly Cloud
Create an HTML Template File ; The Foundation ; Mandatory Theme Tags ; Optional Tags; Custom Tags; Add a Header Area; Add a...
Read more >The Content Template element - HTML - MDN Web Docs
The HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may...
Read more >Customize the user interface with HTML templates - Azure AD ...
Learn how to customize the user interface with HTML templates for your applications that use Azure Active Directory B2C.
Read more >Creating a custom HTML theme - Tumblr
These template tags define custom colors, fonts, and other options that apply to your appearance on mobile devices and the default theme. Variable,...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@nickreese thanks for the quick fix. It’s working well for me.
For anyone that finds this, if you want to remove both meta tags, add
elderAddMetaCharsetToHead
andelderAddMetaViewportToHead
to your hooks.disable array in yourelder.config.js
.