Saltar al contenido principal
Inicio - Soporte de OCLC

Enlace de anclaje de fragmento de URL

  1. Última actualización
  2. Guardar como PDF
La traducción de este sitio web se genera mediante traducción automática. La calidad y precisión de la traducción automática pueden variar significativamente de un texto a otro.

 

 Enlace:  Vea un ejemplo en directo.

 Ver:  Ver el código fuente en el sitio de demostración de CONTENTdm Cookbook.

Una personalización común es crear una tabla de contenido o una barra de navegación alfabética para que a los usuarios les resulte más fácil desplazarse por una gran cantidad de contenido o por largas listas de documentos. Este tipo de navegación normalmente se basa en un URI hash para desplazar la ventana del navegador del usuario hasta esa sección de la página. También se les conoce como fragmentos de URI o enlaces de fragmentos de URI. El objetivo del valor hash en la URL se basa típicamente en la propiedad ID de cualquier etiqueta HTML. Otra opción es que el destino sea una etiqueta de anclaje HTML (<a>) que dependa de la propiedad name en lugar de la más tradicional propiedad href.

El sitio web de CONTENTdm es una aplicación de una sola página que utiliza el framework React JS. Debido a que las aplicaciones de una sola página se renderizan dinámicamente en JavaScript, no funcionan con el modelo URI Hash. Esto significa que la página no se ha renderizado completamente antes de que el navegador procese el valor en el hash, por lo que el navegador no puede desplazar al usuario a esa ubicación en la página.

Esta receta corrige esta limitación con un poco de JavaScript adicional que espera a que la página se renderice completamente y luego desplaza al usuario al ancla adecuada en la página. Puede ver esto funcionando en el Portal de Recetas de Libros de Cocina con los botones de hashtag de la sección justo debajo de la cabecera. La configuración predeterminada de esta receta supone que usted está utilizando una propiedad ID para identificar los destinos de los hashes de URL. Si prefiere usar <a name=”example_hash”> en su lugar, puede editar el código de la receta para identificar los objetivos de esa manera.

 Nota: 

Actualmente, esta receta está diseñada para funcionar en páginas HTML personalizadas, ya que se utilizan comúnmente para crear una lista extensa de contenido que requeriría una navegación basada en hashtags clicables. Para que esta receta funcione en su página HTML personalizada, deberá especificar el nombre de su página personalizada dentro del JavaScript.

Si usted tiene la intención de crear este tipo de contenido navegable en su página principal de CONTENTdm o dentro de una página de inicio de colección integrada, entonces necesitará modificar el document.addEventListener() fragmentos en el código de la receta para asegurarse de que se ejecuta en la página correcta.

Para instalar esta receta:

  1. Descargue el archivo JS desde el Portal de Recetas de Cocina.
  2. Busque estas líneas en el código:

const allCustomPages = true;

const customPage = ['']; //especifique el nombre de la(s) página(s) personalizada(s) donde debe ejecutarse el script

Si el script se puede ejecutar en todas sus páginas personalizadas, no realice cambios en el código. Si su código debe ejecutarse en páginas personalizadas específicas, deberá agregar el nombre de sus páginas personalizadas al código. Por ejemplo, si la navegación con el hashtag está en una página llamada «glosario», modifique las dos líneas anteriores para que se vean así:

const allCustomPages = false;

const customPage = ['glosario']; //especifique el nombre de la(s) página(s) personalizada(s) en las que se debe ejecutar el script

  1. Guarde sus cambios en el JavaScript y cargue el archivo como un Script Personalizado en la herramienta de configuración del sitio web.

Al igual que con todas las personalizaciones basadas en JavaScript del libro de recetas, usted puede crear funciones JavaScript personalizadas que afecten a colecciones específicas o integrarse con otras recetas.