博客园美化 | part02-添加文章markdown链接一键复制按钮

1、进入博客园系统设置

2、在【博客侧边栏公告(支持HTML代码)】的代码框中粘贴以下代码

<!-- 分隔线  -->

<style>
     #get-bnt{
        background: #0e0e0edb;
        color: #f5d226;
        border-radius: 25px;
        font-size: 14px;
        padding: 9px 14px;
        height: 50px;
        position: relative;
        left: 2px;
        top: -10px;
        z-index: 200;
        display: inline-block;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        outline: none;
        border: none;
        box-shadow: 0 9px #999;

    }
    #get-bnt:active{

        background-color: #3b3b3b;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
        
 	}
</style>
<button id="get-bnt" onclick="clickToGetLink()" >click me to obtain markdown link</button>

<script>
    function clickToGetLink(){
        console.log("按钮被点击了(button was clicked)");
        var getLinkButton = document.getElementById("get-bnt");
        var hyperLink = window.location.href ;
        var titleContent = document.getElementById("cb_post_title_url").innerText;
        var str_MarkdownLink = "[" + titleContent + "]" + "(" + hyperLink + ")" + "<br/>";

        navigator.clipboard.writeText(str_MarkdownLink)
        .then(() => {
            if(getLinkButton.innerText !=="Copied"){
                const origianlText = getLinkButton.innerText;
                getLinkButton.innerText = 'Copied';
                setTimeout(() => {
                    getLinkButton.innerText = origianlText;
                },2500);   
            }
            })
        .catch(err => {
        console.log('Something went wrong', err);
        })
    }
</script>

3、效果

学习就是不断的熟悉,了解 从陌生到熟悉,再到了如指掌