6 dic. 2024

Creación de parciales personalizados

Introducción - parciales

Los parciales son fragmentos comunes de su sitio web que se colocan en archivos separados para facilitar su reutilización.

Se encuentran en el directorio de parciales de su tema.

Partial se carga utilizando la siguiente sintaxis:

{{> header}}

El código anterior carga el archivo partials/header.hbs .

Cada tema de Publii utiliza al menos 4 parciales:

header.hbs - para el comienzo de cada página de su sitio web,
footer.hbs - para el final de cada página de su sitio web,
menu.hbs - para la estructura del menú,
pagination.hbs - para la estructura de paginación

Los archivos menu.hbs y pagination.hbs son opcionales para los temas tal como están definidos en Publii y estos archivos predeterminados se utilizan si estos archivos no existen en el tema.

También puedes definir tus parciales personalizados : también deben colocarse en el directorio de parciales .

Los desarrolladores de temas pueden crear partes personalizadas en sus temas. Esto resulta útil si desea reutilizar su código en muchas vistas.

Para crear un elemento parcial personalizado, simplemente cree un archivo *.hbs en el directorio de elementos parciales del tema. El nombre del archivo parcial se utilizará en el código del tema.

Por ejemplo, si creas el archivo partials/cookiebar.hbs en tu tema, podrás usarlo en otros archivos como:

{{> cookiebar}}

También es posible crear parciales que tengan parámetros: esto es especialmente útil cuando tienes problemas con el contexto.

Analicemos la siguiente situación:

Tenemos el siguiente contexto para una vista:

{
    config: {
        optionValue: true 
    },
    pages: [
       { title: "Lorem" },
       { title: "Ipsum" }
    ]
}

Y cargamos nuestro parcial en el archivo principal de la siguiente manera:

{{#each pages}}
    {{> page}}
{{/each}}

Podemos acceder {{title}}en nuestro parcial, pero {{config}}no está disponible incluso si usamos {{../config}}.

La solución es crear un parámetro para nuestro parcial:

{{#each pages}}
    {{> page config=../config}}
{{/each}}

En el ejemplo anterior podremos acceder {{config}}a nuestro parcial.

pie de página.hbs parcial

Esta parte se utiliza como final para los archivos *.hbs de su tema, en cada archivo que debe mostrar el pie de página de su sitio web:

{{> footer}}

encabezado.hbs parcial

Esta parte se utiliza como inicio de los archivos *.hbs de su tema en cada archivo que mostrará el encabezado de su sitio web:

{{> header}}

Con esta solución no necesitarás duplicar código ni aplicar cambios en varios archivos.

menú.hbs parcial

El menú parcial se utiliza para mostrar los menús en su sitio web.
Este parcial debe tener un parámetro con una estructura del menú que se va a mostrar:

{{> menu menus.mainMenu}}

El código anterior mostrará el menú principal del sitio web.

No has incluido partials/menu.hbs en tu tema. En este caso, Publii cargará el siguiente archivo menu.hbs predeterminado:

{{#unless level}}
<nav>
{{/unless}}
    <ul{{#if level}} class="submenu submenu-level-{{level}}"{{else}} class="menu menu-level-1"{{/if}}>
        {{#each items}}
            <li{{menuItemClasses}}>
            {{#if link}}
            <a href="{{menuUrl}}"{{#if title}} title="{{title}}"{{/if}}{{#if target}} target="{{target}}"{{/if}}{{#if rel}} rel="{{rel}}"{{/if}}>{{label}}</a>
            {{else}}
            <span{{#if title}} title="{{title}}"{{/if}}>{{label}}</span>
            {{/if}}

            {{#if items}}
                {{> menu}}
            {{/if}}
        </li>
        {{/each}}
    </ul>
{{#unless level}}
</nav>
{{/unless}}

paginacion.hbs parcial

La paginación parcial es responsable de representar los enlaces de paginación en la página de inicio de su sitio web, las páginas de etiquetas y las páginas de autor:

{{> pagination}}

Si no ha incluido un partials/pagination.hbs en su tema, Publii cargará el siguiente archivo pagination.hbs predeterminado:

{{#if @pagination}}
    <ul>
        {{#if @pagination.previousPage}}
            <li>
                <a href="{{@pagination.previousPageUrl}}">PREV</a>
            </li>
        {{/if}}

        {{#each @pagination.pages}}
            <li>
                {{#isCurrentPage @pagination.currentPage this}}
                    <strong>
                        {{this}}
                    </strong>
                {{else}}
                    <a href="{{pageUrl @pagination.context this}}">
                        {{this}}
                    </a>
                {{/isCurrentPage}}
            </li>
        {{/each}}

        {{#if @pagination.nextPage}}
            <li>
                <a href="{{@pagination.nextPageUrl}}">NEXT</a>
            </li>
        {{/if}}
    </ul>

    <small>
        Page {{@pagination.currentPage}} of {{@pagination.totalPages}}
    </small>
{{/if}}