Grav - Temas Básicos

Os temas controlam a aparência do seu site Grav. Os temas no Grav são desenvolvidos com o poderoso mecanismo Twig Templating .

Páginas de conteúdo e modelos Twig

As páginas que você cria fazem referência a um arquivo de modelo específico por nome ou definindo a variável de cabeçalho do modelo para a página. Usar o nome da página é recomendado para uma manutenção mais simples.

Depois de instalar o pacote Grav Base, você encontrará o defauld.mdarquivo na pasta user / pages / 01.home. O nome do arquivo, ou seja,default diz ao Grav que esta página deve ser renderizada com o modelo de galho default.html.twig colocado dentro do themes/<mytheme>/templates pasta.

Por exemplo, se você tiver um arquivo chamado contact.md, será renderizado com o modelo twig como themes/<mytheme>/templates/contact.html.twig.

Organização do Tema

Nas seções a seguir, discutiremos sobre a organização do tema, ou seja, sua definição, configuração e muito mais.

Definição e Configuração

As informações sobre o tema serão definidas em user/themes/antimatter/blueprints.yamlAs definições de arquivo e formulário a serem usadas no painel Administração são fornecidas opcionalmente. Você verá o seguinte conteúdo emuser/themes/antimatter/blueprints.yaml arquivo 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 usar as opções de configuração do tema, você precisa fornecer as configurações padrão em um arquivo chamado user/themes/<mytheme>/<mytheme>.yaml.

Example

enable: true

Eventos de tema e plug-ins

A capacidade do tema de interagir com o Grav por meio da arquitetura de plug-ins é outro recurso poderoso do Grav. Para conseguir isso, basta criaruser/themes/<mytheme>/<mytheme>.php (por exemplo, antimatter.php para o arquivo de tema Antimatter padrão) e use o seguinte 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');
   }
}

Modelos

A estrutura do tema Grav não tem regras definidas, exceto que deve haver modelos de galhos associados em modelos / pasta para cada tipo de conteúdo de página.

Devido a este acoplamento estreito entre o conteúdo da página e o modelo twig, é bom criar temas gerais com base nos pacotes Skeleton disponíveis na página de downloads .

Suponha que você queira oferecer suporte a um modelo modular em seu tema, você deve criar modular/pasta e armazena arquivos de modelos de galho dentro dela. Se você deseja oferecer suporte a formulários, deve criarform/ pasta e modelos de formulário de armazenamento nela.

Plantas

Para definir formulários para opções e configuração para cada arquivo de modelo único blueprints/pasta é usada. Eles não serão editáveis por meio doAdministrator Panele é usado opcionalmente. O tema é totalmente funcional semblueprints pasta.

SCSS / LESS / CSS

Se você deseja desenvolver um site com SASS ou LESS, deve criar subpastas em user/themes/<mytheme>/scss/, ou less/ se você quiser MENOS junto com uma pasta css /.

Para arquivos gerados automaticamente que são compilados do SASS ou LESS, o css-compiled/pasta é usada. No tema Antimatéria,scss variante do SASS é usada.

Siga estas etapas para instalar o SASS em sua máquina.

Na raiz do tema, digite o comando fornecido a seguir para executar o script de shell scss.

$ ./scss.sh

Digite o seguinte comando para executá-lo diretamente.

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

o css-compiled/ conterá todos os arquivos scss compilados e o arquivo css será gerado dentro do seu tema.

Outras Pastas

Recomenda-se criar separado images/, fonts/ e js/ pastas em seu user/themes/<mytheme>/ pasta para quaisquer imagens, fontes e arquivos JavaScript usados em seu tema.

Exemplo de tema

A estrutura geral da pasta do Antimatter tema que discutimos até agora é mostrado abaixo.

↰ Previous page Next page ↱