Artículo Anterior
Tópicos:  Tutoriales
Artículo Siguiente

Cómo crear una plantilla de artículo

En este tutorial aprenderás a crear una plantilla de artículo, dónde debes ubicarla para que Prontus la encuentre, y cómo registrarla para poder usarla.

Publicado: Martes 25 de septiembre de 2018 por David García
Última modificación: Viernes 21 de agosto de 2020
Resumen
Crear el archivo de plantilla
Incluir módulos
Marcas Prontus
Dividir una plantilla con macros
Registrar la plantilla
Plantillas para Multivistas
subir
Resumen

Luego de haber creado y registrado un FID como explicamos en el tutorial Cómo crear un FID, en este tutorial crearemos una plantilla para artículos de tipo "noticia" en formato HTML. Puedes seguir fácilmente este tutorial en tu sitio descargando de esta página el archivo adjunto que contiene la plantilla ya lista.

Para implementar y poder usar esta plantilla de artículo, debes seguir estos pasos:

  1. crear el archivo de plantilla en la carpeta de plantillas de artículo
  2. crear las eventuales macros de plantilla en la carpeta de macros e incluírlas en la plantilla
  3. registrar la plantilla para uno o más artículos en el panel de administración de Prontus

Si en el Prontus usas multivistas, además deberás crear plantillas para cada vista aparte de la principal en las carpetas de plantillas correspondientes.

subir
Crear el archivo de plantilla

Para empezar, crea un archivo vacío llamado "noticia.html" en el directorio /[nombre del prontus]/plantillas/artic/fecha/pags/ . Rellénalo con un poco de HTML básico, como por ejemplo éste:

<!doctype html>
<html>
<head>
     <meta charset="utf-8">
    <title>%%_txt_titular%% - Artículo Noticia - Mi Prontus</title>
</head>
<body class="pro-articulo">
    <div class="header-container">
        <!--# include file="/%%_prontus_id%%/site/edic/base/port/_m_header.html" -->
    </div>
    <div id="main-content" class="container">
        <div class="content">
            <header>
                <div class="top">
                    <div class="breadcrumb">Tópicos: 
                        %%if(_nom_seccion1)%%
                            <a href="/%%_prontus_id%%/site/tax/port/fid_articulo/taxport_%%_seccion1%%___1.html">%%_nom_seccion1%%</a>
                        %%/if%%
                    </div>
                </div>
                <h1>%%_txt_titular.raw%%</h1>
                %%if(_txt_bajada)%%
                    <h3>%%_txt_bajada.raw%%</h3>
                %%/if%%
                <div>
                    <span>Publicado: <strong>%%_fechaplong%%</strong></span>
                </div>
            </header>
            <div class="row articulo-principal">
                <div class="col-sm-9">
                    <div class="CUERPO">
                        %%vtxt_cuerpo%%
                    </div>
                </div>
                <div class="col-sm-3">
                    <!--# include file="/%%_prontus_id%%/site/edic/base/port/_m_toc.html" -->
                </div>
            </div>
        </div>
    </div>
    <div class="footer-container">
        <!--# include file="/%%_prontus_id%%/site/edic/base/port/_m_footer.html" -->
    </div>
    <!--# include file="/%%_prontus_id%%/js-local/_includedjavascripts_art.html" -->
</body>
</html>

Lo primero que puedes ver es una marca reservada, %%_txt_titular%%, usada dentro del tag <title> para diferenciar cada documento por su título.

subir
Incluir módulos

El documento incluye archivos de encabezado, pie de página, tabla de contenidos, y javascripts usados en artículos, usando instrucciones Server Side Includes, como ésta:

 <!--# include virtual="/%%_prontus_id%%/site/edic/base/port/_m_header.html" -->

Si lo prefieres, y está habilitado, puedes usar instrucciones include o require de PHP o similares en otros lenguajes de scripting. Eso se vería de este modo:

<?php include($_SERVER['DOCUMENT_ROOT'] . "/%%_prontus_id%%/site/edic/base/port/_m_header.html"; ?>

Esto asume que la portadilla "/[nombre del Prontus]/site/edic/base/port/_m_header.html" existe, de otro modo verás un mensaje de error (o no verás contenido) en esa posición en la página.

subir
Marcas Prontus

El texto %%_prontus_id%% que ves en ese include es una marca reservada de Prontus. Al guardar un artículo, Prontus cambiará ese texto por el valor correspondiente. Por ejemplo, para este sitio que estás leyendo, el nombre del Prontus es "prontus_desarrollo_v12_0".

Otras marcas reservadas usadas en este archivo son "%%_txt_titular%%", "%%_nom_seccion1%%", "%%_txt_bajada%%", "%%_fechaplong%%". Puedes revisar el listado de todas las marcas que Prontus implementa en el artículo Diccionario de marcas. En particular, puedes revisar la relación entre las marcas "%%_txt_bajada%%" y "%%_bajada%%" en el artículo Marcas para texto.

Además de estas marcas reservadas, en este archivo estamos usando una marca definida para este tipo de artículo, la marca %%vtxt_cuerpo%%. Definiste esta marca en el FID noticia, como puedes ver en el artículo Cómo crear un FID. Esa marca -y todas las marcas llamadas "VTXT_"- contiene texto ingresado usando el editor WYSIWYG.

Por último, hay una marca más en este artículo: la marca %%if%%. Esta marca te permite implementar condiciones lógicas, como por ejemplo "si esta marca contiene algo", o "si el texto que esta marca contiene es "Probando". En este caso, las condiciones que estamos evaluando son "si la marca _txt_bajada contiene algo" y "si la marca _nom_seccion contiene algo". Nota que dentro de la condición no debes usar los símbolos %% alrededor de las marcas: es %%if(_txt_bajada)%%, no %%if(%%_txt_bajada%%)%%. cada marca %%if%% contiene una condición entre paréntesis, un bloque de código,  y se cierra con el correspondiente %%/if%%. Puedes aprender más sobre las marcas de condición en el artículo  Marcas de lógica.

subir
Dividir una plantilla con macros

En el ejemplo inicial, la plantilla es tan sencilla que no tiene sentido subdividirla. Pero si tus plantillas se vuelven muy grandes, o si encuentras que estás repitiendo código entre varias plantillas, puedes separar ese código en otros archivos para reutilizarlo y para hacer más comprensible la estructura de tus documentos. En Prontus, llamamos a esos otros archivos "Macros". Las macros de plantilla de artículo se guardan junto a las plantillas, en el directorio "macros". En nuestro caso, /[nombre del prontus]/plantillas/artic/fecha/macros/. Una vez que creas una macro, puedes usarla en cualquier plantilla de artículo invocándola de este modo: %%macro(archivo.html)%%.

Supón que quieres reusar el código del cuerpo de texto en varias plantillas. Puedes tomar este bloque de la plantilla original

<div class="CUERPO">
  %%vtxt_cuerpo%%
</div>

y copiarlo al archivo /[nombre del prontus]/plantillas/artic/fecha/macros/articulo_cuerpo.html. En la plantilla original, en lugar del código HTML anterior, simplemente pondrás

<div class="col-sm-9">
  %%macro(articulo_cuerpo.html)%%
</div>

El resultado final será el mismo, pero ahora podrás reusar esa macro en más plantillas en que necesites usar la marca %%vtxt_cuerpo%%.

subir
Registrar la plantilla

Una vez creada la plantilla, debes registrarla en Prontus para poder usarla. Para esto debes ingresar a Prontus como usuario administrador y visitar la página Administrar → Configuración → Artículos desde la sidebar.

En esa página podrás asignar la plantilla nueva a cualquier FID ya registrado usando el selector Artículo en la columna Plantillas.

También podrías asignarla a un FID como plantilla paralela usando el selector inmediatamente debajo. Puedes revisar la utilidad de las plantillas paralelas en el artículo Plantillas de artículo.

subir
Plantillas para Multivistas

Si en tu Prontus has activado el sistema de multivistas, deberás crear una plantilla de artículo para cada vista distinta. Verás que ahora en el directorio /[nombre del prontus]/plantillas/artic/fecha/ hay múltiples subdirectorios (uno por cada vista). La vista principal, que siempre existe, es el directorio pags. Además, podrías haber definido la vista móvil en el directorio pags-movil, o una vista en inglés en el directorio pags-en. En cada uno de estos directorios debes crear un archivo con el mismo nombre que usaste para la plantilla de la vista principal. En este caso, deberías tener los archivos /[nombre del prontus]/plantillas/artic/fecha/pags/noticia.html, /[nombre del prontus]/plantillas/artic/fecha/pags-movil/noticia.html, /[nombre del prontus]/plantillas/artic/fecha/pags-en/noticia.html.

Si no creaste uno de estos archivos, verás un mensaje de error avisándote cuando intentes guardar el artículo.

Archivos adjuntos

Descargar Archivo adjunto

Artículos Relacionados

Artículo Anterior
Tópicos:  Tutoriales
Artículo Siguiente