Explorando o poder do rich text

This content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.

Introdução

Markdown é uma linguagem de marcação amigável que pode ser convertida de maneira simples para HTML. Nesta lição, veremos como é possível utilizar esta linguagem em nosso bloco Rich Text para customizá-los e criar textos interessantes.

Rich Text com Markdown

Para incluir textos no bloco de rich-text, é necessário utilizar a prop text:


_10"rich-text#home1": {
_10  "props": {
_10    "text": "Meu texto",
_10    "textPosition": "LEFT",
_10    "textAlignment": "LEFT"
_10  }
_10}

A prop text aceita o formato de markdown. Portanto, se você deseja escrever seu texto utilizando essa linguagem, seu código deve ficar semelhante a este:


_10  "rich-text#home1": {
_10    "props": {
_10      "text": "# Meu título h1 \n Escreva aqui um parágrafo \n ## Meu título h2 \n Escreva aqui seu segundo parágrafo \n Inclua aqui uma lista \n - Item 1 \n - Item 2 \n - Item3",
_10      "textPosition": "LEFT",
_10      "textAlignment": "LEFT"
_10    }
_10  }

Dica: Sempre utilize o comando \n para pular linhas ao utilizar markdown na prop text.

Outras propriedades do componente rich-text podem ser encontrados na documentação oficial do Store Framework.

Alterando o estilo e o conteúdo do rich text através de Markdown

Dentro do arquivo about-us.jsonc, troque o texto da rich-text#about-content para que This is VTEX Minimum Theme se torne um header pequeno (h3). Assegure-se que você quebre uma linha depois desse trecho com \n;
Coloque o trecho VTEX Minimum Theme em itálico.

Este é o resultado esperado:

{"base64":" ","img":{"width":1524,"height":619,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":759959,"url":"https://user-images.githubusercontent.com/19495917/90180384-410d4900-dd85-11ea-88b9-3af68e8f3a08.png"}}

Note: Lembre-se de acessar a documentação do Rich Text caso tenha alguma dúvida durante a atividade.

Answer sheet

See answer sheet for about-us.jsonc

about-us.jsonc


_31// store/blocks/about-us.jsonc
_31{
_31  "store.custom#about-us": {
_31    "blocks": ["flex-layout.row#about-us"]
_31  },
_31  "flex-layout.row#about-us": {
_31    "children": ["image#about-us", "flex-layout.col#text-about-us"]
_31  },
_31  "flex-layout.col#text-about-us": {
_31    "children": ["rich-text#about-title", "rich-text#about-content"],
_31    "props": {
_31      "preventVerticalStretch": true
_31    }
_31  },
_31  "rich-text#about-title": {
_31    "props": {
_31      "text": "# About Minimum Theme"
_31    }
_31  },
_31  "rich-text#about-content": {
_31    "props": {
_31      "text": " ### This is the _VTEX Minimum Theme_ \n You can use it to test blocks usage and build your first store from scratch."
_31    }
_31  },
_31  "image#about-us": {
_31    "props": {
_31      "src": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-about-us.png",
_31      "maxHeight": "600px"
_31    }
_31  }
_31}