【问题标题】：Adding custom HTML tags to Ghost or Ghost Themes将自定义 HTML 标签添加到 Ghost 或 Ghost 主题
【发布时间】：2016-08-20 16:16:02
【问题描述】：

大家好。

挑战

我正在尝试创建一个自定义 Ghost 主题，它支持 Google 的 Accelerated Mobile Pages，即 Google AMP，但我遇到了用于图像的特定自定义标签的问题。

Google AMP custom img tag

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

注意 amp-img HTML 标签。

可能的解决方案

我相信为了为 Ghost 创建自定义 HTML 标记，我需要修改核心“服务器”Ghost 文件？

当前进展

目前的进展在my GitHub project, Ampsper v0.0

【问题讨论】：

标签： javascript html handlebars.js ghost-blog ghost

【解决方案1】：

新版本的 ghost 支持这个，但我不相信存在支持这个标签我检查我的代码并找到这个

<figure class="post-image">
<amp-img src="http://www.hackemate.ninja/content/images/2016/08/pablo--4--min.png" width="600" height="400" layout="responsive"></amp-img>
</figure>

但是我的正常主题在本节中有 alt 属性

【讨论】：

是的，你是对的。最新版本默认支持 Amp。我是在与他们的 Slack 频道上的开发人员交谈后发现的。

【解决方案2】：

解决方案

最后，Ghost release 0.10.0 在系统中内置了 AMP（Google Accelerated Mobile Pages）支持。

从Ghost's AMP Documentation中提取：

{{image}} 帮助器需要被包裹在<amp-img> 标记中，并且必须提供宽度和高度属性，并且仅适用于发布图像。 {{author.image}} 在 amp 上下文中不受支持，但 {{image}} 帮助器仍可在 {{#author}}{{/author}} 块表达式中使用。

以下示例：

对于帖子图片：

{{#post}}
    <amp-img src={{image absolute="true"}} width="600" height="400" layout="responsive"></amp-img>
{{/post}}

对于作者图片：

{{#post}}
  {{#author}}
    <amp-img src={{image absolute="true"}} width="50" height="50"></amp-img>
  {{/author"}}
{{/post}}

【讨论】：