将图像样式添加到 Ghost 博客的简单方法

Question

尝试在 Ghost 博客中设置图片样式时存在一些问题。他们的 Markdown 实现非常基础。您可以使用代码![]() 上传，但要添加类或样式，您必须将其转换为 HTML。对于某些人可能不擅长 HTML 的团队来说，这也不是最好的选择。

Answer 1

这就是我所做的：

1. 将图像样式添加到您希望能够应用的 CSS。

2. 确保您的博客已安装 JQuery（它不再包含在 Ghost 中 - 如果需要，请按照步骤 2 下载并添加）

3. 将名为 styles.js 的文件添加到主题的 js 文件夹（在资产中）。在主题的 default.hbs 中链接文件：

<script type="text/javascript" src="{{asset "js/styles.js"}}"></script>

4. 将$('img[alt~="name of your class"]').addClass("name of your class"); 添加到styles.js。这会将您选择的样式应用于图像。

5. 在 Markdown 编辑器中添加图像时，将类名包含在括号中。这是整个事情的一个例子，向左浮动图像：

#styles.css

  img.left {float:left;}

#styles.js

 $('img[alt~="left"]').addClass("left");

在编辑器中：

![Dog left](http://images.com/dog.jpg)

此方法的主要缺点是样式不会在编辑器中预览。您必须加载页面才能看到它，但这似乎是我能想到的向 Ghost 博客添加可选图像样式的最简单方法。