【问题标题】:Jekyll: Dealing with Images in MarkdownJekyll:在 Markdown 中处理图像
【发布时间】:2015-03-13 15:39:12
【问题描述】:

我为我的帖子页面设计了一个由文本和图像组成的设计,更具体地说,是画廊。请看下图:

我已经让这些画廊像这样设置了我的前端:

---
gallery-1:
  rows:
    - images:
      -  { url: '1.jpg'}
    - images:
      -  { url: '2.jpg'}
      -  { url: '3.jpg'}
gallery-2:
  rows:
    - images:
      -  { url: '4.jpg'}
      -  { url: '5.jpg'}
---

有没有办法将这些画廊打印到我的.md 文件的页面上。我知道下面的代码行不通,但有类似的吗?

This is my markdown

[gallery-1]

This is more markdown

[gallery-2]

Jekyll 可以做到这一点吗?

对此的任何帮助表示赞赏。提前致谢!

【问题讨论】:

    标签: image markdown jekyll image-gallery


    【解决方案1】:

    首先,让我们简化您的yaml front matter:

    ---
    galleries:
     # gallery number one
     1:
       # row one in gallery one
       -
         - { url: '1.jpg', alt: 'alt 1'}
       # row two in gallery one
       -
         - { url: '2.jpg', alt: 'alt 2'}
         - { url: '3.jpg', alt: 'alt 3'}
    
     # gallery number two
     2:
      # row one in gallery two
       -
         - { url: '4.jpg', alt: 'alt 4'}
         - { url: '5.jpg', alt: 'alt 5'}
    

    您的.md 文件:

    Markdown
    {% include gallery.html  gallery=1 %}
    Other markdown
    {% include gallery.html  gallery=2 %}
    

    然后是_includes/gallery.html 文件:

    {% comment %}-----------------
      - This page receives a gallery index (include.gallery)
      - It then assign the gallery[include.gallery] to the rows variable
    %}-----------------{% endcomment %}
    {% assign rows = page.galleries[include.gallery] %}
    
    {% comment %}%}-----------------
      We now loop over rows
    %}-----------------{% endcomment %}
    {% for row in rows %}
    <div class="row">
        {% comment %}%}-----------------
          and then loop over images in row
        %}-----------------{% endcomment %}
        {% for img in row %}
            <p>src="{{ site.baseurl }}{{ img.url }}" alt="{{ img.alt }}"</p>
        {% endfor %}
    </div>
    {% endfor %}
    

    见yaml documentation和Jekyll template documentation

    【讨论】:

    • 这很有帮助!完全忘记了我可以使用{% include %} tag。谢谢您的帮助。附:您正在为行使用数组,我可以将其更改回一个对象,以便我可以使用诸如 url 和 title 之类的值,这样我就可以将这些传递给我的 &lt;img&gt; 标签?
    • 我已经编辑了我的答案来管理 yaml 前端的图像对象。还编辑了 _includes/gallery.html。
    • 太棒了!这正是我一直在寻找的。我正在尝试关闭 gallery.html 顶部的容器标签并在包含末尾重新打开它,但它似乎不起作用。有什么原因吗?
    • 先看看生成的markdown,有时候可以在一个

      标签中。其次看你的布局继承。如果仍然遇到问题,请将代码推送到 github 并提出新问题。

    • 从包含文件的顶部开始的任何结束标记都会自动转换为&lt;p&gt; 标记。诡异的。嗯......我会尝试解决它,如果我仍然卡住,请发布一个问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-05-31
    • 1970-01-01
    • 2013-10-20
    • 2013-10-10
    • 2015-04-01
    • 1970-01-01
    相关资源
    最近更新 更多