README

一个用于开发 kmin.js 的 webman 模板引擎

要求

php 8.4 及以上版本
ext-dom 扩展

安装

composer require kmin/template

模板格式

<template>
    <!-- 你自己的html代码 -->
</template>
<script type="module">
    // 你自己的js代码
    customElements.define('这里和KMim.js的组件名称要求一样', class extends KMin {
        // 你的KMim.js的组件内容
    })
</script>
<style>
    /* 你自己的css代码 */
</style>

生成结果:（生成对于的css函数和render函数）

// 你自己的js代码
customElements.define('这里和KMim.js的组件名称要求一样', class extends KMin {
    css() {
        return `
            /* 你自己的css代码 */
        `
    }
    render() {
        return `
            <!-- 你自己的html代码 -->
        `
    }
    // 你的KMim.js的组件内容
})

变量输出

在模板中输出变量的方法很简单,我们可以在模板任意地方使用

输出变量:

字符串 kmStr(变量名)
数字 kmNum(变量名)
布尔值 kmBool(变量名)
json字符串 kmJson(变量名)
kmVar(变量名) 输出变量的原始值

例如1:

<template>
    <div>
        <p>姓名: kmStr($name)</p>
    </div>
</template>

例如2:

<template>
    ...
</template>
<script type="module">
    customElements.define('组件名', class extends KMin {
        data = this.state({
            name: kmStr($name), // 兼容js代码
        })
    })
</script>

公共模板方法

会在应用的view目录下

显示路由模板页面,会嵌入到main.html模板中的 <body> 标签里面使用

如果main.hml不存在会自动生成，你也可以自定义一个main.html模板文件

记得在main.html模板中引入kmin.js,main.html默认加入kmin.js,请根据实际情况修改!

/**
 * kmin view response
 *
 * @param mixed $template 模板文件名
 * @param array $vars 模板变量
 * @param string|null $app 应用名称
 * @param string|null $plugin 插件名称
 * @return Response 响应的是html页面
 */
function km_view(
    mixed $template = null,
    array $vars = [],
    ?string $app = null,
    ?string $plugin = null
): Response

会在应用的 component 目录下

会返回 js 页面格式, 使用 import "你的组件路由链接" 来引入组件

/**
 * kmin component response
 *
 * @param mixed $template 模板文件名
 * @param array $vars 模板变量
 * @param string|null $app 应用名称
 * @param string|null $plugin 插件名称
 * @return Response 响应的是js页面
 */
function km_component(
    mixed $template = null,
    array $vars = [],
    ?string $app = null,
    ?string $plugin = null
): Response

kmin / template

Maintainers

Details

README

要求

安装

模板格式

变量输出

公共模板方法