[TOC]
## **介绍**
所有网站都有网页。在October，页面用页面模板表示。页面模板文件位于主题目录的**/ pages**子目录中。页面文件名称不会影响路由，但最好根据页面功能命名页面。文件应具有**htm**扩展名。在[配置](1073310#_73)和[Twig](1073310#Twig_127)的模板部分所需要的页面，但[PHP部分](1073310#PHP_82)是可选的。您可以在下面看到最简单的主页示例。
~~~
url = "/"
==
<h1>Hello, world!</h1>
~~~
## **页面配置**
页面配置在页面模板文件的“[配置”部分](#666)中定义。页面配置定义了路由和呈现页面和页面[组件](#666)所需的页面参数，这在另一篇文章中有解释。页面支持以下配置参数：
| 参数 | 描述 |
| --- | --- |
| **网址** | 页面URL，必需。URL语法如下所述。 |
| **标题** | 页面标题，必填。 |
| **布局** | 页面[布局](#666)，可选。如果指定，则应包含布局文件的名称，不带扩展名，例如：`default`。 |
| **描述** | 后端界面的页面描述，可选。 |
### **URL语法**
页面URL使用**url**配置参数定义。URL应以正斜杠字符开头，并且可以包含参数。没有参数的URL是固定和严格的。在以下示例中，页面URL是`/blog`。
~~~
url = "/blog"
~~~
带参数的URL更灵活。对于任何地址，将显示以下示例中定义的URL模式的页面`/blog/post/something`。October组件或页面[PHP代码](#3)部分可以访问URL参数。
~~~
url = "/blog/post/:post_id"
~~~
这是您可以从页面PHP部分访问URL参数的方法（有关详细信息，请参阅[动态页面](#3)部分）：
~~~
url = "/blog/post/:post_id"
==
function onStart()
{
$post_id = $this->param('post_id');
}
==
~~~
参数名称应与PHP变量名称兼容。要使参数可选，请在其名称后添加问号：
~~~
url = "/blog/post/:post_id?"
~~~
URL中间的参数不能是可选的。在下一个示例中，`:post_id`参数标记为可选，但会根据需要进行处理。
~~~
url = "/blog/:post_id?/comments"
~~~
可选参数可以具有默认值，如果URL中未显示实际参数值，则默认值将用作回退值。默认值不能包含任何星号，管道符号或问号。在**问号**后面指定默认值。在下一个示例中，`category_id`参数将`10`用于URL`/blog/category`。
~~~
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`/color/:color/make/:make*/edit`将匹配`/color/brown/make/volkswagen/beetle/retro/edit`并提取以下参数值：
* 颜色：`brown`
* 使：`volkswagen/beetle/retro`
> **注意：**子目录不会影响页面URL - URL仅使用**url**参数定义。
## **动态页面**
在页面模板的[Twig部分内](#3)，您可以使用October提供的任何[功能，过滤器和标签](#3)。任何动态页面都需要**变量**。October页面变量可以通过页面或布局[PHP部分](#3)或[组件](#3)来准备。在本文中，我们将介绍如何在PHP部分中准备变量。
### **页面执行生命周期**
有迹象表明，可以在页面和布局PHP部分来定义特殊功能：`onInit`，`onStart`和`onEnd`。在`onInit`初始化所有组件并处理AJAX请求之前执行该函数。该`onStart`函数在页面执行开始时执行。该`onEnd`函数在呈现页面之前和页面[组件](#3)执行之后执行。在onStart和onEnd函数中，您可以将变量注入Twig环境。使用`array notation`将变量传递给页面：
~~~
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>
~~~
[标记指南](#3)中描述了10月提供的默认变量和Twig扩展。[动态布局](#3)文章中描述了处理程序执行的整体顺序。
### **发送自定义响应**
执行生命周期中定义的所有方法都能够暂停进程并返回响应。只需返回生命周期功能的响应即可。下面的示例不会加载任何页面内容并返回字符串*Hello world！*到浏览器：
~~~
function onStart()
{
return 'Hello world!';
}
~~~
一个更有用的示例可能是使用`Redirect`Facade触发重定向：
~~~
public function onStart()
{
return Redirect::to('http://google.com');
}
~~~
### **处理表单**
您可以使用页面或布局[PHP部分中](#3)定义的处理程序方法处理标准表单（处理AJAX请求在[AJAX Framework](#3)文章中进行了解释）。使用[form\_open（）](#3)函数定义引用事件处理程序的表单。例：
~~~
{{ form_open({ request: 'onHandleForm' }) }}
Please enter a string: <input type="text" name="value"/>
<input type="submit" value="Submit me!"/>
{{ form_close() }}
<p>Last submitted value: {{ lastValue }}</p>
~~~
可以通过以下方式在页面或布局[PHP部分](#3)中定义onHandleForm函数：
~~~
function onHandleForm()
{
$this['lastValue'] = post('value');
}
~~~
处理程序使用函数加载值`post`并初始化页面`lastValue`属性变量，该变量显示在第一个示例中的表单下方。
> **注意：**如果在页面布局中定义了具有相同名称的处理程序，则页面和页面[组件](#3)October将执行页面处理程序。如果在组件和布局中定义了处理程序，则将执行布局处理程序。处理程序优先级是：页面，布局，组件。
如果要引用特定[组件中](#3)定义的处理程序，请使用处理程序引用中的组件名称或别名：
~~~
{{ form_open({ request: 'myComponent::onHandleForm' }) }}
~~~
## **404页面**
如果主题包含带有URL的页面，则`/404`在系统找不到请求的页面时显示该页面。
## **错误页面**
默认情况下，任何错误都将显示一个详细的错误页面，其中包含发生错误的文件内容，行号和堆栈跟踪。您可以通过在脚本中将配置值设置`debug`为**false**`config/app.php`并使用URL创建页面来显示自定义错误页面`/error`。
## **页面变量**
可以在[PHP代码部分](#3)或通过引用的[组件中](#3)访问页面的属性`$this->page`。
~~~
function onEnd()
{
$this->page->title = 'A different page title';
}
~~~
也可以使用`this.page`[变量](#3)在标记中访问它们。例如，要返回页面的标题：
~~~
<p>The title of this page is: {{ this.page.title }}</p>
~~~
可以`this.page`在[标记指南中](#3)找到更多信息。
## **以编程方式注入页面资源**
如果需要，您可以使用控制器`addCss`和`addJs`方法将资源（CSS和JavaScript文件）注入页面。它可以在页面或[布局](#3)模板`onStart`的[PHP部分](3)中定义的函数中完成。例：
~~~
function onStart()
{
$this->addCss('assets/css/hello.css');
$this->addJs('assets/js/app.js');
}
~~~
如果`addCss`和`addJs`method参数中指定的路径以斜杠（/）开头，那么它将相对于网站根目录。如果资产路径不是以斜杠开头，那么它与主题相关。
注入的资源可以通过将它们作为数组传递来组合：
~~~
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']);
}
~~~
要在页面或[布局](#3)上输出注入的资源，请使用[{％styles％}](#3)和[{％scripts％}](#3)标记。例：
~~~
<head>
...
{% styles %}
</head>
<body>
...
{% scripts %}
</body>
~~~
- 安装程序
- 安装
- 配置
- CMS
- 主题
- 页面
- 部件
- 布局
- 内容
- 组件
- 媒体
- 标记指南
- AJAX
- 介绍
- 事件处理
- 更新部件
- 数据属性API
- JavaScript API
- 额外特征
- 主题
- 开发主题
- 插件
- 注册
- 版本
- 使用Composer
- 构建组件
- 设置和配置
- 本地化
- 任务调度
- 扩展插件
- 后台
- 控制器和AJAX
- 视图和部件
- 小工具
- 表单
- 列表
- 关联
- 重新排序
- 导入导出
- 用户和权限
- 用户界面指南
- 数据库
- 基本用法
- 结构
- 查询构造器
- 模型
- 关联
- 附件
- 集合
- 访问器和修改器
- 序列化
- 特性
- 行为
- 服务
- 应用
- 行为
- 缓存
- 集合
- 错误&日志
- 事件
- 表单&HTML
- 文件系统/CDN
- 哈希&加密
- 助手函数
- 邮件
- 分页
- 分析器
- 队列
- 请求&输入
- 响应&视图
- 路由
- Session
- 验证
- 控制台
- 命令
- 脚手架
- 开发
- API文档
- 附录
- 单元测试
- 质量指南
- 开发指南