Comprender la estructura de ficheros de un paquete de personalización

Su paquete de personalización debe estar estructurado de la siguiente manera para garantizar que se integre correctamente con Primo VE:

<View_Code>: la carpeta superior de su paquete de personalización. Se debe cambiar el nombre de la carpeta superior por el código de vista de la institución, que debe estar en el siguiente formato: <institution_code>-<view_code>. Esta carpeta debe incluir las siguientes carpetas:

• activos - Toda la personalización de la NDE se realiza dentro de las siguientes subcarpetas:

  • css - Esta subcarpeta contiene el fichero custom.css, que incluye sus reglas de formato para la interfaz de usuario de la NDE (excepto para la página de destino). Estas reglas ignoran las reglas correspondientes en el CSS por defecto.

  • encabezado-pie de página - Los ficheros header.html y footer.html se utilizan para personalizar el encabezado y el pie de página de la vista, respectivamente. Para más información, consulte Añadir encabezados y pies de página.

  • página de inicio - Esta carpeta contiene los ficheros HTML y CSS solo para la página de destino: homepage en.html y homepage.css. Para más información, consulte Personalización de la página de destino.

  • iconos- Esta subcarpeta contiene todos los iconos personalizados para la interfaz de usuario de la NDE: favicon.ico y custom_icons.svg. Para más información, consulte Personalizar iconos.

  • imágenes- Esta subcarpeta contiene las imágenes personalizadas para la interfaz de usuario de la NDE: library-logo.png y icon_<resource_type_code>.png. Para más información, consulte Personalizar ficheros de imágenes.

  • js - Esta subcarpeta contiene el fichero custom.js, que incluye únicamente el código JavaScript utilizado para cargar la interfaz de usuario de la NDE. Este fichero se utiliza de forma diferente a la interfaz de usuario original. Ya no se utiliza para añadir componentes personalizados de Angular conectados a un componente específico. Para implementar esa configuración, consulte Capacidades avanzadas de personalización y Gestionar complementos para la interfaz de usuario de la NDE. 

Crear e implementar un paquete de personalización

La pestaña Gestionar paquete de personalización descarga/carga el paquete de personalización entre el servidor Primo VE y su equipo local. Antes de actualizar un paquete de personalización existente, se recomienda descargarlo del servidor para asegurarse de que esté utilizando la copia más reciente. Si va a crear un paquete de personalización, le recomendamos que descargue la plantilla.

Para obtener más información, consulte Gestionar paquetes de personalización.

1. Edite su vista en la página Lista de vistas (Configuración > Descubrimiento > Configuración de despliegue > Configurar vistas).

2. Seleccionar la pestaña Gestionar paquete de personalización.

   

   Pestaña Gestionar paquete de personalización para la interfaz de usuario de la NDE

3. Si esta es la primera vez, descargue el paquete de plantilla en la sección Descargar paquete. De lo contrario, descargue el paquete actual para asegurarse de que utiliza la última versión.

4. Descomprima los ficheros.

5. Asegúrese de que la carpeta superior del fichero zip de su paquete sea la carpeta <View_Code>, que debe tener el siguiente formato: <institution_code>-<view_code>-por ejemplo, PRMO_OAP_INST-Alma.

6. Según sea necesario, personalice los ficheros de configuración y las carpetas asociadas a la página de destino, imágenes y CSS. Debe conservar la estructura y los nombres de los ficheros que está reemplazando. Para más información, consulte el resto de las secciones de este documento.

7. Comprima la carpeta <View_Code>.

   Se recomienda a los usuarios de Windows que utilicen una herramienta de compresión como 7zip o Winrar en lugar de Windows Enviar a > Comprimir carpeta para evitar errores de carga.

    

   Los usuarios de Mac deben usar el siguiente procedimiento para comprimir y extraer cualquier fichero .DS_Store oculto:

   1. Abra la aplicación Terminal en Aplicaciones > Herramientas.

   2. Muévase al directorio primario de la carpeta que desea comprimir. Por ejemplo:
      cd /Users/<nombre de usuario>/<carpeta primaria>

   3. Introduzca el siguiente comando para comprimir el fichero:
      zip –r <target file>.zip <My_View> - x "*.DS_Store"

8. Especifique el nombre del paquete comprimido y cliquee Cargar en la sección Cargar paquete.

9. Seleccione Guardar para aplicar los cambios.

10. Actualice su vista en el navegador web y pruebe sus cambios antes de cargarlos en el servidor de producción.

Personalizar la página de destino

La página de destino es el punto de entrada para el descubrimiento de la biblioteca y suele incluir un cuadro de búsqueda vacío.

Se anima a las instituciones a añadir o personalizar la siguiente información en la página:

• Enlaces de acceso rápido, como los horarios de las bibliotecas.

• Mensaje de bienvenida y consejos de búsqueda.

• Una opción para integrar un carrusel de exhibición estará disponible mediante configuración después del lanzamiento general en mayo de 2025.

• Una opción para personalizar la imagen de fondo de la página de destino.

• Personalice el título del banner utilizando el siguiente código de la tabla de códigos Buscar etiquetas de ventana (Configuración > Descubrimiento > Configuración de despliegue > Etiquetas):

  nde.landing.header—Su descubrimiento comienza aquí

La carpeta de la página de inicio en su paquete de personalización incluye los siguientes ficheros para personalizar el contenido y los estilos de la página de destino:

• homepage_en.html—Este fichero HTML personaliza el área debajo del cuadro de búsqueda en su página de destino. Para admitir otros idiomas, puede crear y cargar nuevos ficheros HTML con el código de idioma correspondiente. Por ejemplo: homepage_fr.html. Se proporciona un fichero de plantilla como ejemplo.

• homepage.css -Este fichero CSS configura el formato específicamente para su página de destino. Se proporciona un fichero de plantilla como ejemplo.

• homepage_background.svg - Este fichero SVG configura la imagen de fondo de la página de destino.

En el siguiente ejemplo, se han actualizado la imagen de fondo y el texto de la sección "Acerca de la biblioteca":

1. Cree el fichero homepage_en.html con los cambios de la sección "Acerca de la biblioteca" (consulte el fichero HTML adjunto):

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <base href="/">
     <meta charset="utf-8">
     <meta content="width=device-width, initial-scale=1.0" name="viewport">
     <title>Library Page</title>
     <link href="./homepage.css" rel="stylesheet">
   </head>
   <body>
   <main class="main-landing-page display-flex flex-column flex-layout-center-center">
     <div class="menu-container width-100">
       <ul role="list" class="menu width-100">
         <li role="listitem">
           <a id="Opening_hours_link" aria-label="Opening hours" role="link">
             <div class="icon display-flex">
               <img alt="" src="assets/images/homePageImages/clock.svg">
             </div>
             <span>Opening hours</span>
           </a>
         </li>
         <li role="listitem">
           <a id="FAQ_link" aria-label="FAQ" role="link">
             <div class="icon display-flex">
               <img alt="" src="assets/images/homePageImages/search.svg">
             </div>
             <span>FAQ</span>
           </a>
         </li>
         <li role="listitem">
           <a id="Ask_a_librarian_link" aria-label="Ask a librarian" role="link">
             <div class="icon display-flex">
               <img alt="" src="assets/images/homePageImages/book.svg">
             </div>
             <span>Ask a librarian</span>
           </a>
         </li>
         <li role="listitem">
           <a id="Search_tips_link" aria-label="Search tips" role="link">
             <div class="icon display-flex">
               <img alt="" src="assets/images/homePageImages/comp_search.svg">
             </div>
             <span>Search tips</span>
           </a>
         </li>
         <li role="listitem">
           <a id="Study_room_link" aria-label="Study room" role="link">
             <div class="icon display-flex">
               <img alt="" src="assets/images/homePageImages/book.svg">
             </div>
             <span>Study room</span>
           </a>
         </li>
       </ul>
     </div>

     <div class="flex-row flex-layout-space-between width-100 welcome-announcements-container">
       <div class="welcome display-flex flex-column flex-layout-start">
         <h2 aria-level="2" role="heading" class="welcome-title mat-headline-medium ">Welcome to the library</h2>
         <span class="welcome-content">Access your account by signing in and enabling more capabilities</span>
         <a id="myLibraryCard" tabindex="0" aria-label="Go to my library card" role="link">Go to my library card</a>
       </div>
       <div class="announcements display-flex flex-column">
         <header class="flex-column gap-1">
           <h2 class="mat-title-medium" role="heading" aria-level="2">Announcements:</h2>
           <h3 role="heading" aria-level="3" class="announcements-item-title mat-headline-medium">New library resources</h3>
         </header>
         <article>
           <p class="mat-body-large">Lorem ipsum dolor sit amet consectetur. Varius ipsum amet elit convallis. Egestas arcu volutpat morbi urna
             cursus amet.</p>
         </article>

       </div>
     </div>

     <div class="about display-flex width-100">
       <div class="about-content flex-row">
         <div class="about-text flex-column flex-space-between ">
           <h2 role="heading" aria-level="2" class="about-text-title mat-headline-large">Customized Landing Page </h2>
           <p class="about-text-description">
             Please make sure to custom your text here as this is a demo customization example  .</p>
           <div class="help-sign-in-container flex-column gap-05">
             <span>Primo also helps you manage your research. Sign in to:</span>
             <ul role="list">
               <li role="listitem">
                 <img alt="Library image" src="assets/images/homePageImages/success.svg">
                 <span> Reserve and renew books</span>
               </li>
               <li role="listitem">
                 <img alt="Library image" src="assets/images/homePageImages/success.svg">
                 <span> Create favorites lists</span></li>
               <li role="listitem">
                 <img alt="Library image" src="assets/images/homePageImages/success.svg">
                 <span> Reserve and renew books</span></li>
               <li role="listitem">
                 <img alt="Library image" src="assets/images/homePageImages/success.svg">
                 <span> View full search results</span></li>
             </ul>
           </div>
         </div>
         <div class="about-image flex-layout-center-center">
           <img alt="" src="assets/images/homePageImages/about_image.svg">
         </div>
       </div>
     </div>
   </main>
   </main>
   </body>
   </html>

2. Cree el fichero de fondo de la página de destino homepage_background.svg con la nueva imagen de fondo (consulte el fichero SVG adjunto).

3. Como no se ha añadido ningún CSS, se utiliza el formato por defecto de la vista.

4. Comprima y cargue su paquete de personalización actualizado en la pestaña Gestionar paquete de personalización de su vista.

Tras la implementación, la página de destino aparece como sigue:

Añadir encabezados y pies de página

Los encabezados y pies de página son áreas situadas en la parte superior e inferior de la interfaz de usuario de la NDE. Puede mostrar información común en todas las páginas de la interfaz de usuario en estas áreas si las añade a los siguientes ficheros de su paquete de personalización: header.html y footer.html. Si admite idiomas distintos del inglés, utilice el siguiente formato para incluir el código de dos dígitos del idioma en el nombre del fichero: header_<language_code>.html y footer_<language_code>.html.

Por ejemplo, añada el siguiente código al fichero footer.html para mostrar enlaces a la política de privacidad, la declaración de accesibilidad y las condiciones de uso de su institución:

Cuando se implementa, el pie de página aparece en la parte inferior de la interfaz de usuario:

Personalizar un esquema de colores

Si ha seleccionado uno de nuestros esquemas de colores listos para usar, pero necesita pequeños cambios para adaptarlo a su marca, puede modificar variables específicas (como --sys-primary) con su paquete de personalización.

1. Determine qué atributo desea modificar. Para ver una lista de los atributos utilizados actualmente, consulte el fichero fuente nde-color-theme-*.css utilizando las Herramientas de desarrollo del navegador (F12). 

   

   Inspeccionar variables de color en el navegador

2. Edite la variable en el fichero custom.css de su paquete de personalización. Por ejemplo:

   :root {
     --sys-primary: #b51a57;  
   }

3. Comprima y cargue su paquete de personalización. Para obtener más información, consulte Crear e implementar un paquete de personalización.

Personalizar ficheros de imagen

La carpeta de imágenes contiene las imágenes utilizadas para personalizar el logotipo de la biblioteca y las miniaturas de los tipos de recursos. Para añadir los ficheros de imágenes, utilice el formato PNG y asegúrese de respetar las pautas y los siguientes formatos de denominación:

• library-logo.png - Cuando se añade a la carpeta de imágenes, anula la imagen predeterminada para el logotipo de la biblioteca que aparece en el menú principal:

  

  Logotipo de la biblioteca en la interfaz de usuario de la NDE

• icon_<resource_type_code>.png - Cuando se añade a la carpeta de imágenes, anula la miniatura predeterminada de un recurso si no hay portada para la imagen. Por ejemplo: icon_audio.png.

Personalizar iconos

La carpeta de iconos contiene los iconos utilizados para personalizar el favicon y varios iconos utilizados en la interfaz de usuario de la NDE (como el icono de búsqueda ). Para personalizar los iconos, utilice el formato SVG y los siguientes ficheros:

• favicon.ico - Cuando se añade a la carpeta de iconos, anula el favicon por defecto de la vista:

  

  Favicon en la pestaña de la interfaz de usuario de la NDE

•  custom_icons.svg - Añadir los iconos (basados en el ID del icono por defecto) a este fichero usando el formato SVG. Puede añadir tantos iconos como necesite utilizando el elemento <symbol> para cada uno.

  

  Icono de búsqueda en la interfaz de usuario de la NDE (Próxima experiencia de descubrimiento)

  Para determinar el ID de un icono, utilice las Herramientas de desarrollo del navegador para inspeccionar el icono que desea personalizar. Tras seleccionar la opción Inspeccionar elemento y el icono, el ID del icono aparece en el campo data-mat-icon-name:

  

  Inspeccionar el icono para la identificación

  Por ejemplo, el fichero custom_icons.svg puede aparecer de la siguiente manera con un solo icono:

  <?xml version="1.0" encoding="UTF-8"?>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">

    <symbol id="Search" height="24px" viewBox="0 -960 960 960" width="24px" fill="">

      <path d="M440-240q116 0 198-81.5T720-520q0-116-82-198t-198-82q-117 0-198.5 82T160-520q0 117 81.5 198.5T440-240Zm0-280Zm0 160q-83 0-147.5-44.5T200-520q28-70 92.5-115T440-680q82 0 146.5 45T680-520q-29 71-93.5 115.5T440-360Zm0-60q55 0 101-26.5t72-73.5q-26-46-72-73t-101-27q-56 0-102 27t-72 73q26 47 72 73.5T440-420Zm0-40q25 0 42.5-17t17.5-43q0-25-17.5-42.5T440-580q-26 0-43 17.5T380-520q0 26 17 43t43 17Zm0 300q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T80-520q0-74 28.5-139.5t77-114.5q48.5-49 114-77.5T440-880q74 0 139.5 28.5T694-774q49 49 77.5 114.5T800-520q0 64-21 121t-58 104l159 159-57 56-159-158q-47 37-104 57.5T440-160Z"/>

    </symbol>

  </svg>

  Fichero Example of custom_icons.svg