logo

Paleta - Deixe colorido🎨

Palette — Construtor visual de páginas. Não precisa ser designer.

Demonstração ao vivo Baixar Palette

Scroll
  1. Início

Exportar/Importar páginas do Palette do site local para a Produção ⚡

O Palette permite montar uma página visualmente, mas mover essa página para outro site não é apenas copiar texto: uma página referencia mídia, arquivos de imagem e as versões exatas dos componentes com que foi construída. O Palette Pro empacota tudo isso em um único pacote para que a página chegue à produção como uma cópia pixel-perfect.

Neste passo a passo, construímos uma página de demonstração no site local (drupalbook.local) que mostra todos os estilos do Quote Slider, depois exportamos e importamos no site de produção (drupalbook.org).

A página que estamos movendo

Nossa página empilha cinco Quote Sliders, um por estilo de item — Persona, Company, Persona with small icon, With square image e With frame and background image. Cada slider contém três depoimentos.

Quote Slider, estilo Persona: eyebrow, título, avatar, citação e autor.
O estilo Persona — um depoimento limpo com um avatar redondo do autor.
Quote Slider, estilo With square image: retrato grande com círculo de destaque e padrão pontilhado.
O estilo With square image — um layout editorial com uma forma de destaque.
Quote Slider, Company style.
Estilo Company
Quote Slider, With frame and background image style.
Estilo With frame and background image

Antes de começar

Ambos os sites devem corresponder Palette Pro carries the component schemas a page pins, but not the components' code. So the local and production sites need:

  • Os mesmos módulos habilitados: canvas, canvas_palette, palette_pro.
  • The same version of the component provider (canvas_palette / your custom components) so the page renders identically.
  • Core media enabled (a dependency of Palette Pro).

Step 1 Exportar a página no seu site local

Há duas maneiras de gerar o pacote. Ambas criam o mesmo arquivo .json.

Opção A — pelo editor Canvas

Open the page in the Canvas editor. In the left side menu, click the Palette button (the palette icon) and choose Export. Your browser downloads canvas-page-<id>.json — the complete bundle.

Canvas editor with the Palette side-menu button open, showing Export and Import.
The Palette → Export menu in the Canvas editor. The same menu also holds Import.

Opção B — pela linha de comando (Drush)

Handy for scripting or air-gapped moves. Run it from the site root; find the page ID in Content → Pages or the editor URL.

# No site LOCAL (drupalbook.local)
drush palette-sync:export 5 --out=quote-slider.json
# [OK] Página 5 "Quote Slider — all styles" exportada: 20 componentes, 3 mídias, 3 arquivos -> quote-slider.json

O que há dentro do pacote

Ao contrário da CLI padrão do Canvas, o pacote do Palette Pro é autocontido. Tudo é correspondido por UUID, então reimportar atualiza no lugar em vez de duplicar.

ParteO que ele carrega
PageTítulo, status, alias de URL e a árvore de componentes (referências de mídia tokenizadas por UUID).
Component versionsO schema exato de cada versão de componente fixada pela página.
MediaCada entidade de mídia referenciada.
FilesCada arquivo referenciado mais seus bytes brutos — não é necessário copiar arquivos separadamente.

Step 2 Importar a página na produção

Copie quote-slider.json para o servidor de produção (ou tenha-o na sua máquina para o upload pelo editor). Depois importe em drupalbook.org.

Opção A — pelo editor Canvas

Abra qualquer página no editor Canvas na produção, clique no botão Palette e escolha Import (veja o menu acima). Escolha o arquivo .json — o Palette Pro recria os arquivos, a mídia, as versões dos componentes e a página, e então abre a página importada no editor.

Opção B — pela linha de comando (Drush)

# Na PRODUÇÃO (drupalbook.org)
drush palette-sync:import quote-slider.json
# [OK] Página "Quote Slider — all styles" importada como canvas_page/12 (criada): 3 novas mídias, 3 novos arquivos.

# Reexecutar atualiza a mesma página no lugar (correspondida por UUID). Use --new para bifurcar uma cópia nova:
drush palette-sync:import quote-slider.json --new

Opção C — puxe pelo canal (sem arquivo para mover)

O Palette Pro também pode conectar a produção diretamente ao seu site de origem. Na fonte, abra as configurações do canal e escolha como ele é protegido (token ou HTTP Basic Auth).

Página de configurações do canal Palette Sync com opções de autenticação.
Configuration → Web services → Palette Sync channel — expõe as páginas do site de origem.

No destino, adicione um remoto apontando para a fonte e use Pull pages: você obtém uma lista paginada das páginas da fonte, cada uma com um selo Nova / Precisa de atualização / Sincronizada, e puxa as que quiser.

Listagem administrativa dos remotos do Palette Sync.
Configuration → Web services → Palette Sync remotes — conecte-se a uma fonte e puxe páginas.

Step 3 Verificar na produção

  1. Reconstrua os caches: drush cr.
  2. Visite a página no seu alias (/quote-slider-styles) e confirme que cada slider, imagem e estilo é renderizado.
  3. Abra um Quote Slider e verifique se as imagens dos autores são carregadas — isso prova que o remapeamento arquivo → mídia → árvore funcionou de ponta a ponta.
Done Os cinco estilos de Quote Slider agora são renderizados na produção exatamente como eram localmente — árvore de componentes, versões fixadas, mídia e arquivos todos transportados.

Notas e pegadinhas

Keep the component versions in sync Se a produção rodar uma versão diferente dos componentes em relação ao seu site local, a página ainda importa mas pode não ficar pixel-idêntica. Alinhe as versões dos módulos nos dois lados.
  • Idempotent by UUID. Import the same file twice and the page, media and files are updated, never duplicated. Edit the page locally, re-export, re-import — production converges.
  • Bundle format. The bundle is tagged palette_pro:1. Both sites must run a matching Palette Pro to read it.
  • Missing components. Se um componente da página não estiver instalado na produção, a importação registra um aviso e essa parte pode não ser renderizada — instale o módulo provedor e reimporte.

Screenshots captured on the local site (drupalbook.local); the Canvas editor and Palette Sync UI are identical on production.