如何在TYPO3 Fluid模板中逃避花括号“{”？

Question

我有一个混合的HTML / JS模板，当我使用JS数组时，Fluid会尝试进行自动更新。

有没有办法在Fluid模板中转义大括号？

UPD：

逃避JS部分的实际工作语法是：

<script type="text/javascript">/*<![CDATA[*/
/*]]>*/
var llKeyOne = '{f:translate(key:"key1")}';
var llKeyTwo = '{f:translate(key:"key2")}';
/*<![CDATA[*/
var myTranslations = {
  llKeyOne: llKeyOne,
  llKeyTwo: llKeyTwo
};
/*]]>*/</script>

Answer 1

尝试使用

<![CDATA[...]]>

标记您的JS代码。

Answer 2

CDATA解决方案在8.7版中停止工作

我设法在大量混合使用javascript和流畅内容的用例中使用别名解决了问题。 {l}代表左（大括号），{r}代表右（大括号）：

<f:alias map="{l: '{', r: '}'}">
    var alter = {};
    <f:for each="{alterDB}" as="a">
        if (!alter[{a.einsatz}]) { alter[{a.einsatz}] = {}; }
        alter[{a.einsatz}][alter[{a.einsatz}].length] = {l} label: "{a.bezeichnung} ({a.kuerzel})", value: {a.uid} {r};
    </f:for>
</f:alias>

Answer 3

使用fluid-Variable添加＆＃34;！[CDATA [＆＃34;进入你的脚本。

我在javascript中使用了流体的标记符号，因为语法突出显示效果更好。

<script type="text/javascript">/*{startCDATA}*/

var llKeyOne = '<f:translate key="key1" />';
var llKeyTwo = '<f:translate key="key2" />';
var myTranslations = {
  llKeyOne: llKeyOne,
  llKeyTwo: llKeyTwo
};
/*{endCDATA}*/</script>

我用动态模板中的TYPO3-fluid和angulars-expressions以同样的方式解决了括号问题

<f:alias map="{ang: {s: '{{', e: '}}'}}">
...    
    <div class="{ang.s}{class}-{subclass}{ang.e}">...
</f:alias>

Answer 4

由于TYPO3 v8.7.16中的<![CDATA[]]> solution above不适用于我，因此我想分享自己的解决方案。我逃避括号的“技巧”是用<f:format> viewhelper包裹它们。

我的目标是在前端输出此值（400和swing是流体变量）：

<ul data-animate="{duration:400, easing:'swing'}">
    ...
</ul>

我在Fluidtemplate中做到了这一点，并且效果很好：

<ul data-animate="<f:format.raw>{</f:format.raw>duration: {data.myfield1}, easing:'{data.myfield2}'<f:format.raw>}</f:format.raw>">
    ...
</ul>

Answer 5

在TYPO3 9.x / 9.5.x中运行的解决方案

为避免花括号周围的标记过多，这对摘要标记（可读性和IDE支持/突出显示）有“ 不太好”的影响，此处提供了另一种解决方案。

可能的限制： 在我们的示例中，流体模板仅在模板头部包含流体模板变量，其后是由angular.js处理/渲染的整个标记。

因此，我们为angular.js部分创建了一个局部并将其包含在主流体模板中。

示例：

现在，包含的部分文件开始使用{parsing off}语句（请参见下面的示例）。

部分（简体）：

{parsing off} <!-- This solved all our issues -->

<div ng-show="showSlider">
    <div class="slider" data-test="slider-wrapper">
        <div class="row">
            <div class="slide-indicator-mask col-lg-12">
                <div class="slider-scope page-{{firstSlide}}"></div>
            </div>
    </div>
</div>

Answer 6

最后一个答案帮助我使用Video-js和Video-js YouTube extension将TYPO3流动模板中的YouTube视频的文件公共网址插入。

在fileadmin中添加新视频并将{file.publicUrl}添加到Fluid中后，返回错误。将其包装在f：format中就可以了！

<f:format.raw>{file.publicUrl}</f:format.raw>

这是获取YouTube视频的完整代码：

<f:if condition="{file.originalFile.properties.extension} == 'youtube'
    <video
        id="vid1"
        class="video-jS"
        data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "<f:format.raw>{file.publicUrl}</f:format.raw>"}] }'
    >
    </video>
</f:if>

Answer 7

也许为时已晚，但我也找到了一个有趣的解决方案。

当我集成google seach结构化数据时，我发现该设置应该转到模板中

import os IGNORE_FOLDERS = ("test_results",".git")` #as many folders as you need to ignore def get_data(): root, dirnames, filenames = next(os.walk(file_path)) for dirname in (d for d in dirnames if d not in IGNORE_FOLDERS): print(filenames) # or save them to a variable if you like

这是我找到的最简单的集成方式

<meta itemprop="target" content="https://query.example.com/search?q={search_term_string}"/>