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

Question

有没有一种方法可以强制 Expression Engine 不将花括号内的项渲染为 EE 代码？ Google 图表工具使用包含花括号 { } 的 JavaScript 代码，而 Expression Engine 自然会认为它是一个变量并尝试渲染它。有什么解决办法吗？

- Adam

Answer 1

ExpressionEngine的模板类将花括号{}解析为模板变量，寻找三种类型的变量：单个、成对和条件变量。

// 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 的处理方式不同，并且会阻止高级条件解析器处理标签中的任何内容。例如，以下带有花括号都在一行上的 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函数，只需将大括号放在单独的行上——这是良好的编码规范，也是最佳的可读性：

<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所建议的那样，您可以通过设置隐藏配置变量来更改此行为：$conf ['protect_javascript'] ='n';

- rjb

---

太棒了，这正是我在寻找有关JavaScript和EE的一些东西的信息。 - JKM

Answer 2

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代码块中是否评估高级条件语句。简单条件语句和模板标签总是在

- rjb

Answer 3

创建一个全局变量来存储你的JS代码。然后在你的模板中使用这个全局变量即可：

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

- webmaster_sean

Answer 4

对我来说，仅仅将花括号放在不同的行上并不能起作用（我使用的是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>

- Lyosha Petrov

---

虽然这样做可能有效，但不知道为什么有效并不能完全解决问题。在弄清楚它如何以及为什么起作用之前，将其作为注释可能更好。 - Shawn Mehan