Hugo 实现复制剪贴板添加@版权信息

· 大约 200 个字 · 预计 1 分钟 读完
Hugo
Hugo · 剪贴板 · 版权信息

大致介绍

我们经常会在简书、CSDN 等这些博客平台看到复制别人的文章内容在粘贴的时候出现几行版权信息，大致内容如下：

1
2
3
4
5
6
7
8

上面查询，我的版本是 v0.70.0 如果你的版本低于 v0.65.0 则不支持我们今天要设置的代码高亮，请先升级版本。

Hugo 在 v0.65.0 版本之后使用了 Chroma 代码高亮插件，它是一个 Go 语言实现的非常漂亮并能快速生成的代码高亮工具。
---------------------
著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：水寒 源地址：https://dp2px.com/2020/05/29/hugo-highlighting/
来源：DP2PX.COM © 水寒版权声明：本文为水寒原创文章，转载请附上博文链接！

今天我们在 Hugo 博客中实现这种剪贴板，并做到如下三点：

  1. 可以过滤指定文章，也就是说部分文章不自动添加版权信息。
  2. 根据复制的字数过滤，低于一定字数不自动添加版权信息。
  3. 自动链接到原始文章路径。

文章标签

在开始添加版权信息之前，我们给文章添加一个标签来标记一些文章类型，例如： 转载，翻译.

打开文章 md 文件，添加一个业内配置项，如下：

1

titlelable: "转"  #显示一个标签，建议设置一个字

然后在我们主题目录的文章的头部添加如下代码进行判断并添加标签，具体位置可依据你的实际情况而定。

1
2
3

<h1 class="article-title" itemprop="name">
    {{ .Title }}{{ if .Params.titlelable }}<span id="titlelable">「{{ .Params.titlelable }}」</span>{{ end }}
</h1>

剪贴板加版权

通过 id 过滤器，找到 titlelable 然后，通过标签内容进行过滤，对于标签内容是 「转」 的进行忽略，对于内容长度小于 20 的进行忽略。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

//剪贴板添加版权声明
jQuery(document).on('copy', function(e){
    var labeltext  = $('#titlelable').text();
    if(labeltext == "「转」") return;
    var selected = window.getSelection();
    var selectedText = selected.toString().replace(/\n/g, '<br>');  // Solve the line breaks conversion issue
    if(selectedText.length < 20) return;
    var copyFooter = '<br>---------------------<br>著作权归作者所有。<br>' 
                        + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>'
                        + '作者：水寒 源地址：' + document.location.href
                        + '<br>来源：DP2PX.COM © 水寒版权声明：本文为水寒原创文章，转载请附上博文链接！';
    var copyHolder = $('<div>', {id: 'temp', html: selectedText + copyFooter, 
        style: {position: 'absolute', left: '-99999px'}});
    
    $('body').append(copyHolder);
    selected.selectAllChildren( copyHolder[0] );
    window.setTimeout(function() {
        copyHolder.remove();
    },0);
});

将上面这段 js 代码添加到你的页面尾部即可。例如在我的主题里面，我直接添加到 footer.html 模板中的某个位置。你只需要复制上面的 js 代码修改里面的作者和版权信息即可用到自己的博客中。