100%

介绍

所有网站都有网页。10月份,页面用页面模板表示。页面模板文件位于主题目录的 /pages子目录中。文件应具有htm扩展名,页面文件名称不会影响路由,但最好根据页面功能命名页面。页面需要ConfigurationTwig模板部分,但PHP section是可选的。您可以在下面看到最简单的主页示例。

url = "/"
==
<h1>Hello, world!</h1>


改进 重译

页面配置

页面配置在 配置部分 . 页面配置定义了页面的参数,包含路由,content,和 组件。 页面支持以下配置参数:

参数 描述
url 页面路由..
title 页面标题.
layout 页面 布局,
description 后端界面的页面描述,可选。


改进 重译

URL 语法

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

url = "/blog"

url 参数例子,可在component和php 代码部分访问路由参数

url = "/blog/post/:post_id"

接收参数 (看 动态页 ,有更详细的介绍):

url = "/blog/post/:post_id"
==
function onStart()
{
    $post_id = $this->param('post_id');
}
==

参数可选加?号:

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

中间的参数随可选,但会有一个默认的值.

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

?号后面,可以有一个默认值.

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 /color/:color/make/:make*/edit 将匹配 /color/brown/make/volkswagen/beetle/retro/edit 参数值:

  • color: brown
  • make: volkswagen/beetle/retro

注意: 子目录不影响页面URL - URL仅使用url参数定义。



改进 重译

动态页

在模版的 标签语言 中,你可以使用 functions, filters and tags provided by October和任何页面 变量. 变量提供者可以是 PHP代码块或者 组件. 在这个文章中,介绍怎么在PHP代码块中,添加变量.

页面执行生命周期

  • onInit 当所有组件都被初始化并且在AJAX请求之前
  • onStart 在页面执行开始时
  • onEnd 在呈现页面之前以及页面组件执行之后

在onStart和onEnd函数中,您可以将变量注入Twig模版:

url = "/"
==
function onStart()
{
    $this['hello'] = "Hello world!";
}
==
<h3>{{ hello }}</h3>

下一个例子更复杂。它显示了如何从数据库加载博客文章集并在页面上显示。

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提供的默认变量和Twig扩展名在 模版标签. 动态布局文章中描述了处理程序执行的整体顺序。



改进 重译

发送自定义响应

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

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

一个更有用的示例可能是使用Redirect facade触发重定向 :

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


改进 重译

处理表单

可以在 PHP 代码块处理请求。 处理ajax请求可参考ajax 介绍文章 . 用 form_open()函数定义请求方法 . Example:

{{ 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代码块 定义onHandleForm:

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

post 函数可获得传过来的值.

注意: 相同处理器优先级: page, layout, component.

指定组件 component处理:

{{ form_open({ request: 'myComponent::onHandleForm' }) }}


改进 重译

404 页

如果主题包含带有URL /404的页面,则在系统找不到请求的页面时显示该页面

错误 页

debugfalse时,错误页显示/error

页面变量

页面变量可以在 PHP代码块组件 中通过$this->page设置 .

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

在页面上显示可以用 this.page 模版属性. 例如:

<p>The title of this page is: {{ this.page.title }}</p>

更多 this.page 信息.



改进 重译

动态加载静态资源

PHP代码块 或者 模板 中:

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

/开头,是主题根目录,不以/开头,是相对目录.

数组方式加载:

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

Less加载:

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

模版中 放置 {% styles %}{% scripts %} 去显示:

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


改进 重译