Theme62

Blade Codes Plugin is similar to the Laravel Template Engine in that it is used to make complex code creation easier, and would be more useful if used in Dynamic Shortcodes.

Dynamic Shortcode Guide

https://theme62.com/en/docs/dynamic-shortcode

This plugin may seem quite complicated if you are new to or not familiar with programming languages.

Blade Codes can be applied in widgets as well as posts, but this functionality is disabled by default to avoid compatibility issues.

How to enable Blade Codes function

It's quite easy to activate the Blade Codes function, you just need to use the static shortcode {blade:true}.

Post

To implement in a post, your code must be wrapped in noscript tag and add {blade:true} which is applied in html mode, example :

	<noscript>
{blade:true}
...your code is here...
</noscript>

Widget

To implement in a widget (HTML/JavaScript), you can simply add {blade:true} which is applied to the content, example :

	{blade:true}
...your code is here...

Dynamic Shortcode

In dynamic shortcodes, you do not need to add {blade:true}, because it is enabled by default.

Features of Blade Codes

Blade Codes has many features or functions, including: Variable, If Statements, Views, Loops, JavaScript, and many more.

Some examples below are implemented in Dynamic Shortcodes, I hope you read the Dynamic Shortcode Guide documentation before reading further.

Dynamic Shortcode Guide

https://theme62.com/en/docs/dynamic-shortcode

Variable

Variable serves as the default value of the attribute if the attribute does not exist, the variable uses the identification @var

Argument

Argument @var as follows @var attribute = value

Example

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

Shortcode [hello/] will produce the following :

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

Shortcode [hello color="green"/] will produce the following :

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

If Statements

You can create an If Statement using identification @if @elseif @else @endif

Argument

Argument @if @elseif as follows @if statement @elseif statement

Example

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

Shortcode [hello style="italic"/] will produce the following :

	<i>Hello Blogger</i>

Shortcode [hello style="underline"/] will produce the following :

	<span>Hello Blogger</span>

Views

You can display your code only on certain types of pages, this is like using <b:if cond="data:view.isHomepage"> in the HTML Template Editor.

To use this feature, use the identifier @view @endview

Argument

Argument @view as follows @view pagetype

Example

	<p>Begin section</p>
@view "homepage|post"
  <p>Text appears on homepage and posts</p>
@endview
<p>End section</p>

Shortcode [text/] accessed on the home page will output the following :

	<p>Begin section</p>
<p>Text appears on homepage and posts</p>
<p>End section</p>

Shortcode [text/] accessed on the search page will output the following :

	<p>Begin section</p>
<p>End section</p>

Loops

You can create Loops using identification @loop @endloop

Argument

Argument @loop as follows @loop array => item, index

Example

	@loop "Apple|Orange" => fruit, num
    <div>Number #{num} : #{fruit}</div>
@endloop

Shortcode [fruit/] will produce the following :

	<div>Number 1 : Apple</div>
<div>Number 2 : Orange</div>

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

Shortcode [city list="Jakarta|Semarang|Surabaya"/] will produce the following :

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

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

Shortcode [number/] will produce the following :

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

JavaScript

You cannot write script tags directly in dynamic shortcodes, this may mess with Theme62's blade system template algorithm.

To add script tags in dynamic shortcodes, you can use a JavaScript blade with identification @js @endjs

Argument

The argument @js is as follows @js src

Example

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

Shortcode [fa/] will produce the following :

	<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js"></script>

	@js
var x = "Theme62";
console.log(x);
@endjs

Shortcode [test/] will produce the following :

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