Grav - Hướng dẫn Chủ đề

Trong chương này, chúng ta hãy tạo một chủ đề Grav để hiểu khái niệm này.

Phản vật chất

Khi bạn cài đặt gói cơ sở Grav, mặc định Antimatter chủ đề được cài đặt, sử dụng Nucleus(một tập hợp kiểu CSS cơ bản đơn giản). Nucleus là một khung công tác CSS nhẹ có chứa kiểu CSS thiết yếu và đánh dấu HTML mang lại giao diện độc đáo.

Bootstrap

Hãy để chúng tôi tạo một chủ đề sử dụng khung Bootstrap phổ biến . Bootstrap là một khuôn khổ HTML, CSS và JS mã nguồn mở và phổ biến nhất, giúp phát triển web front-end nhanh hơn và dễ dàng hơn.

Các bước sau đây mô tả việc tạo chủ đề:

Bước 1: Thiết lập chủ đề cơ sở

Có một số yếu tố chính đối với chủ đề Grav như chúng ta đã nghiên cứu trong chương Cơ bản về chủ đề sẽ được tuân theo để tạo chủ đề mới.

Sau khi cài đặt gói cơ sở Grav, hãy tạo một thư mục có tên là bootstrap trong user/themes thư mục như hình dưới đây.

Bên trong user/themes/bootstrap thư mục, tạo css/, fonts/, images/, js/ và templates/ như hình bên dưới.

Tạo một tệp chủ đề có tên bootstrap.php trong của bạn user/themes/bootstrap và dán nội dung sau vào đó.

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

Bây giờ, hãy tạo một tệp cấu hình chủ đề bootstrap.yaml trong themes/bootstrap thư mục và viết nội dung sau vào đó.

enable: true

Chúng tôi sẽ bỏ qua blueprints vì chúng tôi không có tùy chọn cấu hình và sẽ sử dụng CSS thông thường cho chương này.

Bước 2: Thêm Bootstrap

Để tạo một chủ đề bootstrap, bạn phải bao gồm Bootstrap trong chủ đề của mình. Vì vậy bạn cần tải xuống gói Bootstrap mới nhất bằng cách nhấp vào liên kết này như hình dưới đây.

Giải nén gói và bạn sẽ thấy ba thư mục cụ thể là css, phông chữ và js. Bây giờ sao chép nội dung của 3 thư mục này vào các thư mục có tên tương tự tronguser/themes/bootstrap đã được tạo trước đó.

Bước 3: Mẫu cơ sở

Như chúng ta đã nghiên cứu trong chương trước, nội dung được lưu trữ trong default.md tệp hướng dẫn Grav tìm kiếm mẫu kết xuất được gọi là default.html.twig. Tệp này bao gồm mọi thứ bạn cần để hiển thị một trang.

Có một giải pháp tốt hơn là sử dụng thẻ Twig Extends cho phép bạn xác định bố cục cơ sở với các khối . Điều này sẽ cho phép khuôn mẫu cành cây mở rộng khuôn mẫu cơ sở và cung cấp định nghĩa cho các khối được xác định trong cơ sở.

Làm theo các bước sau để tạo một mẫu cơ sở Bootstrap đơn giản -

Tạo một thư mục có tên partials bên trong user/themes/bootstrap/templatesthư mục. Điều này được sử dụng để lưu trữ mẫu cơ sở của chúng tôi.
bên trong partials thư mục, tạo một base.html.twig tập tin với nội dung sau.

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

Bước 4: Chia nhỏ

Hãy xem cách mã hoạt động trong base.html.twig tập tin như hình dưới đây.

{% block head %}{% endblock head %}cú pháp được sử dụng để xác định một khu vực trong khuôn mẫu Twig cơ sở. Người đứng đầu bên trong{% endblock head %} Là tùy chọn.
Câu lệnh if kiểm tra xem có meta descriptionđặt trong tiêu đề trang hay không. Nếu không được đặt, thì mẫu sẽ hiển thị bằng cách sử dụngsite.description như được định nghĩa trong user/config/site.yaml tập tin.
Đường dẫn của chủ đề hiện tại được đưa ra bởi theme_url Biến đổi .
Cú pháp {% do assets.add('theme://css/bootstrap.min.css',101) %} được sử dụng để tận dụng Asset Manager. Cáctheme://đại diện cho đường dẫn chủ đề hiện tại và 101 đại diện cho thứ tự trong đó giá trị cao hơn đứng trước sau đó là giá trị thấp hơn. Chúng tôi cũng có thể cung cấp các liên kết CDN một cách rõ ràng như sau:

{% 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ất cả các thẻ JavaScript và thẻ liên kết CSS được hiển thị bởi mẫu khi gọi đến {{ assets.css() }} hoặc là {{ assets.js() }} được thực hiện tương ứng.
Cú pháp {# ... #} được sử dụng để viết bình luận trong Twig.
Để bao gồm một mẫu Twig khác {% include 'partials/header.html.twig' %} thẻ được sử dụng.
Nội dung từ một mẫu được cung cấp bởi {% block content %}{% endblock %} nhãn.
Để thêm mã phân tích hoặc khởi tạo JavaScript tùy chỉnh, {% block bottom %}{% endblock %} được sử dụng làm trình giữ chỗ cho các mẫu.

Bước 5: Mẫu tiêu đề

Khi nào {% include 'partials/header.html.twig' %}được thực thi, công cụ kết xuất Twig tìm kiếm mẫu Twig. Vì vậy, hãy tạoheader.html.twig tệp mẫu bên trong user/themes/bootstrap/templates/partials thư mục với nội dung sau.

<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ạn mã trên tạo một thanh điều hướng và tự động hiển thị tất cả các mục menu bất cứ khi nào một trang mới được tạo trong user/pages thư mục.

Step 6 − Default Template

Mỗi mục của nội dung có một tên tệp cụ thể chẳng hạn như default.md hướng dẫn Grav tìm kiếm tệp mẫu có tên default.html.twig. Bây giờ hãy để chúng tôi tạodefault.html.twig nộp hồ sơ của bạn user/themes/bootstrap/templates/ thư mục với nội dung sau.

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

Trên default.html.twig tập tin mở rộng partials/base.html.twig và yêu cầu mẫu cơ sở sử dụng {{ page.content }} cho content khối.

Bước 7: CSS chủ đề

Trong partials/base.html.twig tệp chúng tôi đã tham chiếu đến css chủ đề tùy chỉnh bằng cách sử dụng assets.add('theme://css/bootstrap-custom.css',100), nơi lưu trữ bất kỳ CSS tùy chỉnh nào được sử dụng trong trang web của bạn.

Bây giờ chúng ta hãy tạo một tệp bootstrap-custom.css trong thư mục user / themes / bootstrap / css với nội dung sau:

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