レイアウト - Rodhos Soft

使用するスタイルシートwebroot/css/cake.hello.cssを用意する。

body {
  background: #eee;
  color: #999;
  margin: 10px 8px
}

#header {
  font-size: 18pt;
  font-weight: bold;
  margin: 10px;
}

#content {
  background: #fff;
  color: #999;
  padding: 10px 25px 30px 25px;
  font-size: 14pt;
}

#footer {
  text-align: right;
  font-size: 12pt;
  margin: 10pt;
}

h1 {
  color: #aaa;
  font-size: 24pt;
  margin: 20pt 0pt 50pt 0pt;
}

cssを利用するレイアウトsrc/Template/Layout/hello.ctpファイルを用意する。

<!DOCTYPE html>
<html>
<head>
    <?= $this->Html->charset() ?>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <?= $this->fetch('title') ?>
    </title>
    <?= $this->Html->meta('icon') ?>

    <?= $this->Html->css('cake.hello.css') ?>

    <?= $this->fetch('meta') ?>
    <?= $this->fetch('css') ?>
    <?= $this->fetch('script') ?>
</head>

fetchでコントローラの変数を取ってきている。

<body>

<div id="container">
  <div id="header">header</div>

  <div id="content">
      <?=$this->fetch('content') ?>
  </div>

  <div id="footer">footer</div>

</body>
</html>

ここではcake.hello.cssを読み込んでいるが、javascriptも読み込みたい場合、
webroot/js/cake.hello/jsなどというファイルをつくり

    <?= $this->Html->script('cake.hello.js') ?>

を追加してやれば良い。

コントローラでレイアウトを指定する。

<?php
  namespace App\Controller;

  class HelloController extends AppController {
    public $name = "Hello";
    public $autoRender = true;
    public function index() {
      $this->ViewBuilder()->layout('Hello');
    }
  }
?>