ローカル環境でa-blog cmsのテンプレートを見るためのJavaScript

a-blog cmsのテンプレートは、a-blog cmsをインストールした環境でないと閲覧できません。このJavaScriptはページに読み込むだけで、a-blog cmsを入れていないローカル環境(XAMPPやMAMPなどのサーバ環境、PreprosやGulpなどのビルド環境)でa-blog cmsのテンプレートが閲覧できるようになります。 2021年1月18日、@extends、@sectionにも対応しました。


ダウンロード


使い方

ローカルで確認したいページに、jQueryとJavaScriptを読み込みます。

@extendsを使用しない場合

<!DOCTYPE html>
<html lang="ja">
<head>
  @include("/include/head/ga.html")
  @include("/include/head/meta.html")
  @include("/include/head/link.html")
  @include("/include/head/js.html")
  <!-- BEGIN_IF [%{BCD}/eq/0] -->
  <script src="../js/jquery-3.4.1.min.js"></script>
  <script src="../template.js"></script>
  <!-- END_IF -->
</head>
<body id="top" class="">
  @include("include/header.html")
  <main class="site-content">
    Here's Content
  </main>
  @include("include/footer.html")
  @include("/include/foot/js.html")
</body>
</html>

@extendsを使用する場合

/include/layouts/base.html で @section("header") で定義したヘッダーを上書きする例です。

<!-- BEGIN_IF [%{BCD}/eq/0] -->
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../template.js"></script>
<!-- END_IF -->

@extends("/include/layouts/base.html")

@section(header)
<div class="site-header">
  Override Header
</div>
@endsection

中身の解説

@extends、@include、@sectionの内容をAjaxで読み込んでいます。必要に環境に合わせて調整してください。

$(document).ready(function(){

  /**
   * テンプレートを解決
   */
  function resolveTemplate(){
    var deferred = (new $.Deferred()).resolve();
    // @extendsを解決
    deferred.then(resolveExtends);
    // @includeを解決
    deferred.then(resolveIncludes);
    // @sectionを解決
    deferred.then(resolveSections);
    // 未解決のテンプレートを処理しHTMLに追加
    deferred.then(function(){
      bodyHtml = bodyHtml.replace(/\@extends\([\s\S]*?\)/g, "");
      bodyHtml = bodyHtml.replace(/\@include\([\s\S]*?\)/g, "");
      bodyHtml = bodyHtml.replace(/\@section\(.*?\)/g, '').replace(/@endsection/g, '');
      $('body').html(bodyHtml);
      console.info('Done');
    });
  }

  /**
   * @extendsを解決
   */
  function resolveExtends(){
    console.info('Resolve Extends');
    // @extendsのテンプレートを取得
    var acms_extends = bodyHtml.match(/\@extends\([\s\S]*?\)/g);
    if( acms_extends ){
      // テンプレート内に書かれた@sectionを削除
      bodyHtml = bodyHtml.replace(/\@section\(([\s\S]*?)\)([\s\S]*?)\@endsection/mg, "");
      for (var i = 0; i < acms_extends.length; i++) {
        // インクルード先を取得する
        var path = acms_extends[i].match(/\@extends\(([\s\S]*?)\)/)[1];
        // インクルード先を読み込む
        loadTemplate(path, '@extends('+path+')');
      }
    }
  }

  /**
   * @includeを解決
   */
  function resolveIncludes(){
    console.info('Resolve Includes');
    var acms_includes = bodyHtml.match(/\@include\([\s\S]*?\)/g);
    if( acms_includes ){
      for (var i = 0; i < acms_includes.length; i++) {
        // インクルード先を取得する
        var path = acms_includes[i].match(/\@include\(([\s\S]*?)\)/)[1];
        // インクルード先を読み込む
        loadTemplate(path, '@include('+path+')');
      }
    }
  }

  /**
   * @sectionを解決
   */
  function resolveSections(){
    console.info('Resolve Section');
    bodyHtml = bodyHtml.replace(/\@section\(["|'| ]([\s\S]*?)["|'| ]\)/, "@section($1)");
    var acms_sections = sourceHtml.match(/\@section\(([\s\S]*?)\)([\s\S]*?)\@endsection/g);
    if( acms_sections ){
      for (var i = 0; i < acms_sections.length; i++) {
        // セクション先を取得する
        var section = acms_sections[i].match(/\@section\(([\s\S]*?)\)([\s\S]*?)\@endsection/);
        var target = section[1].replace(/["|'| ]/g, "");
        var content = section[2];
        console.info('@section('+target+')');
        var reg = new RegExp('\\@section\\('+target+'\\)[\\s\\S]*?\\@endsection', 'g');
        if( bodyHtml.match(reg) ){
          bodyHtml = bodyHtml.replace(reg, content);
        }
      }
    }
  }

  /**
   * テンプレートを読み込み
   */
  function loadTemplate(path, directive){
    // インクルード先から不要なものを削除する
    var includeTmp = path.replace(/["|'| ]/g, "");
    // ルートパスならテーマディレクトリを参照する
    var prefixTmp = path.search(/^["|']?\//) !== -1 ? currentScriptDir : "";
    $.ajax({
      async  : false,
      url    : prefixTmp + includeTmp,
      success: function(response){
        // ルートパスを相対パスに変更
        response = response.replace(/=\"\//g, '="'+currentScriptDir);
        // 該当の@includeを消す
        console.info(directive);
        bodyHtml = bodyHtml.replace(directive, response);
      }
    });
  }

  currentScriptDir = $('script[src*="template.js"]:first').attr('src').replace('template.js', '');
  $('script[src*="template.js"]:first').remove();
  sourceHtml = $('body').html();
  bodyHtml = $('body').html();

  // サーバなら処理しない
  if( location.pathname.search(/\/themes\//) === -1 ){
    return false;
  }

  // テンプレートを解決
  resolveTemplate();

});

Todo

将来的には a-template.js を参考にEntry_Summaryであればダミーの内容を出すなどの実装を行いたいです。

  • スタンドアローンで動くように調整
  • ブロックを解決
  • 変数を解決

関連記事

この記事のハッシュタグに関連する記事が見つかりませんでした。