无法使用 HTML5 音频元素让 Twig 在 Grab 中找到媒体文件答案

【问题标题】：can't get twig to find media file in Grav usingHTML5 audio element无法使用 HTML5 音频元素让 Twig 在 Grab 中找到媒体文件
【发布时间】：2017-10-11 16:24:52
【问题描述】：

在使用 Twig 的 Grav 模板中，我有

<audio controls>
    <source src="{{ page.find('/mp3s').media['{{ page.header.samplename }}.mp3'] }}">
</audio>

什么都没有渲染，当我查看源代码时，我看到的是

<audio controls>
   <source src="">
</audio>

我知道page.header.samplename 包含一个有效的 MP3 文件名称。如果我用 MP3 文件的显式名称替换 {{ page.header.samplename }}，代码就可以工作。所以我一定有语法错误。我尝试过各种烫发，也搜索过 Stack Overflow。

代码应该是什么？

【问题讨论】：

<source src="{{ page.find('/mp3s').media[page.header.samplename~'.mp3'] }}">
谢谢 DarkBee，工作正常。

标签： audio twig grav

【解决方案1】：

DarkBee 提供了这个答案

<source src="{{ page.find('/mp3s').media[page.header.samplename~'.mp3'] }}"> – DarkBee yesterday

（效果很好）

【讨论】：

【解决方案2】：

DarkBee 提供了一个可行的答案，但请注意，您也可以使用以下方式输出标签：

{{ page.media['myaudiofile.mp3'].html() }}

这将输出：

<audio controls>
   <source src="http://example.com/youraudiofile.mp3">
</audio>

如果您希望您的用户能够从管理员那里选择音频文件，您可以使用：

{{ page.media[header.yourfilepicker].html() }}

这假设您在管理员中有一个匹配的文件选择器字段，例如：

yourfilepicker:
  type: filepicker
  folder: 'page@:/mp3s'
  label: Select an audio file
  preview_images: true
  accept:
    - .mp3

【讨论】：