UI personnalisée
Démonstration de la personnalisation de l’interface OntoWave : titre, logo, liens personnalisés, CSS.
Configuration du titre et logo
window.ontoWaveConfig = {
ui: {
title: "Ma Documentation",
subtitle: "Version 2.0",
logo: "/assets/logo.svg"
}
};
Liens de navigation personnalisés
window.ontoWaveConfig = {
ui: {
links: [
{ label: "GitHub", href: "https://github.com/mon-projet", target: "_blank" },
{ label: "npm", href: "https://npmjs.com/package/mon-package", target: "_blank" }
]
}
};
CSS personnalisé
OntoWave expose des variables CSS pour la personnalisation :
:root {
--ow-primary: #0066cc;
--ow-font-family: 'Courier New', monospace;
--ow-sidebar-width: 300px;
}
Injection de styles
window.ontoWaveConfig = {
ui: {
customCss: "/assets/my-theme.css"
}
};
Limite connue
- Le logo SVG doit être hébergé sur le même domaine (pas de CORS)
- Les variables CSS ne sont pas toutes documentées — consulter le code source pour la liste complète
Custom UI
Demonstration of OntoWave’s interface customization: title, logo, custom links, CSS.
Title and Logo Configuration
window.ontoWaveConfig = {
ui: {
title: "My Documentation",
subtitle: "Version 2.0",
logo: "/assets/logo.svg"
}
};
Custom Navigation Links
window.ontoWaveConfig = {
ui: {
links: [
{ label: "GitHub", href: "https://github.com/my-project", target: "_blank" },
{ label: "npm", href: "https://npmjs.com/package/my-package", target: "_blank" }
]
}
};
Custom CSS
OntoWave exposes CSS variables for customization:
:root {
--ow-primary: #0066cc;
--ow-font-family: 'Courier New', monospace;
--ow-sidebar-width: 300px;
}
Style Injection
window.ontoWaveConfig = {
ui: {
customCss: "/assets/my-theme.css"
}
};
Known Limitations
- SVG logo must be hosted on the same domain (no CORS)
- Not all CSS variables are documented — check the source code for a complete list