ski/ski-php

基于 Alpine.js 的 PHP 模板引擎

维护者

详情

github.com/ski-project/ski-php

源代码

问题

安装: 9

依赖: 0

建议者: 0

安全性: 0

星标: 1

关注者: 1

分支: 0

v0.1 2021-12-07 12:19 UTC

Requires

Requires (Dev)

MIT 8de91060512ec70ebf393db71050df075cb1e012

  • gregfn

This package is auto-updated.

Last update: 2024-09-08 23:08:58 UTC

README

📜欢迎来到文档

Ski 引擎是一个与框架无关的模板引擎，与 Alpine JS 一起工作

使用组件快速模拟您的下一个数据驱动应用。

更多信息，请参阅 Alpine JS 文档

<x-app>
	<x-article>
		<h1>Posts :</h1>
		<template x-for="post in posts">
			<x-post>
		</template>
	</x-article>
</x-app>

Alpine JS 是一个相当简单且非常直观的 JavaScript 框架，受 Vue JS 启发，可以直接从 CDN 中使用。

A，请参阅 Alpine JS 文档

☑️ 安装

开始一个 Ski 项目最好的方式是使用 composer

composer require ski/ski-php

创建以下项目文件结构。

Directories structure:
----------------------
<mySkiPath>/
	|___ components/
	|___ templates/
	|___ head.php

在你的 php 中实例化 ski，你需要指定

<?php
require 'vendor/autoload.php';
use Core\Ski;

这就结束了。 Ski 引擎现在可以使用了！

🔨 使用

此文件可以是您的 index.php 或您的路由器等。这是渲染视图的方式

require 'vendor/autoload.php';
Use Core\Ski;

$ski = new Ski(__DIR__."/path/to/mySkiPath");
// Without "/" at end

$datas = [..]; // retrieve datas as JSON, Array or object

$ski->template('templateName'); //add template that you need
$ski->data($datas); //add datas to Alpine to front

$ski->render(); //And just ⚡️ !

📑 $ski->template() 选择模板

定义要渲染的模板。

//example :
$ski->template('articleTemplate');
// set template in /templates/articleTemplate.php

☁️ $ski->data() 添加一些数据 可选

从您的后端、数据库、模型或任何东西传递数据到视图。

//example :
$datas = Http::get('/api/v1/users')->getJson();

$ski->data($datas);

//$datas = {"posts":[...]}
//$datas = ['posts' => [...]]
//$datas = $posts[42]->content->...

变量 $datas 可以是一个 JSON 对象、PHP 对象或一个数组。

数据作为 JavaScript 对象 datas 通过 x-data 标签在 <body> 中传递给 AlpineJS。

<div x-data="datas">
	<div v-for="post in datas.posts">
		<template>
			<h3 x-text="post.username"></h3>
			<p x-text="post.body"></p>
		</template>
	</div>
</div>

⚡️ $ski->render() 构建视图并发送它

//example :
$ski->render();

->render() 方法会将视图发送到浏览器，这个方法必须在最后调用。

之前的方法可以以任何顺序调用。

🏔️ 使用组件创建更简单的 UI

使用 Ski 引擎，您可以通过使用组件来创建模板。组件是可以以不同方式操作的代码片段。组件系统由 PHP 处理，组件的行为由 AlpineJS 指令定义。

🔁 Ski 组件如何工作？

要创建新的组件，在 components/ 目录中创建新文件。文件名将用作组件标签名

让我们创建一个简单的 comment 组件

<!--/components/comment.php-->

<div class="comment-card">
	<h3 x-text="post.userName"></h3>
	<p x-text="post.content"></p>
</div>

让我们再创建一个 article 组件

<!--/components/article.php-->

<article class="article">
	<h2 x-text="datas.article.title"></h2>
	<p x-text="datas.article.content"></p>
	<div class="comments_Section">
		<h3>Comments:</h3>
		<x-slot></x-slot>
	</div>
</article>

📑 如何构建模板？

要构建模板，您只需组装您的组件即可。要调用组件，使用以下语法 <x-componentName> 代表我们的组件。

<!--/templates/blogPage.php-->
<x-article>
	<template x-for="post in datas.posts">
		<x-comment/>
	<template>
</x-article>

组件名称只能包含字母，单词 template 是保留的，不能使用。标签不区分大小写：<x-App> <x-APP> <x-app> 指的是同一个 "app.php" 组件文件。

<template> 应在模板中调用，而不是在组件本身中，这是一个小贴士。

🔗 Head.php

此文件由 Ski 填充 <head></head> 在每个渲染的 HTML 文档中。在这里添加您的样式表或您喜欢的 CSS 框架 CDN。

<meta charset='utf-8'>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

确保 Alpine JS CDN 已链接

🧪 Config.yarn

即将推出！

Not implemented yet

与其他框架的集成

NAMM：详细介绍如何实现 Ski，如果可能的话，与 Laravel、lumen、leaf、Flight 集成

🔬 Ski 的未来

Ski-Engine 是一个开源项目，欢迎每个贡献。一些需要注意的点

  • 改进 XSS 保护
  • 添加全局变量系统
  • 添加配置文件
  • 更好地管理 head 标签

⚖️ 法律

在这个开发的早期阶段，强烈建议不要在生产环境中使用 Ski-Engine。

本软件按“现状”提供，不提供任何形式的保证，包括但不限于对适销性、特定用途适用性和非侵权的保证。在任何情况下，作者或版权所有者均不对任何索赔、损害或其他责任承担责任，无论这些责任是因合同、侵权或其他原因引起的，无论这些责任是否与软件、使用或其他与软件有关的操作有关。

本项目与 Alpine JS 无关 （感谢Caleb Porzio对AlpineJS所做的真正酷的工作）