Block adalah library untuk mengatur penempatan blok HTML pada modul di BANG Framework.
OK. BANG Framework dapat merubah modul kamu menjadi variable $content
untuk dapat kamu tempatkan di bagian konten template kamu.
Namun bagaimana jika kamu ingin menempatkan sebagian kode HTML pada file modul kamu bukan ke bagian konten template,
melainkan menempatkannya diantara <head>...</head>
misalnya. Nah, library ini adalah jawabannya.
Block memungkinkan kamu memotong dan menampung sebagian kode HTML yang nantinya dapat kamu tempatkan dimanapun di kode template kamu.
Block ini seperti fitur section
pada Blade atau block
pada Twig. Library ini sendiri terinspirasi dengan fitur section
pada Blade di Laravel.
Buat sebuah file di app/libraries/Block.php
. Lalu require file tersebut di file index.php
kamu.
Misalkan kamu ingin menempatkan meta tags pada modul about-us
untuk mengoptimalkan tampilan postingan halaman tersebut di facebook.
Ubah file app/module/about-us.php
kamu menjadi seperti ini:
<?php
config('title', 'About Us');
?>
<p>
Halo, kami adalah sekelompok pengguna jutsu medis bersertifikasi.
</p>
<?= Block::start('meta-tags') ?>
<?= Block::parent() ?>
<meta name="ogUrl" property="og:url" content="http://yoursite.com" />
<meta name="ogType" property="og:type" content="article" />
<meta name="ogTitle" property="og:title" content="Your Site - About Us" />
<meta name="ogDescription" property="og:description" content="Your page description" />
<meta name="ogImage" property="og:image" content="/assets/img/fb-thumbnail.png" />
<?= Block::stop() ?>
Lalu ubah file template kamu menjadi seperti ini:
<!DOCTYPE html>
<html>
<head>
<?= Block::start('meta-tags') ?>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?= Block::show() ?>
<title><?= config('title') ?></title>
</head>
<body>
<div id="content">
<?= $content ?>
</div>
</body>
</html>
Selesai! jika modul about-us
diakses, output HTML-nya akan seperti ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="ogUrl" property="og:url" content="http://yoursite.com" />
<meta name="ogType" property="og:type" content="article" />
<meta name="ogTitle" property="og:title" content="Your Site - About Us" />
<meta name="ogDescription" property="og:description" content="Your page description" />
<meta name="ogImage" property="og:image" content="/assets/img/fb-thumbnail.png" />
<title>About Us</title>
</head>
<body>
<div id="content">
<p>
Halo, kami adalah sekelompok pengguna jutsu medis bersertifikasi.
</p>
</div>
</body>
</html>