Começaremos personalizando a página inicial. Na pasta /store/blocks do seu tema, você encontrará um arquivo chamadohome.jsonc. Este arquivo determina como os blocos que você pretende usar são organizados. A linguagem usada na composição do layout é simples e baseada em JSON.

Em home.jsonc, você notará um bloco que é padrão em todos os temas, ou seja,store.home. Este bloco determina quais blocos filhos serão exibidos na página inicial.

Vamos usar Rich Text em seu corpo:

Portanto, store.home agora sabe que precisa renderizar um Rich Text. No entanto, ainda não especificamos qual visual esse Rich Text deve adotar. Para isso, precisaremos definir o bloco.

A definição de um bloco deve sempre ser executada separadamente de qualquer outro bloco, no nível de origem do arquivo JSON.

Na definição do bloco, você pode definir seu comportamento e visual. Pontos de personalização devem ser usados ​​para conseguir isso, então vamos começar usando os props de Rich Text:

Leia o Rich Text documentação mais uma vez e vamos definir os adereços que usaremos para personalizar o bloco.

Queremos obter um simples "Olá, Mundo!", E olhando para as props, notamos um chamado: text (Texto escrito em linguagem de marcação a ser exibido). Esta é a prop que determina qual texto será exibido.

Incluindo esta prop, agora temos o seguinte:

Lendo a documentação do Markdown, aprendemos que, para que um texto apareça em itálico, precisamos apenas colocar esse texto entre *

Para centralizar o alinhamento do texto, podemos adicionar a prop textPosition e atribuir a ela o valor CENTER:

Defina um Rich Text em sua página inicial e crie um negrito "Hello, World!" que está alinhado à direita. Faça isso trocando o código já presente no arquivo store/blocks/home.jsonc por este:

Depois de executar o vtex link, seu rich-text deve ficar assim: