By accessing the website and accepting the Cookie Policy, you agree to use the cookies provided by the Site in accordance with to analyze traffic, remember your preferences, and optimize your experience.
OctoberCMS官方文档 4-页面 (Pages)
October CMS    2018-10-22 18:54:42    52    0    0
emengweb   October CMS

Pages 概述

Pages:页面;网站页面的内容由Page模板定义。模板文件位置:themes/theme_name/pages目录下。页面文件的扩展名为htm。文档结构中,Configuration(配置)和Twig Markup(标记)部分是必须的,PHP代码部分是可选的。

最简单的例子

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

页面配置

页面配置在Configuration Section中定义。主要定义一下内容:

参数 描述 
URL 页面网址,必填。 
title 页面标题,必填。 
Layout 页面布局可选。如果指定,应包含布局文件的名称,不带扩展名,例如:default。
Description 后端接口的页面描述,可选。

URL设置语法

URL以正斜杠" / "开头,可以包含参数也可以不包含。比如:

url = "/blog"

带参数的URL以" : "开头。比如下面的url表示,/blog/post/...斜杠后面的就是参数。这个参数可以被October组件或者PHP代码部分访问。

url = "/blog/post/:post_id"

PHP代码部分访问的例子如下:参数名与php变量名要求一致。

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

可选参数:只需要在其后面加?即可。

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

URL中间的参数不能是可选的。在下一个示例中,该:post_id参数被标记为可选,但会当做必须的处理。

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

可选参数运行有默认值。在没有提供参数的时候,这些默认值作为POST的值。默认值不能包含任何" 星号 管道符 问号 "

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"

比如下面的例子:

/color/:color/make/:make*/edit
可以匹配:
/color/brown/make/volkswagen/beetle/retro/edit
其中:
color: 匹配了 brown
make: 匹配了 volkswagen/beetle/retro

动态页面

在模板的Twig标记部分,可以使用October提供的函数,过滤器和标签。其中的变量在页面中是必须的,这些变量在 page和layout中,由PHP代码或者组件提供变量的值。

页面执行的声明周期

onInit 当所有组件被初始化并且在处理AJAX请求之前,该函数被执行。

onStart 函数在页面开始执行时执行。

onEnd 函数在页面渲染之前和执行页面Components之后执行。

onStartonEnd函数中,您可以将变量注入到Twig环境中。使用array notation将变量传递给页面:

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>

发送自定义响应

页面执行声明周期中定义的所有函数都可以暂停执行进程,发送自定义的响应。从生命周期函数中返回响应是很简单的,下面的例子中,页面将不载入任何页面内容,只是仅仅返回一个Hello world字符串到浏览器。

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

比较有用的例子是做重定向:

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

Handling Forms

处理表单:可以在page或者layout中的PHP代码部分定义处理表单的函数。使用form_open()函数来定义什么函数来处理这个表单。

{{ 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>

上述定义的来处理表单的函数为onHandleForm函数,这个函数是在PHP代码部分进行定义的:

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

这个函数使用POST获取表单提交的值,并把这个值给当前页面的变量 lastValue ,然后在上面的Twig代码中的最后一行中,把这个值给显示出来。

关于重名:如果在page、layout和component中定义了具有相同名称的函数,October将根据如下顺序确定优先级:Page > Layout > Component。总是前面的优先被执行。

如果引用组件中的函数,则使用组件名或者别名,后跟 [ :: ] ,再加函数名。

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

404 Page

当系统找不到目标页面时,系统将显示404页面内容,URL为 /404

Error Page

默认情况下,任何错误都会显示一个详细的错误页面,其中包含错误发生处的文件内容,行号和堆栈跟踪。

我们可以显示一个自定义的错误页面。首先在配置文件config/app.php中找到字段debug,并设置为false。然后建立一个URL为:" /error "的页面。

Page Variables

PHP/Component访问:页面的属性可以被PHP代码部分或者组件部分通过 $this->page 来进行访问。比如:

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

Twig标记访问:这些变量也可以被Twig标记访问,方式为 this.page.variable ;

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

程序化方式注入资源到页面

可以使用 addCss addJs 两个方法,分别注入样式表和js脚本到页面中。只需要在页面或者布局的PHP代码部分,通过 onStart 函数进行注入操作。

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']);
}

支持SCSS和LESS:

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

注入的文件如何在页面或者布局中输出呢,通过 {% styles %}{% scripts %}就可以了。

上一篇: October CMS官方文档 1-安装 (Setup)

下一篇: OctoberCMS官方文档 8-组件 (Components)

52 人读过
文档导航