Grav - 主题教程

在本章中,让我们创建一个Grav主题来理解这个概念.

Antimatter

当您安装Grav基础包时,安装了默认反物质主题,它使用了 Nucleus (CSS样式的简单基本集). Nucleus是一个轻量级的CSS框架,包含基本的CSS样式和HTML标记,提供独特的外观和感觉.

Bootstrap

让我们创建一个主题利用流行的 Bootstrap框架. Bootstrap是一个开源和最流行的HTML,CSS和JS框架,使前端Web开发更快更容易.

以下步骤描述了主题 : 的创建;

第1步:基本主题设置

我们在主题基础章节,以便创建新主题.

  • 安装Grav基础软件包后,在 user/themes 文件夹下创建一个名为bootstrap的文件夹,如下所示.

Grav Theme Tutorial

  • user/themes/bootstrap 文件夹中,创建 css/,fonts/,images/,js/ templates/如下所示.

 Grav主题教程

  • 用户/中创建名为 bootstrap.php 的主题文件themes/bootstrap 文件夹并将以下内容粘贴到其中.

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

  • 现在,创建一个主题配置文件 themes/bootstrap 文件夹中的 bootstrap.yaml ,并在其中写下以下内容.

enable: true

  • 我们将跳过蓝图文件夹,因为我们没有配置选项,本章将使用常规CSS.

步骤2:添加引导程序

要创建引导程序主题,必须在主题中包含Bootstrap.因此,您需要下载最新的Bootstrap软件包,如下所示.

Grav Theme Tutorial

解压缩包,你会看到三个文件夹即css,fonts和js.现在将这3个文件夹的内容复制到之前创建的 user/themes/bootstrap 中类似命名的文件夹中.

步骤3:基本模板

正如我们在前一章中所研究的那样,内容存储在 default.md 文件中,该文件指示Grav查找名为 default.html的渲染模板.树枝的.此文件包含显示页面所需的所有内容.

有一个更好的解决方案,利用Twig Extends 标签,允许您使用<a target ="_ blank"定义基本布局块的.这将允许twig模板扩展基本模板并为基础中定义的块提供定义.

按照以下步骤创建一个简单的Bootstrap基本模板 :

  • user/themes/bootstrap/templates 文件夹中创建名为 partials 的文件夹.这用于存储我们的基本模板.

  • partials 文件夹中,创建 base.html.twig 包含以下内容的文件.

<!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步:分解

让我们看看代码如何在 base.html.twig中运行文件如下所示.

  • {%block head%} {%endblock head%} 语法用于定义基本Twig模板中的区域. {%endblock head%} 中的头部是可选的.

  • if语句测试是否存在元是否在页眉中设置了.如果未设置,则模板应使用 user/config/site.yaml 文件中定义的 site.description 进行渲染.

  • 当前主题的路径由 theme_url 变量给出.

  • 语法 {%do assets.add('theme://css/bootstrap.min.css',101)%} 用于使用资产管理器. 主题://表示当前主题路径,101表示较高值首先跟随较低值的顺序.我们还可以明确地提供CDN链接为 :

{% do assets.addCss('http://fonts.googleapis.com/css?family = Open + Sans') %}

或,

{% do assets.addJs(' https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js') %}

  • 所有JavaScript标签和CSS链接标签都是在分别调用 {{assets.css()}} {{assets.js()}} 时由模板呈现.

  • 语法 {#...#} 用于在Twig中写评论.

  • 要包含另一个Twig模板,请使用 {%include'sparts/header.html.twig'%} 标记.

  • 模板中的内容由 {%block content%} {%endblock%} 标记提供.

  • 至添加自定义JavaScript初始化或分析代码, {%block b ottom%} {%endblock%} 标记用作模板的占位符.

步骤5:标题模板

执行 {%include'sparts/header.html.twig'%} 时,Twig渲染引擎会搜索Twig模板.因此,在 user/themes/bootstrap/templates/partials 文件夹中创建 header.html.twig 模板文件,其中包含以下内容.

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

上述代码会创建一个导航栏,并在 user/pages 文件夹中创建新页面时自动显示所有菜单项.

步骤6 : 默认模板

内容的每个项目都有一个特定的文件名,例如 default.md ,它指示Grav搜索名为

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

上述 default.html.twig 文件扩展了 partials/base.html. twig 并告诉基本模板使用 {{page.content}} 作为内容块.

步骤7:主题CSS

partials/base.html.twig 文件中,我们使用 assets.add('theme:/)引用自定义主题css/css/bootstrap-custom.css',100) ,它存储您站点中使用的任何自定义CSS.

现在让我们创建一个bootstrap-custom.css文件user/themes/bootstrap/css文件夹,包含以下内容 :

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

步骤8:测试

使用新的 bootstrap

pages:
   themes: antimatter

并将上述代码更改为 :

pages:
   theme: bootstrap

现在重新加载Grav网站,您将看到新安装的主题,如下所示.

Grav Theme Tutorials