BLUDITを入れて最初にやったこと

家で作ったものを動く状態でそのまま公開できるサイトが欲しかったので、BLUDITというPHP製でDB不要のCMSを使って作ってみた

naosim.sakura.ne.jp

BLUDITはうたい文句の通り一瞬でブログが完成するからイイ感じでした

www.bludit.com

今回のサイト構築でBLUDITの初期状態に対していくつか変更を加えたのでその内容をメモしておきます

自分専用のテーマを作成する

デフォルトテーマはalternativeですが、それを自分専用のテーマに変更します

デフォルトテーマをコピーして自分専用テーマを作る

デフォルトテーマをコピーする

bl-themes/alternativeディレクトリをコピぺしてbl-themes/naosimにリネームする

テーマ名を変更する

  • bl-themes/naosim/languages/en.jsonの中身を変更する
  • 日本語にしたいならen.jsonをコピーしてja_JP.jsonを作りその中に日本語の名前等を記述する

CMSでテーマを変更する

これでbl-themes/naosimに対する変更が反映されるようになりました

開発環境(ローカルホスト)でも動くようにする

サーバ上でサイト構築した後に、そのソースコードをローカルに持ってきてPHPのビルトインサーバで起動すると、パスが違うためにうまく動きません
なのでローカルホストを検知してパスを変えてあげます
そのコードがこれ

bl-kernel/boot/init.php

// local develop mode
if(strpos($_SERVER["HTTP_HOST"], 'localhost') !== false) {
  $Site->db['url'] = $_SERVER["HTTP_HOST"];
}

挿入する場所はSiteインスタンス生成後かつHTML生成前ならどこでもいいです

jqueryを駆除する

宗教上の都合によりjqueryは使えないので消します
bl-themes/naosim/inde.php内の下記コードを消します

<!-- Javascript -->
<?php
    echo Theme::jquery();
    echo Theme::js('js/bootstrap.min.js');
?>

ちなみにbootstrapのjsは消しますが、cssは便利なので残しておきます

コードハイライトに対応する

記事内にソースコードを記述した際にコードハイライトされるようにします
適当な所に下記を追加します

bl-themes/naosim/php/head.php

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">

bl-themes/naosim/php/footer.php

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

ナビゲーションバーの色を変える

上と下のバーの色を青に変えます

  • bl-themes/naosim/php/navbar.phpのbg-darkをbg-infoに変える
  • bl-themes/naosim/php/footer.phpのbg-darkをbg-infoに変える

mermaid.jsで図が表示できるようにする

UMLはmermaidで書くことが多いのでそれが表示できるようにします
ただしmermaidを使っていないのにmermaid.jsが読み込まれたらムダなので、タグに"mermaid"が含まれていた場合のみ読み込まれるようにします

管理用変数の作成

bl-themes/naosim/index.phpの適当な場所

<?php
$GLOBAL_TAG_FLAG = [];
$GLOBAL_TAG_FLAG['mermaid'] = false;
?>

タグをみて判断するプログラムを追加

phpのコードを追加します bl-themes/naosim/php/functions/pageapply.php

<?php
function applyTrueIfEqTag($page, $tagName) {
  global $GLOBAL_TAG_FLAG;
  foreach($page->tags(true) as $tag) {
    if($tagName == $tag) {
      $GLOBAL_TAG_FLAG[$tagName] = true;
      return true;
    }
  }
  return false;
}
applyTrueIfEqTag($page, 'mermaid');
?>

上記プログラムを読み込む

bl-themes/naosim/index.php

include(THEME_DIR_PHP.'functions/pageapply.php'); // ★これを追加★
if ($WHERE_AM_I == 'page') {
    include(THEME_DIR_PHP.'page.php');
} else {
    include(THEME_DIR_PHP.'home.php');
}

mermaid.jsを読み込む

bl-themes/naosim/index.phpの最終行

<?php if($GLOBAL_TAG_FLAG['mermaid']) { ?>
    <!-- <link rel="stylesheet" href="https://unpkg.com/mermaid/dist/mermaid.min.css"> -->
    <script src="https://unpkg.com/mermaid/dist/mermaid.min.js" charset="UTF-8"></script>
    <script>mermaid.initialize({ startOnLoad:true});</script>
<?php } ?>

これでタグに"mermaid"があるときだけ、mermaid.jsが読み込まれるようになりました

これを拡張すればmermaid以外にも読み込むことができます

まとめ

BLUDITはいじりやすくてイイ感じでした
ただし初期状態では使えない部分もあるのでカスタマイズが必要
とくに開発環境への対応は必須だと思うのでやった方が良いと思います