子比美化:文章版权声明样式美化

子比美化:文章版权声明样式美化

文章底部版权声明进行了美化,并增加了深色模式和打赏按钮,整合了多项内容,更方便和快捷,有需要的自取。

添加代码

<link rel="stylesheet" href="https://www.wniui.com/css/copyright.css">
<div class="post-copyright">
    <div class="post-copyright__author_group">
        <a class="post-copyright__author_img" href="/about.html"><img class="post-copyright__author_img_front"
                src="https://q1.qlogo.cn/g?b=qq&nk=1502586285&s=640"></a>
        <div class="post-copyright__author_name">
            星雨の博客
        </div>
        <div class="post-copyright-span">"想做一件任何人都可以做的事情"</div>

        <div class="post-copyright__author_desc"></div>
    </div>
    <div class="post-tools" id="post-tools">
        <div class="post-tools-left">
            <div class="reward-link mode zanzu">
                <a class="reward-link-button" href="javascript:;" data-toggle="modal" data-target="#rewards-modal-1"
                    data-remote="/wp-admin/admin-ajax.php?id=1&action=user_rewards_modal"><i
                        class="solitude fa-solid fa-zanzu"></i>打赏作者</a>
            </div>
            <div class="reward-link mode">
                <a class="reward-link-button" href="/rss"><i class="solitude fa-solid fa-seedling"></i>订阅</a>
            </div>
        </div>
    </div>
    <div class="social-share">
        <a class="social-share-ico icon-qq" target="_blank" rel="noopener"
            href="https://connect.qq.com/widget/shareqq/index.html?url=" title="分享到QQ">
            <i class="solitude fab fa-qq"></i>
        </a>
        <a class="social-share-ico icon-weibo" target="_blank" rel="noopener"
            href="https://service.weibo.com/share/share.php?url=" title="分享到微博">
            <i class="solitude fab fa-weibo"></i>
        </a>
        <a class="social-share-ico icon-twitter" target="_blank" rel="noopener"
            href="https://twitter.com/intent/tweet?url=" title="分享到Twitter">
            <i class="solitude fab fa-twitter"></i>
        </a>
        <a class="social-share-ico icon-facebook" target="_blank" rel="noopener"
            href="https://www.facebook.com/sharer/sharer.php?u=" title="分享到Facebook">
            <i class="solitude fab fa-facebook"></i>
        </a>
        <div rel="nofollow" class="social-share-ico icon-link" onclick="copyLink(this)" data-clipboard-text=""
            data-clipboard-tag="链接" title="复制链接" href="javascript:;">
            <i class="solitude fas fa-link"></i>
        </div>
        <div class="social-share-ico icon-qrcode" title="使用手机扫码阅读这篇文章">
            <i class="solitude fas fa-qrcode"></i>
            <div class="share-main">
                <div class="share-main-all">
                    <div class="qrcode" data-size="100"></div>
                    <div class="reward-dec">
                        使用手机扫码阅读这篇文章
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="post-copyright__notice">
        <span class="post-copyright-info">本文是原创文章,采用<a target="_blank" rel="noopener"
                href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">CC BY-NC-SA 4.0</a>协议,完整转载请注明来自<a
                href="/">星雨の博客</a></span>
    </div>
</div>
<script>
    const link = window.location.href;
    document.querySelectorAll('a.social-share-ico').forEach(function (element) {
        let href = element.getAttribute('href');
        element.setAttribute('href', href + encodeURIComponent(link));
    });
</script>
<script>
    function copyLink(element) {
        var pageUrl = window.location.href;
        element.setAttribute('data-clipboard-text', pageUrl);
        var clipboard = new ClipboardJS(element);
        clipboard.on('success', function (e) {
            alert('链接已复制!');
        });
    }
</script>

 

© 版权声明
THE END