ikkez/f3-template-sections

F3模板引擎的分区支持

维护者

详细信息

github.com/ikkez/f3-template-sections

主页

源代码

问题

安装: 240

依赖关系: 0

建议者: 0

安全: 0

星标: 7

关注者: 4

分支: 1

开放问题: 1

v1.1.0 2022-08-24 14:48 UTC

Requires

GPL-3.0 aad2214656f63002a7e292c2fd05a8960397a719

templatesectionF3fatfree

This package is auto-updated.

Last update: 2024-08-24 19:23:27 UTC

README

此插件通过分区为F3模板引擎引入了模板继承。

安装

使用composer安装，只需运行composer require ikkez/f3-template-sections。
如果您不使用composer，请将src/文件夹添加到您的AUTOLOAD路径中，或者将src/中的文件复制到您的libs中。

初始化

要使用新的指令，您需要注册它们

初始化

\Template\Tags\Section::init('section');
\Template\Tags\Inject::init('inject');

用法

想象一下这个主站模板

<html>
	<head>
		<title>Site Name</title>
	</head>
	<body>
		<F3:section id="sidebar" class="sidebar">
			<!-- sidebar -->
		</F3:section>
	
		<div class="container">
			<include href="article.html" />
		</div>
	</body>
</html>

您可以看到我们创建了一个id=sidebar的分区。如果您愿意，这个分区可以包含默认内容，但在article.html中，您现在可以向侧边栏注入内容，而侧边栏实际上在父级中

<F3:inject id="sidebar">
	<ul>
		<li><a href="#parrot">Fear me parrot</a></li>
		<li><a href="#rum">Arrr</a></li>
	</ul>
</F3:inject>

<h1 id="parrot">Fear me parrot, ye evil whale!</h1>
<p>All comrades sail gutless, stormy jacks. Ho-ho-ho! hunger of riddle.</p>

<h2 id="rum">Arrr, fine hunger!</h2>
<p>What’s the secret to canned and sun-dried zucchini? Always use quartered rum.</p>

基本上就是这样。还有一些其他的注入内容模式

追加/前置

在这个例子中，我们有一个面包屑导航。您可以使用tag属性更改生成的标签元素。

<nav class="breadcrumb">
	<F3:section id="breadcrumb" tag="ul">
		<li class="home"><a href="/">Home</a></li>
	</F3:section>
</nav>

默认情况下，分区中的内容在注入时会被替换。如果您愿意，您可以像这样追加现有内容

<F3:inject id="breadcrumb" mode="append">
	<li><a href="wiki">Wiki</a></li>
</F3:inject>

您也可以使用prepend作为注入模式。

本地渲染

您可以将模型切换为使用本地变量而不是在注入的分区中渲染内容。这在遍历<repeat>块中的数据数组时很有用。

<F3:contents id="modals" tag="FALSE" />

<div class="slider">
	<ul>
	<F3:repeat group="{{ @items }}" value="{{ @item }}">
		<li>
			{{@item.content}}
			<a href="#modal-{{@item.id}}">{{@item.title}}</a>
			<F3:inject id="modals" mode="append" local>
				<div class="modal" id="modal-{{@item.id}}">
					{{@item.modal}}
				</div>
			</F3:inject>
		</li>
	</F3:repeat>
	</ul>
</div>

API

分区

属性

  • 分区
    用于标识新分区。
  • id
    是section的别名，但id属性将在最终标记中可见。
  • tag
    最终分区的标签元素名称。默认：section。
    当您将tag="FALSE"时，分区内容不会包裹在任何元素中。

其他任何属性都将传递给最终标签元素。

注入

属性

  • 分区
    用于标识目标分区。
  • id
    是section的别名。
  • mode
    内容注入模式
    overwrite（默认值）：替换分区中的现有内容
    append：在现有内容后添加内容
    prepend：在现有内容前添加内容
  • local
    首先使用现有变量在本地渲染元素

许可证

GPLv3