typo3：带有打字错误的流体模板中的社交图标

Question

我将从我尝试制作的片段开始...

我在constants.ts中定义社交账号：

myExtension.configuration {

    socials {
        # cat=myExtension/socials/05; type=string; label=Facebook account:
        facebook = facebook.com/
        # cat=myExtension/socials/10; type=string; label=Twitter account:
        twitter = twitter.com/
        # cat=myExtension/socials/15; type=string; label=Google Plus account:
        googlePlus = plus.google.com/
        # cat=myExtension/socials/20; type=string; label=Youtube account:
        youtube = youtube.com/
    }
}

我在page.ts

中声明了变量

page = PAGE
page {
    # Page Main template
    10 = FLUIDTEMPLATE
    10 {
        file = EXT:myExtension/Resources/Private/Templates/Main.html
        variables {    
            socials = TEXT
            socials.value = {$myExtension.configuration.socials}
        }
    }
}

然后我尝试在模板中使用它：

<f:render section="socials" />


<f:section name="socials">
  <ul class="list-inline hidden-print">
    <f:for each="{socials}" as="social" key="icon">
      <li>
        <a href="{social}">
          <i class="fa fa-{icon} fa-fw">
        </a>
      </li>
    </f:for>
  </ul>
</f:section>

我对 typo3 还不是很好，所以它可能非常简单，或者问题非常愚蠢......我什至没有弄清楚如何正确调试（这样我就可以首先弄清楚如何确定变量数组 'socials')...

Answer 1

首先，您需要一个一个地获取常量（如 j4k3 所建议的那样）——或者完全跳过该部分并直接像这样定义值：

page = PAGE
page {
    # Page Main template
    10 = FLUIDTEMPLATE
    10 {
        file = EXT:myExtension/Resources/Private/Templates/Main.html
        variables {    
            facebook = TEXT
            facebook.value = facebook.com/
            twitter = TEXT
            twitter.value = twitter.com/
            googlePlus = TEXT
            googlePlus.value = plus.google.com/
            youtube = TEXT
            youtube.value = youtube.com/
        }
    }
}

然后，为了避免重复代码，您可以通过首先动态映射它们然后像这样迭代来访问这些值：

<f:alias map="{socials: {facebook: facebook, twitter: twitter, googlePlus: googlePlus, youtube: youtube}}">
  <f:render section="socials" arguments="{socials: socials}"/>
</f:alias>



<f:section name="socials">
  <ul class="list-inline hidden-print">
    <f:for each="{socials}" as="social" key="icon">
      <li>
        <a href="{social}">
          <i class="fa fa-{icon} fa-fw">
        </a>
      </li>
    </f:for>
  </ul>
</f:section>

typo3：带有打字错误的流体模板中的社交图标

typo3: social icons in fluid template with typoscript

typo3

fluid

typoscript

typo3-6.2.x

typo3-7.6.x