@ -217,6 +217,7 @@ O frontend é chamado de Volto. Escrito em react/javascript, é feito para subst
|---|---|
|`package.json`|Use para gerenciar addons|
|`volto.config.js`|Também usado para gerenciar addons|
|`index.ts` ou `index.js` |Ponto para aplicar configuração (`applyConfig`)|
### Receitas
@ -260,29 +261,29 @@ Passos:
#### Instalar Addon
1. Acrescente o addon em `frontend/package.json` .
1. Acrescente o addon em `frontend/packages/<seu addon base>/package .json` .
```
"addons": [
"@kitconcept/volto-light-theme"
],
"dependencies": {
"@plone/volto": "workspace:*",
"@plone/registry": "workspace:*",
"volto-ploneconf": "workspace:*",
"< nome do addon > ": "*"
""@kitconcept/volto-light-theme": "7.0.0-alpha.25"
},
```
2. Acrescente o addon em `frontend/volto.config.js` .
2. Se for um tema, como o `volto-light-theme` , faça-o ser o tema default, em `frontend/volto.config.js` :
```
const addons = ['< nome do addon > ', 'volto-ploneconf'] ;
const theme = '@kitconcept/volto-light-theme' ;
```
> Aparentemente, pode também ser feito no `frontend/package.json` , num item `addons` .
> Não sei qual a maneira mais recomendada
3. No diretório do frontend, use `make install` .
[Documentação no treinamento "Mastering Plone" ](https://training.plone.org/mastering-plone/volto_addon.html#install-an-add-on )
[Documentação" ](https://6.docs.plone.org/volto/development/add-ons/install-an-add-on.html )
> Na documentação, tá um pouco diferente, mas coloquei aqui a forma como aprendemos no treinamento.
#### Utilizando uma API definida no backend
@ -313,6 +314,26 @@ Exemplo: [addon `volto-banner`](https://github.com/eea/volto-banner):
- [Acrescentando o componente no `appExtras` ](https://github.com/eea/volto-banner/blob/master/src/index.js )
- [Usando `react-portal` para posicionar ](https://github.com/eea/volto-banner/blob/master/src/StagingBanner.jsx )
#### Colocando um componente em todas as páginas, com slots
Mais simples, especialmente se estiver usando `volto-light-theme` :
No seu ponto de instalação de configuração (´index.ts´, por exemplo), use:
```
config.registerSlotComponent({
name: 'BarraAcessibilidade',
slot: 'aboveHeader',
component: BarraAcessibilidade,
});
```
[Documentação base ](https://6.docs.plone.org/volto/configuration/slots.html )
[Documentação do volto light theme ](https://6.docs.plone.org/volto/configuration/slots.html )
#### Definindo interface de painel de controle no frontend
A criação de painel de controle normalmente é através de interface no backend e o Volto monta os controles necessários para a edição dos itens desta interface.
