Panduan Blade Codes - Theme62

Plugin Blade Codes mirip dengan Template Engine Laravel yang digunakan untuk mempermudah pembuatan kode yang kompleks, dan akan lebih berguna jika digunakan pada Shortcode Dinamis.

Plugin ini mungkin terlihat cukup rumit jika anda baru mengenal atau belum terbiasa dengan bahasa pemrograman.

Blade Codes dapat diterapkan di widget maupun postingan, namun dinonaktifkan fungsinya secara default untuk menghindari masalah kompatibilitas.

Cara mengaktifkan fungsi Blade Codes

Cukup mudah untuk mengaktifkan fungsi Blade Codes, anda cukup menggunakan shortcode statis {blade:true}.

Postingan

Untuk menerapkan di postingan, kode anda harus dibungkus pada tag noscript dan menambahkan {blade:true} yang diterapkan pada mode html, contoh :

<noscript>
{blade:true}
...kode anda disini...
</noscript>

Widget

Untuk menerapkan di widget (HTML/JavaScript), anda cukup menambahkan {blade:true} yang diterapkan pada konten, contoh :

{blade:true}
...kode anda disini...

Shortcode Dinamis

Di shortcode dinamis, anda tidak perlu menambahkan {blade:true}, karena telah diaktifkan secara default.

Fitur-Fitur Blade Codes

Blade Codes memiliki banyak fitur atau fungsi, diantaranya: Variable, If Statements, Views, Loops, JavaScript, dan akan lebih banyak lagi.

Beberapa contoh dibawah ini diimplementasikan pada Shortcode Dinamis, saya harap anda membaca dokumentasi Panduan Shortcode Dinamis sebelum membaca lebih lanjut.

Variable

Variable berfungsi sebagai nilai default dari atribut jika atribut tersebut tidak ada, variable menggunakan identifikasi @var

Argumen

Argumen @var sebagai berikut @var attribute = value

Contoh

@var color = "blue"
<div style="background: #{color}">
    Hello Blogger
</div>

Shortcode [hello/] akan menghasilkan berikut :

<div style="background: blue">
    Hello Blogger
</div>

Shortcode [hello color="green"/] akan menghasilkan berikut :

<div style="background: green">
    Hello Blogger
</div>

If Statements

Anda dapat membuat If Statement menggunakan identifikasi @if @elseif @else @endif

Argumen

Argumen @if @elseif sebagai berikut @if statement @elseif statement

statement Berisi pernyataan apakah benar atau salah.

Contoh

@if style == "bold"
  <b>Hello Blogger</b>
@elseif style == "italic"
  <i>Hello Blogger</i>
@else
  <span>Hello Blogger</span>
@endif

Shortcode [hello style="italic"/] akan menghasilkan berikut :

<i>Hello Blogger</i>

Shortcode [hello style="underline"/] akan menghasilkan berikut :

<span>Hello Blogger</span>

Views

Anda dapat menampilkan kode anda hanya pada tipe halaman tertentu saja, ini seperti menggunakan <b:if cond="data:view.isHomepage"> di Editor HTML Template.

Untuk menggunakan fitur ini, gunakan identifikasi @view @endview

Argumen

Argumen @view sebagai berikut @view pagetype

Item yang tersedia :

Contoh

<p>Bagian awal</p>
@view "homepage|post"
  <p>Teks tampil di homepage dan post</p>
@endview
<p>Bagian akhir</p>

Shortcode [text/] yang diakses di halaman beranda akan menghasilkan berikut :

<p>Bagian awal</p>
@view "homepage|post"
  <p>Teks tampil di homepage dan post</p>
@endview
<p>Bagian akhir</p>

Shortcode [text/] yang diakses di halaman pencarian akan menghasilkan berikut :

<p>Bagian awal</p>
<p>Bagian akhir</p>

Loops

Anda dapat membuat Loops menggunakan identifikasi @loop @endloop

Argumen

Argumen @loop sebagai berikut @loop array => item, index

Contoh

@loop "Apel|Jeruk" => buah, num
    <div>Nomor #{num} : #{buah}</div>
@endloop

Shortcode [buah/] akan menghasilkan berikut :

<div>Nomor 1 : Apel</div>
<div>Nomor 2 : Jeruk</div>

@loop list => nama
    <div>#{nama}</div>
@endloop

Shortcode [kota list="Jakarta|Semarang|Surabaya"/] akan menghasilkan berikut :

<div>Jakarta</div>
<div>Semarang</div>
<div>Surabaya</div>

@loop 5 => i
    <div>Angka #{i}</div>
@endloop

Shortcode [nomor/] akan menghasilkan berikut :

<div>Angka 1</div>
<div>Angka 2</div>
<div>Angka 3</div>
<div>Angka 4</div>
<div>Angka 5</div>

JavaScript

Anda tidak dapat menulis tag script secara langsung di Shortcode Dinamis, hal ini dapat mengacaukan algoritma sistem blade template Theme62.

Untuk menambah tag script di Shortcode Dinamis, anda dapat menggunakan blade JavaScript dengan identifikasi @js @endjs

Argumen

Argumen @js sebagai berikut @js src

Contoh

@js "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js"

Shortcode [fa/] akan menghasilkan berikut :

<script>
var x = "Theme62";
console.log(x);
</script>