Grav - Tutorial del tema

En este capítulo, creemos un tema Grav para comprender el concepto.

Antimateria

Cuando instala el paquete base de Grav, el valor predeterminado Antimatter el tema está instalado, que utiliza Nucleus(un conjunto básico simple de estilo CSS). Nucleus es un marco CSS ligero que contiene un estilo CSS y un marcado HTML esenciales que le dan una apariencia y sensación únicas.

Oreja

Creemos un tema que utilice el popular framework Bootstrap . Bootstrap es un marco HTML, CSS y JS de código abierto y más popular que hace que el desarrollo web front-end sea más rápido y fácil.

Los siguientes pasos describen la creación del tema:

Paso 1: configuración del tema base

Hay algunos elementos clave para el tema Grav como estudiamos en el capítulo Conceptos básicos del tema que deben seguirse para crear un tema nuevo.

  • Después de instalar el paquete base de Grav, cree una carpeta llamada bootstrap bajo el user/themes carpeta como se muestra a continuación.

  • Dentro de user/themes/bootstrap carpeta, crear css/, fonts/, images/, js/ y templates/ Como se muestra abajo.

  • Crea un archivo de tema llamado bootstrap.php en tus user/themes/bootstrap carpeta y pegue el siguiente contenido en ella.

<?php
namespace Grav\Theme;
use Grav\Common\Theme;
class Bootstrap extends Theme {}
  • Ahora, cree un archivo de configuración de tema bootstrap.yaml en themes/bootstrap carpeta y escriba el siguiente contenido en ella.

enable: true
  • Saltaremos el blueprints carpeta ya que no tenemos opciones de configuración y usaremos CSS normal para este capítulo.

Paso 2: agregar Bootstrap

Para crear un tema de arranque, debe incluir Bootstrap en su tema. Por lo tanto, debe descargar el último paquete de Bootstrap haciendo clic en este enlace como se muestra a continuación.

Descomprima el paquete y verá tres carpetas, a saber, css, fuentes y js. Ahora copie el contenido de estas 3 carpetas en carpetas con nombres similares enuser/themes/bootstrap que fueron creados anteriormente.

Paso 3: plantilla base

Como estudiamos en el capítulo anterior, el contenido se almacena en el default.md archivo que indica al Grav que busque la plantilla de renderizado llamada default.html.twig. Este archivo incluye todo lo que necesita para mostrar una página.

Existe una mejor solución que utiliza la etiqueta Twig Extends que le permite definir el diseño base con bloques . Esto permitirá que la plantilla de ramitas extienda la plantilla base y proporcione definiciones para los bloques definidos en la base.

Siga estos pasos para crear una plantilla básica de Bootstrap simple:

  • Crea una carpeta llamada partials en el user/themes/bootstrap/templatescarpeta. Esto se usa para almacenar nuestra plantilla base.

  • En el partials carpeta, cree una base.html.twig archivo con el siguiente contenido.

<!DOCTYPE html>
<html lang = "en">
   <head>
      {% block head %}
      <meta charset = "utf-8">
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      {% if header.description %}
      <meta name = "description" content = "{{ header.description }}">
      {% else %}
      <meta name = "description" content = "{{ site.description }}">
      {% endif %}
      {% if header.robots %}
      <meta name = "robots" content = "{{ header.robots }}">
      {% endif %}
      <link rel = "icon" type = "image/png" href="{{ theme_url }}/images/favicon.png">

      <title>{% if header.title %}{{ header.title }} | {% endif %}{{ site.title }}</title>

      {% block stylesheets %}
         {# Bootstrap core CSS #}
         {% do assets.add('theme://css/bootstrap.min.css',101) %}

      {# Custom styles for this theme #}
         {% do assets.add('theme://css/bootstrap-custom.css',100) %}

         {{ assets.css() }}
      {% endblock %}

      {% block javascripts %}
         {% do assets.add('https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', 101) %}
         {% do assets.add('theme://js/bootstrap.min.js') %}

         {% if browser.getBrowser == 'msie' and browser.getVersion >= 8 and browser.getVersion <= 9 %}
            {% do assets.add('https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js') %}
            {% do assets.add('https://oss.maxcdn.com/respond/1.4.2/respond.min.js') %}
         {% endif %}

         {{ assets.js() }}
      {% endblock %}

      {% endblock head %}
   </head>
      <body>
         {# include the header + navigation #}
         {% include 'partials/header.html.twig' %}

         <div class = "container">
            {% block content %}{% endblock %}
         </div>

         <div class = "footer">
            <div class = "container">
               <p class = "text-muted">Bootstrap Theme for <a href = "http://getgrav.org">Grav</a></p>
            </div>
         </div>
      </body>
   {% block bottom %}{% endblock %}
</html>

Paso 4: Romperlo

Veamos cómo funciona el código en base.html.twig archivo como se muestra a continuación.

  • {% block head %}{% endblock head %}sintaxis utilizada para definir un área en la plantilla base de Twig. La cabeza dentro del{% endblock head %} es opcional.

  • La sentencia if prueba si hay un meta descriptionestablecido en los encabezados de página o no. Si no se establece, la plantilla debería renderizarse usandosite.description como se define en el user/config/site.yaml archivo.

  • El camino del tema actual viene dado por el theme_url variable .

  • La sintaxis {% do assets.add('theme://css/bootstrap.min.css',101) %} se utiliza para hacer uso de la Asset Manager. lostheme://representa la ruta actual del tema y 101 representa el orden donde el valor más alto viene primero seguido por el valor más bajo. También podemos proporcionar los enlaces CDN explícitamente como:

{% do assets.addCss('http://fonts.googleapis.com/css?family = Open + Sans') %}

or,

{% do assets.addJs(' https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js') %}
  • Todas las etiquetas JavaScript y las etiquetas de enlace CSS son representadas por la plantilla cuando se llama a {{ assets.css() }} o {{ assets.js() }} se hace respectivamente.

  • La sintaxis {# ... #} se usa para escribir comentarios en Twig.

  • Para incluir otra plantilla Twig {% include 'partials/header.html.twig' %} se utiliza la etiqueta.

  • El contenido de una plantilla lo proporciona el {% block content %}{% endblock %} etiqueta.

  • Para agregar códigos analíticos o de inicialización JavaScript personalizados, {% block bottom %}{% endblock %} La etiqueta se utiliza como marcador de posición para las plantillas.

Paso 5: Plantilla de encabezado

Cuando {% include 'partials/header.html.twig' %}se ejecuta, el motor de renderizado Twig busca la plantilla Twig. Así que crea elheader.html.twig archivo de plantilla dentro user/themes/bootstrap/templates/partials carpeta con el siguiente contenido.

<nav class = "navbar navbar-default navbar-inverse navbar-static-top" role = "navigation">
   <div class = "container">
      <div class = "navbar-header">
         <button type = "button" class = "navbar-toggle"
            data-toggle = "collapse" data-target = ".navbar-collapse">
               <span class = "sr-only">Toggle navigation</span>
               <span class = "icon-bar"></span>
               <span class = "icon-bar"></span>
               <span class = "icon-bar"></span>
         </button>
         <a class = "navbar-brand" href = "#">Grav</a>
      </div>
      
      <div class = "navbar-collapse collapse">
         <ul class = "nav navbar-nav navbar-right">
            {% for page in pages.children %}
            {% if page.visible %}
            {% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
            <li class = "{{ current_page }}"><a href = "{{ page.url }}">{{ page.menu }}</a></li>
            {% endif %}
            {% endfor %}
         </ul>
      </div>
      
   </div>
</nav>

El código anterior crea una barra de navegación y muestra todos los elementos del menú automáticamente cada vez que se crea una nueva página en el user/pages carpeta.

Step 6 − Default Template

Cada elemento del contenido tiene un nombre de archivo particular, como default.md que indica a Grav que busque un archivo de plantilla llamado default.html.twig. Creemos ahora eldefault.html.twig archivo en su user/themes/bootstrap/templates/ carpeta con el siguiente contenido.

{% extends 'partials/base.html.twig' %}
{% block content %}
   {{ page.content }}
{% endblock %}

Lo anterior default.html.twig archivo extiende el partials/base.html.twig y le dice a la plantilla base que use {{ page.content }} Para el content bloquear.

Paso 7: CSS del tema

En partials/base.html.twig archivo al que hicimos referencia a un tema personalizado css usando assets.add('theme://css/bootstrap-custom.css',100), que almacena cualquier CSS personalizado utilizado en su sitio.

Creemos ahora un archivo bootstrap-custom.css en la carpeta user / themes / bootstrap / css con el siguiente contenido:

/* Restrict the width */
.container {
   width: auto;
   max-width: 960px;
   padding: 0 12px;
}

/* Place footer text center */
.container .text-muted {
   margin: 18px 0;
   text-align: center;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
   position: relative;
   min-height: 80%;
}

body {
   /* Margin bottom by footer height */
   margin-bottom: 60px;
}

.footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   /* Set the fixed height of the footer here */
   height: 50px;
   background-color: #dcdcdc;
}

/* Typography */
/* Tables */
table {
   width: 100%;
   border: 1px solid #f0f0f0;
   margin: 30px 0;
}

th {
   font-weight: bold;
   background: #f9f9f9;
   padding: 5px;
}

td {
   padding: 5px;
   border: 1px solid #f0f0f0;
}

/* Notice Styles */
blockquote {
   padding: 0 0 0 20px !important;
   font-size: 16px;
   color: #666;
}

blockquote > blockquote > blockquote {
   margin: 0;
}

blockquote > blockquote > blockquote p {
   padding: 15px;
   display: block;
   margin-top: 0rem;
   margin-bottom: 0rem;
   border: 1px solid #f0f0f0;
}

blockquote > blockquote > blockquote > p {
   /* Yellow */
   margin-left: -75px;
   color: #8a6d3b;
   background-color: #fcf8e3;
   border-color: #faebcc;
}

blockquote > blockquote > blockquote > blockquote > p {
   /* Red */
   margin-left: -100px;
   color: #a94442;
   background-color: #f2dede;
   border-color: #ebccd1;
}

blockquote > blockquote > blockquote > blockquote > blockquote > p {
   /* Blue */
   margin-left: -125px;
   color: #31708f;
   background-color: #d9edf7;
   border-color: #bce8f1;
}

blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p {
   /* Green */
   margin-left: -150px;
   color: #3c763d;
   background-color: #dff0d8;
   border-color: #d6e9c6;
}

Paso 8: prueba

Cambie su tema predeterminado con el nuevo bootstraptema. Abre eluser/config/system.yaml archivar y editar la línea que contiene -

pages:
   themes: antimatter

y cambie el código anterior a -

pages:
   theme: bootstrap

Ahora recargue su sitio Grav y verá el tema recién instalado como se muestra a continuación.