Intlayer Sistema de Gerenciamento de Conteúdo (CMS) Documentação

O Intlayer CMS é um aplicativo que permite externalizar o conteúdo de um projeto Intlayer.

Para isso, o Intlayer introduz o conceito de 'dicionários distantes'.

Entendendo os dicionários distantes

O Intlayer faz uma distinção entre dicionários 'locais' e 'distantes'.

• Um dicionário 'local' é um dicionário declarado no seu projeto Intlayer. Como o arquivo de declaração de um botão ou sua barra de navegação. Externalizar seu conteúdo não faz sentido neste caso, pois este conteúdo não deve mudar frequentemente.

• Um dicionário 'distante' é um dicionário gerenciado através do Intlayer CMS. Ele pode ser útil para permitir que sua equipe gerencie seu conteúdo diretamente no site e também tem como objetivo usar recursos de teste A/B e otimização automática de SEO.

Editor visual vs CMS

O Editor Visual Intlayer é uma ferramenta que permite gerenciar seu conteúdo em um editor visual para dicionários locais. Uma vez feita uma alteração, o conteúdo será substituído na base de código. Isso significa que o aplicativo será reconstruído e a página será recarregada para exibir o novo conteúdo.

Em contraste, o Intlayer CMS é uma ferramenta que permite gerenciar seu conteúdo em um editor visual para dicionários distantes. Uma vez feita uma alteração, o conteúdo não impactará sua base de código. E o site exibirá automaticamente o conteúdo alterado.

Integração

Para mais detalhes sobre como instalar o pacote, veja a seção relevante abaixo:

Integração com Next.js

Para integração com Next.js, consulte o guia de configuração.

Integração com Create React App

Para integração com Create React App, consulte o guia de configuração.

Integração com Vite + React

Para integração com Vite + React, consulte o guia de configuração.

Configuração

No arquivo de configuração do Intlayer, você pode personalizar as configurações do CMS:

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... outras configurações
  editor: {
    /**
     * Obrigatório
     *
     * A URL do aplicativo.
     * Esta é a URL direcionada pelo editor visual.
     */
    applicationURL: process.env.INTLAYER_APPLICATION_URL,

    /**
     * Obrigatório
     *
     * O ID do cliente e o segredo do cliente são necessários para habilitar o editor.
     * Eles permitem identificar o usuário que está editando o conteúdo.
     * Eles podem ser obtidos criando um novo cliente no Intlayer Dashboard - Projetos (https://intlayer.org/dashboard/projects).
     * clientId: process.env.INTLAYER_CLIENT_ID,
     * clientSecret: process.env.INTLAYER_CLIENT_SECRET,
     */
    clientId: process.env.INTLAYER_CLIENT_ID,
    clientSecret: process.env.INTLAYER_CLIENT_SECRET,

    /**
     * Opcional
     *
     * Caso você esteja hospedando o Intlayer CMS, pode definir a URL do CMS.
     *
     * A URL do Intlayer CMS.
     * Por padrão, está definido como https://intlayer.org
     */
    cmsURL: process.env.INTLAYER_CMS_URL,

    /**
     * Opcional
     *
     * Caso você esteja hospedando o Intlayer CMS, pode definir a URL do backend.
     *
     * A URL do backend do Intlayer CMS.
     * Por padrão, está definido como https://back.intlayer.org
     */
    backendURL: process.env.INTLAYER_BACKEND_URL,
  },
};

export default config;

Se você não tiver um ID de cliente e um segredo de cliente, pode obtê-los criando um novo cliente no Intlayer Dashboard - Projetos.

Para ver todos os parâmetros disponíveis, consulte a documentação de configuração.

Usando o CMS

Enviar sua configuração

Para configurar o Intlayer CMS, você pode usar os comandos do intlayer CLI.

npx intlayer config push

Se você usar variáveis de ambiente no arquivo intlayer.config.ts, pode especificar o ambiente desejado usando o argumento --env:

npx intlayer config push --env production

Este comando carrega sua configuração para o Intlayer CMS.

Enviar um dicionário

Para transformar seus dicionários locais em um dicionário distante, você pode usar os comandos do intlayer CLI.

npx intlayer dictionary push -d my-first-dictionary-key

Se você usar variáveis de ambiente no arquivo intlayer.config.ts, pode especificar o ambiente desejado usando o argumento --env:

npx intlayer dictionary push -d my-first-dictionary-key --env production

Este comando carrega seus dicionários de conteúdo iniciais, tornando-os disponíveis para busca assíncrona e edição através da plataforma Intlayer.

Editar o dicionário

Então, você poderá ver e gerenciar seu dicionário no Intlayer CMS.

Hot reloading

O Intlayer CMS é capaz de recarregar os dicionários automaticamente quando uma alteração é detectada.

Sem o hot reloading, será necessário um novo build do aplicativo para exibir o novo conteúdo.

Ao ativar a configuração hotReload, o aplicativo substituirá automaticamente o conteúdo atualizado quando detectado.

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... outras configurações
  editor: {
    // ... outras configurações

    /**
     * Indica se o aplicativo deve recarregar automaticamente as configurações de localidade quando uma alteração for detectada.
     * Por exemplo, quando um novo dicionário é adicionado ou atualizado, o aplicativo atualizará o conteúdo exibido na página.
     *
     * Como o hot reloading requer uma conexão contínua com o servidor, ele está disponível apenas para clientes do plano `enterprise`.
     *
     * Padrão: false
     */
    hotReload: true,
  },
};

export default config;

O hot reloading substitui o conteúdo tanto no lado do servidor quanto no lado do cliente.

• No lado do servidor, você deve garantir que o processo do aplicativo tenha acesso de gravação ao diretório .intlayer/dictionaries.
• No lado do cliente, o hot reloading permite que o aplicativo recarregue o conteúdo no navegador, sem a necessidade de recarregar a página. No entanto, este recurso está disponível apenas para componentes clientes.

Como o hot reloading requer uma conexão contínua com o servidor usando um EventListener, ele está disponível apenas para clientes do plano enterprise.

Depuração

Se você encontrar problemas com o CMS, verifique o seguinte:

• O aplicativo está em execução.

• As configurações do editor estão corretamente definidas no arquivo de configuração do Intlayer.

  • Campos obrigatórios:
    • A URL do aplicativo deve corresponder à que você definiu na configuração do editor (applicationURL).
    • A URL do CMS.

• Certifique-se de que a configuração do projeto foi enviada para o Intlayer CMS.

• O editor visual usa um iframe para exibir seu site. Certifique-se de que a Política de Segurança de Conteúdo (CSP) do seu site permite a URL do CMS como frame-ancestors ('https://intlayer.org' por padrão). Verifique o console do editor para quaisquer erros.