Cómo agregar compatibilidad con páginas en temas de Publii

La versión 0.46 de Publii introdujo una nueva y poderosa característica: Páginas. Esto te permite crear contenido estático separado de las publicaciones de tu blog, ideal para contenido como páginas "Acerca de nosotros", "Contacto" o "Servicios". Si bien los temas oficiales de Publii lanzados junto con la versión 0.46 integran perfectamente las Páginas, los temas personalizados o modificados pueden requerir ajustes.

Esta guía lo guiará en el proceso de agregar compatibilidad con páginas a su tema Publii, lo que le garantizará que pueda aprovechar al máximo esta nueva característica sin sacrificar el diseño y la funcionalidad únicos de su tema.

¿Cuándo necesitas esta guía?

Esta guía le resultará especialmente útil si:

  1. Estás utilizando una versión personalizada o modificada de un tema oficial.
  2. Verá un mensaje que indica una falta de compatibilidad con Páginas al acceder a la pestaña Páginas en Publii.
  3. Desea comprender los aspectos técnicos de la implementación del soporte de páginas en los temas de Publii.

Siguiendo estos pasos, puede ampliar las capacidades de su tema y crear páginas enriquecidas y estáticas dentro de su sitio web impulsado por Publii.

Paso 1: Activación del soporte de páginas

El primer paso es informar a Publii que su tema admite páginas agregando una bandera al archivo de configuración del tema.

  1. Localiza el archivo de tu tema config.json. Debería estar en el siguiente directorio:
    /Documents/Publii/sites/YOUR_SITE/input/themes/YOUR_THEME/config.json
    Copiar
  2. Abra el config.jsonarchivo en un editor de texto.
  3. Encuentra la supportedFeaturessección. Si no existe, créala.
  4. Agregue la bandera de soporte de Páginas de la siguiente manera:
    "supportedFeatures": {
    "pages": true
},
    Copiar

     Si existen otras funciones compatibles, simplemente agregue la línea "páginas" al objeto existente.

Paso 2: Creación del archivo page.hbs

A continuación, debemos crear un archivo de plantilla para Pages. La forma más sencilla es duplicar el post.hbsarchivo existente y modificarlo.

  1. En el directorio de tu tema, busca el post.hbsarchivo.
  2. Crea una copia de este archivo y nómbrala page.hbs.
  3. Abrir page.hbsen un editor de texto.

Ahora, repasemos los principales cambios que debes realizar en el page.hbsarchivo:

  1. Cambiar el contenedor principal:
    • Reemplazar {{#post}}con {{#page}}al principio del archivo.
    • Reemplazar {{/post}}con {{/page}}al final del archivo.
  2. Eliminar secciones no compatibles porque son específicas de las publicaciones del blog y no se aplican a las páginas estáticas:
    • Eliminar la sección para mostrar etiquetas.
    • Eliminar la sección de navegación de publicaciones (enlaces de publicaciones anteriores y siguientes).
    • Eliminar la sección de publicaciones relacionadas.
  3. Actualizar referencias de configuración:
    • Reemplace todas las ocurrencias de @config.postcon, @config.pagepor ejemplo,  @config.post.displayFeaturedImagepara@config.page.displayFeaturedImage
    • Además, debe actualizar el config.jsonarchivo para que admita configuraciones específicas de la página. Esto implica copiar la postConfigsección y modificarla a pageConfig. Elimine todos los elementos que no se apliquen a las páginas, como displayRelatedPostsy displayPostNavigation. A continuación, se muestra un ejemplo:
      "pageConfig": [
    {
        "name": "displayDate",
        "label": "Display date",
        "value": 0,
        "type": "select",
        "pageTemplates": "!empty",
        "options": [
            {
                "label": "Enabled",
                "value": 1
            },
            {
                "label": "Disabled",
                "value": 0
            }
        ]
    },
    {
        "name": "displayShareButtons",
        "label": "Display share buttons",
        "value": 0,
        "type": "select",
        "pageTemplates": "!empty",
        "options": [
            {
                "label": "Enabled",
                "value": 1
            },
            {
                "label": "Disabled",
                "value": 0
            }
        ]
    },
    {
        "name": "displayChildPages",
        "label": "Display child pages",
        "value": 0,
        "type": "select",
        "options": [
            {
                "label": "Enabled",
                "value": 1
            },
            {
                "label": "Disabled",
                "value": 0
            }
        ]
    }
]
      Copiar
  4. Agregue soporte para páginas secundarias (si es necesario):
    {{#if @config.page.displayChildPages}}
   {{#if subpages}}
      <div class="subpages">
         <h2 class="subpages__title">{{ translate 'page.childPages' }}</h2>
         <ul class="subpages__list">
            {{#each subpages}}
               {{#getPage @this}}
                  <li>
                     <a href="{{url}}">{{title}}</a>
                     {{#if subpages}}
                     <ul>
                        {{> subpages-list}}
                     </ul>
                     {{/if}}
                  </li>
               {{/getPage}}
            {{/each}}
         </ul>
      </div>
   {{/if}}
{{/if}}
    Copiar
  5. Actualizar otras referencias:
    • Cambie @customHTML.beforePosta @customHTML.beforePage. Además, debe agregar la opción correspondiente en el config.jsonarchivo. En la renderersección, agregue una nueva entrada para beforePage:
      "renderer": {
    "customHTML": {
        "beforePost": "Before every post",
        "beforePage": "Before every page"
    }
}
      Copiar
    • Realizar cambios similares para otras referencias específicas de la publicación.

A continuación se muestra un ejemplo de cómo podría verse una sección de su sitio page.hbsdespués de estos cambios:

{{> head}}
{{> top}}
<main>
   {{#page}}
      {{#if @customHTML.beforePage}}
         <div>{{{@customHTML.beforePage}}}</div>
      {{/if}} 
      <article>
         <header>
            <h1>{{title}}</h1>
         </header>
         {{#if @config.page.displayFeaturedImage}}
            {{#featuredImage}}
               <!-- Featured image code here -->
            {{/featuredImage}}
         {{/if}}
         <div>{{{text}}}</div>
         <!-- More code here like author name, share buttons, comments ...-->
      </article>
   {{/page}}
   {{> sidebar}}
</main>
{{> footer}}
Copiar

Paso 3: Reiniciar Publii

Después de realizar estos cambios:

  1. Guardar todos los archivos modificados.
  2. Cierre Publii si está ejecutándose actualmente.
  3. Reinicie Publii para asegurarse de que se carguen todas las configuraciones nuevas.
arriba