diff --git a/layout/comment/webmention-timeline.jsx b/layout/comment/webmention-timeline.jsx
new file mode 100644
index 0000000..1a4cc67
--- /dev/null
+++ b/layout/comment/webmention-timeline.jsx
@@ -0,0 +1,32 @@
+/**
+ * Webmastodon comment JSX component.
+ * @module layout/comment/webmastodon
+ */
+const { Component, Fragment } = require('inferno');
+const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');
+
+class WebmentionTimeline extends Component {
+
+    render() {
+        
+        const { helper } = this.props;
+        const { __ } = helper;
+        return <Fragment>
+            <div class="card">
+                <div class="card-content">
+                    <h2 class="title is-5">长短波</h2>    
+                    <div class="timeline webmention-timeline">
+                        <script src={helper.url_for('/js/webmention-timeline.js')}></script>
+                    </div>
+                </div>
+            </div>
+
+
+        </Fragment>
+
+
+    }
+}
+
+
+module.exports = WebmentionTimeline;
diff --git a/layout/comment/webmention.jsx b/layout/comment/webmention.jsx
new file mode 100644
index 0000000..09fbad1
--- /dev/null
+++ b/layout/comment/webmention.jsx
@@ -0,0 +1,24 @@
+const { Component, Fragment } = require('inferno');
+
+class Webmention extends Component {
+    render() {
+
+        const { helper, plugin, head } = this.props;
+        const baseUrl = "https://webmention.io";
+
+        return <Fragment>
+
+            <script dangerouslySetInnerHTML={{
+                __html: `var webmentionContext = { baseUrl:'${baseUrl}'}; `}} >
+            </script>
+            <script src={helper.url_for('/js/webmention.js')}>
+
+            </script>
+
+        </Fragment>;
+
+    }
+}
+
+
+module.exports = Webmention;
\ No newline at end of file
diff --git a/layout/common/article.jsx b/layout/common/article.jsx
index d4c8404..899b122 100644
--- a/layout/common/article.jsx
+++ b/layout/common/article.jsx
@@ -6,6 +6,7 @@ const Donates = require('./donates');
 const Comment = require('./comment');
 const Related = require('./related');
 const Webmention = require('../comment/webmention')
+const WebmentionTimeline = require('../comment/webmention-timeline')
 const ArticleLicensing = require('hexo-component-inferno/lib/view/misc/article_licensing');
 
 /**
@@ -132,6 +133,7 @@ module.exports = class extends Component {
             {!index ? <Comment config={config} page={page} helper={helper} /> : null}
             {/* Webmention */}
             {!index ? <Webmention config={config} page={page} helper={helper}/> :null}
+            {!index ? <WebmentionTimeline config={config} page={page} helper={helper}/> :null}
         </Fragment>;
     }
 };
diff --git a/scripts/webmention.js b/scripts/webmention.js
deleted file mode 100644
index e69de29..0000000
diff --git a/source/js/webmention-count.js b/source/js/webmention-count.js
new file mode 100644
index 0000000..fb27499
--- /dev/null
+++ b/source/js/webmention-count.js
@@ -0,0 +1,12 @@
+function get_count(url) {
+    const webmentionBaseUrl = "https://webmention.io"
+
+    const cnt = fetch(`https://webmention.io/api/count.json?target=` + encodeURIComponent(url))
+    .then(function (response) {
+        return response.json();
+    })
+    .catch(function (ex){
+        console.error('featch mention count error' + ex);
+     }); 
+     return cnt
+}
\ No newline at end of file
diff --git a/source/js/webmention-timeline.js b/source/js/webmention-timeline.js
new file mode 100644
index 0000000..ab524ea
--- /dev/null
+++ b/source/js/webmention-timeline.js
@@ -0,0 +1,38 @@
+window.addEventListener('load', function () {
+    const webmentionsPromise = window.webmentionContext.webmentionsPromise;
+    const mastodonContext = window.mastodonContext;
+    const webmentionTimelineMessages = window.webmentionTimelineMessages;
+
+    webmentionsPromise && webmentionsPromise
+        .then(function (data) {
+            let html = '';
+            data.children.forEach(function (item) {
+                if (!(mastodonContext && item.url.startsWith(mastodonContext.mastodonBaseUrl))) {
+                    html += `<article class="media"><div class="media-content"><p class="article-meta level-left">`;
+
+                    if (item.author && item.author.name) {
+                        html += `<i class="level-item author" >`;
+                        if (item.author.url) {
+                            html += `<a target="_blank" href="${item.author.url}" rel="noopener">${item.author.name}</a>`;
+                        }
+                        else {
+                            html += item.author.name;
+                        }
+                        html += `</i>`;
+                    }
+                    let publishTime = (item.published && item.published.indexOf('T') > 0) ? item.published : item['wm-received'];
+
+                    html += `<time class="level-item" datetime="${publishTime}">${publishTime.split('T')[0]}</time></p><p class="title level-left"><i class="level-item">🔗</i><a target="_blank" href="${item.url}" rel="noopener" class="level-item">${item.url}</a></p></div></article>`;
+                }
+                else {
+                    html += `<article class="media"><div class="media-content"><p class="title level-right"><span class="level-item">🐘</span><span class="level-item"><a target="_blank" href="${item.url}" rel="noopener">${webmentionTimelineMessages['into_the_fediverse']}</a></span></p></article></div>`;
+                }
+
+            });
+            document.querySelector('div.webmention-timeline').innerHTML = html;
+
+        })
+        .catch(function (ex) {
+            console.error('fetch mastodon webmention error' + ex);
+        });
+});
\ No newline at end of file
diff --git a/source/js/webmention.js b/source/js/webmention.js
new file mode 100644
index 0000000..61eb86a
--- /dev/null
+++ b/source/js/webmention.js
@@ -0,0 +1,14 @@
+(function (webmentionContext) {
+
+    const url = window.location.href;
+    const webmentionBaseUrl = "https://webmention.io"
+
+    webmentionContext.webmentionsPromise = fetch(webmentionBaseUrl + "/api/mentions.jf2?target=" + encodeURIComponent(url))
+        .then(function (response) {
+            console.error('sucess '  + url);
+            return response.json();
+        })
+        .catch(function (ex) {
+            console.error('fetch webmention error' + ex);
+        });
+})(window.webmentionContext);
\ No newline at end of file