页面

每个网站至少提供一个页面，在 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?*"

例如，像 /color/:color/make/:make*/edit 这样的 URL 会匹配 /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 属性变量，该变量在第一个示例中显示在表单下方。

If a handler with the same name is defined in the page layout, the page, and a page component, October CMS will execute the page handler. If a handler is defined in a component and a layout, the layout handler will be executed. The handler precedence is: page, layout, component.

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

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

404 页面

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

错误页面

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

设置页面标题

设置页面标题可以通过在 PHP 中使用页面对象完成，或者在 Twig 中使用 placeholder 标签。

使用页面属性

页面的属性可以在 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 %} 标签的更多信息，请参阅 Markup 指南。