Administrador personalizado Strapi

Neste guia, veremos como você pode personalizar o painel de administração.

Introdução

Neste exemplo, veremos duas coisas, a primeira será a personalização do painel de administração, atualizando o conteúdo da /admin/ home page. E, pela segunda vez, veremos como atualizar a interface de um plug-in, substituindo o formato da data na exibição da lista do gerenciador de conteúdo.

Antes de tudo, você terá que ler o conceito de personalização , ele ajudará você a entender como personalizar todos os seus aplicativos.

Atualize a página inicial do administrador

Se você estiver seguindo o conceito de personalização, já poderá criar uma pasta ./admin no seu aplicativo.

Alvo para atualizar o arquivo

Em seguida, você deverá investigar o pacote strapi-admin para encontrar o arquivo usado para exibir a página inicial do painel de administração.

Aqui está o container da Home Page que você precisará atualizar.

Ejetar o arquivo

Vamos ejetar esse arquivo para poder personalizá-lo.

atalho - ./admin/src/containers/HomePage/index.js

Nesse novo arquivo, cole o código atual do contêiner da Home Page.

Para executar seu aplicativo, você precisará executar o comando yarn develop --watch-admin.

Se você visitar o administrador, nada será alterado na página inicial. E é normal!

Personalize o arquivo

Para manter esse exemplo realmente simples, reduziremos a Home Page em seu design mais simples.

atalho - ./admin/src/containers/HomePage/index.js

Agora, a página inicial do painel de administração deve conter apenas a frase Olá, World !.

Atualizar o gerenciador de conteúdo

Se você estiver seguindo o conceito de personalização, já poderá criar uma pasta ./extensions/content-manager em seu aplicativo.

* DICA 

Para poder ver a atualização, você precisa ter um Tipo de Conteúdo que possua um atributo de data.

Alvo para atualizar o arquivo

Em seguida, você deverá investigar o pacote strapi-plugin-content-manager para encontrar o arquivo usado para formatar a data da exibição em lista.

Aqui está o componente Row que você precisará atualizar.

Ejetar o arquivo

Vamos ejetar o arquivo para poder personalizá-lo.

atalho - ./extensions/content-manager/admin/src/components/CustomTable/Row.js

Nesse novo arquivo, cole o código atual do componente Row.

Para executar seu aplicativo, você precisará executar o comando yarn develop --watch-admin.

Se você visitar a exibição da lista de entradas do seu tipo de conteúdo, nada será alterado. E é normal!

Personalize o arquivo

No nosso exemplo, queremos alterar o formato da data. Temos que encontrar neste arquivo a linha que gerencia o formato da data.

Aqui está o código que você precisa encontrar:

Agora vamos substituir .format ('dddd, MMMM Do YYYY'); por formato ('AAAA / MM / DD');

E tada, a data agora será exibida com o novo formato.

Construir o novo administrador

Bem, agora você tem o painel de administração que deseja. Porém, durante todo o processo, o painel de administração foi atualizado no tempo de execução devido ao desenvolvimento do fio de comando --watch-admin.

Se você iniciar seu aplicativo usando yarn start ou yarn develop, o administrador será a versão antiga. Suas atualizações não são aplicadas.

Para fazer isso, é necessário criar o painel de administração usando o seguinte comando build do yarn.