Typecho 文档：给文内图片添加 Pinterest 分享功能

11月06日

适用程序：Typecho
程序版本：1.2.1
文档作者：Lopwon
作者博客：Lopwon.com
发布页面：Lopwon.com/attachment/3835/
许可方式：CC BY-NC-SA

注意：此文档源于作者在博客改造中的一些经验总结，转载还请署名。

敬告：此文档操作涉及程序核心文件的修改，作者不对你在使用中产生的任何问题造成的不良后果，承担责任。
文档说明

通过将博客文内的图片，分享至 Pinterest 图板，一定程度上可以为自己的博客引流。

使用方法

A 涉及文件

usr/themes/***/footer.php

B 改造文件

作用：给文内图片添加 Pinterest 分享功能。

在主题的适当文件适当位置（如：文件 footer.php 页脚处）引入以下代码（留意注释，以及按需修改）：


    <script>
    function pinterestShare() {
        var pinImages = document.querySelectorAll('#content .image-container img'); // 获取文内所有图片元素，根据情况替换为文内图片的类名

        pinImages.forEach(function(img) { // 遍历指定类内所有图片
            var shareIcon = document.createElement('span'); // 创建分享图标
            shareIcon.className = 'pinterest-icon'; // 添加分享图标类名，根据情况自行定义 .pinterest-icon 样式

            shareIcon.onclick = function(e) { // 点击分享
                e.preventDefault(); // 阻止默认行为
                var imageUrl = encodeURIComponent(img.src); // 获取当前图片的 URL
                var siteUrl = '<?php echo $this->options()->siteUrl; ?>'; // 博客链接
                var description = encodeURIComponent('<?php echo $this->options()->description; ?>'); // 博客描述
                var pinterestLink = `https://www.pinterest.com/pin/create/button/?url=${siteUrl}&media=${imageUrl}&description=${description}`; // 分享接口
                window.open(pinterestLink, '_blank'); // 新窗口打开
            };

            img.parentElement.appendChild(shareIcon); // 将分享图标添加到图片元素后面
        });
    }

    window.onload = pinterestShare; // 页面加载完成后初始化 pinterestShare() 函数
    </script>


至此，在文内图片已添加 Pinterest 分享功能，请根据需要对按键 .pinterest-icon 进行样式自定义。
store