将图像样式添加到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>

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

2. 在Markdown编辑器中添加图像时，请在括号中包含类名。以下是浮动图像的整个示例：

＃styles.css的

  img.left {float:left;}

＃styles.js

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

在编辑器中：

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

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