Dspace 7 Personalización de la interfaz de usuario versión español
Jose Miguel Ravasi
Contribuir al Fondo de Desarrollo Dspace
El Fondo de Desarrollo DSpace recientemente establecido apoya el desarrollo de nuevas características priorizadas por DSpace Governance. Para obtener una lista de las funciones planificadas, consulte la página wiki del fondo .
Personalización de la interfaz de usuarioCreado por Tim Donohue , modificado por última vez por Yura Bondarenko el 21 de junio de 2022
La interfaz de usuario (UI) de DSpace se basa en el marco Angular.io . Todos los datos provienen de la API REST (DSpace Backend) y las páginas HTML finales se generan a través de TypeScript .
Antes de comenzar a personalizar o personalizar la interfaz de usuario, hay algunos conceptos básicos de Angular a tener en cuenta. No necesita saber Angular o TypeScript para crear un tema o marcar la interfaz de usuario . Pero comprender algunos conceptos básicos le permitirá comprender mejor la estructura de carpetas/diseño de la base de código.
Componentes angulares : en Angular, cada página web consta de una serie de "componentes" que definen la estructura de una página. Son el "bloque de construcción" principal de cualquier aplicación Angular. Los componentes son reutilizables en muchas páginas. Entonces, por ejemplo, solo hay un componente de "encabezado" y "pie de página", aunque aparecen en todas las páginas.
Cada componente tiene:
Un archivo *.component.ts( TypeScript ) que contiene la lógica y el nombre ("selector") del componente
Un *.component.htmlarchivo (HTML) que contiene el marcado HTML para el componente (y posiblemente referencias a otros componentes incrustados). Esto también se llama la "plantilla".
En los archivos HTML, los componentes se nombran/referencian como etiquetas similares a HTML (p. ej . <ds-header>, <ds-footer>). En la interfaz de usuario de DSpace, cada componente comienza con "ds-" para distinguirlo como un componente de DSpace listo para usar.
Un archivo *.component.scss( Sass /CSS) que contiene el estilo del componente.
Si desea profundizar en los conceptos angulares de componentes y plantillas, consulte https://angular.io/guide/architecture-components
Tecnologías temáticasLa interfaz de usuario de DSpace
utiliza:
Marco del sitio web Bootstrap (v4.x) para el diseño general y los componentes de la página web (botones, alertas, etc.)
Sass , un preprocesador de CSS, para hojas de estilo. Sass es muy similar a CSS (y de hecho, cualquier CSS es Sass válido). Pero, Sass le permite anidar reglas CSS y tener variables y funciones. Para obtener una breve descripción general de Sass, consulte https://sass-lang.com/guide
HTML5 , la última especificación del lenguaje HTML
La familiaridad con estas tecnologías (o incluso solo con CSS + HTML) es todo lo que necesita para crear temas básicos de la interfaz de usuario de DSpace.
Ejecución de la interfaz de usuario en modo de desarrolladorSiempre que esté probando cambios en la interfaz de usuario, es posible que desee ver sus cambios "en vivo" en lugar de reconstruirlos después de cada cambio. La forma más fácil de lograr esto es ejecutar la interfaz de usuario localmente (es decir, en localhost) en modo desarrollador ejecutando:
yarn start:devEste modo tiene varias ventajas específicas del desarrollo:
La interfaz de usuario se inicia más rápidamente
La interfaz de usuario utilizará un archivo de configuración "config.dev.yml" separado (en 7.1 o 7.0, este archivo se llamaba "environment.dev.ts"). Esto le permite tener configuraciones específicas de desarrollo, separadas de su configuración de producción en "config.prod.yml" (en 7.1 o 7.0, este archivo se llamaba "environment.prod.ts")
La interfaz de usuario se recargará automáticamente cada vez que modifique un archivo. Esencialmente, la interfaz de usuario "observará" constantemente los cambios (a medida que los realice) y se volverá a cargar cada vez que modifique un archivo. Esto le permite encontrar problemas/errores más rápidamente y también realizar pruebas más rápidamente.
Tenga en cuenta que NUNCA debe ejecutar la interfaz de usuario en modo desarrollador en escenarios de producción. El modo de producción proporciona un rendimiento mucho mejor y garantiza que su sitio sea totalmente compatible con SEO, etc.
Crear un tema personalizado Directorios temáticos y principios de diseñoEl directorio de un tema debe incluir los siguientes archivos y directorios
app/ contiene los componentes angulares del tema y debe reflejar la estructura de src/app/
assets/ contiene los activos personalizados del tema, como fuentes o imágenes
styles/ contiene los estilos globales del tema
eager-theme.module.ts declara los componentes que deben incluirse en el paquete principal de la aplicación, como
Los eager component son aquellos que deberían estar disponibles inmediatamente cuando se cargan por primera vez, como las partes principales de la página de inicio y los componentes que están presentes en cada página.
Los componentes de entrada que se registran a través de un decorador como @listableObjectComponent. Estos también deben incluirse en el móduloproviders.
lazy-theme.module.tsdeclara todos los demás componentes del tema.
Fuera de la caja, hay tres capas/directorios temáticos a tener en cuenta:
Tema base ( src/app/ directorios): La apariencia principal de DSpace (por ejemplo, diseño HTML, encabezado/pie de página, etc.) está definida por las plantillas HTML5 en este directorio. Cada plantilla HTML5 se almacena en un subdirectorio con el nombre del componente Angular donde se usa esa plantilla. El tema base incluye un estilo muy limitado (CSS, etc.), basado en gran medida en el estilo predeterminado de Bootstrap (4.x) , y solo permite ajustes menores para mejorar la accesibilidad de WCAG 2.1 AA.
Tema personalizado ( src/themes/custom directorios): este directorio actúa como andamio o plantilla para crear un nuevo tema personalizado. Proporciona componentes/plantillas angulares (vacías) que le permiten cambiar el tema de los componentes individuales. Dado que todos los archivos están vacíos de forma predeterminada, si habilita este tema (sin modificarlo), se verá idéntico al tema base.
Tema DSpace ( src/themes/dspace directorios): Este es el tema predeterminado para DSpace 7. Es un tema de ejemplo muy simple que proporciona un esquema de color personalizado, encabezado y página de inicio además del Tema base. Es importante tener en cuenta que este tema SOLO proporciona CSS/imágenes personalizadas para anular nuestro tema base. Todas las plantillas HTML5 se incluyen en el nivel del tema base, ya que esto garantiza que esas plantillas HTML5 también estén disponibles para el tema personalizado.
Los principios y tecnologías de diseño de la interfaz de usuario de DSpace se describen con más detalle en Principios y pautas de diseño de la interfaz de usuario de DSpace
EmpezandoElija un tema desde el que comenzar: Como se documentó anteriormente, hay dos directorios "src/theme/" que se proporcionan listos para usar: "custom" o "dspace". Debe seleccionar uno para usarlo como base para su tema. Lo que elija depende de usted, pero aquí hay algunas cosas que debe considerar:
Tema DSpace ( src/themes/dspace): Este es un tema de ejemplo simple para usuarios novatos. Principalmente, en este tema, puede personalizar inmediatamente los componentes de CSS, encabezado y página de inicio. Puede agregar otros componentes según sea necesario (consulte " Agregar directorios de componentes a su tema " a continuación).
Ventajas: Este tema es pequeño y simple. Proporciona un punto de partida / ejemplo fácil para temas básicos. Es probable que las futuras actualizaciones de la interfaz de usuario (por ejemplo, de 7.1 → 7.2) sean más fáciles porque el tema es de menor tamaño.
Desventajas: Tiene muy pocos directorios de componentes por defecto. Pero siempre puedes agregar más. Consulte " Agregar directorios de componentes a su tema " a continuación.
Tema personalizado ( src/themes/custom): este tema proporciona todos los componentes compatibles con temas disponibles para opciones de temas más avanzadas o complejas. Esto le proporciona un control total sobre todo lo que es compatible con temas en la interfaz de usuario
Ventajas: todos los componentes temáticos se proporcionan en subdirectorios. Esto facilita la modificación de la apariencia de cualquier área de la interfaz de usuario.
Desventajas: después de crear su tema, es posible que desee eliminar los directorios de componentes que no modificó (consulte " Eliminación de directorios de componentes de su tema " a continuación). En términos generales, las actualizaciones (por ejemplo, de 7.1 → 7.2) a menudo son más fáciles si su tema incluye menos componentes (ya que su tema puede requerir actualizaciones si algún componente al que hace referencia cambia significativamente).
Cree su propia carpeta de temas O edite la carpeta de temas existente: edite el directorio de temas en su lugar o cópielo (y todo su contenido) en una nueva carpeta src/themes/(elija el nombre de carpeta que desee)
Registre su carpeta de temas (solo es necesario si crea una nueva carpeta en el paso anterior): Ahora, debemos hacer que la interfaz de usuario reconozca esta nueva carpeta de temas, antes de que pueda usarse en la configuración.
Modifique angular.json(en la carpeta raíz), agregando el archivo principal "theme.scss" de la carpeta de su tema a la lista de "estilos". El siguiente ejemplo es para una nueva carpeta de tema llamada src/themes/mydspacesite/
"styles": [
"src/styles/startup.scss",
{
"input": "src/styles/base-theme.scss",
"inject": false,
"bundleName": "base-theme"
},
...
{
"input": "src/themes/mydspacesite/styles/theme.scss",
"inject": false,
"bundleName": "mydspacesite-theme"
},
]
NOTA: el "nombre del paquete" para su tema personalizado DEBE usar el formato "${folder-name}-theme". Por ejemplo, si la carpeta se llama "src/themes/amazingtheme", entonces el "nombre del paquete" DEBE ser "amazingtheme-theme"
(A partir de 7.3 o superior) Importe los nuevos temas en formato . Si está cambiando de un tema a otro, elimine el tema anterior de las importaciones.eager-theme.module.tsthemes/eager-themes.module.ts
Habilite su tema: modifique su config/config.*.yml archivo de configuración (en 7.1 o 7.0 este archivo se llamaba src/environments/environment.*.ts), agregando su nuevo tema a la matriz de "temas" en ese archivo. Preste mucha atención para modificar el archivo de configuración correcto (por ejemplo, modifique config.dev.yml si ejecutándose en modo de desarrollo, o config.prod.yml si se ejecuta en modo de producción). Recomendamos comenzar en "modo de desarrollo" (config.dev.yml) ya que este modo le permite ver sus cambios inmediatamente en un navegador sin una reconstrucción completa de la interfaz de usuario: consulte el siguiente paso.
Formato para 7.2 o superior (config.*.yml)
# En este ejemplo, solo mostramos un tema habilitado. Es posible habilitar múltiples (ver nota a continuación) temas:
Formato para 7.1 o 7.0 (environment.*.ts)
// En este ejemplo, solo mostramos un tema habilitado. Es posible habilitar múltiples (ver nota a continuación) temas: [{
name: 'mydspacesite'
},
]
/**
Linea a comentar
*/
Verifique su configuración iniciando la interfaz de usuario (idealmente en modo Dev): en este punto, debe verificar la configuración básica que ha hecho que todo "funcione". Recomendamos hacer el trabajo de su tema mientras ejecuta la interfaz de usuario en "modo de desarrollo", ya que la interfaz de usuario se reiniciará automáticamente cada vez que guarde un nuevo cambio. Esto le permitirá ver rápidamente el impacto de cada cambio en su navegador.
# Comience en modo dev (que usa config.dev.yml)
# Start in dev mode (which uses config.dev.yml)
NOTA: El "nombre" utilizado es el nombre de la carpeta del tema, por lo que el ejemplo es para habilitar un tema src/themes/mydspacesite/globalmente. También debe comentar el tema "dspace" predeterminado, si tiene la intención de reemplazarlo por completo.
NOTA n.º 2: también puede optar por habilitar varios temas para su sitio e incluso especificar un tema diferente para diferentes comunidades, colecciones, elementos o rutas de URL. Consulte Configuración de la interfaz de usuario para obtener más detalles sobre "Configuración del tema"
yarn start:dev
En este punto, puede comenzar a realizar cambios en su tema. Consulte las siguientes secciones para ver ejemplos de cómo realizar cambios comunes.
Los cambios en las variables o estilos globales de Bootstrap se aplicarán a todas las páginas/componentes de Angular en todo el sitio.
Cambios de estilo globales: todos los cambios de estilo globales se pueden realizar en la carpeta styles de su tema (p. ej src/themes/mydspacesite/styles). Hay cuatro archivos principales en esa carpeta:
_theme_sass_variable_overrides.scss- Puede usarse para anular las variables Sass predeterminadas de Bootstrap. Este es el archivo que quizás desee utilizar para la mayoría de los cambios de estilo. Hay una gran cantidad de variables de Bootstrap disponibles que controlan todo, desde las fuentes, los colores y el estilo base para todos los componentes web de Bootstrap. Para obtener una lista completa de las variables de Bootstrap que puede anular en este archivo, consulte el node_modules/bootstrap/scss/_variables.scss archivo (que se instala en su directorio de origen cuando ejecuta "yarn install"). También se puede encontrar más información en la documentación de Bootstrap Sass en https://getbootstrap.com/docs/4.0/getting-started/theming/#sass
_theme_css_variable_overrides.scss- Puede usarse para anular las variables CSS predeterminadas de DSpace. La interfaz de usuario de DSpace utiliza variables CSS para todos sus componentes. Todas estas variables comienzan con "--ds-*", y se enumeran en src/styles/_custom_variables.scss. También puede usar este archivo para agregar sus propias variables CSS personalizadas que desea usar para su tema. Si crea variables personalizadas, evite nombrarlas con un prefijo "--ds-*" o "--bs-*", ya que están reservados para las variables DSpace y Bootstrap.
_global-styles.scss- Puede usarse para modificar el CSS/SCSS global del sitio. Este archivo se puede usar para anular el estilo global predeterminado contenido en src/styles/_global-styles.scss. Tenga en cuenta que muchos estilos se pueden cambiar más rápidamente simplemente actualizando una variable en uno de los archivos "*_variable_overrides.scss" anteriores. Por lo tanto, a menudo es más fácil usarlos primero, siempre que sea posible.
theme.scss- Esto solo importa todos los archivos Sass necesarios para crear el tema. No es necesario modificarlo directamente, a menos que desee agregar nuevos archivos Sass a su tema.
Modificación de la fuente predeterminada: de forma predeterminada, DSpace usa l Bootstrap's "native font stack", que solo usa fuentes de la interfaz de usuario del sistema. Sin embargo, la fuente utilizada en su sitio se puede actualizar rápidamente a través de variables de Bootstrap en el _theme_sass_variable_overrides.scss archivo de su tema.
Una opción es agregar una nueva declaración de importación y modificar la variable "$font-family-sans-serif":
// Importar la font (desde la URL)
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
// Configure Bootstrap para que use esta font (and list a number of backup fonts to use on various systems)
$font-family-sans-serif: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
Si su fuente requiere la instalación de archivos locales, puede hacer lo siguiente
Copie sus archivos de fuentes en la assets/fonts/carpeta de su tema
Cree un nuevo archivo ".scss" específico para su fuente en esa carpeta, por ejemplo assets/fonts/open-sans.scss, y use la regla CSS "@font-face" para cargar esa fuente:
Luego, importe ese nuevo archivo "open-sans.scss" y utilícelo en la variable "$font-family-sans-serif"
Tenga en cuenta que, dado que cambiar la fuente solo requiere ajustar las variables de Bootstrap Sass, existen muchas guías de Bootstrap que pueden ayudarlo a realizar cambios más avanzados.
Modificación del esquema de color predeterminado: los colores utilizados en su sitio se pueden actualizar rápidamente a través de variables de Bootstrap en el _theme_sass_variable_overrides.scss archivo de su tema.
Nuevamente, puede usar variables Bootstrap completamente para ajustar los esquemas de color. Consulte la documentación de Bootstrap Theming Colors
Se puede encontrar una lista de todas las variables de color de Bootstrap en el node_modules/bootstrap/scss/_variables.scssarchivo
Se pueden encontrar ejemplos adicionales en el tema "dspace" listo para usar, que ajusta ligeramente los colores predeterminados de Bootstrap tanto para la accesibilidad como para que coincidan con el logotipo de DSpace.
Cualquier cambio requiere reconstruir su interfaz de usuario. Si está ejecutando en "modo desarrollador" (inicio de hilo: desarrollador), la interfaz de usuario se reiniciará automáticamente cada vez que se detecten cambios.
Propiedades personalizadas de CSS frente a variables SASS
La compatibilidad con el cambio de tema en tiempo de ejecución requiere que los componentes utilicen propiedades personalizadas de CSS (que varían en tiempo de ejecución) en lugar de variables SASS (que se fijan en el momento de la compilación). Por lo tanto, las variables SASS no estarán definidas en las hojas de estilo de los componentes individuales. Las variables de Bootstrap SASS se asignan a las propiedades de CSS para su uso en estos lugares. Por ejemplo, $red se asigna --bs-redy se puede hacer referencia a él como var("--bs-red").
Copie su logotipo en la assets/images/carpeta de su tema. Todo lo que se encuentre en esta carpeta de temas se implementará en la /assets/[theme-name]/images/ruta URL.
Edita el app/header/header.component.tsarchivo de tu tema. Cambie la propiedad "templateUrl" que su tema está usando la copia local de "header.component.html"
header.component.ts
La versión del header.component.html archivo de su tema estará vacía de forma predeterminada. Copie el código HTML predeterminado desde src/app/header/header.component.htmlsu versión de este archivo.
Luego, modifique su copia de header.component.html para usar su logotipo. En este ejemplo, asumimos que el nombre de su tema es "mytheme" y el archivo del logotipo se llama "my-logo.svg"
¡Obviamente, también puede hacer modificaciones adicionales al HTML del encabezado en este archivo! También verá que el encabezado hace referencia a varios otros componentes de la interfaz de usuario de DSpace (por ejemplo, <ds-search-navbar> es el icono de búsqueda en el encabezado). Puede comentar fácilmente estas etiquetas para deshabilitarlas o moverlas para cambiar el lugar en el que aparece ese componente en el encabezado.
Cualquier cambio requiere reconstruir su interfaz de usuario. Si está ejecutando en "modo desarrollador" "dev mode" (yarn start:dev), la interfaz de usuario se reiniciará automáticamente cada vez que se detecten cambios.
NOTA: si tiene un tema basado en el tema "dspace", tenga en cuenta que el tema coloca el logotipo del encabezado en dos ubicaciones. Esto permite que el tema "dspace" admita un encabezado de una sola línea (mientras que el encabezado del tema "personalizado" es de varias líneas):
El componente de encabezado ( como se describe anteriormente ) solo se usa en las páginas de perfil de usuario
El componente Navbar ( src/app/navbar/navbar.component.html) se usa en cualquier otro lugar. El componente de barra de navegación se puede personalizar de la misma manera que el componente de encabezado. Simplemente edite la ruta del logotipo en "navbar.component.html".
Primero, querrá decidir si desea modificar solo el HTML del pie de página, o los estilos del pie de página (CSS/Sass), o ambos.
Si desea modificar el HTML, deberá crear una copia de "footer.component.html" en su tema, donde colocará sus cambios.
Si desea modificar los estilos, deberá crear una copia de "footer.component.scss" en su tema, donde colocará sus cambios.
Edita el app/footer/footer.component.tsarchivo de tu tema. Intercambie las propiedades "templateUrl" y "styleUrls", según las que desee modificar en su tema.
footer.component.ts
@Component({ selector: 'ds-footer', // If you want to modify styles, then... // Uncomment the styleUrls which references the "footer.component.scss" file in your theme's directory // and comment out the one that references the default "src/app/footer/footer.component.scss" styleUrls: ['footer.component.scss'], //styleUrls: ['../../../../app/footer/footer.component.scss'], // If you want to modify HTML, then... // Uncomment the templateUrl which references the "footer.component.html" file in your theme's directory // and comment out the one that references the default "src/app/footer/footer.component.html" templateUrl: 'footer.component.html' //templateUrl: '../../../../app/footer/footer.component.html' })Ahora, según lo que desee modificar, deberá actualizar la copia de su tema footer.component.html o footer.component.scss o ambos.
Para cambiar el HTML del pie de página: la versión del footer.component.html archivo de su tema estará vacía de manera predeterminada. Copie el código HTML predeterminado desde src/app/footer/footer.component.html su versión de este archivo.
Para cambiar los estilos de pie de página: la versión del footer.component.scss archivo de su tema estará vacía de forma predeterminada. Copie el código Sass predeterminado desde src/app/footer/footer.component.scss su versión de este archivo.
Modifique el HTML o Sass como mejor le parezca.
Si desea agregar imágenes, agréguelas a la assets/images carpeta de su tema. Luego haga referencia a ellos en la /assets/[theme-name]/images/ URL path.
Tenga en cuenta que todas las variables, clases de utilidades y estilos de Bootstrap se pueden usar en estos archivos. Aproveche Bootstrap cuando pueda hacerlo.
DSpace también tiene una opción para mostrar un pie de página de dos niveles, que se está volviendo más común en estos días. Por defecto. DSpace solo muestra un pequeño pie de página en la parte inferior. Pero, puede habilitar un pie de página superior (por encima de ese pie de página predeterminado) agregando esta línea en su tema footer.component.ts
footer.component.ts
export class FooterComponent extends BaseComponent {
// This line will enable the top footer in your theme
showTopFooter = true;
}
Este pie de página superior aparece footer.component.html dentro de un div. Observe el " *ngIf='showTopFooter'", que solo muestra ese div cuando esa variable se establece en "verdadero"
footer.component.html
Cualquier cambio requiere reconstruir su interfaz de usuario. Si está ejecutando en "modo desarrollador" (“dev mode" (yarn start:dev)), la interfaz de usuario se reiniciará automáticamente cada vez que se detecten cambios.
Disponible en 7.2 o superior. En 7.1 o 7.0, la única forma de cambiar el favicon es modificar el src/assets/images/favicon.ico archivo.
Cada tema tiene la capacidad de agregar un conjunto de etiquetas HTML (solo atributos) en la <head> sección de la página. Esto es útil, por ejemplo, para cambiar el favicon según el tema activo. Cada vez que cambia el tema, las etiquetas de encabezado se restablecen. Un tema puede heredar etiquetas de encabezado del tema principal solo si no tiene ninguna etiqueta de encabezado. (Por ejemplo, el tema B amplía el tema A; si el tema B no tiene etiquetas de encabezado, se usarán las etiquetas de encabezado del tema A (si las hay). Sin embargo, si el tema B tiene etiquetas de encabezado, solo se usarán las etiquetas del tema B. .) Si ninguno de los temas en la jerarquía de herencia tiene etiquetas de cabecera configuradas, se utilizarán las etiquetas de cabecera del tema predeterminado (si las hay).
Tenga en cuenta que se establece un favicon codificado simple en caso de que no haya etiquetas de encabezado activas actualmente. El favicon codificado se almacena en . Esto implica que si se agregan etiquetas de encabezado a un tema, el favicon también debe configurarse explícitamente para ese tema, de lo contrario, el comportamiento no está definido. src/assets/images/favicon.ico
En la sección de "temas" de su config/config.*.yml archivo de configuración, agregue (uno o más) "headTags", apuntando al archivo de favicon que desea usar. Por ejemplo:
En 7.2 o superior, cualquier cambio en esta configuración solo requiere reiniciar su sitio (no es necesario reconstruirlo). En 7.1 o 7.0, debe reconstruir su sitio después de modificar favicon.ico.
NOTA: si especifica varios formatos para su favicon (p. ej., favicon.svg y favicon.ico), su navegador seleccionará cuál prefiere (p. ej., Chrome parece preferir SVG sobre ICO). Sin embargo, si desea obligar a todos los navegadores a usar un solo favicon, entonces puede especificar solo un formato de "icono" en su headTags sección.
En primer lugar, querrá decidir si desea modificar solo el HTML de noticias de la página de inicio, los estilos (CSS/Sass) o ambos.
Si desea modificar el HTML, deberá crear una copia de "home-news.component.html" en su tema, donde colocará sus cambios.
Si desea modificar los estilos, deberá crear una copia de "home-news.component.scss" en su tema, donde colocará sus cambios.
Edita el app/home-page/home-news/home-news.component.ts archivo de tu tema. Intercambie las propiedades "templateUrl" y "styleUrls", según las que desee modificar en su tema.
home-news.component.ts
Ahora, según lo que desee modificar, deberá actualizar la copia de su tema home-news.component.html o home-news.component.scss o ambos.
Para cambiar HTML: la versión del home-news.component.html archivo de su tema estará vacía de forma predeterminada. Copie el código HTML predeterminado desde src/app/home-page/home-news/home-news.component.html su versión de este archivo.
Para cambiar estilos: la versión del home-news.component.scss archivo de su tema estará vacía de forma predeterminada. Copie el código Sass predeterminado desde src/app/home-page/home-news/home-news.component.scss su versión de este archivo.
Modifique el HTML o Sass como mejor le parezca.
Si desea agregar imágenes, agréguelas a la assets/images carpeta de su tema. Luego haga referencia a ellos en la /assets/[theme-name]/images/ URL path.
Tenga en cuenta que todas las variables, clases de utilidades y estilos de Bootstrap se pueden usar en estos archivos. Aproveche Bootstrap cuando pueda hacerlo.
Cualquier cambio requiere reconstruir su interfaz de usuario. Si está ejecutando en "modo desarrollador" (dev mode" (yarn start:dev)), la interfaz de usuario se reiniciará automáticamente cada vez que se detecten cambios.
A estas alturas, si ha seguido toda esta guía, ¡notará un patrón! La personalización de componentes específicos de la interfaz de usuario de DSpace requiere solo tres pasos:
Configura tu tema para usar sus copias de archivos: Modifica el correspondiente *.component.ts en tu tema.
Si desea modificar el estilo del componente, reemplace "styleUrls" en ese archivo para señalar la copia de *.component.scss de su tema.
Si desea modificar el componente HTML, reemplace la "plantilla" en ese archivo para que apunte a la copia de *.component.html de su tema.
Copie el código de interfaz de usuario predeterminado en su(s) archivo(s) de tema
Si desea modificar el estilo de los componentes, copie el *.component.scss código predeterminado (de ) en el archivo src/app/ de su tema .component.scss
Si desea modificar el componente HTML, copie el *.component.html código predeterminado (de ) en el archivo src/app/ de su tema .component.html
Modificar esos archivos específicos del tema
Si desea agregar imágenes, agréguelas a la assets/images carpeta de su tema. Luego haga referencia a ellos en la /assets/[theme-name]/images/ruta URL.
Tenga en cuenta que todas las variables, clases de utilidades y estilos de Bootstrap se pueden usar en estos archivos. Aproveche Bootstrap cuando pueda hacerlo.
Recuerde reconstruir la interfaz de usuario después de cada cambio o ejecutar en modo de desarrollo (“dev mode" (yarn start:dev)) mientras trabaja en el tema.
Gran parte del texto (como encabezados y etiquetas) que muestra la interfaz de usuario de DSpace se captura en archivos de traducción (paquete de idiomas) para admitir el uso de DSpace en varios idiomas. Este modelo de soporte multilingüe se denomina internacionalización (abreviado i18n). El conjunto predeterminado de estos archivos i18n se almacena src/assets/i18n y nombra utilizando el código de idioma, al igual en.json5 que la traducción al inglés, fr.json5 la traducción al francés, etc. En cada uno de estos archivos, un conjunto de "claves" se asigna al texto en el idioma dado .
Si desea cambiar el texto que se muestra en la interfaz de usuario, deberá editar los archivos de traducción de i18n. Hay dos enfoques que puede tomar:
Puede editar los src/assets/i18n/*.json5 archivos directamente
Por ejemplo, para cambiar la etiqueta del menú de exploración al ver la interfaz de usuario en inglés (que por defecto es "Todo DSpace"), editaría src/assets/i18n/en.json5 y cambiaría el valor de menu.section.browse_global.
Y/o puede crear un archivo *.json5 separado en su tema que solo enumere las claves que ha cambiado. Esto puede mantener los cambios de idioma en su tema y anulará las claves predeterminadas en los src/assets/i18n/archivos. Sin embargo, es necesaria una configuración específica, consulte las instrucciones de "Enfoque de anulación de tema" a continuación.
El siguiente enfoque de "anulación de tema" para capturar los cambios de i18n dentro de un tema solo se admite en DSpace 7.1 o superior.
Si bien la edición directa de los archivos predeterminados de i18n es efectiva, el enfoque recomendado es capturar los cambios de i18n en su tema. Esto asegura que sus cambios a los valores predeterminados sean fáciles de encontrar y revisar y también elimina el riesgo de perder sus cambios al actualizar a versiones más nuevas de DSpace.
Para capturar los cambios de i18n en su tema, deberá:
Cree un directorio i18n en src/themes/[theme-name]/assets
Para cada idioma que desee actualizar, agregue un archivo al nuevo directorio i18n siguiendo el esquema de nombres en el directorio i18n predeterminado (en.json5 para inglés, fr.json5 para francés, etc.)
En cada archivo de traducción, agregue solo las configuraciones que desea agregar o anular
Hay un ejemplo de esta configuración en el tema personalizado, que puedes encontrar en src/themes/custom/assets/i18n.
Una vez que haya realizado los cambios dentro de su tema, deben aplicarse mediante la ejecución de un script.
En una ventana de terminal, cambie al directorio /scripts
Ejecutar:
yarn merge-i18n -s src/themes/[nombre-del-tema]/assets/i18n
El merge-i18nscript combinará los cambios capturados en su tema con la configuración predeterminada, lo que dará como resultado versiones actualizadas de los archivos i18n predeterminados. Cualquier configuración que haya incluido en su tema anulará la configuración predeterminada. Se agregarán nuevas propiedades. Los archivos se fusionarán según el nombre del archivo, por lo que en.json5 en su tema se fusionará con el archivo en.json5 en el directorio i18n predeterminado.
Ampliación de otros temas.Esto solo es compatible con 7.1 y superior
Los temas pueden extender otros temas usando la configuración "extiende". Consulte Configuración de la interfaz de usuario para obtener más ejemplos.
Extender otro tema significa que heredas todas las configuraciones del tema extendido. Por lo tanto, si el tema actual NO especifica un estilo de componente, sus temas antepasados se verificarán recursivamente para ver sus estilos antes de volver al valor predeterminado. En otras palabras, esta configuración "ampliada" permite que un tema herede todos los estilos/componentes del tema ampliado y solo invalide aquellos estilos/componentes que desee invalidar.
He aquí un ejemplo básico:
Formato para 7.2 o superior (config.*.yml)
themes:# grandchild theme
- name: custom-A
extends: custom-B
handle: '10673/34'
# child theme
- name: custom-B
extends: custom
handle: 10673/2
# default theme
- name: custom
Formato para 7.1 o 7.0 (environment.*.ts)
themes: [
// grandchild theme
{
name: 'custom-A',
extends: 'custom-B',
handle: '10673/34',
},
// child theme
{
name: 'custom-B',
extends: 'custom',
handle: '10673/2',
},
// default theme
{
name: 'custom',
},
],
En los ejemplos anteriores:
Cuando se visualiza el objeto en el identificador '10673/2' (y cualquier objeto secundario), se utilizará el tema 'personalizado-B'. De forma predeterminada, tendrá los mismos estilos que el tema "personalizado" ampliado. Sin embargo, puede anular estilos individuales en su tema 'personalizado-B'.
Cuando se visualiza el objeto en el identificador '10673/34' (y cualquier objeto secundario), se utilizará el tema 'personalizado-A'. De forma predeterminada, su tema general se basará en el tema 'personalizado' (en este caso, un tema "abuelo"). Pero puede anular esos estilos en su tema 'personalizado-B' o tema 'personalizado-A'.
El orden de prioridad es 'personalizado-A', luego 'personalizado-B', luego 'personalizado'. Si un estilo/componente está en 'personalizado-A', se utilizará. De lo contrario, se verificará 'custom-B' y, si está allí, se usará esa versión. Si no está en 'personalizado-A' o 'personalizado-B', entonces se utilizará el estilo/componente de 'personalizado'. Si el estilo/componente no está en NINGUNO de esos temas, se utilizará el estilo predeterminado (tema base).
Si encuentra un componente angular que NO está en su tema pero desea personalizarlo, puede agregarlo a su directorio de temas. Esto implica copiar el componente del tema "Personalizado" en su tema.
Puede agregar/copiar sobre un Directorio de componentes de la siguiente manera:
Primero, copie el directorio del componente angular en cuestión desde la carpeta del tema "Personalizado" (src/themes/custom) a la carpeta de su tema. NOTA: en este momento, no todos los componentes son compatibles con temas. Por lo tanto, si no existe en la carpeta del tema "Personalizado", es posible que no sea posible crear un tema.
Por ejemplo, si desea agregar el componente de pie de página a su tema, puede encontrarlo en el tema "Personalizado" en "src/themes/custom/app/footer".
Copie esa carpeta completa en su carpeta de temas, conservando la misma ruta relativa. Por ejemplo, para agregar el componente de pie de página, copie "src/themes/custom/app/footer" (y todo el contenido) en "src/themes/[your-theme]/app/footer".
Ahora, debe "registrar" esa carpeta en el lazy-theme.module.tsarchivo de su tema. Agregue una importación del nuevo archivo de componente o copie la importación correspondiente de "src/themes/custom/lazy-theme.module.ts". Por ejemplo, la importación del componente de pie de página se vería así:
importar { FooterComponent } desde './app/footer/footer.component';En ese mismo archivo "lazy-theme.module.ts", agregue también este componente importado a la sección "DECLARACIONES". (Nuevamente, puede buscar opcionalmente en "src/themes/custom/lazy-theme.module.ts" para ver cómo se hace). Por ejemplo, el componente de pie de página se agregaría a la lista de DECLARACIONES (no importa el orden de la lista de declaraciones):
Algunos componentes también deben incluirse en el temaeager-theme.module.ts
Los componentes ansiosos deben agregarse a la DECLARATIONSmatriz
Los componentes de entrada deben agregarse a la ENTRY_COMPONENTS matriz
En este punto, debe reconstruir/reiniciar su interfaz de usuario para asegurarse de que nada se haya roto. Si hizo todo correctamente, no se producirán errores de compilación. En términos generales, es mejor agregar componentes uno por uno, reconstruyendo en el medio.
Ahora, puede personalizar su Componente recién agregado siguiendo las instrucciones anteriores " Personalización de otros componentes en su tema ".
Si bien no hay ningún problema en mantener directorios de componentes adicionales sin modificar en su tema, puede ser beneficioso eliminar los directorios de componentes que no han cambiado.
La principal ventaja de mantener su tema simple/pequeño es que puede facilitar futuras actualizaciones. En términos generales, cuantos menos componentes tenga en su tema, es menos probable que su tema necesite modificaciones en una actualización futura (ya que, en general, su tema puede requerir actualizaciones si uno de los componentes a los que hace referencia experimentó cambios estructurales/importantes).
Puede eliminar un directorio de componentes de la siguiente manera:
Primero DEBE eliminar todas las referencias a ese directorio/componente de su tema lazy-theme.module.ts y archivos . eager-theme.module.ts
Por ejemplo, para eliminar el directorio "./app/login-page", querrá encontrar qué componente(s) usa ese directorio en su lazy-theme.module.tsarchivo.
Si busca ese archivo, encontrará esta referencia:
importar { LoginPageComponent } desde './app/login-page/login-page.component';Eso significa que no solo necesita eliminar esa declaración de "importación". También deberá eliminar todas las demás referencias a "LoginPageComponent" en ese mismo lazy-theme.module.tsarchivo. Por lo tanto, también deberá eliminarlo de la sección DECLARACIONES:
Finalmente, elimine el directorio en cuestión de su tema.
En este punto, debe reconstruir/reiniciar su interfaz de usuario para verificar que nada se haya roto. Si hizo todo correctamente, no se producirán errores de compilación.
Si no pudo editar lazy-theme.module.ts correctamente, es posible que vea los errores "No se puede encontrar el módulo [ruta al módulo]" que hacen referencia a los directorios que Angular/Node ya no puede encontrar en su tema. Restaure esos directorios o elimine las referencias de forma lazy-theme.module.tssimilar al paso 1 anterior.
Taller básico "Getting Started with DSpace 7.0" en la conferencia OR2021
Documentación de Bootstrap : la interfaz de usuario de DSpace se esfuerza por cumplir con Bootstrap "listo para usar" tanto como sea posible. Por lo tanto, el conocimiento de Bootstrap es muy beneficioso para personalizar DSpace.
Documentación de Sass : tanto Bootstrap como DSpace usan Sass para mejorar su capacidad de personalizar estilos rápidamente a través de variables, etc. Se recomienda cierta familiaridad con Sass, aunque no es necesario que sea un experto.