如何制作分享按钮以在 Google 博主博客中与帖子 URL 分享报价

Question

我想制作一个分享按钮来分享我的blogger博客中的引语。

例如

<blockquote>"Imagination is more important than knowledge."
--Albert Einstein</blockquote>
<share_button>

<blockquote>"Life is a preparation for the future; and the best preparation for the future is to live as if there were none."
--Albert Einstein</blockquote>
<share_button>

当访问者点击任何引用的分享按钮时，相关引用与post URL可以根据访问者的选择分享到任何应用程序> 使用默认 Android 的共享应用列表。

编辑：- 我的博客仅基于 Quotes 主题。每个帖子都有很多引用，我想在每个引用之后使用一个分享按钮，这样人们就可以分享他们想要的任何引用。 如何在不为每个按钮和引号创建唯一 ID 的情况下做到这一点？

<blockquote>"Imagination is more important than knowledge."
--Albert Einstein</blockquote>
<button class="shareBtn">Share Blockquote</button>

<blockquote>"Life is a preparation for the future and the best preparation for the future is to live as if there were none."
--Albert Einstein</blockquote>
<button class="shareBtn">Share Blockquote</button>

  <blockquote>"Remember not only to say the right thing in the right place, but far more difficult still, to leave unsaid the wrong thing at the tempting moment."
--Benjamin Franklin</blockquote>
<button class="shareBtn">Share Blockquote</button>


  <blockquote>"You don't have to hold a position in order to be a leader."
--Henry Ford</blockquote>
<button class="shareBtn">Share Blockquote</button>

Answer 1

您可以使用Web Share API

<button id="shareBtn">Share Blockquote</button>

<script>
//<![CDATA[
var shareButton = document.getElementById('shareBtn');
var title = document.title;
var text = document.querySelector('blockquote').textContent;
var url = window.location.href;

shareButton.addEventListener('click', function () {
    if (navigator.share) {
        navigator.share({
            title: title,
            text: text,
            url: url
        });
    }
});
//]]>
</script>

编辑：如果你有多个引号，previousElementSibling 在这里是完美的，但分享按钮应该在块引用之后。

<script>
//<![CDATA[
var title = document.title;
var url = window.location.href;

document.querySelectorAll('.shareBtn').forEach(function (btn) {
    var text = btn.previousElementSibling.textContent;
    btn.addEventListener('click', function () {
        if (navigator.share) {
            navigator.share({
                title: title,
                text: text,
                url: url
            });
        }
    });
});
//]]>
</script>