Grav - Tutorial de tema

Neste capítulo, vamos criar um tema Grav para entender o conceito.

Antimatéria

Quando você instala o pacote Grav base, o padrão Antimatter o tema está instalado, que usa Nucleus(um conjunto básico de estilo CSS). O Nucleus é uma estrutura CSS leve que contém um estilo CSS essencial e marcação HTML que oferece uma aparência única.

Bootstrap

Vamos criar um tema que utiliza a estrutura popular do Bootstrap . Bootstrap é um framework HTML, CSS e JS de código aberto mais popular, tornando o desenvolvimento front-end da web mais rápido e fácil.

As etapas a seguir descrevem a criação do tema -

Etapa 1: configuração do tema básico

Existem alguns elementos-chave para o tema Grav conforme estudamos no capítulo Fundamentos do tema que devem ser seguidos para criar um novo tema.

  • Depois de instalar o pacote Grav base, crie uma pasta chamada bootstrap sob o user/themes pasta conforme mostrado abaixo.

  • Dentro de user/themes/bootstrap pasta, criar css/, fonts/, images/, js/ e templates/ como mostrado abaixo.

  • Crie um arquivo de tema chamado bootstrap.php na tua user/themes/bootstrap pasta e cole o seguinte conteúdo nela.

<?php
namespace Grav\Theme;
use Grav\Common\Theme;
class Bootstrap extends Theme {}

  • Agora, crie um arquivo de configuração de tema bootstrap.yaml dentro themes/bootstrap pasta e escrever o seguinte conteúdo nela.

enable: true

  • Vamos pular o blueprints pasta já que não temos opções de configuração e usaremos CSS normal para este capítulo.

Etapa 2: adicionar bootstrap

Para criar um tema de bootstrap, você deve incluir o Bootstrap em seu tema. Portanto, você precisa baixar o pacote Bootstrap mais recente clicando neste link conforme mostrado abaixo.

Descompacte o pacote e você verá três pastas: css, fonts e js. Agora copie o conteúdo dessas 3 pastas em pastas com nomes semelhantes emuser/themes/bootstrap que foram criados anteriormente.

Etapa 3: modelo básico

Como estudamos no capítulo anterior, o conteúdo é armazenado no default.md arquivo que instrui o Grav a procurar o modelo de renderização chamado default.html.twig. Este arquivo inclui tudo o que você precisa para exibir uma página.

Existe uma solução melhor que utiliza a tag Twig Extends que permite definir o layout base com blocos . Isso permitirá que o modelo de galho estenda o modelo de base e forneça definições para blocos definidos na base.

Siga estas etapas para criar um modelo básico simples de Bootstrap -

  • Crie uma pasta chamada partials no user/themes/bootstrap/templatespasta. Isso é usado para armazenar nosso modelo básico.

  • No partials pasta, crie um base.html.twig arquivo com o seguinte conteúdo.

<!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>

Etapa 4: decompondo

Vamos ver como o código funciona em base.html.twig arquivo como mostrado abaixo.

  • {% block head %}{% endblock head %}sintaxe usada para definir uma área no template base do Twig. A cabeça dentro do{% endblock head %} é opcional.

  • A instrução if testa se há um meta descriptiondefinido nos cabeçalhos da página ou não. Se não for definido, o modelo deve renderizar usandosite.description conforme definido no user/config/site.yaml Arquivo.

  • O caminho do tema atual é fornecido pelo theme_url variável .

  • A sintaxe {% do assets.add('theme://css/bootstrap.min.css',101) %} é usado para fazer uso do Asset Manager. otheme://representa o caminho do tema atual e 101 representa a ordem em que o valor mais alto vem primeiro, seguido pelo valor mais baixo. Também podemos fornecer os links CDN explicitamente 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 as tags JavaScript e tags de link CSS são renderizadas pelo modelo quando chamada para {{ assets.css() }} ou {{ assets.js() }} é feito respectivamente.

  • A sintaxe {# ... #} é usado para escrever comentários no Twig.

  • Para incluir outro modelo Twig {% include 'partials/header.html.twig' %} tag é usada.

  • O conteúdo de um modelo é fornecido pelo {% block content %}{% endblock %} tag.

  • Para adicionar inicialização JavaScript customizada ou códigos analíticos, o {% block bottom %}{% endblock %} tag é usada como espaço reservado para modelos.

Etapa 5: modelo de cabeçalho

Quando {% include 'partials/header.html.twig' %}é executado, o mecanismo de renderização Twig procura o template Twig. Então crie oheader.html.twig arquivo de modelo dentro user/themes/bootstrap/templates/partials pasta com o seguinte conteúdo.

<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>

O código acima cria uma barra de navegação e exibe todos os itens de menu automaticamente sempre que uma nova página é criada no user/pages pasta.

Step 6 − Default Template

Cada item do conteúdo tem um nome de arquivo específico, como default.md que instrui o Grav a procurar por um arquivo de modelo chamado default.html.twig. Vamos agora criar odefault.html.twig arquivo em seu user/themes/bootstrap/templates/ pasta com o seguinte conteúdo.

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

O de cima default.html.twig arquivo estende o partials/base.html.twig e diz ao modelo básico para usar {{ page.content }} para o content quadra.

Etapa 7: CSS do tema

Dentro partials/base.html.twig arquivo que referenciamos a um css de tema personalizado usando assets.add('theme://css/bootstrap-custom.css',100), que armazena qualquer CSS personalizado usado em seu site.

Vamos agora criar um arquivo bootstrap-custom.css na pasta user / themes / bootstrap / css com o seguinte conteúdo -

/* 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;
}

Etapa 8: Teste

Mude o seu tema padrão com o novo bootstraptema. Abra ouser/config/system.yaml arquivo e edite a linha que contém -

pages:
   themes: antimatter

e altere o código acima para -

pages:
   theme: bootstrap

Agora recarregue seu site Grav e você verá o tema recém-instalado, conforme mostrado abaixo.