MR. GRADATION

ローカル環境で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を使用しない場合

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.   @include("/include/head/ga.html")
  5.   @include("/include/head/meta.html")
  6.   @include("/include/head/link.html")
  7.   @include("/include/head/js.html")
  8.   <!-- BEGIN_IF [%{BCD}/eq/0] -->
  9.   <script src="../js/jquery-3.4.1.min.js"></script>
  10.   <script src="../template.js"></script>
  11.   <!-- END_IF -->
  12. </head>
  13. <body id="top" class="">
  14.   @include("include/header.html")
  15.   <main class="site-content">
  16.     Here's Content
  17.   </main>
  18.   @include("include/footer.html")
  19.   @include("/include/foot/js.html")
  20. </body>
  21. </html>

@extendsを使用する場合

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

  1. <!-- BEGIN_IF [%{BCD}/eq/0] -->
  2. <script src="../js/jquery-3.4.1.min.js"></script>
  3. <script src="../template.js"></script>
  4. <!-- END_IF -->
  6. @extends("/include/layouts/base.html")
  8. @section(header)
  9. <div class="site-header">
  10.   Override Header
  11. </div>
  12. @endsection

中身の解説

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

  1. $(document).ready(function(){
  3.   /**
  4.    * テンプレートを解決
  5.    */
  6.   function resolveTemplate(){
  7.     var deferred = (new $.Deferred()).resolve();
  8.     // @extendsを解決
  9.     deferred.then(resolveExtends);
  10.     // @includeを解決
  11.     deferred.then(resolveIncludes);
  12.     // @sectionを解決
  13.     deferred.then(resolveSections);
  14.     // 未解決のテンプレートを処理しHTMLに追加
  15.     deferred.then(function(){
  16.       bodyHtml = bodyHtml.replace(/\@extends\([\s\S]*?\)/g, "");
  17.       bodyHtml = bodyHtml.replace(/\@include\([\s\S]*?\)/g, "");
  18.       bodyHtml = bodyHtml.replace(/\@section\(.*?\)/g, '').replace(/@endsection/g, '');
  19.       $('body').html(bodyHtml);
  20.       console.info('Done');
  21.     });
  22.   }
  24.   /**
  25.    * @extendsを解決
  26.    */
  27.   function resolveExtends(){
  28.     console.info('Resolve Extends');
  29.     // @extendsのテンプレートを取得
  30.     var acms_extends = bodyHtml.match(/\@extends\([\s\S]*?\)/g);
  31.     if( acms_extends ){
  32.       // テンプレート内に書かれた@sectionを削除
  33.       bodyHtml = bodyHtml.replace(/\@section\(([\s\S]*?)\)([\s\S]*?)\@endsection/mg, "");
  34.       for (var i = 0; i < acms_extends.length; i++) {
  35.         // インクルード先を取得する
  36.         var path = acms_extends[i].match(/\@extends\(([\s\S]*?)\)/)[1];
  37.         // インクルード先を読み込む
  38.         loadTemplate(path, '@extends('+path+')');
  39.       }
  40.     }
  41.   }
  43.   /**
  44.    * @includeを解決
  45.    */
  46.   function resolveIncludes(){
  47.     console.info('Resolve Includes');
  48.     var acms_includes = bodyHtml.match(/\@include\([\s\S]*?\)/g);
  49.     if( acms_includes ){
  50.       for (var i = 0; i < acms_includes.length; i++) {
  51.         // インクルード先を取得する
  52.         var path = acms_includes[i].match(/\@include\(([\s\S]*?)\)/)[1];
  53.         // インクルード先を読み込む
  54.         loadTemplate(path, '@include('+path+')');
  55.       }
  56.     }
  57.   }
  59.   /**
  60.    * @sectionを解決
  61.    */
  62.   function resolveSections(){
  63.     console.info('Resolve Section');
  64.     bodyHtml = bodyHtml.replace(/\@section\(["|'| ]([\s\S]*?)["|'| ]\)/, "@section($1)");
  65.     var acms_sections = sourceHtml.match(/\@section\(([\s\S]*?)\)([\s\S]*?)\@endsection/g);
  66.     if( acms_sections ){
  67.       for (var i = 0; i < acms_sections.length; i++) {
  68.         // セクション先を取得する
  69.         var section = acms_sections[i].match(/\@section\(([\s\S]*?)\)([\s\S]*?)\@endsection/);
  70.         var target = section[1].replace(/["|'| ]/g, "");
  71.         var content = section[2];
  72.         console.info('@section('+target+')');
  73.         var reg = new RegExp('\\@section\\('+target+'\\)[\\s\\S]*?\\@endsection', 'g');
  74.         if( bodyHtml.match(reg) ){
  75.           bodyHtml = bodyHtml.replace(reg, content);
  76.         }
  77.       }
  78.     }
  79.   }
  81.   /**
  82.    * テンプレートを読み込み
  83.    */
  84.   function loadTemplate(path, directive){
  85.     // インクルード先から不要なものを削除する
  86.     var includeTmp = path.replace(/["|'| ]/g, "");
  87.     // ルートパスならテーマディレクトリを参照する
  88.     var prefixTmp = path.search(/^["|']?\//) !== -1 ? currentScriptDir : "";
  89.     $.ajax({
  90.       async  : false,
  91.       url    : prefixTmp + includeTmp,
  92.       success: function(response){
  93.         // ルートパスを相対パスに変更
  94.         response = response.replace(/=\"\//g, '="'+currentScriptDir);
  95.         // 該当の@includeを消す
  96.         console.info(directive);
  97.         bodyHtml = bodyHtml.replace(directive, response);
  98.       }
  99.     });
  100.   }
  102.   currentScriptDir = $('script[src*="template.js"]:first').attr('src').replace('template.js', '');
  103.   $('script[src*="template.js"]:first').remove();
  104.   sourceHtml = $('body').html();
  105.   bodyHtml = $('body').html();
  107.   // サーバなら処理しない
  108.   if( location.pathname.search(/\/themes\//) === -1 ){
  109.     return false;
  110.   }
  112.   // テンプレートを解決
  113.   resolveTemplate();
  115. });

Todo

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

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

Buy me coffee

コメント

お名前 必須

名前を入力してください。
メールアドレス

正しいメールアドレスを入力してください。
URL

正しいURLを入力してください。

タイトル

タイトルを入力してください。

タイトルに不適切な言葉が含まれています。

コメント必須

コメントを入力してください。

コメントに不適切な言葉が含まれています

パスワード必須

パスワードを入力してください。

パスワードは半角小文字英数字で入力してください。
Cookie

関連記事

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

ジェノベーゼ寺崎

Web業界17年目。企画提案、デザインからシステム構築まで。a-blogcms の構築が得意。WordPress、Movable Typeの構築や、Amazon CognitoやPower AppsとPHPの連携などマニアックなこともしています。

最新記事

カテゴリー

ハッシュタグ