Simplify Liferay - Vídeo: Estilizando o Publicador de Conteúdos e Mídias | Método 2 - Modelo de Conteúdo Web

Lista de notícias.ftl

<div class="container">
<#if entries?has_content>
	<#list entries as curEntry>
		<#assign article = curEntry.getAssetRenderer().getArticle() />
		<@liferay_journal["journal-article"] 
			articleId=article.getArticleId() 
			groupId=article.getGroupId() 
			ddmTemplateKey="your-ddm-template-key"
		    />
	</#list>
</#if>
</div>

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

Noticia Reduzida - Web Content Template.ftl

<div id="${randomNamespace}" class="box">
	<h2>
		<#if (title.getData())??>
			${title.getData()}
		</#if>
	</h2>
	<p>
		<#assign date_Data = getterUtil.getString(date.getData())>

		<#if validator.isNotNull(date_Data)>
			<#assign date_DateObj = dateUtil.parseDate("yyyy-MM-dd", date_Data, locale)>
			${dateUtil.getDate(date_DateObj, "dd/MM/yyyy", locale)}
		</#if>
	</p>
	<p>
	<#if (author.getData())??>
		${author.getData()}
	</#if>
	</p>
</div>

<style>

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

#${randomNamespace}.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;

    height: 100%;
    flex: 0 0 32%;
}

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

#${randomNamespace} h2 {
    color: hsl(234, 12%, 34%);
    font-weight: 600;
}

</style>