新手如何给Hexo博客在复制时添加版权声明

文章首发于公众号【只是学习学习】欢迎关注

1. 确认需要版权声明的位置

通常情况下都是在拷贝博客详情内容时才给拷贝的内容添加版权信息，如果不管拷贝哪里的内容都给添加版权声明，影响用户体验。所以第一步确定博文详细内容在哪个标签中。这里我用的cactus主题，他的文章主体内容在

标签中

2.编写版权声明的js

所以我们需要编写一个监听该标签内的复制事件的js，如下:

<script>
    function setClipboardText(event){
        // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的，也就是你复制或者剪切内容
        let clipboardData = event.clipboardData || window.clipboardData;
        // 如果未复制或者未剪切，则return出去
        if (!clipboardData) { return; }
        event.preventDefault();
        // Selection 对象，表示用户选择的文本范围或光标的当前位置。
        //     声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
        let text = window.getSelection().toString();
    
        if (text) {
            // 如果文本存在则先取消文本默认事件
            event.preventDefault();
            // 通过调用常clipboardData对象的 setData(format, data) 方法；来设置相关文本
            // format: 一个DOMString 表示要添加到 drag object的拖动数据的类型。
            // data: 一个 DOMString表示要添加到 drag object的数据。
            var copyright = '\n\n'
            + '\n著作权归作者所有。'
            + '\n商业转载请联系作者获得授权，非商业转载请注明出处。'
            + '\n作者: 只是学习学习'
            + '\n邮箱: [email protected]'
            + '\n原文地址: <%= page.permalink %>'
    
            clipboardData.setData('text/plain', text + copyright);
    
        }
    };
    var contents = document.getElementsByClassName("content");
    // 监听文章内容的copy事件
    contents[0].addEventListener('copy',function(e){
        setClipboardText(e);
    });
</script>

• <%= page.permalink %>: 当前页面链接

3.将js放置在博文详情模板页

因为我们只是需要监听博客详情页的复制事件，所以我们可以直接将这段js放在博文详情页末尾。themes/cactus[主题的名字]/layout/post.ejs这个文件是生成博客详情的模板。

4.启动测试

执行hexo clean和hexo generate清除通过修改前生成的页面，然后再根据修改后模板生成新的页面。然后执行hexo server启动测试。效果如下图

5.设置只有在非转载文章才会有添加版权声明

如果我们是转载其他作者的文章，这种情况下肯定是不能添加自己的版权声明要去掉。

1. 在文章头部添加一个copyright属性设置为true
   

2. 在themes/cactus[主题的名字]/layout/post.ejs文件，给之前添加的版权声明代码添加if判断，只有在copyright为true时才给设置版权声明。

   <% if (page.copyright) { %>
         <script>
             function setClipboardText(event){
                 // clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的，也就是你复制或者剪切内容
                 let clipboardData = event.clipboardData || window.clipboardData;
                 // 如果未复制或者未剪切，则return出去
                 if (!clipboardData) { return; }
                 event.preventDefault();
                 // Selection 对象，表示用户选择的文本范围或光标的当前位置。
                 //     声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
                 let text = window.getSelection().toString();
       
                 if (text) {
                   // 如果文本存在则先取消文本默认事件
                   event.preventDefault();
                   // 通过调用常clipboardData对象的 setData(format, data) 方法；来设置相关文本
                   // format: 一个DOMString 表示要添加到 drag object的拖动数据的类型。
                   // data: 一个 DOMString表示要添加到 drag object的数据。
                   var copyright = '\n\n'
                                   + '\n著作权归作者所有。'
                                   + '\n商业转载请联系作者获得授权，非商业转载请注明出处。'
                                   + '\n作者: 只是学习学习'
                                   + '\n邮箱: [email protected]'
                                   + '\n原文地址: <%= page.permalink %>'
       
                   clipboardData.setData('text/plain', text + copyright);
       
                 }
             };
             var contents = document.getElementsByClassName("content");
             // 监听文章内容的copy事件
             contents[0].addEventListener('copy',function(e){
                 setClipboardText(e);
             });
         </script>
   <% } %>
   

   • page.copyright: 就是在博客详情页设置的copyright属性。只有存在并且为true时，才会有这段代码。

     修改后的post.ejs模板页完整内容如下图：
     

3. 然后给每篇非转载博客添加copyright: true即可。