Question

在https://stackoverflow.com/a/9857308/2966190回答后，我在Jekyll实施了一个简单的照片库。

_layouts / photos.html：

---
layout: layout
---

<section class="content">
  <h1>
    <a href="{{ page.url }}">{{ page.title }}</a>
  </h1>

  <section class="byline">
    {{ page.date | date: "%B %e, %Y" }}
  </section>

  {% for pic in page.photos %}
  <a href="{{ pic.url }}"><img src="{{ pic.url }}" alt="{{ pic.alt }}" /></a>
  {% if pic.caption %}<p>{{ pic.caption }}</p>{% endif %}
  {% endfor%}

  {{ content }}

</section>

这样我就可以简单地创建一个包含所有必需信息的列表，并以这种方式自动生成图库：

example_gallery.md：

---
layout: photos
title: SOME TITLE

photos:

 - url:     /path/to/img1.png
   alt:     alt1
   caption: Caption with [hyperlinks](example.com) formatted [three][ways] [that][fail]
            [fail]: failure.com/sadface
 - url:     /path/to/img2.png
   alt:     alt2.
   caption: Caption with <a href="/explicit/html/tags.html"> that work but hurt the eyes, are annoying to write, and don't allow me to separate formatting from content</a>.
---
[ways]: doesntwork.com

我遇到了与img1标题中格式化的链接相同的错误。

读取文件/path/to/example_gallery.md时出错:(）：在第7行第4列解析块映射时找不到预期的键

如果我将[link]的定义与caption:放在同一行（没有换行符），也会失败。

在上面的链接示例中，作者明确提到降价在字幕中不可用。为了尝试解决此问题，我尝试将布局photos.html中的{{ pic.caption }}更改为{{ pic.caption | markdownify }}，但无济于事。

所以，我的问题是：有没有办法通过编辑每张照片的布局或YAML来降低图像标题的作用（即没有像How can I build a gallery tag for Jekyll?那样编写插件）？似乎类似的东西在摘录中起作用（例如：Include jekyll / liquid template data in a YAML variable? [我不需要在标题中使用液体标签，如该答案中所述]。

顺便说一句，caption是否有可能包含换行符？

Answer 1

有很多问题，所以我会逐一尝试。

您可以在YAML前端内容中包含链接的唯一方法是[hyperlinks](example.com)格式。这只是因为Jekyll呈现页面的顺序。

我使用了您的示例代码并更改了标题的呈现以包含markdownify过滤器，并且它按预期工作（从标题中删除第二行后）。

 {% if pic.caption %}<p>{{ pic.caption | markdownify }}</p>{% endif %}

标题中可以包含换行符。如果您希望将它们保留在输出中，请使用：

caption: | 
 Caption with [hyperlinks](example.com).

 Line break preserved

 And another

注意每行之间的额外换行符，以及每行文本开头的两个空格。如果您不希望输出中的换行符使用“＆gt;”字符而不是“|”。

所有这些都已经使用Jekyll中的kramdown markdown解析器进行了测试。

Jekyll的画廊通过YAML标题列表

1 个答案: