フレームワークを含める

    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>

    Copyright © 2021Powered by Bludit