Grav - Temas básicos

Los temas controlan el aspecto de su sitio Grav. Los temas en Grav se crean con el potente motor de plantillas Twig .

Páginas de contenido y plantillas Twig

Las páginas que crea hacen referencia a un archivo de plantilla específico por nombre o configurando la variable de encabezado de la plantilla para la página. Se recomienda utilizar el nombre de la página para simplificar el mantenimiento.

Después de instalar el paquete Grav Base, encontrará el defauld.mdarchivo en la carpeta user / pages / 01.home. El nombre del archivo, es decir,default le dice a Grav que esta página debe ser renderizada con la plantilla twig default.html.twig colocado dentro del themes/<mytheme>/templates carpeta.

Por ejemplo, si tiene un archivo llamado contact.md, se renderizará con la plantilla de ramitas como themes/<mytheme>/templates/contact.html.twig.

Organización temática

En las siguientes secciones, discutiremos sobre la organización del tema, es decir, su definición, configuración y más.

Definición y configuración

La información sobre el tema se definirá en user/themes/antimatter/blueprints.yamlLas definiciones de archivos y formularios que se utilizarán en el panel de administración se proporcionan opcionalmente. Verá el siguiente contenido enuser/themes/antimatter/blueprints.yaml archivo para Antimatter theme.

name: Antimatter
version: 1.6.0
description: "Antimatter is the default theme included with **Grav**"
icon: empire
author:
   name: Team Grav
   email: [email protected]
   url: http://getgrav.org
homepage: https://github.com/getgrav/grav-theme-antimatter
demo: http://demo.getgrav.org/blog-skeleton
keywords: antimatter, theme, core, modern, fast, responsive, html5, css3
bugs: https://github.com/getgrav/grav-theme-antimatter/issues
license: MIT

form:
   validation: loose
   fields:
      dropdown.enabled:
         type: toggle
         label: Dropdown in navbar
         highlight: 1
         default: 1
         options:
            1: Enabled
            0: Disabled
         validate:
            type: bool

Para utilizar las opciones de configuración del tema, debe proporcionar la configuración predeterminada en un archivo llamado user/themes/<mytheme>/<mytheme>.yaml.

Example

enable: true

Eventos de temas y complementos

La capacidad del tema para interactuar con Grav a través de la arquitectura de complementos es otra característica poderosa de Grav. Para lograr esto, simplemente creeuser/themes/<mytheme>/<mytheme>.php (por ejemplo, antimatter.php para el tema de Antimateria predeterminado) y use el siguiente formato.

<?php
namespace Grav\Theme;

use Grav\Common\Theme;

class MyTheme extends Theme {
   public static function getSubscribedEvents() {
      return [
         'onThemeInitialized' => ['onThemeInitialized', 0]
      ];
   }
   public function onThemeInitialized() {
      if ($this->isAdmin()) {
         $this->active = false;
         return;
      }
      
      $this->enable([
         'onTwigSiteVariables' => ['onTwigSiteVariables', 0]
      ]);
   }
   public function onTwigSiteVariables() {
      $this->grav['assets']
         ->addCss('plugin://css/mytheme-core.css')
         ->addCss('plugin://css/mytheme-custom.css');

      $this->grav['assets']
         ->add('jquery', 101)
         ->addJs('theme://js/jquery.myscript.min.js');
   }
}

Plantillas

La estructura del tema Grav no tiene reglas establecidas, excepto que debe haber plantillas de ramitas asociadas en plantillas / carpeta para el contenido de todos y cada uno de los tipos de página.

Debido a este estrecho acoplamiento entre el contenido de la página y la plantilla twig, es bueno crear temas generales basados en los paquetes Skeleton disponibles en la página de descargas .

Suponga que desea admitir una plantilla modular en su tema, debe crear modular/carpeta y almacenar archivos de plantillas de ramitas en su interior. Si desea admitir formularios, debe crearform/ carpeta y almacene plantillas de formulario en ella.

Planos

Para definir formularios para opciones y configuración para cada archivo de plantilla. blueprints/se utiliza la carpeta. Estos no serán editables a través delAdministrator Panely se usa opcionalmente. El tema es completamente funcional sinblueprints carpeta.

SCSS / MENOS / CSS

Si desea desarrollar un sitio con SASS o LESS, debe crear subcarpetas en user/themes/<mytheme>/scss/o less/ si quieres MENOS junto con una carpeta css /.

Para archivos generados automáticamente que se compilan desde SASS o LESS, el css-compiled/se utiliza la carpeta. En el tema de la antimateria,scss se utiliza una variante de SASS.

Siga estos pasos para instalar SASS en su máquina.

En la raíz del tema, escriba el comando que se indica a continuación para ejecutar el script de shell scss.

$ ./scss.sh

Escriba el siguiente comando para ejecutarlo directamente.

$ scss --sourcemap --watch scss:css-compiled

los css-compiled/ contendrá todos los archivos scss compilados y el archivo css se generará dentro de su tema.

Otras carpetas

Se recomienda crear por separado images/, fonts/ y js/ carpetas en tu user/themes/<mytheme>/ carpeta para las imágenes, fuentes y archivos JavaScript utilizados en su tema.

Ejemplo de tema

La estructura general de carpetas del Antimatter El tema que discutimos hasta ahora se muestra a continuación.

↰ Previous page Next page ↱