index.ctp
<div class="row"> <p>This is sample contents.</p> <p>これは、Helloレイアウトを利用したサンプルです。</p> </div>
HelloController.php
public function index(){
}
### レイアウトに必要なもの
– レイアウトのテンプレート
– スタイルシートファイル
– スクリプトファイル
/webroot/css/hello.css
html {
margin: 0px;
}
body {
margin: 0px;
}
h1 {
font-size: 48px;
margin: 0px 20px;
color: #bbf;
}
p {
font-size: 14pt;
color: #669;
}
.head {
width: 100%;
padding: 0px;
margin: 0px;
background-color: #f0f0ff;
}
.foot {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
text-align: right;
color: #99f;
background-color: #f0f0ff;
}
.content {
margin: 5px 20px;
}
src/Template/Layout/hello.ctp
<!DOCTYPE html>
<html lang="en">
<head>
<?=$this->Html->charset() ?>
<title><?=$this->fetch("title") ?></title>
<?=$this->Html->css("hello") ?>
<?=$this->Html->script("hello") ?>
</head>
<body>
<header class="head row">
<h1><?=$this->fetch("title") ?></h1>
</header>
<div class="row">
<?=$this->fetch("content") ?>
</div>
<footer class="foot row">
<h5>copyright 2022 hpscript</h5>
</footer>
</body>
</html>
HelloController.php
public function initialize(){
$this->viewBuilder()->setLayout("hello");
}
Template/Element/header.ctp
<h1 style="text-align:right; font-size:30px; margin: 0px 20px;">
title: <?=$this->fetch('title') ?>.
</h1>
<h2 style="text-align:right; font-size:16pt; margin:0px 20px; color:#ccf;">
~ <?=$subtitle ?> ~
</h2>
Template/Element/footer.ctp
なるほどー、共通レイアウトはLayoutフォルダで、パーツはElementフォルダで、メソッドの画面は ${ControllerName}画面で構築していくのね
レイアウト周りの全体構造は理解した
