Grav: criação de sites rápidos e flexíveis

O Grav é um CMS de código aberto de arquivo simples, que não requer banco de dados e que foi desenvolvido para ser modular, fácil de usar e incrivelmente rápido. Sua estrutura sem banco de dados oferece aos usuários a vantagem de uma configuração simples, personalização direta e implementação rápida em qualquer servidor que execute o php 5.4 ou superior, incluindo o novo php 7.

O projeto Grav começou há cerca de um ano e recentemente entrou em um estágio de candidato a lançamento. Ele foi criado em grande parte por uma equipe muito pequena de desenvolvedores talentosos com experiência em trabalhar com sistemas de gerenciamento de conteúdo maiores, incluindo Joomla e WordPress.

Por que a Grav?

A inspiração por trás do desenvolvimento do Grav foi criar um CMS que preenchesse uma lacuna entre sites estáticos simples e blogs multiusuários complexos. Quando o fundador do projeto, Andy Miller, deu uma olhada nas soluções de arquivo simples já existentes, ele descobriu que as opções atuais eram comerciais, de baixa potência ou ambas.

Isso não foi por falta de tecnologia. O Twig tentador, a configuração YAML, o suporte a conteúdo markdown e outros recursos excepcionalmente fáceis de usar estavam disponíveis, mas ainda não haviam sido reunidos em um único CMS disponível gratuitamente.

Achamos que era importante tornar o Grav não apenas gratuito, mas também de código aberto. Isso permite que sua comunidade de desenvolvedores contribua com código, tenha uma opinião definitiva sobre o desenvolvimento do projeto e crie facilmente plug-ins e temas que aproveitem ao máximo os recursos do Grav.

Estrutura de arquivo plano

Um dos maiores recursos do Grav é sua estrutura de arquivo simples. Isso permite que ele não apenas se livre da necessidade de um banco de dados, mas que seu conteúdo seja simplesmente criado, trocado e editado.

Instalar o Grav em um servidor é tão simples quanto fazer o download do núcleo do Grav, ou de um esqueleto que inclua conteúdo de demonstração para que o senhor possa começar, e descompactá-lo em seu servidor.

Não há banco de dados para configurar ou assistente de instalação para trabalhar.

O Grav também tem uma estrutura organizacional intuitiva. Por exemplo, quase tudo que não é essencial para o Grav é armazenado em uma pasta de usuário. Isso inclui qualquer configuração e definições personalizadas, contas de usuário, temas, ativos específicos do site, plug-ins e conteúdo.

Em seu nível básico, o backup de um site do Grav é tão simples quanto fazer uma cópia da pasta do usuário.

O conteúdo do site é armazenado no diretório user/pages. Aqui, as páginas são organizadas usando uma estrutura de diretório. Cada publicação de blog, por exemplo, teria sua própria pasta contendo um arquivo markdown e todas as imagens usadas na publicação. As imagens podem ser armazenadas de várias maneiras diferentes, mas esse é um exemplo popular.

O senhor também pode separar categorias ou tipos de páginas por diretório. Por exemplo, se o seu site tiver uma área dedicada a Autores, na qual os perfis dos autores são mantidos, colocar esse conteúdo em sua própria pasta é uma maneira fácil de diferenciá-lo no sistema de menus do Grav.

Um tema pode ter vários modelos de página que permitem que o senhor crie estilos e layouts exclusivos para diferentes áreas do site. Os modelos de página são carregados de acordo com o nome do arquivo markdown. Por exemplo, se o arquivo markdown de uma postagem de blog tiver o nome de item.md, isso informa ao Grav para usar o modelo item.html.twig ao renderizar a página.

No exemplo visto na imagem alguns parágrafos acima, o senhor usou blog.md para fazer referência a um modelo de página de blog pai incluído no tema Antimatter.

Linha de comando avançada

O Grav foi projetado para atender às necessidades de seus usuários. Isso inclui dar aos usuários a capacidade de decidir se desejam controlar o Grav quase que inteiramente usando a linha de comando ou por meio de seu plug-in de administração simples, porém poderoso.

Depois de ter o núcleo do Grav em seu servidor, a instalação de praticamente qualquer tema ou plug-in é muito fácil. Nós temos documentação detalhada do GPM (Grav Package Manager) e dos comandos da CLI do Grav, mas daremos um exemplo básico de como o senhor pode começar a trabalhar aqui.

Digamos que o senhor tenha acabado de instalar o núcleo do Grav e queira adicionar o tema TwentyFifteen. Tudo o que o senhor precisa fazer é digitar bin/gpm install twentyfifteen.

Deseja fazer backup do conteúdo de seu site? Basta digitar bin/grav backup no diretório do site para gerar um arquivo zip, pré-rotulado com a data e a hora em que o backup foi realizado.

Plugins

A arquitetura muito flexível e modular do Grav permite que qualquer coisa seja escrita apenas como um plug-in. O Grav Core pode funcionar sozinho, tudo o que o senhor precisará é de um tema e nada mais, mas para enriquecer sua experiência ou complementar os requisitos de um site, tudo se resume a plug-ins.

Os plug-ins podem ser anexados a um grande número de eventos que o Grav Core aciona ao executar suas tarefas. Todos os eventos e tarefas são bastante otimizados para manter a prioridade nº 1 do Grav, que é a velocidade.

O Grav é tão flexível que conseguimos criar todo o gerenciador de administração em um único plug-in.

O plug-in Admin do Grav oferece aos usuários uma interface intuitiva e fácil de seguir para gerenciar a configuração e o conteúdo do Grav. A meta por trás do plug-in era tornar o Grav acessível a qualquer pessoa, independentemente do nível de conhecimento técnico.

Sua estrutura dinâmica é possível graças ao sistema de configuração YAML do Grav, que extrai opções e configurações de plug-ins e temas e as apresenta de forma intuitiva e natural para o usuário.

A atual biblioteca de plug-ins gratuitos do Grav apresenta mais de 70 plug-ins, com mais sendo produzidos o tempo todo.

Mesmo que ainda não haja um plug-in disponível que atenda às suas necessidades, criar um para o Grav é o mais simples possível, graças, em grande parte, à sua base de código YAML + Twig.

Talvez o elemento mais importante no DNA do Grav seja sua comunidade. Desde o primeiro dia, o desenvolvimento ocorreu em público no GitHub, com a participação incentivada de várias maneiras.

Desde os problemas do GitHub até a sala de bate-papo do Gitter, os usuários podem interagir diretamente com a equipe de desenvolvimento do Grav para oferecer feedback, fazer perguntas e levantar quaisquer problemas que encontrarem. Há até mesmo um fórum, desenvolvido pela Muut, onde os usuários podem encontrar informações, solicitar suporte mais detalhado e conhecer outros usuários do Grav.

É essa dedicação ao desenvolvimento orientado pela comunidade, juntamente com a filosofia livre e aberta do Grav, que o torna uma opção única para quem busca um CMS rápido, leve e simples de entender.

Criação de um novo tipo de página com campos personalizados

A melhor maneira de ter uma ideia de como o Grav funciona do ponto de vista do desenvolvimento é mergulhar de cabeça e vê-lo em ação. O senhor pode fazer download do núcleo do Grav, de alguns plug-ins e até mesmo de temas gratuitos em GetGrav.org. O senhor pode até encontrar esqueletos para ajudá-lo a começar a trabalhar com o Grav, um tema e alguns exemplos de conteúdo.

Para começar, vamos examinar o processo de criação de um novo modelo de página com alguns estilos e funcionalidades exclusivos. Para fins deste exemplo, vamos supor que o senhor já tenha instalado o Core Grav que inclui uma única página inicial, e o pacote Antimatéria tema.

Uma lista de recursos é uma técnica moderna e comum de interface de usuário que pode transmitir rapidamente os principais recursos do seu produto, empresa ou serviço. Geralmente, elas têm a aparência de um ícone simples com um título e um subtítulo abaixo.

Seria ótimo se houvesse uma maneira simples de criar facilmente alguns recursos iniciais e poder modificá-los facilmente e adicionar mais, se necessário. Isso pode ser feito com a funcionalidade integrada de cabeçalho personalizado do Grav, combinada com um modelo Twig personalizado para renderização e até mesmo um blueprint personalizado para fornecer uma interface para o plug-in Admin.

Vamos começar a trabalhar!

1. Criar uma nova página

A primeira coisa que precisamos fazer é criar uma pasta para abrigar o arquivo markdown que representará o conteúdo. A pasta também tem a capacidade adicional de fornecer um arquivo URL slug e ordem na navegação. O senhor já terá uma página inicial contida em 01.homeportanto, basta criar outra pasta no mesmo nível chamada 02.features. Isso garantirá que o recursos a página vem depois home, acessível pelo slug /features.

Nessa pasta, crie um novo arquivo chamado features.md. Ao usar o nome recursosTambém vamos dizer ao Grav para usar um arquivo de modelo do nosso tema chamado features.html.twig. Criaremos esse modelo mais tarde.

Neste features.md precisamos definir alguns cabeçalhos no formato YAML entre --- marcadores. Normalmente chamamos isso de frontmatter YAML.

---
title: Features
features:
    - title: Crazy Fast
      subtitle: So fast it will make your head spin
      icon: fighter-jet
    - title: Easily Extended
      subtitle: Built to be highly extensible
      icon: puzzle-piece
    - title: Fun to Use
      subtitle: Making web development work fun again
      icon: truck
---

# Features List

Check out a taste of our amazing features

Embora o Grav ofereça suporte a um poderoso conjunto de configurações de cabeçalhotodas são opcionais.

No entanto, definimos o título para maior clareza. Também criamos um campo personalizado chamado features que consiste em uma lista YAML. Cada um dos três itens de recurso (denotados pelo símbolo -) contém três elementos: título, subtítuloe ícone.

Esses nomes são completamente arbitrários e são simplesmente nomeados de forma apropriada para nossas necessidades. É claro que o senhor pode adicionar mais itens se desejar, mas esses três serão suficientes para o nosso exemplo.

OBSERVAÇÃO: Estamos usando nomes de ícones do FontAwesome, mas o tema Antimatter já carrega isso para nós. Se o senhor usar um tema personalizado, precisará garantir que isso seja carregado.

Abaixo da seção de matéria frontal (conforme indicado pelo símbolo --- ), temos alguns cabeçalhos básicos de markdown para fornecer um título e uma descrição para os recursos que serão exibidos em uma grade.

2. Criar um modelo Twig

Quando o Grav for inicializado, ele analisará essas informações da página e armazenará o objeto resultante no cache. Em seguida, ele estará disponível para ser usado para renderizar o HTML apropriado na forma de um modelo Twig.

Os modelos Twig são normalmente armazenados no diretório templates/ ou em seu tema atual. Crie um novo arquivo em seu tema chamado features.html.twig. Ele será usado automaticamente para renderizar a página, pois usamos o nome de arquivo de página features.md. Nesse arquivo, precisaremos repetir os recursos que definimos na página e exibi-los em um formato que possamos manipular facilmente com CSS:

{% extends 'partials/base.html.twig' %}

{% block content %}
<div class="features">
    {{ content }}
    <ul>
    {% for feature in page.header.features %}
        <li>
            <i class="fa fa-fw fa-{{ feature.icon }}"></i>
            <h4>{{ feature.title }}</h4>
            <p>{{ feature.subtitle }}</p>
        </li>
    {% endfor %}
    </ul>
</div>
{% endblock %}

O {% extends %} e o {% block %} são usadas para instruir o Twig a estender a definição de partials/base.html.twig e substituir o bloco de conteúdo básico vazio por esse personalizado. O {{ content }} exibirá a seção de conteúdo markdown da página de recursos. Abaixo disso, fazemos um loop sobre cada um dos itens da lista no elemento page.header.features que é onde definimos cada item de recurso.

3. Dê a ele algum estilo

Tudo o que resta é fornecer alguns estilos de CSS para garantir que a lista de recursos seja renderizada adequadamente. Podemos fazer isso criando um arquivo no diretório css/ do nosso tema chamado custom.css. No tema Antimatter, ela é inserida automaticamente na página, caso exista:

.features {
    text-align: center;
}

.features h1, .features h4 {
    margin-bottom: 0;
    line-height: 1.2;
}

.features > p {
    font-size: 1.1rem;
}

.features p {
    margin-top: 0;
}

.features ul {
    margin: 3rem 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.features li {
    padding: 1rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.features li i {
    font-size: 6rem;
    margin: 0 auto;
}

@media all and (min-width: 40em) {
    .features li {
        width: 50%;
    }
}
@media all and (min-width: 60em) {
    .features li {
        width: 33.33%;
    }
}

Isso é CSS suficiente para fornecer uma representação básica que exibirá nossos recursos em uma grade de 3 itens.

Tudo o que resta é testar os resultados. Basta apontar seu navegador para a página inicial do Grav e adicionar /features ao endereço de URL. O senhor deverá ver algo parecido com isto:

4. Plano de administração

Como o Grav é um CMS de arquivo simples, tudo pode ser realizado a partir do sistema de arquivos.

No entanto, ao fornecer uma solução aos clientes, uma interface de administração baseada na Web é de grande ajuda para aqueles que não estão familiarizados ou não se sentem à vontade com esses conceitos. O Grav tem um plug-in de administração flexível que pode ser usado nesses casos, e os formulários dentro dele podem ser estendidos e modificados com o uso de arquivos YAML chamados Blueprints.

Um blueprint define um formulário e, no caso do nosso recursos queremos adicionar uma nova guia para abrigar a lista de recursos. Isso pode ser feito adicionando uma nova guia features.yaml no arquivo blueprints/ do tema Antimatter.

Isso basicamente informa ao administrador como deve ser o formulário para o modelo de recurso a fim de salvar os dados adequadamente no features.md frontmatter. Abaixo está um exemplo do arquivo de blueprint:

title: Features
@extends: 
    type: default
    context: blueprints://pages 

form:
  fields:
    tabs:
      fields:
        features:
          type: tab
          title: Features
          fields:
            header.features:
              name: features
              type: list
              label: Features

              fields:
                .title:
                  type: text
                  label: Title
                .subtitle:
                  type: text
                  label: Subtitle
                .icon:              
                  type: text
                  label: Icon

Se o senhor examinar esse arquivo, descobrirá que ele é muito fácil de ler. Em essência, ele simplesmente estende o arquivo default.yaml que é fornecido pelo Grav. Em seguida, ele adiciona uma nova guia com o título fetaures. Nessa guia, há um campo do tipo list e essa lista contém um conjunto de texto campos para o título, subtítulo e ícone. Depois de salvar esse arquivo, o senhor poderá visualizar, editar e adicionar novos recursos por meio do painel de administração:

É isso aí! Agora o senhor está pronto para começar a trabalhar com o Grav. Se estiver interessado em saber mais, ou se quiser saber mais sobre como o Grav funciona, o senhor pode conferir o site do Grav a documentação detalhada do Grav.