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官方文档 3-主题 (Themes)
October CMS    2018-10-22 18:54:42    39    0    0
emengweb   October CMS

Themes 介绍

主题定义了October构建的网站或Web应用程序的外观。主题完全基于文件定义,可以使用任何版本控制软件管理。

主题存储在项目的themes目录的对应子目录中。主要包含以下部分:

名称     Description 
Pages     网站的页面 
Partials 可以重用的HTML标记块 
Layouts 定义页面的结构 
Content files 可以是文本,HTML代码和Markdown 代码块,主要用于与Page和Layout进行分开编辑维护。
Asset files 资源文件包含图片、样式表和JS脚本文件。

主题的目录结构

每个主题都有一个独立的目录,只有激活的主题才会显示在网站上。基本结构的例子:

themes/
  website/           <=== 主题的目录
    pages/           <=== Pages(页面目录)
      home.htm
    layouts/         <=== Layouts(布局目录)
      default.htm
    partials/        <=== Partials(部件目录)
      sidebar.htm
    content/         <=== Content(内容目录)
      intro.htm
    assets/          <=== Assets (资源目录)
      css/
        my-styles.css
      js/
      images/

激活主题的方式有后台操作和修改配置文件两种方式,修改config/cms.php文件中的activeTheme的设置值。或者,采取后台设置,操作步骤为:设置——内容管理——前端主题——选择一个主题激活即可。

子目录

October支持单层子目录,有Pages、Partials、Layouts、Content和Assets目录。这样简化了大型网站的目录结构。

themes/
  website/
    pages/
      home.htm
      blog/                  <=== Subdirectory
        archive.htm
        category.htm
    partials/
      sidebar.htm
      blog/                  <=== Subdirectory
        category-list.htm
    content/
      footer-contacts.txt
      home/                  <=== Subdirectory
        intro.htm
    ...

要从子目录引用Partial文件或者Content文件,格式为:{% 名称 + 路径 %},比如:

{% partial "blog/category-list" %}

上述表示,引入一个Partial部件,部件的位置及文件为:Partials/blog/category-list.htm。注意,模板路径总是绝对的,在同一个Partial目录中,引用同目录中的另外一个Partial,也必须写完整的子目录名称。

模板结构

对于Page、Partial和Layout他们所对应的模板结构,都是包含了三个部分:Configuration,PHP Code,Twig markup。各个部分之间通过 " == " 进行分割开来。

url = "/blog"
layout = "default"
==
function onStart()
{
    $this['posts'] = ...;
}
==
<h3>Blog archive</h3>
{% for post in posts %}
    <h4>{{ post.title }}</h4>
    {{ post.content }}
{% endfor %}

COnfiguration Section 【配置部分】

配置部分用于设置模板参数,具体参数与不同的模板相关,因类型而不同。配置部分使用简化的" ini "格式,字符串参数值必须包含在双引号中。

url = "/blog"
layout = "default"

[component]
parameter = "value"

PHP Code (PHP代码部分)

在模板每次渲染之前,PHP代码部分都是先执行。PHP代码是可选的部分,可以省略。PHP代码可以使用代码开始和结束标记"<? ?>",这个标记仅仅是用于语法高亮。而且标记和==不在同一行。

url = "/blog"
layout = "default"
==
<?
function onStart()
{
    $this['posts'] = ...;
}
?>
==
<h3>Blog archive</h3>
{% for post in posts %}
    <h4>{{ post.title }}</h4>
    {{ post.content }}
{% endfor %}

在PHP部分,只能定义函数,允许使用use引入名称空间。但是除了这些不允许其他PHP代码。

url = "/blog"
layout = "default"
==
<?
use Acme\Blog\Classes\Post;

function onStart()
{
    $this['posts'] = Post::get();
}
?>
==

访问变量可以使用$this,通过数据方式可以设置或者读取变量,使用对象方式则只能读取变量的值。

// Write via array
$this['foo'] = 'bar';

// Read via array
echo $this['foo'];

// Read-only via object
echo $this->foo;

Twig Markup Section(Twig标记部分)

Twig是一个灵活,快速,安全的PHP模板语言。 Twig标记部分定义要由模板呈现的内容。在这个部分可以使用October提供的函数、标记或者过滤器。其内容取决于模板类型(page、layout、partial)。

主题日志记录

主题日志记录是一个非常有用的功能,默认情况下是禁用的。由于布局和页面的内容存储在文件中,可能会发生丢失内容的情况,主题日志记录可以将这些修改产生的变化都记录下来。

启用主题日志记录,可以进入设置——日志——日志设置——启用主题更改。设置完成后,保存设置,刷新页面则可以看见在日志——主题日志,点击可以查看。

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

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

39 人读过
文档导航