【问题标题】:Possible to reference front-matter values in template files?可以在模板文件中引用前面的值吗?
【发布时间】:2015-11-23 19:35:15
【问题描述】:

我有一个主题,对于帖子页面,如果有的话,我会显示 image 值。

我还有一个渲染 YouTube 视频的插件,用法如下:{% youtube id_12345 %}

在我的模板文件中,是否可以从帖子的前端引用 video 值并使用我可以在我的内容中使用的相同插件呈现它?

类似:

{% if post.video %}
  {% youtube {{post.video}} %}    # <-- this does not work
{% elsif post.image %}
  <img src="{{ post.image }}" class="post-image" alt="{{ post.title }}">
{% endif %}

谢谢!

【问题讨论】:

  • (我已经删除了我的其他回复,因为整个capture 方法一开始就没有必要)

标签: youtube jekyll jekyll-extensions


【解决方案1】:

由于变量与{% %} 调用不兼容,我最终在这一行中复制了插件的大部分功能。我从BetterTube 开始,并根据我的需要对其进行了修改。

{% if post.video %}
  {% capture video_id %}{{ post.video | 
        replace: 'https://www.youtube.com/watch?v=','' | 
        replace: 'https://youtu.be/', '' }}{% endcapture %}
  <figure class='BetterTube' data-youtube-id='{{video_id}}' data-player-width='' 
  data-player-height='' id='{{video_id}}' style='padding-bottom: 56.25%'>
  <a class='BetterTubePlayer' href='http://www.youtube.com/watch?v={{video_id}}' 
  style='background: url(http://img.youtube.com/vi/{{video_id}}/hqdefault.jpg) 50% 
  50% no-repeat rgb(0, 0, 0);'></a><div class='BetterTube-playBtn'></div>&nbsp;
  </figure>
{% elsif post.image %}
  <img src="{{ post.image }}" class="post-image" alt="{{ post.title }}">
{% endif %}

我希望我可以简单地调用插件,但遗憾的是我认为这是不可能的。

【讨论】:

    【解决方案2】:

    我认为您使用的是this plugin。我对编写插件了解不多,但在我看来你不能在其中使用变量。

    也许改用this one?好像是supports variables

    话虽如此,我什至认为您不需要为此费心运行插件。以下代码应该可以正常工作:

    {% if post.video %}
      <iframe width="560" height="420" src="http://www.youtube.com/embed/{{ post.video }}?color=white&theme=light"></iframe>
    {% elsif post.image %}
      <img src="{{ post.image }}" class="post-image" alt="{{ post.title }}">
    {% endif %}
    

    【讨论】:

    • 是和不是。 :) 我使用了一个类似的插件,但我对其进行了修改以显示一个图形,当点击占位符时,它会加载视频(这样的页面加载速度要快得多)。
    猜你喜欢
    • 2020-02-13
    • 2014-03-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多