CSS y JavaScript personalizados

Planes que admiten el uso de CSS y JS personalizados en el sitio de la base de conocimientos

Fragmentos de CSS

Un fragmento es un fragmento de código reutilizable, y un fragmento CSS "CSS (Cascading Style Sheets) + Snippet" es un conjunto de utilidades y ejemplos interactivos para CSS3. Ayuda a crear las plantillas de diseño de uso frecuente. Se trata de bloques de código preescritos que los desarrolladores pueden insertar rápidamente en sus proyectos para lograr funcionalidades específicas sin tener que escribir el código desde cero.

Estos fragmentos ayudan a agilizar el proceso de desarrollo al ahorrar tiempo, reducir errores y garantizar la coherencia en todo el código base.

Un ejemplo de un fragmento de CSS:

.shadow {
 box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
 -moz-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
 -webkit-box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
 }

El fragmento CSS anterior puede hacer que los bordes y las imágenes se destaquen en su página.

Personalización de CSS mediante fragmentos de CSS

Para personalizar CSS usando fragmentos de CSS, siga los pasos a continuación:

1. Vaya a Configuración () > sitio de la base de conocimientos > Personalizar sitio > CSS y JavaScript personalizados en el portal de la base de conocimientos.

2. En la pestaña CSS , puede agregar fragmentos de código de dos maneras:

   un. Introduzca el fragmento de código en el área de texto.

   b. Haga clic en Agregar fragmentos de código para agregar los fragmentos precargados (7 fragmentos precargados).

3. Una vez hecho esto, haga clic en Guardar o Ctrl + S para guardar los cambios realizados.

   Para obtener más información, lea el artículo sobre CSS Snippets.

Fragmentos de JavaScript

Un fragmento de JavaScript es un fragmento de código reutilizable escrito en JavaScript, que normalmente se utiliza para realizar tareas específicas o añadir funcionalidad a una página web. Estos fragmentos suelen ser pequeños, centrados y diseñados para insertarse fácilmente en las bases de código existentes.

Personalización de JavaScript mediante fragmentos de código de JavaScript personalizados

Para personalizar JavaScript mediante fragmentos de JavaScript personalizados, siga los pasos que se indican a continuación:

1. Vaya a Configuración () > sitio de la base de conocimientos > Personalizar sitio > CSS y JavaScript personalizados en el portal de la base de conocimientos.

2. En el panel de navegación izquierdo, haga clic en la pestaña JavaScript y pegue el código deseado en el fragmento de JavaScript.

   Por ejemplo, para mover los artículos relacionados por encima de la sección de comentarios en el sitio de la base de conocimientos, pegue el siguiente código en el fragmento de código de JavaScript.  

panel.onload = function () {
$(".content_block_text" ).append("<div class=\"sperator\"><hr></div>");
$('.related-articles-container').appendTo('.content_block_text') 
}

4. Una vez hecho esto, haga clic en Guardar.

Solución de problemas

Adaptación de código personalizado para el modelo de aplicación de una sola página (SPA) en Document360

Con la transición del sitio web de Document360 a un modelo de aplicación de página única (SPA), es posible que cualquier JavaScript personalizado que dependa de eventos de actualización de página ya no funcione como se esperaba. Esto se debe a que las SPA actualizan solo el contenido del artículo, no toda la página.

A continuación se muestran las áreas en las que los usuarios pueden insertar JavaScript personalizado en el portal de Document360:

1. JavaScript personalizado

   Vaya a Configuración () > sitio de la base de conocimientos > Personalizar sitio > CSS y JavaScript personalizados en el portal de la base de conocimientos.

2. Integraciones HTML personalizadas
   Vaya a Configuración () > sitio de la base de conocimientos > Integraciones > HTML personalizado en el portal de la base de conocimientos.

Solución recomendada

Para garantizar la compatibilidad con el modelo de SPA, actualice el JavaScript personalizado para usar el articleload evento. Este evento se desencadena cuando se actualiza el contenido del artículo, lo que garantiza que los scripts funcionen sin problemas en la nueva arquitectura.

1. Reemplace cualquier código que se base en eventos de actualización de página por una suscripción al articleload evento.

2. Utilice el siguiente fragmento de código para adaptar los scripts personalizados:

   panel.addEventListener('articleload', function() {
     // Your custom JavaScript code here
   });

3. Pruebe los scripts actualizados para confirmar que funcionan correctamente en el entorno de SPA.

   Si el problema persiste después de seguir estos pasos, póngase en contacto con el equipo de soporte de Document360 para obtener más ayuda: Póngase en contacto con el equipo de soporte de Document360