Jekyll:在 Markdown 中处理图像
Jekyll: Dealing with Images in Markdown
我为我的 post 页面设计了一个由文本和图像组成的页面,更具体地说,是画廊。看看下面的插图:
我已经让这些画廊设置了我的前言:
---
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 可以实现这样的功能吗?
感谢您对此提供的任何帮助。提前致谢!
首先,让我们简化您的 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 %}
我为我的 post 页面设计了一个由文本和图像组成的页面,更具体地说,是画廊。看看下面的插图:
我已经让这些画廊设置了我的前言:
---
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 可以实现这样的功能吗?
感谢您对此提供的任何帮助。提前致谢!
首先,让我们简化您的 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 %}