ローカル環境で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であればダミーの内容を出すなどの実装を行いたいです。
- スタンドアローンで動くように調整
- ブロックを解決
- 変数を解決
_221211_133306_1.jpg)
コメント