阿方的博客

很多功能都使用了 jQuery

FancyBox

在页首引用 jQuery 和 FancyBox

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">

在页尾插入 JavaScript 为所有的 img 元素外面加一层带有 data-fancybox 属性的 a 元素
（这里排除了 class 属性为 smilies 的 img 元素）

$(".body").find("img").not(".smilies").each(function () {
    var element = document.createElement("a");
    $(element).attr("data-fancybox", "gallery");
    $(element).attr("href", $(this).attr("src"));
    $(this).wrap(element);
});

复制文字添加版权

在页尾添加 JavaScript

复制页面中 id 为 post-content 的元素中的文本时会在最后加上版权

var setCopyright = function(event) {
    event.preventDefault();
    var node = document.createElement('div');
    node.appendChild(window.getSelection().getRangeAt(0).cloneContents());
    var htmlData = '<div>' + node.innerHTML + '<p>来源：' + window.location.href + '</p></div>';
    var textData = window.getSelection().getRangeAt(0) + '\n\n-------------------\n来源：' + window.location.href;
    if (event.clipboardData) {
        event.clipboardData.setData('text/html', htmlData);
        event.clipboardData.setData('text/plain', textData);
    } else if (window.clipboardData) {
        return window.clipboardData.setData('text', textData);
    }
};

var range = document.getElementsById('post-content');
range.addEventListener('copy', function(e) {
    setCopyright(e);
});

回到顶部按钮自动显隐

在距离顶部小于 300px 的时候隐藏回顶按钮
在距离顶部大于 300px 的时候显示回顶按钮
由于在移动端页面顶栏中加入了回顶按钮，所以以上生效的前提是页面宽度大于 768px，不需要直接去掉即可

$(window).scroll(function () {
    if($(window).scrollTop() < 300 && $(window).width() >= 768){
        $(".toTop").fadeOut();
    }else if($(window).scrollTop() > 300 && $(window).width() >= 768){
        $(".toTop").fadeIn();
    }
})