# 页面
## **介绍**
所有网站都有网页。在October，页面用页面模板表示。页面模板文件位于主题目录的\*\*/ pages**子目录中。页面文件名称不会影响路由，但最好根据页面功能命名页面。文件应具有**htm\*\*扩展名。在[配置](https://www.kancloud.cn/followme/octobercms/1073310#_73)和[Twig](https://www.kancloud.cn/followme/octobercms/1073310#Twig_127)的模板部分所需要的页面，但[PHP部分](https://www.kancloud.cn/followme/octobercms/1073310#PHP_82)是可选的。您可以在下面看到最简单的主页示例。
```
url = "/"
==
<h1>Hello, world!</h1>
```
## **页面配置**
页面配置在页面模板文件的“[配置”部分](https://www.kancloud.cn/followme/octobercms/1073311#666)中定义。页面配置定义了路由和呈现页面和页面[组件](https://www.kancloud.cn/followme/octobercms/1073311#666)所需的页面参数，这在另一篇文章中有解释。页面支持以下配置参数：
参数描述**网址**页面URL，必需。URL语法如下所述。**标题**页面标题，必填。**布局**页面[布局](https://www.kancloud.cn/followme/octobercms/1073311#666)，可选。如果指定，则应包含布局文件的名称，不带扩展名，例如：`default`。**描述**后端界面的页面描述，可选。### **URL语法**
页面URL使用**url**配置参数定义。URL应以正斜杠字符开头，并且可以包含参数。没有参数的URL是固定和严格的。在以下示例中，页面URL是`/blog`。
```
url = "/blog"
```
带参数的URL更灵活。对于任何地址，将显示以下示例中定义的URL模式的页面`/blog/post/something`。October组件或页面[PHP代码](https://www.kancloud.cn/followme/octobercms/1073311#3)部分可以访问URL参数。
```
url = "/blog/post/:post_id"
```
这是您可以从页面PHP部分访问URL参数的方法（有关详细信息，请参阅[动态页面](https://www.kancloud.cn/followme/octobercms/1073311#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部分内](https://www.kancloud.cn/followme/octobercms/1073311#3)，您可以使用October提供的任何[功能，过滤器和标签](https://www.kancloud.cn/followme/octobercms/1073311#3)。任何动态页面都需要**变量**。October页面变量可以通过页面或布局[PHP部分](https://www.kancloud.cn/followme/octobercms/1073311#3)或[组件](https://www.kancloud.cn/followme/octobercms/1073311#3)来准备。在本文中，我们将介绍如何在PHP部分中准备变量。
### **页面执行生命周期**
有迹象表明，可以在页面和布局PHP部分来定义特殊功能：`onInit`，`onStart`和`onEnd`。在`onInit`初始化所有组件并处理AJAX请求之前执行该函数。该`onStart`函数在页面执行开始时执行。该`onEnd`函数在呈现页面之前和页面[组件](https://www.kancloud.cn/followme/octobercms/1073311#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>
```
[标记指南](https://www.kancloud.cn/followme/octobercms/1073311#3)中描述了10月提供的默认变量和Twig扩展。[动态布局](https://www.kancloud.cn/followme/octobercms/1073311#3)文章中描述了处理程序执行的整体顺序。
### **发送自定义响应**
执行生命周期中定义的所有方法都能够暂停进程并返回响应。只需返回生命周期功能的响应即可。下面的示例不会加载任何页面内容并返回字符串\*Hello world！\*到浏览器：
```
function onStart()
{
return 'Hello world!';
}
```
一个更有用的示例可能是使用`Redirect`Facade触发重定向：
```
public function onStart()
{
return Redirect::to('http://google.com');
}
```
### **处理表单**
您可以使用页面或布局[PHP部分中](https://www.kancloud.cn/followme/octobercms/1073311#3)定义的处理程序方法处理标准表单（处理AJAX请求在[AJAX Framework](https://www.kancloud.cn/followme/octobercms/1073311#3)文章中进行了解释）。使用[form\_open（）](https://www.kancloud.cn/followme/octobercms/1073311#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部分](https://www.kancloud.cn/followme/octobercms/1073311#3)中定义onHandleForm函数：
```
function onHandleForm()
{
$this['lastValue'] = post('value');
}
```
处理程序使用函数加载值`post`并初始化页面`lastValue`属性变量，该变量显示在第一个示例中的表单下方。
> \*\*注意：\*\*如果在页面布局中定义了具有相同名称的处理程序，则页面和页面[组件](https://www.kancloud.cn/followme/octobercms/1073311#3)October将执行页面处理程序。如果在组件和布局中定义了处理程序，则将执行布局处理程序。处理程序优先级是：页面，布局，组件。如果要引用特定[组件中](https://www.kancloud.cn/followme/octobercms/1073311#3)定义的处理程序，请使用处理程序引用中的组件名称或别名：
```
{{ form_open({ request: 'myComponent::onHandleForm' }) }}
```
## **404页面**
如果主题包含带有URL的页面，则`/404`在系统找不到请求的页面时显示该页面。
## **错误页面**
默认情况下，任何错误都将显示一个详细的错误页面，其中包含发生错误的文件内容，行号和堆栈跟踪。您可以通过在脚本中将配置值设置`debug`为\*\*false`**config/app.php`并使用URL创建页面来显示自定义错误页面`/error`。
## **页面变量**
可以在[PHP代码部分](https://www.kancloud.cn/followme/octobercms/1073311#3)或通过引用的[组件中](https://www.kancloud.cn/followme/octobercms/1073311#3)访问页面的属性`$this->page`。
```
function onEnd()
{
$this->page->title = 'A different page title';
}
```
也可以使用`this.page`[变量](https://www.kancloud.cn/followme/octobercms/1073311#3)在标记中访问它们。例如，要返回页面的标题：
```
<p>The title of this page is: {{ this.page.title }}</p>
```
可以`this.page`在[标记指南中](https://www.kancloud.cn/followme/octobercms/1073311#3)找到更多信息。
## **以编程方式注入页面资源**
如果需要，您可以使用控制器`addCss`和`addJs`方法将资源（CSS和JavaScript文件）注入页面。它可以在页面或[布局](https://www.kancloud.cn/followme/octobercms/1073311#3)模板`onStart`的[PHP部分](https://www.kancloud.cn/followme/octobercms/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']);
}
```
要在页面或[布局](https://www.kancloud.cn/followme/octobercms/1073311#3)上输出注入的资源，请使用[{％styles％}](https://www.kancloud.cn/followme/octobercms/1073311#3)和[{％scripts％}](https://www.kancloud.cn/followme/octobercms/1073311#3)标记。例：
```
<head>
...
{% styles %}
</head>
<body>
...
{% scripts %}
</body>
```
- 基本说明
- 基本操作
- October cms 安装
- 后台控制器路径
- 图标
- 获取安装网上的插件/主题
- 插件构造器使用
- 定时任务
- October后台控制器
- vscode编辑器
- ajax操作
- 使用
- ajax更新组件
- ajax属性API
- JavaScript API
- ajax综合使用
- 主题
- 多语言主题
- 安装市场主题
- 主题程序处理
- 主题
- 页面
- 部件
- 布局
- 内容
- 组件
- 媒体
- 主题表单操作
- 表单使用
- 表单后端程序处理
- 插件
- 自定义插件
- 插件说明
- 插件导航条
- 插件数据库设置
- 插件的设置管理
- 插件的配置文件config
- 组件
- app服务
- app容器
- 扩展行为
- 缓存
- Collection类
- Lazy Collections
- Collection方法
- 助手函数
- 数组助手函数
- 路径助手函数
- 玄乐助手函数
- 其他助手函数
- 错误与记录
- 事件处理
- HTML页面
- 文件与目录操作
- 散列和加密
- 邮件
- 邮件内容
- 邮件发送
- 分页
- 模板解析器
- 动态解析器语法
- 队列消息
- 请求与输入
- 响应
- 视图
- 路由器
- 配置
- 验证操作
- 处理错误消息
- 错误消息与视图
- 可用的验证规则
- 有条件的验证规则
- 验证数组
- 错误消息
- 自定义验证规则
- 模型操作
- 定义模型与其属性
- 检索模型
- 插入与更新
- 删除模型
- 查询范围
- 事件操作
- 关联操作
- 定义关系
- 关系类型
- 多肽关系
- 关系查询
- 渴望加载
- 插入模型
- 数据库操作
- 基本用法
- 数据表结构
- 查询连贯操作
- 结果检索
- select子句
- 插入更新
- where子句
- 排序，分组，限制和偏移
- 文件附件
- Collection操作
- 属性操作
- 系列化json
- 数据库属性
- 数据库行为
- 控制器
- 后台控制器定义
- 后台页面
- 后台组件
- 后台表单
- 表单组件
- 表单视图
- 表单行为
- 后台列表
- 列表行为
- 列表过滤器
- 可用列类型
- 关系行为
- 关系行为类型
- 扩展关系行为
- 列表排序操作
- 导入导出操作
- 用于与权限
- corlate模板修改
- 修改顶部导航
- laravel问题
- 控制器不存在
- 控制器
- 路由组
- laravel笔记
- laravel 安装
- 伪静态配置
- 依赖注入 & 控制器
- 中间件
- 路由文件
- 视图