页面

每个网站至少会提供一个页面，在 October CMS 中，一个页面由页面模板表示。页面模板文件位于您的主题的 pages 目录中。页面文件名不影响路由，但根据页面的功能来命名您的页面是个好主意。这些文件应该使用 htm 扩展名。

配置和Twig模板部分是页面必需的，但PHP部分是可选的。下面，你可以看到最简单的首页示例。

url = "/"

<h1>Hello, world!</h1>

页面配置

页面配置定义在页面模板文件的配置部分。 页面配置定义了页面参数， 路由和渲染页面及其组件所需， 其解释在另一篇文章中。 以下配置参数支持页面：

URL 语法

页面 URL 使用 url 配置参数定义。URL 应以正斜杠字符开头，并可包含参数。不带参数的 URL 是固定且严格的。在以下示例中，页面 URL 为 /blog。

页面 URL 默认不区分大小写。

url = "/blog"

带有参数的 URL 更加灵活。
一个具有以下示例中定义的 URL 模式的页面，将会针对任何类似 /blog/post/something 的地址显示。
URL 参数可以由 October 组件访问，也可以从页面 PHP 代码部分访问。

url = "/blog/post/:post_id"

这是您从页面的 PHP 部分访问 URL 参数的方式 (有关更多详细信息，请参阅动态页面部分).

url = "/blog/post/:post_id"

function onStart()
{
    $postId = $this->param('post_id');
}

参数名称应与 PHP 变量名称兼容。要使参数可选，在其名称后添加一个问号：

url = "/blog/post/:post_id?"

URL 中间的参数不能是可选的。在下一个示例中，:post_id 参数被标记为可选，但会作为必需项处理。

url = "/blog/:post_id?/comments"

可选参数可以有默认值，如果 URL 中未提供实际参数值，这些默认值将用作备用值。默认值不能包含任何星号、竖线符号或问号。默认值在 问号 之后指定。在下一个示例中，对于 URL /blog/category，category_id 参数将是 10。

url = "/blog/category/:category_id?10"

您还可以使用正则表达式来验证参数。要添加验证表达式，请在参数名称后添加竖线符号或问号，并指定该表达式。这些表达式中不允许使用斜杠符号。示例：

url = "/blog/:post_id|^[0-9]+$/comments" ; this will match /blog/10/comments

url = "/blog/:post_id|^[0-9]+$" ; this will match /blog/3

url = "/blog/:post_name?|^[a-z0-9\-]+$" ; this will match /blog/my-blog-post

可以通过在参数后面放置一个星号来使用特殊的通配符参数。与常规参数不同，通配符参数可以匹配一个或多个 URL 段。一个 URL 只能包含一个通配符参数，不能使用正则表达式，也不能后跟可选参数。

url = "/blog/:category*/:slug"

通配符参数本身可以通过在星号前加上 ? 字符来使其变为可选，不过。

url = "/blog/:slug?*"

例如，一个像这样的 URL /color/:color/make/:make*/edit 将匹配 /color/brown/make/volkswagen/beetle/retro/edit 并提取以下参数值：

• 颜色: 棕色
• 制造商: volkswagen/beetle/retro

子目录不影响页面 URL - URL 仅通过 url 参数定义。

动态页面

在页面模板的 Twig 部分中，您可以使用任何 October CMS 提供的函数、过滤器和标签。任何动态页面都需要 变量 并且变量可以由页面或布局的 PHP 部分准备，也可以由 组件。在本文中，我们将介绍如何在 PHP 部分准备变量。

页面执行生命周期

页面和布局的PHP部分可以定义一些特殊函数：onInit、onStart和onEnd。onInit 函数在所有组件初始化完成后以及处理 AJAX 请求之前执行。onStart 函数在页面执行开始时执行。onEnd 函数在页面渲染之前以及页面组件执行之后执行。在onStart和onEnd函数中，你可以将变量注入到 Twig 环境中。使用带数组表示法的 $this 将变量传递给页面。

url = "/"

function onStart()
{
    $this['hello'] = "Hello world!";
}

<h3>{{ hello }}</h3>

下一个例子更复杂。它展示了如何从数据库加载博客文章集合，并将其显示在页面上 (该 Acme\Blog 插件是虚构的)。

url = "/blog"

use Acme\Blog\Classes\Post;

function onStart()
{
    $this['posts'] = Post::orderBy('created_at', 'desc')->get();
}

<h2>Latest posts</h2>
<ul>
    {% for post in posts %}
        <h3>{{ post.title }}</h3>
        {{ post.content }}
    {% endfor %}
</ul>

October CMS 提供的默认变量和 Twig 扩展在标记指南中有所描述。处理程序执行的顺序在动态布局部分中有所描述。

发送自定义响应

在执行生命周期中定义的所有方法都能够停止进程并返回响应 - 只需从生命周期函数返回响应即可。下面的示例不会加载任何页面内容，而是向浏览器返回字符串 Hello world!：

function onStart()
{
    return 'Hello world!';
}

一个更有用的例子可能是使用 Redirect 门面触发重定向：

public function onStart()
{
    return Redirect::to('http://google.com');
}

处理表单

你可以使用在页面或布局 PHP 部分中定义的处理程序方法来处理标准表单 (AJAX 请求的处理在 AJAX 框架 文章中进行了解释). 使用 form_open() Twig 函数 来定义一个引用事件处理程序的表单.

<form data-request="onHandleForm">
    <div>
        <label>Please enter a string</label>
        <input name="value"/>
    </div>

    <button data-attach-loading>
        Submit
    </button>
</form>

<p>Last submitted value: {{ lastValue }}</p>

onHandleForm 函数可以在页面或布局的PHP部分定义。

function onHandleForm()
{
    $this['lastValue'] = post('value');
}

该处理程序使用 post 函数加载值，并初始化页面的 lastValue 属性变量，该变量在第一个示例中显示在表单下方。

如果在页面布局、页面以及一个页面组件中定义了同名处理器，October CMS 将执行页面处理器。如果在组件和布局中定义了处理器，将执行布局处理器。处理器优先级是：页面、布局、组件。

如果你想引用在特定组件中定义的处理程序，在处理程序引用中使用该组件的名称或别名：

<form data-request="myComponent::onHandleForm">...</form>

404 页面

如果主题包含一个 URL 为 /404 的页面，当系统无法找到请求的页面时，它将被显示。

错误页面

默认情况下，任何错误都将显示一个详细的错误页面，其中包含错误发生时的文件内容、行号和堆栈跟踪。您可以通过在 config/app.php 脚本中将配置值 debug 设置为 false，并创建一个 URL 为 /error 的页面来显示自定义错误页面。

设置页面标题

设置页面标题可以在 PHP 中使用 Page 对象完成，或者在 Twig 中使用 占位符标签.

使用页面属性

页面的属性可以在 PHP 代码段或 组件 中通过引用 $this->page 进行访问。以下将 meta_title 属性设置为一个新值。

function onEnd()
{
    $this->page->meta_title = 'A different page title';
}

{{ this.page }} 变量可以在 Twig 中使用 this.page 变量访问。例如，在布局中返回 meta_title 属性。

<title>{{ this.page.meta_title }}</title>

有关 this.page 的更多信息可在 标记指南 中找到。

使用占位符变量

{% put %} 标签允许您将值存储到占位符变量中。以下设置了 pageTitle 变量。

{% put pageTitle = 'Yet another page title' %}

该 placeholder() Twig 函数用于访问布局内部的变量。

<title>{{ placeholder('pageTitle') }}</title>

一个默认值 (第二个参数) 可以作为备用提供。

<title>{{ placeholder('pageTitle', this.page.meta_title) }}</title>

有关占位符标签的更多信息可在占位符标签文章中找到。

以编程方式注入页面资产

如果需要，您可以使用控制器的 addCss 和 addJs 方法将资源（CSS 和 JavaScript 文件）注入到页面中。这可以在页面或 布局模板 的 PHP 部分定义的 onStart 函数中完成。

function onStart()
{
    $this->addCss('assets/css/hello.css');
    $this->addJs('assets/js/app.js');
}

如果 addCss 和 addJs 方法参数中指定的路径以斜杠 (/) 开头，它将相对于网站根目录。如果资产路径不以斜杠开头，它将相对于主题。

注入的资源可以通过将它们作为数组传递来组合：

function onStart()
{
    $this->addCss(['assets/css/hello.css', 'assets/css/goodbye.css']);
    $this->addJs(['assets/js/app.js', 'assets/js/nav.js']);
}

LESS 和 SCSS 资源可以通过组合器进行注入和编译。

function onStart()
{
    $this->addCss(['assets/less/base.less']);
}

addCss 和 addJs 的第二个参数允许您为注入的资产提供额外的属性：

function onStart()
{
    $this->addJs(['assets/js/app.js', 'assets/js/nav.js'], ['defer' => true]);
}

为了在页面或布局上输出注入的资源，使用{% styles %}和{% scripts %}标签。示例：

<head>
    ...
    {% styles %}
</head>
<body>
    ...
    {% scripts %}
</body>

有关 {% styles %} 和 {% scripts %} 标签的更多信息，请参阅 标记指南。