主题布局

两个核心PHP文件决定主题的布局与代码。学习如何渲染小工具位置以及如何计算它们比例。


theme.php

其中theme.php是每个主题的心脏,它为基础主题提供了全部HTML代码。这与标准的Joomla模板或Wordpress主题不同,通常index.php是核心模板文件。

这是theme.php的骨骼结构。此文件需要引入theme.config.php,用来渲染小工具位置,检索配置变量以及渲染系统输入信息等。

<?php

// get theme configuration/获取主题配置
include($this['path']->path('layouts:theme.config.php'));

?>
<!DOCTYPE HTML>
<html lang="<?php echo $this['config']->get('language'); ?>" dir="<?php echo $this['config']->get('direction'); ?>"  data-config='<?php echo $this['config']->get('body_config','{}'); ?>'>

  <head>
  <?php echo $this['template']->render('head'); ?>
  </head>

  <body>

    // render a widget position
    <?php echo $this['widgets']->render('widget-position'); ?>

    // retrieve a config variable
    <?php echo $this['config']->get('variable'); ?>

    // render the system output
    <?php echo $this['template']->render('content'); ?>

  </body>

</html>

配置对象

来源于config.xml的变量被储存在config对象中。获取变量的值,使用get 方法即可。

// 输出品牌(branding)变量的值
<?php echo $this['config']->get('theme_branding'); ?>

// 输出基于主题设置的“回到顶部”按钮(to-top scroller)
<?php if ($this['config']->get('totop_scroller')) : ?>
<a class="tm-totop-scroller" data-uk="smooth-scroll" href="#"></a>
<?php endif; >

小工具对象

页面中的小工具都被储存在 widgets 对象中。在一个位置渲染所有小工具,使用 render 方法。使用count检查有否有小工具发布在一个位置。

<// 渲染Top A位置中所有小工具
<?php echo $this['widgets']->render('top-a')); ?>

// 在Top A位置中,让所有小工具平行(parallel)布局
<?php if ($this['widgets']->count('top-a')) : ?>
<?php echo $this['widgets']->render('top-a', array('layout'=>'parallel')); ?>
<?php endif; ?>

theme.config.php

theme.php基本只定义主题的代码时,逻辑便被外包给了theme.config.php。它为主题计算器提供支持,比如三列布局以及页面主体类名和社交按钮。