Grav - 主题教程

现在，创建一个主题配置文件 themes/bootstrap 文件夹中的 bootstrap.yaml ，并在其中写下以下内容.
enable: true
我们将跳过蓝图文件夹，因为我们没有配置选项，本章将使用常规CSS.
步骤2:添加引导程序
要创建引导程序主题，必须在主题中包含Bootstrap.因此，您需要下载最新的Bootstrap软件包，如下所示.
 
解压缩包，你会看到三个文件夹即css，fonts和js.现在将这3个文件夹的内容复制到之前创建的 user/themes/bootstrap 中类似命名的文件夹中.
步骤3:基本模板
正如我们在前一章中所研究的那样，内容存储在 default.md 文件中，该文件指示Grav查找名为 default.html的渲染模板.树枝的.此文件包含显示页面所需的所有内容.
有一个更好的解决方案，利用Twig Extends 标签，允许您使用
按照以下步骤创建一个简单的Bootstrap基本模板 :
在 user/themes/bootstrap/templates 文件夹中创建名为 partials 的文件夹.这用于存储我们的基本模板.
在 partials 文件夹中，创建 base.html.twig 包含以下内容的文件.
         {% block head %}                        {% if header.description %}            {% else %}            {% endif %}      {% if header.robots %}            {% endif %}                  {% 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 %}                  {# include the header + navigation #}         {% include 'partials/header.html.twig' %}                     {% block content %}{% endblock %}         

第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 模板文件，其中包含以下内容.

                                 Toggle navigation                                                               Grav                                       {% for page in pages.children %}            {% if page.visible %}            {% set current_page = (page.active or page.activeChild) ? 'active' : '' %}            {{ page.menu }}            {% endif %}            {% endfor %}                        

上述代码会创建一个导航栏，并在 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网站，您将看到新安装的主题，如下所示.