为什么在jekyll网站上使用Markdown语法添加图片不起作用?

4

我已经搜索了好几个小时,想知道如何在由Github页面托管的Jekyll网站上添加图片。我已经阅读了很多帖子,其中提供了解决方案,但似乎没有一个可行的。然而Markdown语法中的图片非常清晰...我不知道哪里出错了?

问题:我的网站只显示代码行,但不显示图片!就像Jekyll编译器将此代码视为普通文本一样。

通常给出的语法是:![我的标题](http://url/to/img.png)(更多信息请参见这里

根据我访问过的论坛,经常出现的问题围绕图像路径。是绝对路径还是相对路径?是否缺少斜杆:“/”或使用liquid语法 {{site.url}}有误。

我已经阅读了所有这些帖子,测试了它们的解决方案,并尝试了多种组合,但没有任何结果!

这是我编写的基本Markdown页面:

---
layout: default
title: Catégories
menu: main
weight: 10
permalink: /categories/

--- 
<div>
  <ul>
   <li>
    ![Logo Jekyll]({{site.url}}/assets/images/categories/jekyll-logo.png )
   </li>
   <li>
     ![Logo Jekyll](http://memofil.github.io/assets/images/categories/jekyll-logo.png)
   </li>
   <li>
    ![Logo Jekyll]({{"/assets/images/categories/jekyll-logo.png"| absolute_url}})
   </li>
   <li>
    ![Logo Jekyll](/categories/jekyll-logo.png)
   </li>
   <li>
     <img src="{{site.url}}/assets/images/categories/jekyll-logo.png" />
   </li>
  </ul>
</div>

并且您可以在我的网站上看到,使用markdown语法无法显示图片,但是经典的html方法没有问题(这让我认为这不是URL的问题......)。我还将我的图像放置在存储库的不同位置以找到解决方案,因此URL正在更改。
有没有人遇到过同样的问题并解决了?解决方案可能很简单,但我是Jekyll的新手,真的看不出我的错误在哪里。
非常感谢您的帮助!
1个回答

5

在jekyll网站上添加图片的markdown语法不起作用,因为它被包含在HTML标签中。所以当混合使用HTML代码和kramdown语法时,如果你想要处理这个kramdown代码,你需要明确指定。

一种方法是在HTML标记中添加markdown="1"属性,例如:

 <ul>
<li  markdown="1">
![Logo Jekyll]({{site.url}}/assets/images/categories/jekyll-logo.png )
</li>
</ul>

注意在kramdown代码之前没有空格,否则它将被解释为块代码。

对于这种情况,您可以使用kramdown列表:

- ![Logo Jekyll]({{site.url}}/assets/images/categories/jekyll-logo.png )
- ![Logo Jekyll](http://memofil.github.io/assets/images/categories/jekyll-logo.png)

- ![Logo Jekyll]({{"/assets/images/categories/jekyll-logo.png"| absolute_url}})
- ![Logo Jekyll](/categories/jekyll-logo.png)

哈哈哈,你解决了我的问题!!这么简单,我真的需要阅读Markdown语言的基础知识...非常感谢!! - Memofil

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接