Grav - Tema Eğitimi

Bu bölümde, kavramı anlamak için bir Grav teması oluşturalım.

Antimadde

Grav temel paketini kurduğunuzda, varsayılan Antimatter tema yüklü Nucleus(basit bir CSS stil temel seti). Nucleus, benzersiz bir görünüm ve his veren temel CSS stilini ve HTML işaretlemesini içeren hafif bir CSS çerçevesidir.

Önyükleme

Popüler Bootstrap çerçevesini kullanan bir tema oluşturalım . Bootstrap, ön uç web geliştirmeyi daha hızlı ve daha kolay hale getiren açık kaynaklı ve en popüler HTML, CSS ve JS çerçevesidir.

Aşağıdaki adımlar temanın oluşturulmasını açıklamaktadır -

Adım 1: Temel Tema kurulumu

Tema Temelleri bölümünde çalıştığımız gibi, Grav temasının yeni tema oluşturmak için takip edilmesi gereken bazı temel unsurları var .

Grav temel paketini kurduktan sonra, altta bootstrap adlı bir klasör oluşturun. user/themes klasörü aşağıda gösterildiği gibi.

İçinde user/themes/bootstrap klasör oluştur css/, fonts/, images/, js/ ve templates/ Aşağıda gösterildiği gibi.

Adlı bir tema dosyası oluşturun bootstrap.php senin içinde user/themes/bootstrap klasörünü açın ve aşağıdaki içeriği içine yapıştırın.

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

Şimdi bir tema yapılandırma dosyası oluşturun bootstrap.yaml içinde themes/bootstrap klasörünü açın ve aşağıdaki içeriği içine yazın.

enable: true

Atlayacağız blueprints hiçbir yapılandırma seçeneğimiz olmadığından ve bu bölüm için normal CSS kullanacağımızdan.

Adım 2: Bootstrap ekleyin

Bir bootstrap teması oluşturmak için, temanıza Bootstrap'ı eklemelisiniz. Bu nedenle, aşağıda gösterildiği gibi bu bağlantıya tıklayarak en son Bootstrap paketini indirmeniz gerekir .

Paketi açın ve css, fonts ve js olmak üzere üç klasör göreceksiniz. Şimdi bu 3 klasörün içeriğini benzer şekilde adlandırılmış klasörlere kopyalayın.user/themes/bootstrap daha önce oluşturulmuş.

3. Adım: Temel Şablon

Önceki bölümde çalıştığımız gibi içerik, default.md Grav'a adı verilen işleme şablonunu aramasını söyleyen dosya default.html.twig. Bu dosya, bir sayfayı görüntülemek için ihtiyacınız olan her şeyi içerir.

Temel düzeni bloklarla tanımlamanıza izin veren Twig Extends etiketini kullanan daha iyi bir çözüm var . Bu, dal şablonunun temel şablonu genişletmesine ve temelde tanımlanan bloklar için tanımlamalar sağlamasına izin verecektir.

Basit bir Bootstrap temel şablonu oluşturmak için şu adımları izleyin -

Adlı bir klasör oluşturun partials içinde user/themes/bootstrap/templatesKlasör. Bu, temel şablonumuzu saklamak için kullanılır.
İçinde partials klasör oluştur base.html.twig aşağıdaki içeriğe sahip dosya.

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

4. Adım: Parçalama

Bakalım kodun nasıl çalıştığını base.html.twig dosya aşağıda gösterildiği gibi.

{% block head %}{% endblock head %}sözdizimi, temel Twig şablonunda bir alanı tanımlamak için kullanılır. İçindeki kafa{% endblock head %} İsteğe bağlı.
İf ifadesi, bir meta descriptionsayfa başlıklarında ayarlansın veya ayarlanmasın. Ayarlanmazsa, şablon kullanılarak oluşturulmalıdırsite.description tanımlandığı gibi user/config/site.yaml dosya.
Mevcut temanın yolu, theme_url değişken.
Sözdizimi {% do assets.add('theme://css/bootstrap.min.css',101) %} kullanmak için kullanılır Asset Manager. theme://mevcut tema yolunu temsil eder ve 101, daha yüksek değerin önce geldiği sırayı ve ardından daha düşük değeri gösterir. CDN bağlantılarını açıkça şu şekilde de sağlayabiliriz:

{% 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') %}

Tüm JavaScript etiketleri ve CSS bağlantı etiketleri, çağrıldığında şablon tarafından oluşturulur. {{ assets.css() }} veya {{ assets.js() }} sırasıyla yapılır.
Sözdizimi {# ... #} Twig'de yorum yazmak için kullanılır.
Başka bir Twig şablonu eklemek için {% include 'partials/header.html.twig' %} etiketi kullanılır.
Bir şablondaki içerik, {% block content %}{% endblock %} etiket.
Özel JavaScript başlatma veya analitik kodlar eklemek için, {% block bottom %}{% endblock %} etiketi, şablonlar için yer tutucu olarak kullanılır.

Adım 5: Başlık Şablonu

Ne zaman {% include 'partials/header.html.twig' %}çalıştırıldığında, Twig oluşturma motoru Twig şablonunu arar. Öyleyse yaratheader.html.twig şablon dosyası içinde user/themes/bootstrap/templates/partials aşağıdaki içeriğe sahip klasör.

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

Yukarıdaki kod bir gezinti çubuğu oluşturur ve her yeni sayfa oluşturulduğunda tüm menü öğelerini otomatik olarak görüntüler. user/pages Klasör.

Step 6 − Default Template

İçeriğin her bir öğesinin belirli bir dosya adı vardır. default.md bu, Grav'a adı verilen bir şablon dosyasını aramasını söyler default.html.twig. Şimdi oluşturalımdefault.html.twig dosyanda user/themes/bootstrap/templates/ aşağıdaki içeriğe sahip klasör.

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

Yukarıdaki default.html.twig dosya uzatır partials/base.html.twig ve temel şablona kullanmasını söyler {{ page.content }} için content blok.

7. Adım: Tema CSS

İçinde partials/base.html.twig kullanarak özel bir tema css'ine başvurduğumuz dosya assets.add('theme://css/bootstrap-custom.css',100), sitenizde kullanılan herhangi bir özel CSS'yi depolayan.

Şimdi user / themes / bootstrap / css klasöründe aşağıdaki içeriğe sahip bir bootstrap-custom.css dosyası oluşturalım -

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