Crear Temas

Cómo crear tus propios temas.

En Barrio CMS tu puedes crear todo tipo de plantillas, desde un blog una pagina tipo landing page etc...

Nota: la mejor forma de aprender a crear temas es modificando otros.

La estructura de los temas se compone de:

  1. nombre de la carpeta que contiene el tema.
    • archivo func.php ( si no esta nos daría error ).
    • carpeta assets donde meteremos todos los scripts y estilos.
    • carpeta inc , aquí se encuentran los includes ( head.html, footer.html )
    • archivo index.html, que se puede usar para paginas estáticas.
    • archivo blog_post.html, es el encargado de buscar en la carpeta artículos todos los archivos que haya.
    • archivo blog.html , es el que enseña el articulo.
    • archivo 404.html , es el que enseña en caso de error.

Nota: siempre puedes cambiar todo esto y ponerlo como tu quieras es solo para comenzar.

Crear plantilla

Vamos a crear una plantilla a la que llamaremos home.html:

❴Partial: inc/head.inc.html❵
❴Partial: inc/header.inc.html❵
<main class="container">
    <div class="row">
        <div class="col-md-6 m-auto">
            ❴Action: theme_before❵
            ❴$page. content❵ 
            ❴Action: theme_theme_after❵
        </div>
    </div>
</main>
❴Partial: inc/prefooter.inc.html❵
❴Partial: inc/footer.inc.html❵

$page. content,title,description se seprara aquí para que no se redenderize

En primer lugar incluimos head.inc.html que es donde se encuentra los metatags y estilos.

Luego incluimos header.inc.html que es donde se encuentra la navegación y el titulo de la pagina.

Las acciones ❴Action: theme_before❵ y ❴Action: theme_after❵ se ponen por que a la hora de crear una extensión puedes hacer que se cargen ahi.

Ahora añadimos ❴$page. content❵ que es el encargado de enseñar el contenido del archivo, si por ejemplo queremos enseñar el titulo usamos ❴$page. title❵ o si queremos poner la descripción usamos ❴$page. description❵, de todos modos puedes usar ❴?= var_dump($page) ?❵ para ver todo lo que puedes usar.

Ahora solo quedaría incluir footer.inc.html que es donde su nombre indica el pie de la página con los scripts y el cierre del body.

También podemos crear una plantilla sin incluir el head o el footer pero asi es mas ordenado.

Nota: _Estas son todas las variables que acepta $page si están incluidas en el archivo.

Title = El titulo de la página
Description = Descripción de la página
Tags = Etiquetas de la página
Author = Author de la página
Image = Imagen de la página
Date = Fecha
Robots, = Si quieres que indexe o no google
Keywords = keywords de la página
Template = plantilla html que usara (index.html,articulo.html etc...)
Url = Un link para enseñar o enlazar.
Category = categoría
Published = publicado o no.

Las etiquetas title, description, keywords y author si no se escriben se usarán las de el archivo config.php.

Variables, Loops y Condicionales

Variables:

VariableDescripción
❴date❵Decha d-m-Y
❴Year❵Año
❴Site_url❵Url base
❴Site_current❵Url hash
❴* comment *❵Comentario
❴Last_posts❵Ultimos articulos
❴Blog_posts❵Articulos
❴Pages: demo❵Paginación de otra carpeta
❴$varioable|encode❵Codifica en Base uri
❴$varioable|decode❵Deodifica en Base uri
❴$varioable|capitalize❵Capitaliza
❴$varioable|md5❵md5
❴$varioable|sha1❵sha1
❴$varioable|e❵htmlspecialchars
❴$varioable|parse❵html_entity_decode
❴Action: navigation❵llamar una acción
❴Action: navigation❵llamar una acción
❴Include: other.php❵Include once
❴Partial: inc/header.inc.html❵Incluir parte de la carpeta del tema
❴Assets: img/logo.svg❵Carpeta assets

Condicionales

// If else
❴If: $Segment == '/'❵
    Esto solo saldra en la pagina de inicio
❴Elseif: $Segment == '/blog'❵
    Esto solo saldra en el blog
❴Else❵
    Esto solo saldra en el resto de las paginas
❴/If❵

Segment

// comprueba el hash de ese momento
❴Segment:  '/'❵
    Esto solo saldra en la pagina de inicio
❴/Segment❵

Loop

// loop
❴Loop: $confit['blog'] as $item❵
    ❴$item['title']❵
❴/Loop❵

// loop key => value
❴Loop: $confit['blog'] as $k=>$v❵
    ❴$k❵ = ❴$v❵
❴/Loop❵