Usando mais de um tema no DSpace 7.6

DSpace
#1

Bom dia, pessoal

Me foi pedido para alterar a página do item simplificado de uma comunidade específica. Pesquisei na documentação e encontrei isso aqui.

Estou com uma dúvida sobre como usar, ao mesmo tempo, mais de um tema.

Inicialmente, pensei em fazer uma cópia do diretório [dspace-angular]/src/themes/custom
para [dspace-angular]/src/themes/meu-novo-tema. O problema é que esse diretório é gigante, ele contém todos os componentes disponíveis. Não faria sentido copiar tudo, pois apenas um componente deve ser alterado.

Vi que é possível remover diretórios do tema e torná-lo mais enxuto, porém não sei como ficariam os arquivos lazy-theme.modules.ts e o eager-theme-module.ts com apenas um componente em uso.

1 curtida
#2

@robertogb03 boa tarde,

Nesse caso, você não precisa copiar todos os arquivos do tema custom somente aqueles que você vai customizar. Sobre os arquivos lazy-theme.module.ts e eager-theme.module.ts, eles podem sim ser adaptados para importar apenas os componentes que você quer alterar. O importante é garantir que importe o RootModule e os módulos necessários que está usando. Por exemplo, se o seu componente usa TranslateModule ou CommonModule, eles devem ser importados.

No lazy-theme.module.ts, você declara e importa apenas os componentes que está usando (seus módulos). Não precisa listar os outros componentes do tema custom.
O eager-theme.module.ts só precisa conter os componentes que são carregados logo na inicialização (entry components). Se o seu componente não é carregado imediatamente no load da aplicação, ele pode ficar apenas no lazy.

Um ponto importante é que se criar um novo tema com nome diferente precisa incluir ele na configuração. Por exemplo, se criar um tema em dspace-angular/src/themes/ chamado seutema

Em dspace-angular/angular.json aproximadamente linha 57 dentro de

“styles”: [ adiciona:

{
   "input": "src/themes/seutema/styles/theme.scss",
   "inject": false,
   "bundleName": "seutema-theme"
},

Adiciona também em dspace-angular/config/config.prod.yml

themes:
  - name: seutema

Em dspace-angular/src/themes/eager-themes.module.ts criar module seutema:

import { NgModule } from '@angular/core';
import { EagerThemeModule as DSpaceEagerThemeModule } from './dspace/eager-theme.module';
import { EagerThemeModule as SeuTemaEagerThemeModule } from './seutema/eager-theme.module';
// import { EagerThemeModule as CustomEagerThemeModule } from './custom/eager-theme.module';

/**
 * This module bundles the eager theme modules for all available themes.
 * Eager modules contain components that are present on every page (to speed up initial loading)
 * and entry components (to ensure their decorators get picked up).
 *
 * Themes that aren't in use should not be imported here so they don't take up unnecessary space in the main bundle.
 */
@NgModule({
  imports: [
    DSpaceEagerThemeModule,
    SeuTemaEagerThemeModule,
    // CustomEagerThemeModule,
  ],
})
export class EagerThemesModule {
}
2 curtidas
#3

Bom dia, Mirele. Obrigado pelo retorno.

Eu tentei usar o tema dspace como base para o novo tema. Excluí os 4 componentes que vêm com ele e adicionei o componente da página do item simplificado (UntypedItemComponent). Recebi erros na hora da build, provavelmente por falta de módulos.

O que eu fiz:

  • Adicionei o tema nos arquivos [dspace-angular]/angular.json e [dspace-angular]/src/themes/eager-themes.module.ts como você mencionou.
  • No arquivo [dspace-angular]/src/themes/meu-novo-tema/eager-theme.module,ts adicionei o import do UntypedItemComponent e, no mesmo arquivo, o adicionei no array ENTRY_COMPONENTS. No tema custom, o UntypedItemComponent está no ENTRY_COMPONENTS.

Como eu poderia ver quais módulos são necessários? Não encontrei na documentação, ao adicionar componentes novos, como ver quais os módulos que eu devo importar junto.

#4

Encontrei mais alguém com problema no UntypedItemComponent. Consegui buildar importando os seguintes módulos:

  • ItemPageModule
  • DsoPageModule
  • ItemSharedModule

O problema agora é outro. Adicionei o novo tema no arquivo [dspace-ui-deploy]/config/config.prod.yml:

themes:
  - name: novotema,
    extends: meutema,
    uiid: '9aa1354f-cd9a-486c-b54b-bc83dcc257ad'
    # ^--- O tema novo é para uma comunidade específica.

  - name: meutema
  # ...

Agora eu sou recebido pela tela avisando que o serviço está fora. Se eu comentar as linhas do tema novo (e restartar o pm2), o serviço volta.

#5

@robertogb03 obrigado por informar como resolveu o problema com UntypedItemComponent. Realmente na documentação não tem uma lista dos módulos necessários do tema.

Sobre o problema para incorporar o seu tema, pode informar os logs de erro do pm2?