Grav-theme-tutorial

提供：Dev Guides
移動先:案内、検索

Grav-テーマチュートリアル

この章では、コンセプトを理解するためにGravテーマを作成しましょう。

反物質

Gravベースパッケージをインストールすると、デフォルトの Antimatter テーマがインストールされ、 Nucleus （CSSスタイルのシンプルなベースセット）が使用されます。 Nucleusは、独自のルックアンドフィールを提供する基本的なCSSスタイルとHTMLマークアップを含む軽量のCSSフレームワークです。

ブートストラップ

人気のあるhttps://getbootstrap.com/[Bootstrap framework]を利用するテーマを作成しましょう。 Bootstrapは、オープンソースで最も人気のあるHTML、CSS、およびJSフレームワークであり、フロントエンドWeb開発をより迅速かつ簡単にします。

次の手順では、テーマの作成について説明します-

ステップ1：基本テーマのセットアップ

リンク：/grav/grav_themes_basics [Theme Basics]の章で学習したように、Gravテーマにはいくつかの重要な要素があります。これらは、新しいテーマを作成するために従う必要があります。

  • Gravベースパッケージをインストールしたら、以下に示すように、 user/themes フォルダーの下にbootstrapというフォルダーを作成します。

Grav Theme Tutorial

  • user/themes/bootstrap フォルダー内に、以下に示すように css/、fonts/、images/、js/ および templates/ を作成します。

Grav Theme Tutorial

  • bootstrap.php というテーマファイルを user/themes/bootstrap フォルダーに作成し、次のコンテンツをそこに貼り付けます。
<?php
namespace Grav\Theme;
use Grav\Common\Theme;
class Bootstrap extends Theme {}
  • 次に、 themes/bootstrap フォルダーにテーマ構成ファイル bootstrap.yaml を作成し、次の内容を書き込みます。
enable: true
  • 設定オプションがないため、 blueprints フォルダーをスキップし、この章では通常のCSSを使用します。

ステップ2：ブートストラップを追加する

ブートストラップテーマを作成するには、ブートストラップをテーマに含める必要があります。 以下に示すように、https://getbootstrap.com/[リンク]をクリックして、最新のBootstrapパッケージをダウンロードする必要があります。

Grav Theme Tutorial

パッケージを解凍すると、css、fonts、jsの3つのフォルダーが表示されます。 ここで、これらの3つのフォルダーの内容を、以前に作成した user/themes/bootstrap にある同様の名前のフォルダーにコピーします。

ステップ3：基本テンプレート

前の章で学習したように、コンテンツは default.md ファイルに格納され、Gravに defaultl.twig というレンダリングテンプレートを探すように指示します。 このファイルには、ページを表示するために必要なものがすべて含まれています。

Twig Extendsタグを利用するより良いソリューションがあり、https://twig.sensiolabs.org/doc/tagsで基本レイアウトを定義できます/blockl [blocks]。 これにより、Twigテンプレートはベーステンプレートを拡張し、ベースで定義されたブロックの定義を提供できます。

次の手順に従って、簡単なブートストラップベーステンプレートを作成します-

  • user/themes/bootstrap/templates フォルダーに partials というフォルダーを作成します。 これは、ベーステンプレートを格納するために使用されます。
  • partials フォルダーに、次の内容の basel.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/headerl.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：分解する

以下に示すように、 basel.twig ファイルでコードがどのように機能するかを見てみましょう。

  • \ {％block head％} \ {％endblock head％} ベースTwigテンプレートの領域を定義するために使用される構文。 \ {％endblock head％} 内のヘッドはオプションです。
  • ifステートメントは、ページヘッダーに meta description が設定されているかどうかをテストします。 設定しない場合、テンプレートは user/config/site.yaml ファイルで定義されている site.description を使用してレンダリングする必要があります。
  • 現在のテーマのパスは、 theme_url 変数によって指定されます。
  • 構文 \ {％do asset.add（ 'theme：//css/bootstrap.min.css',101）％} は、 Asset Manager を使用するために使用されます。 theme：// は現在のテーマパスを表し、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リンクタグは、 \ {\ {asset.css（）}} または \ {\ {asset.js（）}} への呼び出しがそれぞれ行われたときにテンプレートによってレンダリングされます。
  • 構文 \ {＃…​ ＃} は、Twigでコメントを書くために使用されます。
  • 別のTwigテンプレートを含めるには、 \ {％include 'partials/headerl.twig'％} タグを使用します。
  • テンプレートのコンテンツは、 \ {％block content％} \ {％endblock％} タグによって提供されます。
  • カスタムJavaScript初期化コードまたは分析コードを追加するには、 \ {％block bottom％} \ {％endblock％} タグがテンプレートのプレースホルダーとして使用されます。

ステップ5：ヘッダーテンプレート

*\ {％include 'partials/headerl.twig'％}* が実行されると、TwigレンダリングエンジンはTwigテンプレートを検索します。 したがって、 *user/themes/bootstrap/templates/partials* フォルダー内に *headerl.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 フォルダーに作成されるたびにnavbarを作成し、すべてのメニュー項目を自動的に表示します。

ステップ6-デフォルトのテンプレート

コンテンツの各アイテムには、 default.md などの特定のファイル名があり、Gravに defaultl.twig というテンプレートファイルを検索するように指示します。 user/themes/bootstrap/templates/ フォルダーに次の内容で defaultl.twig ファイルを作成してみましょう。 

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

上記の defaultl.twig ファイルは partials/basel.twig を拡張し、 content ブロックに \ {\ {page.content}} を使用するようにベーステンプレートに指示します。

ステップ7：テーマCSS

*partials/basel.twig* ファイルでは、* assets.add（ 'theme：//css/bootstrap-custom.css',100）*を使用してカスタムテーマのcssを参照し、サイトで使用されているカスタム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サイトをリロードすると、以下に示すように新しくインストールされたテーマが表示されます。

Grav Theme Tutorials

「https://www.finddevguides.com/index.php?title=Grav-theme-tutorial&oldid=5736」から取得
Powered by MediaWiki