Simplify Liferay - Vídeo: Estilizando o Publicador de Conteúdos e Mídias | Método 3 - SAXReaderUtil

Lista de notícias - SAXReaderUtil.ftl

<#if entries?has_content>
	<div class="container"> 
  <#list entries as entry>
		<#assign docXml = saxReaderUtil.read(entry.getAssetRenderer().getArticle().getContent()) />

    <div class="box">
      <h2>
				<#assign title = docXml.selectSingleNode("/root/dynamic-element[@name='titulo']/dynamic-content").getText() />
        ${title} </h2>
      <p>
				<#assign author = docXml.selectSingleNode("/root/dynamic-element[@name='autor']/dynamic-content").getText() />
        ${author}
      </p>
      <p>
				<#assign date = docXml.selectSingleNode("/root/dynamic-element[@name='data']/dynamic-content").getText() />
        ${date}
      </p>
    </div>
  </#list>
  </div>
</#if>


<style>

.container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    align-content: space-between;
    gap: 30px 10px;
}

.container .box {
    border-radius: 5px;
    padding: 30px;
    border-top: 3px solid var(--red);
    box-shadow: 0px 15px 40px -20px hsl(229deg 6% 66%);
    transition: 0.25s;

    width: 500px;
    height: 100%;
    flex: 0 0 32%;
}

.container .box:hover {
    box-shadow: 0px 30px 40px -20px hsl(229deg 6% 66%);
}

.container .box p {
    color: hsl(229, 6%, 66%);
}

.container h2 {
    color: hsl(234, 12%, 34%);
    font-weight: 600;
}

</style>