markdown - 如何在 Ghost 的图像降价中添加类？

Question

在 Ghost 中，图像的降价是

![alt](src)

是否有在img标签中添加类的隐藏格式？还是 Ghost 中还没有这个功能？

我想要这样的结果：

<img src="src" alt="alt" class="img-thumbnail">

我不想使用 html 标记。我真的需要使用降价来实现这一点。请帮忙..

score 60 · Accepted Answer

在图像的普通降价类中是不可能的。在某些实现中，例如降价额外使用是可能的![alt](src) {.class}。我试过了，但在 Ghost 中是不可能的，也不可能![alt|img-thumbnail](src)。在doku中也没有任何提示。

但是您可以使用一种解决方法：

如果你使用srcas css 属性！

只需在 URL 中添加一个“无用”哈希：

![alt](src#img-thumbnail)

然后你可以在 CSS 或 JavaScript 中解决这个问题：

img[src$='#img-thumbnail'] { float:left;}

score 3 · Accepted Answer

这可能太明显了，但你可以把它放在你希望的任何元素中，即

 <div class="myDiv">
    ![](...)
 </div>

然后使用css继承

.myDiv img { width: 50px; }

由于 ghost 中的标记支持 html（可能大多数都支持），因此您也可以使用常规的 <img...> 标签

score 0 · Accepted Answer

在 ghost 文件 post.hbs 渲染 de {{content}} whit class .kg-card-markdown 你可以为 js 创建这个函数在帖子内容的所有图像中添加类

function imageResponsive() {
  $('.kg-card-markdown').each(function(){
    $('img').addClass('img-responsive');     
  });
}

score 0 · Accepted Answer

在 ghost 文件 post.hbs 渲染 de {{content}} whit class .kg-card-markdown 你可以使用 css to whit sass

.kg-card-markdown { 
  img{
    @extend .img-responsive;
  } 
}

score -4 · Accepted Answer

您可以通过 jQuery 在 default.hbs 文件的正文结束标记之前使用以下代码添加它们

$('img').addClass('img-thumbnails');

5 回答 5