跳至主要内容

视图与模板

当控制器处理来电请求时，视图负责渲染响应。为此，它采用了模板引擎。在Pagekit中，你可以使用普通的PHP模板或Twig模板引擎。

渲染视图响应

最常见的渲染视图方式是返回控制器作中的数组。用该属性把参数传递给你的视图渲染器。$view

public function indexAction($name = '')
{
    return [
        '$view' => [

            // Rendered in the site's <title>
            'title' => 'Hello World',

            // view file that is rendered
            'name' => 'hello:views/index.php',
        ],

        // pass parameters to view file
        'name' => $name
    ];
}

渲染后的视图文件可以是这样的：

<!-- packages/pagekit/extension-hello/views/index.php -->

<h1>Hello <?= $name ?></h1>
<p>
   ...
</p>

该视图默认包裹在主布局中。为了避免这种情况，你可以在数组中进行更改。'layout' => false$view

手动渲染视图

你也可以手动访问该服务来渲染模板文件。如果你动态决定要加载哪个视图，这会很有用。注意，下面的示例中指的是包模块定义中定义的资源简写。Viewhello:


use Pagekit\Application as App;

class MyController {

    public function anotherViewAction()
    {
        return App::view()->render('hello:views/view.php', ['id' => 1]);
    }

}

相关视图文件：

<!-- packages/pagekit/extension-hello/views/index.php -->

<h1>You are viewing article number <?= $id ?></h1>
<p>
   ...
</p>

模板化

视图通过PHP模板引擎渲染，该引擎提供定义的全局模板变量和一组视图辅助工具。

包括其他观点

从你的视角渲染子视图是用辅助工具完成的。该方法会评估并返回给定模板文件的内容。这和手动从控制器渲染视图是一样的。$viewrender

$view->render('hello:views/view.php', ['id' => 1])

如前所述，每条路由都有一个名称，你可以用它动态生成指向该特定路由的链接。有一个辅助工具可以暴露 的函数。UrlUrlProvider

<a href="<?= $view->url('@hello/default/view') ?>">View all articles</a>
<a href="<?= $view->url('@hello/default/view', ['id' => 23]) ?>">View article 23</a>

你可以通过 URL 提供者的方法链接到资源，比如图片或其他文件。getStatic($path)

<img src="<?= $view->url()->getStatic('hello:extension.svg') ?>" alt="Extension icon" />

资产管理

资源是项目中所需的静态文件，包括CSS、JS和图片文件。

生成静态资产的URL。

要生成指向静态资产的路由，请使用类的方法。getStaticUrlProvider

<img src="<?= $view->url()->getStatic('my-assets/image.jpg') ?>">

在视图文件中包含CSS

要在视图中包含CSS文件，请调用该辅助工具。styleView

$view->style($id, $path [, $dependencies ])

第一个参数是样式表的唯一标识符。如果你用同一个标识符表示多个样式表，Pagekit 只会包含最后一个样式表。第二个参数是样式表的路径，你可以用它作为“主题”包根目录的引用。你可以通过可选的第三个参数定义它的依赖关系。theme:

示例：

<?php $view->style('theme', 'theme:css/theme.css') ?>
<?php $view->style('theme', 'theme:css/theme.css', 'uikit') ?>
<?php $view->style('theme', 'theme:css/theme.css', ['uikit', 'somethingelse']) ?>
注释

这不会直接输出HTML所需的行。相反，它会把CSS文件添加到Pagekit资产管理器中。样式表会包含在你主题的部分。<head>

在视图文件中包含JS

要在模板中包含JavaScript文件，可以调用对象中的助手，这个工具的工作原理和助手完全一样。script$viewstyle

$view->script($id, $path [, $dependencies ])

第一个参数是脚本资产的唯一标识符。如果你对多个脚本使用相同的标识符，Pagekit 只会包含最后一个。第二个参数是脚本的路径，你可以用它作为“theme”包根目录的引用。你可以通过可选的第三个参数定义它的依赖关系。theme:

示例：

<?php $view->script('theme', 'theme:js/theme.js') ?>
<?php $view->script('theme', 'theme:js/theme.js', 'jquery') ?>
<?php $view->script('theme', 'theme:js/theme.js', ['jquery', 'uikit']) ?>
注释

内部，并且各自与自己的资产经理合作。由于这些文件彼此独立，你可以为CSS和JS文件赋予同一个名称而不冲突（上述示例中两者都被调用）。然而，没有两个脚本或样式表可以拥有相同的标识符。例如，添加两个样式表时，一个可以命名为“主题”，另一个命名为“自定义”。style()script()theme

异步与延迟脚本执行

默认情况下，包含在渲染后的 HML 标记头部分中的脚本会被立即取用并执行。只有在之后，浏览器才会继续解析页面。

要改变这种行为，你可以在加载脚本时使用关键词和。在你的PHP代码中设置合适的选项，生成的标签就会相应地设置这些属性。asyncdefer<script>

属性 描述
async 告诉浏览器异步执行脚本，这意味着即使在脚本执行时，解析页面也会继续
defer 告诉浏览器该脚本应在解析文档后执行。浏览器对该HTML功能的支持并不完美，但只有在脚本执行顺序重要的情况下使用它可能会带来问题。

示例：延迟执行，无依赖。

<?php $view->script('theme', 'theme:js/theme.js', [], ['defer' => true]) ?>

示例：延迟和异步执行，带有依赖关系。

<?php $view->script('theme', 'theme:js/theme.js', ['jquery', 'uikit'], ['defer' => true, 'async' => true]) ?>

树枝模板

与其用普通PHP模板，你也可以用Twig来做主题和扩展模板。你可以在官方 Twig 文档中找到关于 Twig 基本语法和功能的文档。类似于官方 Hello 主题用于默认 PHP 模板，也存在一个样板 Twig 主题，可以作为起点使用。

用树枝构建主题

默认情况下，Pagekit 从主题中使用的主模板文件位于 ，并使用默认的 PHP 渲染器进行渲染。在你的主题中，你可以定义一个不同的布局文件作为主模板。views/template.phpindex.php

/**
 * Change default layout to use a Twig template.
 */
'layout' => 'views:template.twig',

文件扩展名会导致 Pagekit 用 Twig 引擎渲染该模板。你主题的基本示例如下。*.twigviews/template.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        {{ view.render('head') | raw }}
        {{ view.style('theme', 'theme:css/theme.css') }}
        {{ view.script('theme', 'theme:js/theme.js') }}
    </head>
    <body>

        <!-- Render logo or title with site URL -->
        <a href="{{ view.url().get() }}">
            {% set logo = params.logo %}
            {% if logo %}
                <img src="{{ logo }}" alt="Logo">
            {% else %}
                {{ params.title }}
            {% endif %}
        </a>

        <!-- Render menu position -->
        {% if view.menu().exists('main') %}
            {{ view.menu('main') | raw }}
        {% endif %}

        <!-- Render widget position -->
        {% if view.position().exists('sidebar') %}
            {{ view.position('sidebar') | raw }}
        {% endif %}

        <!-- Render system messages -->
        {{ view.render('messages') | raw }}

        <!-- Render content -->
        {{ view.render('content') | raw }}

        <!-- Insert code before the closing body tag  -->
        {{ view.render('footer') | raw }}

    </body>
</html>

如你所见，你可以用基本的Twig语法输出逃逸内容（）和非逃逸内容（）。默认的控制结构如 和 是可用的，详情请参阅 Twig 语法文档。{{ ... }}{{ ... | raw }}iffor

Pagekit 的视图辅助工具和功能通过视图渲染器公开，视图渲染器在模板内提供。PHP 表达式可以简单地转换为 Twig 语法，例如在当前页面添加 CSS 文件：view

<!-- PHP version -->
<?php $view->style('theme', 'theme:css/theme.css'); ?>

<!-- Twig version -->
{{ view.style('theme', 'theme:css/theme.css') }}