OctoberCMS-3-主题

主题

介绍

主题定义了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)。

主题日志记录

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

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

    原文作者:Tianby
    原文地址: https://segmentfault.com/a/1190000015286429
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞