Criar uma listagem de posts de blog relacionados com a tag de posts de blog relacionados do HubL

A tag related_blog_posts do HubL pode ser usada para criar uma listagem dinâmica de posts de blog relacionados com base em uma variedade de parâmetros. Ela permite gerar listagens de posts de blog, com a capacidade de filtrar por tags, autores, caminhos de posts e datas de publicação. Os desenvolvedores também podem especificar a saída HTML do módulo usando uma macro. Esta tag do HubL pode ser usada em posts de blog e páginas. Este tutorial mostrará os parâmetros e opções de uso para a tag de posts de blog relacionados do HubL.

Observe que a tag related_blog_posts do HubL não gera um módulo editável em nível de post/página; ela é totalmente configurada com HubL.

Parâmetros

A lista de posts é gerada a partir de uma pontuação de relevância com base em uma comparação entre os valores dos parâmetros definidos e os posts correspondentes a esses parâmetros ou relacionados ao post na qual a tag do HubL é exibida. Nenhum dos parâmetros é obrigatório; no entanto, especificá-los permitirá controlar ainda mais quais posts são retornados. Para parâmetros separados por vírgula, quanto mais valores você definir, mais diversificada será a listagem retornada. O parâmetro post_formatter permite especificar uma macro para gerar a saída HTML do módulo. Para obter uma lista completa dos parâmetros e exemplos da saída HTML padrão, consulte a especificação de related_blog_posts.

Parameter	Type	Description	Default
`limit`	number	O número máximo de posts de blog para listar.	`3`
`blog_ids`	’default’ or blog id	O ID do blog do qual incluir os posts.	`none`
`tags`	String	As tags que devem ser usadas para determinar se um post é relevante (separadas por vírgula). Se um post de blog tiver uma dessas tags ou uma tag semelhante, a relevância dele será aumentada, melhorando sua classificação na listagem.	`none`
`blog_authors`	String	Os nomes dos autores dos quais incluir os posts(separados por vírgula)	`none`
`blog_post_ids`	String	O ID de post de blog para usar ao encontrar posts de blog relevantes para listar (separadas por vírgula). Este parâmetro somente deve ser usado quando o widget for exibido nas páginas, pois nos posts de blog, o padrão será o post no qual o widget é exibido.	`none`
`post_formatter`	String	O nome de uma macro personalizada para renderizar os posts de blog retornados. A macro recebe três parâmetros que são o objeto de post de blog para formatar, a contagem na iteração de posts de blog e a contagem total de posts de blog nos resultados. Se não for especificado ou definido como “padrão”, o formatador interno será usado para formatar cada post. Nota: é recomendado usar o parâmetro callback abaixo no lugar do parâmetro “post_formatter”, pois o HTML da tag será renderizado mais rapidamente, diminuindo os tempos de carregamento de página.	`none`
`callback`	String	O nome de uma função javascript para renderizar os posts de blog retornados. A função recebe um array de objetos de post de blog para formatar. Se os parâmetros callback ou post_formatter forem especificados, a tag gerará HTML em um formato padrão.	`none`
`path_prefixes`	String	Caminhos de URL ou subdiretórios dos quais incluir os posts (separados por vírgula). Se um post de blog tiver um prefixo semelhante em seu caminho, a relevância dele será aumentada, melhorando sua classificação na listagem.	`none`
`start_date`	date/time	Permite a filtragem de posts publicados após uma data/hora.	`none`
`end_date`	Date/Time	Permite a filtragem de posts publicados antes de uma data/hora.	`False`
`blog_post_override`	String	Os Ids de um post de blog que sempre devem ser exibidos na listagem retornada, apesar de todos os outros valores de parâmetros e filtros (separados por vírgula).	`none`

Recomendamos fortemente o uso do parâmetro callback em vez do parâmetro post_formatter para garantir tempos de carregamento de página mais rápidos.

Observe que, se a tag related_blog_posts do HubL for usada em um post, o parâmetro blog_post_ids não deverá ser especificado, pois nos posts do blog, o padrão será o post no qual o widget é exibido.

Abaixo estão alguns exemplos de maneiras de usar essa tag para aprimorar seu site.

Exibir os posts de um autor específico em vários blogs

Neste exemplo, geramos uma lista de posts escritos por um dos três blog_authors especificados em dois blogs diferentes.

{% related_blog_posts blog_ids="3241539189,3261083894", limit=6, blog_authors="John Smith,Joe Smith,Frank Smith" %}

Exibir posts com a tag “sales enablement”, restritos a um intervalo de datas de publicação específico

Neste exemplo, geramos uma lista de 10 posts relacionados a um post de blog específico, com a tag “sales enablement” e restritos a um intervalo de datas de publicação específico. Este exemplo especifica o parâmetro blog_post_ids, então ele seria usado em uma página.

{% related_blog_posts blog_post_ids="3267910554", limit=10, tags="sales enablement", start_date="2018-02-05", end_date="2018-06-10" %}

Exibir posts usando um retorno de chamada JS para controlar a saída HTML

Neste exemplo, geramos uma listagem de 5 posts usando o parâmetro callback para controlar a saída HTML da listagem de posts. (Em vez do parâmetro post_formatter usando uma macro.)

{% related_blog_posts limit=5, callback="blog_post_formatter" %}

<script>
  var blog_post_formatter = function(blogposts) {

    var formatted = "<div>";
    for (var i = 0; i < blogposts.length; i++) {
      var blogpost = blogposts[i];
      formatted += '<div class="related-blog-item">';
      formatted += `<span>Related Post ${i + 1}/${blogposts.length}</span><br>`;
      formatted += `<a class="related-blog-title" href="https://br.developers.hubspot.com/docs${blogpost.url}"><span>${blogpost.name}</span></a>`;
      formatted += `<div class="hs-related-blog-byline">by <span class="related-blog-author">${blogpost.blogAuthor.fullName}</span><span class="related-blog-posted-at"> posted on </span><span class="related-blog-date">${new Date(blogpost.publishDate).toLocaleDateString()}</span></div>`;
      formatted += `<p class="related-blog-post-summary">${blogpost.postSummary}<a href="https://br.developers.hubspot.com/docs${blogpost.url}">Read more</a></p>`;
      formatted += '<div class="related-blog-tags">';
      if (blogpost.tagList.length > 0) {
        formatted += `Tags: ${blogpost.tagList.map(tag => tag.label).join(", ")}`;
      }
      formatted += '</div>';

      if (blogpost.featuredImage) {
        formatted += `<img src="${blogpost.featuredImage}" alt="${blogpost.featuredImageAltText}">`;
      }
      formatted += '</div>';
    }
    formatted += '</div>';
    return formatted;
  }
</script>

Start Building

Reference

Best Practices

Marketplace

Versions & Deprecations

Criar uma listagem de posts de blog relacionados com a tag de posts de blog relacionados do HubL

Parâmetros

Exibir os posts de um autor específico em vários blogs

Exibir posts com a tag “sales enablement”, restritos a um intervalo de datas de publicação específico

Exibir posts usando um retorno de chamada JS para controlar a saída HTML

​Parâmetros

​Exemplos de usos da tag related_blog_posts do hubL

​Exibir os posts de um autor específico em vários blogs

​Exibir posts com a tag “sales enablement”, restritos a um intervalo de datas de publicação específico

​Exibir posts usando um retorno de chamada JS para controlar a saída HTML

Parâmetros

Exemplos de usos da tag related_blog_posts do hubL

Exibir os posts de um autor específico em vários blogs

Exibir posts com a tag “sales enablement”, restritos a um intervalo de datas de publicação específico

Exibir posts usando um retorno de chamada JS para controlar a saída HTML