Grav - Personalização do Tema

Neste capítulo, vamos estudar sobre Theme Customization. Existem várias maneiras de personalizar seu tema. Grav fornece muitos recursos e algumas funcionalidades para personalizar facilmente seu tema.

CSS customizado

Você pode fornecer o seu próprio custom.cssarquivo para personalizar seu tema. O tema da Antimatéria refere-se aocss/custom.css arquivo através do uso de Asset Manager. Se nenhuma referência ao arquivo CSS for encontrada, oAsset Managernão adicionará a referência ao HTML. Criando o arquivo CSS no Antimatter'scss/pasta substituirá o CSS padrão. Por exemplo -

custom.css

body a {
   color: #FFFF00;
}

A cor padrão do link é substituída e definida como amarelo.

SCSS personalizado / MENOS

Outra maneira de fornecer um arquivo CSS personalizado é usando o custom.scssArquivo. O SCSS (Syntactically Awesome Style Sheets) é um pré-processador CSS que permite construir CSS de forma eficiente através do uso de operadores, variáveis, estruturas aninhadas, importações, parciais e mix-ins. A Antimatéria é escrita usando SCSS.

Para usar o SCSS, você precisa do compilador SCSS. Você pode usar as ferramentas de linha de comando e os aplicativos GUI para instalar compiladores SCSS em qualquer plataforma. A antimatéria usa oscss/ pasta para colocar todos os seus .scssarquivos. Os arquivos compilados são armazenados emcss-compiled/ pasta.

o SCSS os arquivos devem ser observados para quaisquer atualizações que podem ser feitas usando o seguinte comando -

scss --watch scss:css-compiled

O comando acima diz ao compilador SCSS para observar o diretório chamado scss e sempre que o css-compiled pasta é atualizada, o compilador SCSS deve compilá-la.

Você pode manter seu código SCSS personalizado em scss/template/_custom.scssArquivo. Existem muitas vantagens em manter seu código neste arquivo.

Qualquer atualização dos arquivos SCSS e outros arquivos CSS são compilados em css-compiled/template.css Arquivo
Você pode acessar qualquer um dos SCSS que são usados no seu tema e fazer uso de todas as variáveis e mix-ins disponíveis para ele.
Para um desenvolvimento mais fácil, você terá acesso a todos os recursos e funcionalidades do SCSS padrão.

Um exemplo de _custom.scss arquivo é mostrado abaixo -

body {
   a {
      color: darken($core-accent, 20%);
   }
}

Quando você atualizar seu tema, todos os css personalizados serão substituídos. Esta é a principal desvantagem de escolher essa forma de personalizar um tema. Isso pode ser resolvido usando a herança do tema.

Herança de tema

Theme Inheritanceé a melhor maneira de modificar ou personalizar um tema e pode ser feito com algumas configurações. A ideia básica é que um tema seja definido como o tema base do qual você está herdando, e apenas algumas partes podem ser modificadas e o resto das coisas é tratado pelo tema base. A vantagem de usar a herança do tema é que o tema herdado personalizado não será impactado diretamente sempre que o tema base for atualizado. Para fazer isso, você precisa seguir estas etapas.

Para armazenar seu novo tema, crie uma nova pasta chamada mytheme/ dentro /user/themes/ pasta.
Em seguida, você precisa criar um novo arquivo YAML de tema chamado mytheme.yaml sob o recém-criado /user/themes/mytheme/ pasta com o seguinte conteúdo.

streams:
   schemes:
      theme:
         type: ReadOnlyStream
         prefixes:
            '':
               - user/themes/mytheme
               - user/themes/antimatter

Crie um arquivo YAML chamado blueprints.yaml debaixo de /user/themes/mytheme/ pasta com o seguinte conteúdo.

name: MyTheme
version: 1.0.0
description: "Extending Antimatter"
icon: crosshairs
author:
   name: Team Grav
   email: [email protected]
   url: http://getgrav.org

Agora vamos entender como definir um tema blueprints.yamlque consiste em elementos básicos. Mais detalhes podem ser fornecidos para definições de formulário para controlar as funcionalidades do formulário. oblueprints.yaml arquivo pode ser examinado para obter mais detalhes sobre isso.

Na tua user/config/system.yaml edição de arquivo pages: theme: opção para alterar seu tema padrão para um novo tema, conforme mostrado abaixo.

pages:
   theme: mytheme

Agora um novo tema é criado e a Antimatéria será o tema base para este novo mythemetema. Se você deseja modificar o SCSS específico, precisamos configurar o compilador SCSS para que pareça seumytheme tema primeiro e, em segundo lugar, o tema da Antimatéria.

Ele usa as seguintes configurações -

Primeira cópia do template.scss arquivo que é colocado no antimatter/scss/ pasta e cole na mytheme/scss/pasta. Este arquivo conterá todos os@import pede vários arquivos como template/_custom.scss e sub-arquivos.
o load-path aponta para antimatter/scss/pasta que contém um grande número de arquivos SCSS. Para executar o compilador SCSS, você precisa fornecerload-path to it as shown below.

scss --load-path ../antimatter/scss --watch scss:css-compiled

Agora, crie um arquivo chamado _custom.scss debaixo mytheme/scss/template/. Este arquivo conterá todas as suas modificações.

Quando o arquivo SCSS personalizado é alterado, automaticamente todos os arquivos SCSS serão compilados novamente em template.css que está localizado sob o mytheme/css-compiled/ pasta e então o Grav faz referência a isso com precisão.