Grav - 主题教程

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

• 当分别调用 {{ assets.css() }> 或 {{ assets.js() }> 时，所有 JavaScript 标签和 CSS 链接标签均由模板呈现。

• 语法 {# ... #> 用于编写注释在 Twig 中。

• 要包含另一个 Twig 模板，请使用 {% include 'partials/header.html.twig' %> 标签。

• 模板中的内容由 {% block content %}{% endblock %> 标签提供。

• 要添加自定义 JavaScript 初始化或分析代码，请使用 {% block bottom %}{% endblock %> 标签作为模板的占位符。

步骤 5:标题模板

执行 {% include 'partials/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 文件夹中创建新页面时，都会自动显示所有菜单项。

内容的每个项目都有一个特定的文件名，例如 default.md，它指示 Grav 搜索名为 default.html.twig 的模板文件。现在让我们在 user/themes/bootstrap/templates/ 文件夹中创建 default.html.twig 文件，其中包含以下内容。

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

上面的 default.html.twig 文件扩展了 partials/base.html.twig，并告诉基本模板使用 {{ page.content }> 作为 content 块。

第 7 步:主题 CSS

在 partials/base.html.twig 文件中，我们使用以下代码引用了自定义主题 css assets.add('theme://css/bootstrap-custom.css',100)，用于存储您网站中使用的任何自定义 CSS。

现在让我们在 user/themes/bootstrap/css 文件夹中创建一个 bootstrap-custom.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 主题更改您的默认主题。打开 user/config/system.yaml 文件并编辑包含的行 −

pages:
   themes: antimatter

并将上述代码更改为 −

pages:
   theme: bootstrap

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