Guia de introdução do desenvolvedor para criação WYSIWYG com o Edge Delivery Services edge-dev-getting-started
Este guia colocará você em funcionamento com um novo site do Adobe Experience Manager usando o Edge Delivery Services e o Editor universal para criação de conteúdo WYSIWYG.
Pré-requisitos prerequisites
Antes de começar este guia, você já deve estar familiarizado com as noções básicas do e ter acesso ao Edge Delivery Services, incluindo:
- Você concluiu o tutorial do Edge Delivery Service.
- Você tem acesso a uma sandbox da AEM Cloud Service.
- Você habilitou o Editor Universal no mesmo ambiente de sandbox.
Escolha o editor direito editor-choice
O AEM oferece dois editores de conteúdo diferentes e a escolha de qual usar depende da sua situação.
- Editor Universal - Esta deve ser a opção padrão para novos sites.
- Editor de páginas do AEM - Isso deve ser escolhido para uma migração existente do AEM Sites para o Edge Delivery Services.
Este guia tem como foco projetos AEM em Edge Delivery Services usando o Editor universal. Consulte o documento Uso do Edge Delivery Services com AEM para obter mais detalhes sobre a escolha do editor correto e a migração de sites de AEM existentes para o Edge Delivery Services.
Conceitos principais ao desenvolver para Edge Delivery Services core-concepts
O Edge Delivery Services é baseado em torno do conceito de blocos. O AEM vem com uma biblioteca abrangente de blocos predefinidos, que podem ser estendidos para atender às necessidades do seu projeto. O código para projetos Edge Delivery Services é gerenciado no GitHub.
Blocos blocks
Os blocos são a parte mais fundamental de uma página entregue pelo Edge Delivery Services. Um bloco encapsula o estilo e o código que direciona um componente lógico de uma página de conteúdo.
O AEM fornece blocos padrão como parte do produto dentro da placa do projeto. Esses blocos incluem cabeçalho, texto, imagens, links, listas, etc.
Edge Delivery Services e GitHub github-edge
O Edge Delivery usa o GitHub para que você possa gerenciar e implantar o código diretamente do seu repositório GitHub.
Seus autores podem criar conteúdo usando a Criação baseada em documento ou conteúdo no AEM com o Universal Editor. Os desenvolvedores podem personalizar a funcionalidade do site usando CSS e JavaScript no GitHub, independentemente de como os autores criam seu conteúdo.
Os sites são criados automaticamente para cada uma de suas ramificações, da pré-visualização de conteúdo à produção. Todos os recursos que você coloca no repositório GitHub estão disponíveis no seu site sem um processo de criação.
Introdução à criação e aos Edge Delivery Services WYSIWYG getting-started
Depois de atender aos pré-requisitos e ter optado por usar o Editor Universal, você poderá começar a usar o seu próprio projeto.
Criar seu projeto do GitHub create-github-project
Primeiro, será necessário criar um novo projeto no GitHub, com base no modelo de Adobe.
-
Navegue até
https://github.com/adobe-rnd/aem-boilerplate-xwalke clique em Usar este modelo e selecione Criar um novo repositório.- Você precisará fazer logon no GitHub para ver essa opção.
-
Por padrão, o repositório será atribuído a você. Altere isso conforme necessário, forneça um nome e descrição do repositório e clique em Criar repositório.
-
Em uma nova guia no mesmo navegador, navegue até
https://github.com/apps/aem-code-synce clique em Configurar.
-
Clique em Configurar para a organização em que você criou seu novo repositório na etapa anterior.
-
Na página GitHub da Sincronização de Código AEM em Acesso ao repositório, selecione Somente selecionar repositórios, selecione o repositório criado na etapa anterior e clique em Salvar.
-
Depois que a Sincronização de código AEM estiver instalada, você receberá uma tela de confirmação. Retorne à guia do navegador do novo repositório.
-
Clique no arquivo
fstab.yamlpara abri-lo e, em seguida, no ícone Editar este arquivo para editá-lo.
-
Edite o arquivo
fstab.yamlpara atualizar o ponto de montagem do projeto. Substitua a URL padrão dos documentos do Google pela URL da sua instância de criação do AEM as a Cloud Service e clique em Confirmar alterações….https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main- Alterar o ponto de montagem informa ao Edge Delivery Services onde localizar o conteúdo do site.
-
Adicione uma mensagem de confirmação conforme desejado e clique em Confirmar alterações, confirmando-as diretamente na ramificação
main.
-
Retorne à raiz do seu repositório, clique em
paths.jsone depois no ícone Editar este arquivo.
-
O mapeamento padrão usará o nome do repositório. Atualize o mapeamento padrão conforme necessário para seu projeto com
/content/<site-name>/:/e clique em Confirmar alterações….- Forneça o seu próprio
<site-name>. Você precisará dele em uma etapa posterior. - Os mapeamentos informam ao Edge Delivery Services como mapear o conteúdo no repositório AEM para o URL do site.
- Forneça o seu próprio
-
Adicione uma mensagem de confirmação conforme desejado e clique em Confirmar alterações, confirmando-as diretamente na ramificação
main.
Criar e editar um novo site AEM create-aem-site
Agora que você tem um projeto GitHub, deve criar um novo site AEM que o projeto possa usar.
-
Baixe a criação WYSIWYG mais recente com o modelo de site Edge Delivery Services do GitHub em
https://github.com/adobe-rnd/aem-boilerplate-xwalk/releases. -
Entre na sua instância de criação do AEM as a Cloud Service e navegue até o console Sites e toque ou clique em Criar -> Site a partir de modelo.
-
Na guia Selecionar um modelo de site do assistente de criação de site, clique no botão Importar para importar um novo modelo.
-
Faça upload da criação WYSIWYG com o modelo de site Edge Delivery Services que você baixou do GitHub.
- O template deve ser carregado apenas uma vez. Depois de carregado, ele pode ser reutilizado para criar sites adicionais.
-
Depois que o modelo for importado, ele aparecerá no assistente. Toque ou clique para selecioná-lo e, em seguida, toque ou clique em Avançar.
-
Forneça os campos a seguir e toque ou clique em Criar.
- Título do site - Adicione um título descritivo para o site.
- Título do site - Use o
<site-name>que você definiu na etapa anterior. - URL do GitHub - Use a URL do projeto GitHub criado na etapa anterior.
-
O AEM confirma a criação do site com uma caixa de diálogo. Toque ou clique em OK para ignorar.
-
No console de sites, navegue até o
index.htmldo site recém-criado e toque ou clique em Editar na barra de ferramentas.
-
O Editor universal é aberto em uma nova guia. Talvez seja necessário tocar ou clicar em Entrar com o Adobe para autenticar e editar sua página.
Agora você pode editar seu site usando o Editor universal. Consulte a documentação do Universal Editor para obter mais informações.
Publicar seu novo site publishing
Quando terminar de editar o novo site usando o Editor universal, você poderá publicar o conteúdo.
-
No console de sites, selecione todas as páginas criadas para o novo site e toque ou clique em Publicação rápida na barra de ferramentas.
-
Toque ou clique em Publish na caixa de diálogo de confirmação para iniciar o processo.
-
Abra uma nova guia no mesmo navegador e navegue até o URL do novo site.
https://main--<repository-name>--<owner>.hlx.page
-
Veja seu conteúdo publicado.
Próximas etapas next-steps
Agora que você tem um projeto WYSIWYG em funcionamento com o Edge Delivery Services, pode começar a criar e estilizar seus próprios blocos.
Consulte o guia Criação de Blocos Instrumentados para uso com o Editor Universal para obter mais informações.