Made in DeveloperHub
Puedes personalizar tu documentación con CSS personalizado y JavaScript personalizado. A continuación se muestran algunas de las personalizaciones más utilizadas:
Ocultar el selector de versiones
Hay un ajuste para esto
Ya no se necesita CSS. Activa Hide version picker en Project Settings > Customisation. Consulta Ocultar el selector de versiones.
.customise.live .version-picker {
display: none;
}
Ocultar el selector de secciones/documentación
.customise.live .section-picker-container {
display: none;
}
Fijar la navegación superior
Solo en la interfaz original
Aplica esta personalización solo a la interfaz original. En las interfaces Next y Matcha, hay un ajuste en Project Settings > Customisation para habilitarla.
@media (min-width: 1024px) {
.customise.live .topnav-container {
position: fixed;
top: 0;
height: auto;
z-index: 10;
}
.customise.live .mega-container {
margin-top: 70px;
}
.customise.live .stick-top {
top: 70px !important;
}
}
Cuando la navegación está fija, hay que modificar el comportamiento del desplazamiento para que los encabezados no queden ocultos bajo la navegación al desplazarse hasta ellos. Añade lo siguiente a las etiquetas HEAD personalizadas para modificar los desplazamientos:
<script>
window.settings.apply({
scrolling: { // Modify values as needed, according to your navbar height.
scrollTopOffsetOnFragmentChange: {documentation: -90, apiReference: -50}
}
});
</script>
Reducir el tamaño de fuente de los enlaces de la navegación superior
Úsalo si los títulos son demasiado largos y se dividen en dos líneas.
.customise.live .topnav-container .links {
font-size: 13px; /* Original is 14px */
}
.customise.live .topnav-container .links .link {
font-size: inherit;
}
Mover el índice y la tabla de contenidos a los bordes de la pantalla
Obsoleto
Ahora esto está habilitado por defecto.
.customise.live .container.doc-container {
max-width: 100%;
}
.customise.live .container.doc-container > .row {
justify-content: space-between;
}
.customise.live .documentation {
padding-left: 0;
}
Añadir «contáctanos» al cuadro de búsqueda cuando no hay resultados
Colócalo en las etiquetas HEAD personalizadas.
<style>
.search-contact-us {
color: inherit;
font-size: inherit;
text-decoration: underline;
}
.search-contact-us:hover {
color: inherit;
}
</style>
<script>
document.addEventListener('onsearch', function (event) {
let searchEl = document.querySelector('.topnav .search');
setTimeout(() => {
if (!document.querySelector('.search-results-container .result')) {
document.querySelector('.search-results-container .count').innerHTML =
'No search results found. <a class="search-contact-us" href="/support-center/contact-us">Contact us?</a>';
}
});
});
</script>
Ocultar el banner de advertencia de versión para una versión específica
Colócalo en las etiquetas HEAD personalizadas.
<script>
document.addEventListener('onsectionchange', e => {
let versionWarningEl = document.querySelector('.version-warning');
if (!versionWarningEl) {
return;
}
if (window.getActiveVersion().slug === 'v4') {
console.log('Hiding banner');
versionWarningEl.classList.add('d-none');
} else {
versionWarningEl.classList.remove('d-none');
}
});
</script>
Contraer el selector de secciones en un menú desplegable en la interfaz Next
Colócalo en el CSS personalizado.
.customise.live .section-links-group {
display: none !important;
}
.customise.live app-section-picker.d-mobile {
display: inline-block !important;
}
@media (min-width: 768px) {
.customise.live .version-selector-group {
padding: 8px 0;
}
}
Desenfocar la barra de navegación superior
Colócalo en el CSS personalizado. Puede que tengas que gestionar el tema claro por separado.
.customise.live .topnav-container {
background-color: transparent;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
-moz-backdrop-filter: blur(10px);
border-bottom: 1px solid #44444433;
}
.customise.live .external-search.dark {
background: #00000033;
}
Añadir iconos al índice
Para añadir un icono en lugar del icono de expansión de las categorías y páginas padre en el índice, agrega este CSS:
/* First hide the expander icons. You could do this individually or for all expanders */
.customise .sidebar .node_XXXXX>.node-wrapper>.node-content-wrapper>.expander-icon>i {
display: none;
}
/* To add an emoji */
.customise .sidebar .node_XXXXX>.node-wrapper>.node-content-wrapper>.expander-icon:before {
content: '👋';
}
/* To add an icon */
.customise .sidebar .node_XXXXX>.node-wrapper>.node-content-wrapper>.expander-icon:before {
content: "";
background: url("YYYYY");
background-size: 16px 16px;
width: 16px;
height: 16px;
}
Expandir enums en la referencia de API
Para que los enums con sus varnames se expandan al hacer clic, añade lo siguiente en las etiquetas HEAD personalizadas:
<script>
document.addEventListener('onreferencecontentloaded', function (e) {
console.log('Reference content loaded');
// Find all elements with the "property" class
e.detail.el.querySelectorAll('.property').forEach(element => {
// Check if the text starts with "Enum: "
if (element.textContent.trim().startsWith("Enum: ")) {
// Extract the enums from the content
const match = element.innerHTML.match(/<code>(\d+)\s\((.*?)\)<\/code>/g);
if (match) {
const enumValues = match.map(item => {
const [, key, value] = item.match(/<code>(\d+)\s\((.*?)\)<\/code>/);
return { key, value };
});
// Create a new button element to replace the original one
const button = document.createElement('button');
button.classList.add('expand-enum-vars');
button.textContent = 'Show enum values';
const ul = document.createElement('ul');
ul.style.display = 'none';
// Add the list items based on the enum values
enumValues.forEach(({ key, value }) => {
const li = document.createElement('li');
li.textContent = `${key}: ${value}`;
ul.appendChild(li);
});
// Toggle display on button click
button.addEventListener('click', () => {
ul.style.display = ul.style.display === 'none' ? 'block' : 'none';
});
// Replace the original span with the button and list
element.replaceWith(button, ul);
}
}
});
});
</script>
Puedes modificar el CSS del botón según necesites usando el selector CSS .customise.live .references .expand-enum-vars.
Añadir un menú desplegable a los enlaces de navegación
Para crear un menú desplegable que puedas añadir a los enlaces de la barra de navegación superior, usa este JavaScript:
<script>
/**
* Creates a dropdown menu
* @param {Object} options - Configuration options
* @param {string} options.buttonText - Text for the dropdown button
* @param {string} options.href - URL for the menu item
* @param {Function} options.onClick - Optional click handler
* @param {Array} options.items - Array of menu items
* @param {string} options.items[].text - Display text for the menu item
* @param {string} options.items[].href - URL for the menu item
* @param {Function} options.items[].onClick - Optional click handler
* @param {string} options.buttonClass - Optional CSS class for the button
* @param {string} options.menuClass - Optional CSS class for the menu
* @return {HTMLElement} The created dropdown element
*/
function createDropdown(options) {
// Create container
const dropdownContainer = document.createElement('div');
dropdownContainer.className = 'custom-dropdown';
if (!options.items) {
// make a link instead of button
const link = document.createElement('a');
link.innerHTML = options.buttonText;
link.className = options.buttonClass || 'custom-dropdown-button';
link.href = options.href;
if (options.onClick) {
link.onclick = options.onClick;
}
return link;
}
// Create button
const button = document.createElement('button');
button.className = options.buttonClass || 'custom-dropdown-button';
button.innerHTML = options.buttonText + '<i class="fas fa-chevron-down"></i>';
button.addEventListener('click', function (e) {
e.stopPropagation();
menu.classList.toggle('show');
button.classList.toggle('active');
// Close dropdown when clicking outside
document.addEventListener('click', function () {
menu.classList.remove('show');
button.classList.remove('active');
document.removeEventListener('click', arguments.callee);
});
});
// Create menu
const menu = document.createElement('div');
menu.className = options.menuClass || 'custom-dropdown-menu';
// Create menu items
options.items.forEach(item => {
const menuItem = document.createElement('a');
menuItem.textContent = item.text;
menuItem.href = item.href || '#';
menuItem.className = 'custom-dropdown-item';
if (item.onClick) {
menuItem.addEventListener('click', function (e) {
// Only prevent default if explicitly returning false
const result = item.onClick(e);
if (result === false) {
e.preventDefault();
}
});
}
menu.appendChild(menuItem);
});
// Assemble dropdown
dropdownContainer.appendChild(button);
dropdownContainer.appendChild(menu);
return dropdownContainer;
}
</script>
Usa el código anterior de la siguiente manera:
<script>
const navbar = document.querySelector('.nav-btn-group.links-group');
navbar.appendChild(createDropdown({
buttonText: 'Get Started',
items: [
{
text: 'Installation',
href: projectUrl + 'installation',
onclick: function () {
navigate('installation', {addBasePath: true});
}
},
{
text: 'Configuration',
href: projectUrl + 'configuration',
onclick: function () {
navigate('configuration', {addBasePath: true});
}
},
{
text: 'Operating',
href: projectUrl + 'operating',
onclick: function () {
navigate('operating', {addBasePath: true});
}
}
],
}));
</script>
Añadir un borde con desvanecimiento a las referencias
Para añadir un borde con desvanecimiento a las referencias, usa el siguiente JavaScript:
document.addEventListener("onsectionchange", (event) => {
if (event.detail.type === 'reference') {
setupFadingEdge();
}
});
document.addEventListener('onreferencecontentloaded', (event) => {
const fadingEdge = document.querySelector('.references .sidebar .sticky-top');
if (!fadingEdge) {
return;
}
const scrollElement = fadingEdge.querySelector('.ps-container');
applyFadingEdge(scrollElement, fadingEdge);
});
function setupFadingEdge() {
const fadingEdge = document.querySelector('.references .sidebar .sticky-top');
if (!fadingEdge) {
console.warn('Fading edge element not found');
return;
}
const scrollElement = fadingEdge.querySelector('.ps-container');
applyFadingEdge(scrollElement, fadingEdge);
scrollElement.addEventListener('scroll', () => applyFadingEdge(scrollElement, fadingEdge));
}
function applyFadingEdge(scrollEl, el) {
const scrollTop = scrollEl.scrollTop;
const scrollHeight = scrollEl.scrollHeight;
const clientHeight = scrollEl.clientHeight;
const isScrolled = scrollTop + clientHeight < scrollHeight;
if (isScrolled) {
// Calculate how close we are to the bottom (as a percentage)
const scrollPosition = scrollTop + clientHeight;
const scrollRatio = Math.min(1, (scrollHeight - scrollPosition) / (scrollHeight * 0.25));
// Adjust the gradient based on scroll position
// As scrollRatio approaches 0, the gradient becomes less pronounced
const opacity = Math.max(0, scrollRatio * 100);
el.style.maskImage = `linear-gradient(180deg, #FFF 75%, rgba(255, 255, 255, ${1 - opacity/100}) 99%)`;
} else {
el.style.maskImage = '';
}
}
Redirigir a la documentación en la última versión
Si quieres que una documentación solo se pueda ver en la última versión, añade las siguientes etiquetas HEAD personalizadas:
<script>
document.addEventListener("onsectionchange", event => {
const version = window.getActiveVersion();
const section = window.getActiveSection();
if (section.type === 'documentation' && section.slug !== 'example-slug' && !version.isLatest) {
const page = window.getActivePage();
navigate('/' + section.slug + '/' + page.slug, {addBasePath: true});
}
});
</script>
Sangrar el índice bajo la categoría
Para añadir sangría bajo la categoría, agrega lo siguiente al CSS personalizado:
.customise.live .category-container .tree-node-level-2 {
margin-left: 8px;
}
Mover la barra de búsqueda al hero de la página de inicio
Para mover la barra de búsqueda a un elemento hero con el selector .docs-hero-content en la página de inicio, añade lo siguiente a las etiquetas HEAD personalizadas:
<script>
let searchEl = null;
let originalSearchParent = null;
document.addEventListener("onsectionchange", (event) => {
setupSearch(event.detail.type === 'landing-page');
});
function setupSearch(placeInHero) {
if (!searchEl) {
searchEl = document.querySelector('app-search');
originalSearchParent = searchEl.parentElement;
}
if (placeInHero) {
document.querySelector('.docs-hero-content').append(searchEl);
} else if (originalSearchParent) {
originalSearchParent.append(searchEl);
}
}
</script>
Si usas la interfaz Next o Matcha, usa app-search-v2 en lugar de app-search.
Anything missing? Leave us feedback
Tabla de Contenido
Personalizaciones popularesOcultar el selector de versionesOcultar el selector de secciones/documentaciónFijar la navegación superiorReducir el tamaño de fuente de los enlaces de la navegación superiorMover el índice y la tabla de contenidos a los bordes de la pantallaAñadir «contáctanos» al cuadro de búsqueda cuando no hay resultadosOcultar el banner de advertencia de versión para una versión específicaContraer el selector de secciones en un menú desplegable en la interfaz NextDesenfocar la barra de navegación superiorAñadir iconos al índiceExpandir enums en la referencia de APIAñadir un menú desplegable a los enlaces de navegaciónAñadir un borde con desvanecimiento a las referenciasRedirigir a la documentación en la última versiónSangrar el índice bajo la categoríaMover la barra de búsqueda al hero de la página de inicio