Función @snippet para Blogger

Función utilitaria diseñada para encapsular y condicionar el operador snippet de forma nativa en Blogger. Permite truncar cadenas de texto o extractos HTML eliminando etiquetas residuales, validando de manera estricta que el contenido no esté vacío antes de renderizar el contenedor HTML para evitar el marcado huérfano en la plantilla.

Esta función forma parte del proyecto Hamlet. Puedes revisar el código fuente en GitHub.

Definición de la función

<b:includable id='@snippet'>
  <b:comment>
  Creates a clean text snippet of a string with conditional ellipsis support.
  @author zkreations
  @param {String} [text=""] - Text or HTML content to be shortened
  @param {String} [tag="p"] - Container HTML tag name
  @param {String} [id] - Container HTML id
  @param {String} [class] - Container CSS class
  @param {Number} [limit=70] - Maximum length of the string
  @param {String} [ellipsis="..."] - Ellipsis to be added only if the text is truncated
  </b:comment>
  <b:with value='data:text ? (data:text snippet {
    links: false,
    ellipsis: false,
    linebreaks: false
  }) : ""' var='cleanString'>
    <b:if cond='data:cleanString != ""'>
      <b:with value='(data:limit + 0) == data:limit
        ? (data:limit * 1)
        : 70' var='maxLength'>
        <b:tag expr:name='data:tag ?: "p"'>
          <b:class cond='data:class' expr:name='data:class'/>
          <b:attr name='id' expr:value='data:id'/>
          <b:with value='data:cleanString snippet {
            length: data:maxLength,
            links: false,
            ellipsis: false,
            linebreaks: false
          }' var='truncatedText'>
            <b:eval expr='data:truncatedText + (
              data:cleanString.size > data:maxLength ? (data:ellipsis ?: "...") : ""
            )'/>
          </b:with>
        </b:tag>
      </b:with>
    <b:else/>
      <b:comment render='true'>No visible text to display after sanitization.</b:comment>
    </b:if>
  </b:with>
</b:includable>

Especificación de Parámetros

Parámetro	Tipo	Descripción
`text`	`string`	Texto o HTML a truncar. Obligatorio.
`tag`	`string`	Etiqueta contenedora. Por defecto `"p"`.
`id`	`string`	Valor del atributo `id`.
`class`	`string`	Clases CSS del contenedor.
`limit`	`number`	Límite de caracteres. Por defecto `70`.
`ellipsis`	`string`	Sufijo del texto truncado. Por defecto `"..."`.

Modo de uso

Para implementar esta función, añade el fragmento en los marcados predeterminados (<b:defaultmarkups type='Common'>) de tu tema.

text

Recibe el texto plano u objeto HTML que se va a procesar. Remueve los hipervínculos, saltos de línea y formateos antes de evaluar la longitud de la cadena.

<b:include data='{ text: data:post.body }' name='@snippet'/>

<p>Texto extraído del cuerpo de la entrada limpiado y reducido...</p>

tag

Define de manera dinámica el tipo de nodo HTML contenedor que envolverá el resultado del texto truncado evaluado.

<b:include data='{ text: data:post.snippets.long, tag: "div" }' name='@snippet'/>

<div>Texto extraído del cuerpo de la entrada limpiado y reducido...</div>

id

Asigna un atributo identificador HTML único al nodo contenedor para facilitar interacciones de scripts o reglas de CSS específicas.

<b:include data='{ text: data:post.snippets.long, id: "summary-block" }' name='@snippet'/>

<p id='summary-block'>Texto extraído del cuerpo de la entrada limpiado y reducido...</p>

class

Permite inyectar una o múltiples clases CSS en el contenedor generado para aplicar estilos personalizados de maquetación.

<b:include data='{ text: data:post.snippets.long, class: "text-muted entry-summary" }' name='@snippet'/>

<p class='text-muted entry-summary'>Texto extraído del cuerpo de la entrada limpiado y reducido...</p>

limit

Especifica la cantidad máxima de caracteres de corte. El motor realiza una conversión aritmética interna para validar y forzar el tipo numérico entero.

<b:include data='{ text: data:post.snippets.long, limit: 120 }' name='@snippet'/>

<p>Extracto de texto configurado explícitamente para limitar el contenido de caracteres a ciento veinte...</p>

ellipsis

Personaliza el sufijo de truncamiento. La elipsis solo se renderizará si la longitud real del texto supera el número definido en el parámetro limit.

<b:include data='{ text: data:post.snippets.long, ellipsis: " [Leer más]" }' name='@snippet'/>

<p>Texto extraído del cuerpo de la entrada limpiado y reducido [Leer más]</p>