README

使用说明

服务器端（PHP）

<?php
/**
 * api.php
 */
require_once('vendor/autoload.php');

$px2te = new pickles2\libs\themeEditor\main( $px );
$px2te->init(array(
	'appMode' => 'web', // 'web' or 'desktop'. default to 'web'
	'entryScript' => '/realpath/to/.px_execute.php', // Pickles 2 のエンドポイント
	'commands' => array(
		// コマンドのパスを指定する (任意)
		'php' => array(
			'bin' => 'php',
			'ini' => null,
		),
	),
));

$value = $px2te->gpi( json_decode( $_REQUEST['data'] ) );
header('Content-type: text/json');
echo json_encode($value);
exit;

客户端

<div id="canvas"></div>

<!--
エディタが利用する CSS や JavaScript などのリソースファイルがあります。
`$px2te->get_client_resources()` からリソースの一覧を取得し、読み込んでください。
-->

<?php
require_once('vendor/autoload.php');

$px2te = new pickles2\libs\themeEditor\main( $px );
$px2te->init( /* any options */ );

$resources = $px2te->get_client_resources();
foreach($resources->css as $css_file){
	echo('<link rel="stylesheet" href="'.htmlspecialchars($css_file).'" />');
}
foreach($resources->js as $js_file){
	echo('<script src="'.htmlspecialchars($js_file).'"></script>');
}
?>

<script>
var pickles2ThemeEditor = new Pickles2ThemeEditor();
pickles2ThemeEditor.init(
	{
		'elmCanvas': document.getElementById('canvas'), // <- 編集画面を描画するための器となる要素
		'lang': 'en', // language
		'gpiBridge': function(input, callback){
			// GPI(General Purpose Interface) Bridge
			// broccoliは、バックグラウンドで様々なデータ通信を行います。
			// GPIは、これらのデータ通信を行うための汎用的なAPIです。
			$.ajax({
				"url": '/your/api/path',
				"type": 'post',
				'data': {'data':JSON.stringify(input)},
				"success": function(data){
					callback(data);
				}
			});
			return;
		},
        'themeLayoutEditor': function(themeId, layoutId){
            alert('themeLayoutEditor: '+themeId+'/'+layoutId);
        },
        'openInBrowser': function(path){
            alert('openInBrowser: '+path);
        },
        'openInFinder': function(path){
            alert('openInFinder: '+path);
        },
        'openInTextEditor': function(path){
            alert('openInTextEditor: '+path);
        }
	},
	function(){
		// スタンバイ完了したら呼び出されるコールバックメソッドです。
		console.info('standby!!');
	}
);
</script>

更新日志 - Change log

pickles2/lib-px2-theme-editor v0.2.12 (2024年9月10日)

• 更新了模块。

pickles2/lib-px2-theme-editor v0.2.11 (2024年4月30日)

• 添加了 "2023 Pickles 2" 模板, "2023 Pickles 2 Darkmode" 模板
  • 对风格进行了微调。
• 其他一些小修正。

pickles2/lib-px2-theme-editor v0.2.10 (2024年2月18日)

• 添加了 "2023 Pickles 2" 模板, "2023 Pickles 2 Darkmode" 模板
  • 侧边栏现在可以固定在屏幕内。
  • 对风格进行了微调。
• 在启动功能中，对每个主题模板的不同选项进行了处理。
• 修正了无法编辑由块编辑器创建的新布局的问题。

pickles2/lib-px2-theme-editor v0.2.9 (2023年11月13日)

• 添加了 "2023 Pickles 2" 模板的样式调整。
• 修正了 "2023 Pickles 2" 模板中，logo图片不适用于 article 布局的问题。
• 添加了多语言支持的相关更新。
• 在子项目中预览时，现在会考虑 $conf->path_controot 来打开屏幕。
• 改善了模板 Pickles 2 Darkmode 2023。
• 捆绑了暗黑模式的样式。

pickles2/lib-px2-theme-editor v0.2.8 (2023年9月24日)

• 修复了编辑方法更改对话框中，当前编辑方法不会预置的不稳定问题。

pickles2/lib-px2-theme-editor v0.2.7 (2023年8月29日)

• 标准化了 article 布局。
• 修正了暗黑模式模板的样式。

pickles2/lib-px2-theme-editor v0.2.6 (2023年5月1日)

• 向 "2023 Pickles 2" 模板添加了内容模块的样式调整。
• 添加了 "2023 Pickles 2 Darkmode" 模板。
• 添加了 "SHIROMUKU" 模板。
• 取消了主题图标的显示。
• 向客户端添加了 openInBrowser 选项。
• 模板现在支持キャッチコピー($conf->tagline)。

pickles2/lib-px2-theme-editor v0.2.5 (2023年3月11日)

• 提高了主题模板的用户体验并修复了不稳定问题。
• 添加了汉堡菜单模块。
• 添加了横幅模块。

pickles2/lib-px2-theme-editor v0.2.4 (2023年2月11日)

• 在启动功能初始化时，现在会执行 Broccoli 内容的重建。

pickles2/lib-px2-theme-editor v0.2.3 (2022年12月29日)

• 现在可以省略 openInFinder 和 openInTextEditor。

pickles2/lib-px2-theme-editor v0.2.2 (2022年11月3日)

• 对主题模板进行了微调。

pickles2/lib-px2-theme-editor v0.2.1 (2022年6月5日)

• 更新了依赖包的版本。

pickles2/lib-px2-theme-editor v0.2.0 (2022年1月8日)

• 将支持的PHP版本更改为 >=7.3.0。
• 支持PHP 8.1。

pickles2/lib-px2-theme-editor v0.1.1 (2022年1月3日)

• 现在可以更改布局的编辑方法。
• 对性能进行了改进。
• 添加了服务器端初始化选项 commands。
• 改进了内部代码。

pickles2/lib-px2-theme-editor v0.1.0 (2021年6月26日)

• 添加了主题的启动功能。

pickles2/lib-px2-theme-editor v0.0.2 (2021年2月21日)

• 修复了在Windows中获取插件选项和更改默认主题时失败的问题。
• 修正了布局和样式。
• 增加了对暗黑模式的支持。
• 修复了其他一些小问题。

pickles2/lib-px2-theme-editor v0.0.1 (2020年12月30日)

• 首次发布

许可证

MIT许可证

作者

• Tomoya Koyanagi tomk79@gmail.com
• 网站: https://www.pxt.jp/
• 推特: @tomk79 https://twitter.com/tomk79/