{% placeholder %} 标签将渲染一个占位符部分,它通常用于布局内部。此标签将返回使用 {% put %} 标签添加的任何占位符内容,或定义的任何默认内容(可选)。
{% placeholder name %}然后,内容可以被注入到任何后续页面或局部中的占位符里。
{% put name %}
<p>Place this text in the name placeholder</p>
{% endput %}默认情况下,{% put %} 会将内容附加到占位符。使用 replace 属性来替换内容。
{% put name replace %}
<p>Replace all the content inside with this</p>
{% endput %}在某些情况下,您可能会在局部内部调用 {% put %} 标签以在页面上包含一些资源。然后,当在同一个页面上多次包含该局部时,可能会导致脚本被插入两次。包含 once 属性将确保内容每个模板只设置一次。缓存键使用 CMS 模板文件名来确定是否已插入。
{% put scripts once %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
{% endput %}占位符可以拥有默认内容,这些内容可以被页面替换或补充。如果页面中未定义带有默认内容的占位符的 {% put %} 标签,则显示默认占位符内容。布局模板中的占位符定义示例:
{% placeholder sidebar default %}
<p><a href="/contacts">Contact us</a></p>
{% endplaceholder %}页面可以将更多内容注入到占位符中。{% default %} 标签指定了应该显示默认占位符内容的位置。如果未使用该标签,则占位符内容将完全被替换。
{% put sidebar %}
<p><a href="/services">Services</a></p>
{% default %}
{% endput %}在布局模板中,您可以使用 hasPlaceholder() 函数检查占位符内容是否存在。这允许您根据页面是否提供占位符内容来生成不同的标记。示例:
{% if hasPlaceholder('sidemenu') %}
<!-- 带有侧边栏的页面的标记 -->
<div class="row">
<div class="col-md-3">
{% placeholder sidemenu %}
</div>
<div class="col-md-9">
{% page %}
</div>
</div>
{% else %}
<!-- 没有侧边栏的页面的标记 -->
{% page %}
{% endif %}占位符对于设置继承变量很有用,例如页面导航中的活动链接。{% put %} 标签允许您直接设置值。例如,在页面模板中将 activeNav 的值设置为 home。
{% put activeNav = 'home' %}该变量可以使用 placeholder() 函数在布局模板内部访问。由此,我们可以根据页面设置的值来确定活动链接。
{% set active = placeholder('activeNav') %}
<ul>
<li class="{{ active == 'home' ? 'active' }}">主页</li>
<li class="{{ active == 'blog' ? 'active' }}">博客</li>
<li class="{{ active == 'contact' ? 'active' }}">联系</li>
</ul>可以提供一个默认值(第二个参数)作为备用。
{% set active = placeholder('activeNav', 'home') }} %}October CMS 定义了系统使用的静态占位符。包将使用这些占位符通过 PHP 或 Twig 接口将它们的依赖项注入到页面中。
{% scripts %} 标签插入应用程序注入脚本的 JavaScript 文件引用。该标签通常定义在闭合的 BODY 标签之前。
<body>
...
{% scripts %}
</body>注意:此标签在给定页面周期中应仅出现一次,以防止重复引用。
JavaScript 文件的链接可以通过 组件 或 页面 在 PHP 中进行程序化注入。
function onStart()
{
$this->addJs('assets/js/app.js');
}您还可以使用布局中的 scripts 匿名占位符 将原始标记 注入到 {% scripts %} 标签。在页面或布局中使用 {% put %} 标签向占位符添加内容。
{% put scripts %}
<script type="text/javascript" src="/themes/demo/assets/js/menu.js"></script>
{% endput %}{% styles %} 标签渲染应用程序注入样式表文件的 CSS 链接。该标签通常定义在页面或布局的 HEAD 部分。
<head>
...
{% styles %}
</head>注意:此标签在给定页面周期中应仅出现一次,以防止重复引用。
样式表文件的链接可以通过 组件 或 页面 在 PHP 中进行程序化注入。
function onStart()
{
$this->addCss('assets/css/hello.css');
}您还可以使用布局中的 styles 匿名占位符 将原始标记 注入到 {% styles %} 标签。在页面或布局中使用 {% put %} 标签向占位符添加内容。
{% put styles %}
<link href="/themes/demo/assets/css/page.css" rel="stylesheet" />
{% endput %}{% meta %} 标签渲染元内容,例如开放图谱信息。该标签通常定义在页面或布局的 HEAD 部分,放置在样式和脚本之前。
<head>
{% meta %}
...
</head>注意:此标签在给定页面周期中应仅出现一次,以防止重复引用。
您还可以使用布局中的 meta 匿名占位符 将原始标记 注入到 {% meta %} 标签。在页面或布局中使用 {% put %} 标签向占位符添加内容。
{% put meta %}
<meta name="turbo-visit-control" content="error">
{% endput %}placeholder 标签接受两个可选属性 — title 和 type。title 属性本身不被 CMS 使用,但可以被其他插件使用。type 属性管理占位符类型。目前支持两种类型 — text 和 html。文本占位符的内容在显示前会进行转义。title 和 type 属性应定义在占位符名称和 default 属性(如果存在)之后。示例:
{% placeholder ordering title="Ordering information" type="text" %}带有默认内容、title 和 type 属性的占位符示例。
{% placeholder ordering default title="Ordering information" type="text" %}
此产品没有订购信息。
{% endplaceholder %}