在本章中,让我们创建一个Grav主题来理解这个概念.
当您安装Grav基础包时,安装了默认反物质主题,它使用了 Nucleus (CSS样式的简单基本集). Nucleus是一个轻量级的CSS框架,包含基本的CSS样式和HTML标记,提供独特的外观和感觉.
让我们创建一个主题利用流行的 Bootstrap框架. Bootstrap是一个开源和最流行的HTML,CSS和JS框架,使前端Web开发更快更容易.
以下步骤描述了主题 : 的创建;
我们在主题基础章节,以便创建新主题.
安装Grav基础软件包后,在 user/themes 文件夹下创建一个名为bootstrap的文件夹,如下所示.
在 user/themes/bootstrap 文件夹中,创建 css/,fonts/,images/,js/和 templates/如下所示.
在用户/中创建名为 bootstrap.php 的主题文件themes/bootstrap 文件夹并将以下内容粘贴到其中.
<?php namespace Grav\Theme; use Grav\Common\Theme; class Bootstrap extends Theme {}
现在,创建一个主题配置文件 themes/bootstrap 文件夹中的 bootstrap.yaml ,并在其中写下以下内容.
enable: true
我们将跳过蓝图文件夹,因为我们没有配置选项,本章将使用常规CSS.
要创建引导程序主题,必须在主题中包含Bootstrap.因此,您需要下载最新的Bootstrap软件包,如下所示.
解压缩包,你会看到三个文件夹即css,fonts和js.现在将这3个文件夹的内容复制到之前创建的 user/themes/bootstrap 中类似命名的文件夹中.
正如我们在前一章中所研究的那样,内容存储在 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>
让我们看看代码如何在 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%} 标记用作模板的占位符.
执行 {%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}} 作为内容块.
在 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; }
使用新的 bootstrap
pages: themes: antimatter
并将上述代码更改为 :
pages: theme: bootstrap
现在重新加载Grav网站,您将看到新安装的主题,如下所示.