为markdown创建一个引文标记符

最新推荐文章于 2024-02-17 06:30:00 发布

WittFan

最新推荐文章于 2024-02-17 06:30:00 发布

阅读量340

点赞数

分类专栏： program/nodejs/hexo 文章标签： hexo nodejs next markdown quote

原文链接：https://www.exobrain.online/2019/08/04/%E4%B8%BAmarkdown%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%BC%95%E6%96%87%E6%A0%87%E8%AE%B0%E7%AC%A6/#more

版权

program/nodejs/hexo 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

title: 为markdown创建一个新标记符
date: 2019-08-04 17:18:42
categories: 编程/nodejs/hexo
tags: markdown javascript quote hexo next
site: www.exobrain.online
type: nodejs

问题的由来

当我们在编写markdown文件的时候会经常从网页上ctr+c其他人的文字，而我们标注作者和文章的来源不是特别方便，这会导致许多时候我们不去标注作者和文章的来源。引文规范对于问题追溯和文明发展相当重要，与其道德说教来让大家遵守引文规范，不如提供更方便的方式来让大家遵守，因此，本文抛砖引玉出一种新的高效的规范和工具。

复制时天生携带引文信息

将下面的javascript语句放到网页的head处

<script type="text/javascript">
    document.addEventListener("copy", copy);
    function copy(oEvent){
        var selection = window.getSelection();
        var quoteMagic = "<!-- It's convenient in markdown file. -->\n";
        quoteMagic += "<!-- More information: https://www.exobrain.online/2019/08/04/%E4%B8%BAmarkdown%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%BC%95%E6%96%87%E6%A0%87%E8%AE%B0%E7%AC%A6/#more -->\n";
        quoteMagic += "<!-- quote(start){ author: authorname, site: www.sitename.com, location: ";
        quoteMagic += document.location.href;
        quoteMagic += "} -->\n";
        var copytext = quoteMagic + selection + "\n<!-- quote(end) -->";
        oEvent.preventDefault();
        oEvent.clipboardData.setData("text", copytext);
    }
</script>

示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script type="text/javascript">
    document.addEventListener("copy", copy);
    function copy(oEvent){
        var selection = window.getSelection();
        var quoteMagic = "<!-- It's convenient in markdown file. -->\n";
        quoteMagic += "<!-- More information: https://www.exobrain.online/2019/08/04/%E4%B8%BAmarkdown%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%BC%95%E6%96%87%E6%A0%87%E8%AE%B0%E7%AC%A6/#more -->\n";
        quoteMagic += "<!-- quote(start){ author: authorname, site: www.sitename.com, location: ";
        quoteMagic += document.location.href;
        quoteMagic += "} -->\n";
        var copytext = quoteMagic + selection + "\n<!-- quote(end) -->";
        oEvent.preventDefault();
        oEvent.clipboardData.setData("text", copytext);
    }
</script>
</head>
<body>
测试1<br>
测试2
</body>
</html>

当我们运行网页，复制网页中内容后，将其粘贴到mardown文件，会得到下面的结果

[外链图片转存失败(img-cAxOktRh-1564982212462)(为markdown创建一个引文标记符/1.png)]
而其（在vscode+MarkDownPreview中）渲染成html的显示效果如下图
[外链图片转存失败(img-V1mqDHCZ-1564982212464)(为markdown创建一个引文标记符/2.png)]
这样我们就可以在不影响显示的情况下保留其引文信息。当然，html中保留引文信息的工作需要在markdown文件转换为html文件的过程中完成，转换工具和规范这里不做讨论，先留下个坑，或者其他人来完成吧，?。

hexo的next主题下复制时附加引文信息

找到hexo项目根目录，我的根目录是/blog
在 …/blog/themes/next/layout/_partials/head目录下找到custom-head.swig文件，将下面的代码添加到文末就可以了。

<script type="text/javascript">
    document.addEventListener("copy", copy);
    function copy(oEvent){
        var selection = window.getSelection();
        var quoteMagic = "<!-- It's convenient in markdown file. -->\n";
        quoteMagic += "<!-- More information: https://www.exobrain.online/2019/08/04/%E4%B8%BAmarkdown%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%BC%95%E6%96%87%E6%A0%87%E8%AE%B0%E7%AC%A6/#more -->\n";
        quoteMagic += "<!-- quote(start){ author: authorname, site: www.sitename.com, location: ";
        quoteMagic += document.location.href;
        quoteMagic += "} -->\n";
        var copytext = quoteMagic + selection + "\n<!-- quote(end) -->";
        oEvent.preventDefault();
        oEvent.clipboardData.setData("text", copytext);
    }
</script>

将hexo-next下的文末出处去掉

将文件…/blog/themes/next/_config.yml（blog为我的hexo根目录）中的post_copyright项下的enable的值从true改为false

# Declare license on posts
post_copyright:
  enable: true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

改完后为

# Declare license on posts
post_copyright:
  enable: false
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

之后文章末尾就不会再出现下图的情形了
[外链图片转存失败(img-5BMZnZE1-1564982212465)(为markdown创建一个引文标记符/3.png)]

如果使用了代码复制功能怎么改

当使用代码复制功能的时候，我们希望复制到干净的代码，却不想得到引用信息;而在复制文章内容的时候，我们希望得到引文信息。

笔者使用的是这个链接下实现的代码复制功能，
https://yfzhou.coding.me/2018/08/27/Hexo-Next搭建个人博客（代码块复制功能）/

我的办法是：
将clipboard-use.js文件的代码进行了一下升级，加了if语句。
可以理解成将custom-head.swig文件里的那个添加引用的代码整合到了clipboard-use.js文件里。

  /*页面载入完成后，创建复制按钮*/
var btnCopyEmpty = true;
document.addEventListener("copy", copy);
function copy(oEvent){
    var selection = window.getSelection();
    if(btnCopyEmpty){
        console.log(btnCopyEmpty)
        var quoteMagic = "<!-- It's convenient in markdown file. -->\n";
        quoteMagic += "<!-- More information: https://www.exobrain.online/2019/08/04/%E4%B8%BAmarkdown%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%BC%95%E6%96%87%E6%A0%87%E8%AE%B0%E7%AC%A6/#more -->\n";
        quoteMagic += "<!-- quote(start){ author: authorname, site: www.sitename.com, location: ";
        quoteMagic += document.location.href;
        quoteMagic += "} -->\n";
        var copytext = quoteMagic + selection + "\n<!-- quote(end) -->";    
    }else{
        var copytext = selection;   
    }
    oEvent.preventDefault();
    oEvent.clipboardData.setData("text", copytext);
};

!function (e, t, a) { 
/* code */
var initCopyCode = function(){
    var copyHtml = '';
    copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
    //fa fa-globe可以去字体库替换自己想要的图标
copyHtml += '  <i class="fa fa-clipboard"></i><span>copy</span>';
    copyHtml += '</button>';
    $(".highlight .code pre").before(copyHtml);
    new ClipboardJS('.btn-copy', {
        target: function(trigger) {
            btnCopyEmpty = false;
            return trigger.nextElementSibling;
        }
    });
    // clipboard.on('success', function(e){
    //     btnCopyEmpty = false;
    // });
}
initCopyCode();
}(window, document);