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

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


ダウンロード


使い方

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

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="template.js"></script>

中身

@includeの内容をAjaxで読み込みます。prefixは環境に合わせて調整してください。


$(document).ready(function(){ bodyHtml = $('body').html(); prefix = ".."; // @includeを解決 includes = bodyHtml.match(/\@include\([\s\S]*?\)/g); for (var i = 0; i < includes.length; i++) { include = includes[i].match(/\@include\(([\s\S]*?)\)/)[1]; includeTmp = include.replace(/["|'| ]/g, ""); prefixTmp = include.search(/^["|']?\//) !== -1 ? prefix : ""; $.ajax({ async : false, url : prefixTmp + includeTmp, success: function(response){ response = response.replace(/=\"\//g, '="../'); response = response.replace(/\@section\(.*?\)/g, '').replace('@endsection', ''); bodyHtml = bodyHtml.replace('@include('+include+')', response); // bodyHtml += response; } }); } // 描画 bodyHtml = bodyHtml.replace(/\@include\([\s\S]*?\)/g, ""); bodyHtml = bodyHtml.replace(/\@section\(([\s\S]*?)\)([\s\S]*?)\@endsection/mg, "$2"); $('body').html(bodyHtml); });

Todo

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

  • @includeした内容のパスを解決
  • @sectionを解決
  • ブロックを解決
  • 変数を解決

関連記事

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

最新記事

カテゴリー

アーカイブ

ハッシュタグ