フレームワークを含める

Bluditのテーマは非常に柔軟でフレームワーク(Bootstrap、Foundation、Bulma、UIkit、Semantic UIなど)やJavascriptコードなど自由に利用できます。

このドキュメントでは、いくつかのフレームワークを紹介していますがページを編集して自由に追加できます。

jQueryを含める

Bluditではパッケージに最新のjQueryが含まれているので、これをヘルパーとして利用できます。

<?php
    echo Theme::jquery();
?>

HTML出力

<script src="https://www.example.com/bl-kernel/js/jquery.min.js"></script>

Bootstrapを含める

Bluditではパッケージに最新のBootstrapが含まれているので、これをヘルパーとして利用できます。

Bootstrap用のJavaScriptファイルを含める

<?php
    echo Theme::jsBootstrap();
?>

HTML出力

<script src="https://www.example.com/bl-kernel/js/bootstrap.bundle.min.js"></script>

Bootstrap用CSSファイルを含める

<?php
    echo Theme::cssBootstrap();
?>

HTML出力

<link rel="stylesheet" type="text/css" href="https://www.example.com/bl-kernel/css/bootstrap.min.css">

UIkitを含める

このフレームワークはBluditのパッケージには含まれていませんが、ヘルパーのTheme::css()とTheme::js()を使って簡単にインクルードできます。また、UIkit CDNを使うか、ファイルをダウンロードしてテーマにインクルードもできます。

次の例では、CDNからUIkitをインクルードしていますが、行末のfalseに注目してください。これは、外部でホストされたファイルを使用することを関数に伝えるものです。

<?php
    echo Theme::css('https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/css/uikit.min.css', false);

    echo Theme::js('https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit.min.js', false);
    echo Theme::js('https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit-icons.min.js', false);
?>

HTML出力

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/css/uikit.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit-icons.min.js"></script>