README

Statamic v3的自定义标签

这是什么？

webmention.io 是一个开源项目和服务，可以代表你的独立网站接收 webmentions 和 pingbacks。

这可以简单地说，在注册此服务后，你可以轻松地将以下代码片段添加到你的网站中，以便收集提及/pingbacks（请确保将 <username> 替换为你的用户名 😅）。

<link rel="webmention" href="https://webmention.io/<username>/webmention" />
<link rel="pingback" href="https://webmention.io/<username>/xmlrpc" />

假设你已经这样做了，此插件为你提供了一个 {{ webmentions }} 标签，你可以在 Statamic 网站中使用它来显示收集到的提及和 pingbacks！

安装

composer require mattrothenberg/webmentions

演示 🚀

在展示你的 Webmention 数据方面，没有限制！这里有一个示例 Vue 组件的演示。注意，该组件假定你已经安装了 Tailwind 和 v-tooltip。

使用（Antlers）

此插件公开了一个名为 webmentions 的新标签。如下使用它，确保传递一个 url 参数。

{{webmentions url="https://mattrothenberg.com/"}}
  {{ if no_results }}
    <p>No results.</p>
  {{ else }}      
    <p>Total: {{mentions|length}}</p>
    <ul>
      {{mentions}}
        <li>
          {{ url }}
          {{ author }}
            {{ name }}
          {{ /author }}
        </li>
      {{/mentions}} 
    </ul>
  {{ /if }}
{{/webmentions}}

使用（Vue）

如果你想将提及数据传递给 Vue 组件，以下是方法。

{{ webmentions url="https://sebastiandedeyne.com/"  }}
  {{ if no_results }}
    <p>No results.</p>
  {{ else }}
    <mention-list :mentions="{{ mentions | json | entities }}"></mention-list>
  {{/if}}
{{ /webmentions }}

提及模式

每个 mention 对象都公开以下属性，你可以在模板中访问这些属性。

更多信息请访问 Webmention.io

{
  "type": "entry",
  "author": {
    "type": "card",
    "name": "Tantek Çelik",
    "url": "http://tantek.com/",
    "photo": "http://tantek.com/logo.jpg"
  },
  "url": "http://tantek.com/2013/112/t2/milestone-show-indieweb-comments-h-entry-pingback",
  "published": "2013-04-22T15:03:00-07:00",
  "wm-received": "2013-04-25T17:09:33-07:00",
  "wm-id": 900,
  "content": {
    "text": "Another milestone: @eschnou automatically shows #indieweb comments with h-entry sent via pingback http://eschnou.com/entry/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html",
    "html": "Another milestone: <a href=\"https:\/\/twitter.com\/eschnou\">@eschnou<\/a> automatically shows #indieweb comments with h-entry sent via pingback <a href=\"http:\/\/eschnou.com\/entry\/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html\">http:\/\/eschnou.com\/entry\/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html<\/a>"
  },
  "mention-of": "https://indieweb.org/",
  "wm-property": "mention-of",
  "wm-private": false
}

路线图

添加复杂的 Vue 组件示例
公开一个与 https://webmention.io/api/count 通信的方法，从而获取提及类型的细分。

mattrothenberg / webmentions

维护者

详细信息