ExpressionEngine使用{}括号呈现JS代码

时间:2011-06-29 00:50:44

标签: javascript expressionengine

有没有办法强制表达引擎不将大括号内的项目呈现为EE代码? google chart tools使用包含cur {}括号的javascript代码,当然EE认为它是变量并尝试渲染它。有什么方法吗?

4 个答案:

答案 0 :(得分:19)

ExpressionEngine的模板类将花括号{}解析为template variables,寻找三种变量:单​​变量,对变量和条件变量:

// Single Variable
{summary}

// Pair Variable
{category} ... {/category}

// Conditional Variable
{if segment_2 != ""} ... {/if}

CSS中的大括号被认为是一种特殊情况。

例如,以下CSS 可以放置在模板中的任何位置,并且可以智能地解析

<style>
    /* All On One Line = Okay */
    p { margin-bottom: 1em; }

    /* Indented and On Separate Lines = Also Okay */
    p em {
        font-style: italic;
    }

    /* EE Variables are Parsed and Replaced */
    p.{site_name} {
        text-decoration: none;
        }

    /* EE Code is Allowed and Parsed Appropriately */
    {exp:channel:entries channel="channel_name" limit="1"}
        li.{url_title} a {
            color: #c00;
        }
    {/exp:channel:entries}
</style>

不幸的是,JavaScript的处理方式不同,并阻止Advanced Conditionals Parser处理标记中的任何内容。例如,以下JavaScript的大括号全部在一行

<script>var addthis_config = { 'ui_click': true };</script>

将由ExpressionEngine解析为模板变量并呈现为:

<script>var addthis_config = ;</script>

您会注意到从开头{开始并以结束}花括号结束的所有内容都会被解析并替换掉!作为解决方法,您可以将大括号放在单独的行上并避免此问题:

<script>
    var addthis_config = {
        'ui_click': true,
        'data_track_clickback': true
    };
</script>

如果你编写了一个需要ExpressionEngine值的JavaScript函数,只需将你的大括号放在不同的行上 - 这是一个good coding convention并且是optimal for readability

<script>
    $(document).ready(function() {
        ...
            {exp:channel:entries channel="channel_name" limit="1"}
                var business_name = '{business_website}';
                var business_website = '{business_website}';
            {/exp:channel:entries}
        ...
    });
</script>

根据Ben的建议,您可以通过设置Hidden Configuration Variable来更改此行为:$conf['protect_javascript'] = 'n';

答案 1 :(得分:8)

ExpressionEngine的隐藏$config['protect_javascript']实际上做了什么?最好用一个例子来解释 - 请允许我举例说明。

鉴于以下代码示例,$config['protect_javascript'] = 'y';高级条件将完全被忽略:

<script>
    {if username == "admin"}
        Welcome, {username}!
    {if:elseif member_id == "2"}
        Welcome, {screen_name}!
    {if:else}
        Welcome, Guest!
    {/if}
</script>

将产生以下输出:

<script>
    Welcome, admin!

    Welcome, Administrator!

    Welcome, Guest!
</script>

然而,当$config['protect_javascript'] = 'n';来自上面的相同代码段允许评估高级条件并将生成:

<script>
    Welcome, admin!
</script>

如您所见,区别在于是否在JavaScript代码块中评估了高级条件

Simple conditionalstemplate tags始终在<script>代码中进行评估,无论$config['protect_javascript']设置如何 - 只需确保将大括号{}分开放置线!

<script>
    // Simple Conditionals Are Unaffected and Always Work
    {if segment_2 != ""}
        {redirect="404"}
    {/if}
</script>

答案 2 :(得分:0)

创建一个全局变量来包含您的JS代码。然后只需在模板中使用全局变量:

https://docs.expressionengine.com/v2/templates/globals/index.html

答案 3 :(得分:-1)

由于某种原因(我使用EE v2.1.1),简单地将花括号放在单独的行上并不适合我。 但是在括号之前和之后放置一条注释行。例如。对于我的Google Analytics代码:

<script>
(function(i,s,o,g,r,a,m)
//
{
//
i['GoogleAnalyticsObject']=r;i[r]=i[r]||function()
//
{
//
(i[r].q=i[r].q||[]).push(arguments)
//
}
//
,i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
//
}
//
)(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-3636230-46', 'auto');
ga('send', 'pageview');
</script>