经常关注我博客的朋友都知道，在侧边栏有两个赞助区，一个是挂AFF广告的（都是站长亲自用的才会挂），另一个是本文的重点，用来挂几个打赏地址的：

众所周知，各种币都有个共同特点：地址特别长，尤其是新添加的Solana地址，如果还是缩在一行之内，可能会出现滚动条，影响美观，同时太长的地址要复制和核对可能都是个问题。所以也就有了这篇笔记，改造一下赞助区，让打钱更加丝滑。

前言

本博客使用的主题是Waxy，对于其他主题可能需要自行修改配色和结构等参数。

更好的地址展示

本来，目前展示地址用的是<code>，配合Waxy主题中原来已经带上的CSS样式。最大的问题自然就是默认情况下<code>是一个行内（inline）样式，所以就会出现前面提到的缩到一行不好看的情况。即使可以在其中使用<br>换行，但出来的效果就是，折行之后，末端出现大量空白处，导致不美观：

解决这种问题的办法有很多，笔者选择改成div：

.coffee-div div.crypto-addr {
    display: block;
    margin-bottom: 10px;

    /* 这里直接把code原来的样式抄过来 */
    padding: 2px 4px;
    font-size: 12px;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;

    cursor: pointer;
    word-break: break-all;
    font-family: Consolas;
}

然后配合如下HTML结构：

<div class="widget coffee-div">
    <h4 class="title">请站长喝奶茶</h4>
    <div class="content" style="overflow-x: auto;">
        <span>币种名称</span>
        <div class="crypto-addr">地址</div>
    </div>
</div>

配合博客原来的CSS，呈现的结果即和右侧相似

点击复制地址

原理上当然比较简单，元素检测到click事件之后，调用navigator.clipboard.writeText()这个接口就可以把内容写入剪贴板。但是有个问题，复制之后如何告诉用户已经复制完毕呢？使用alert()当然可以，但是很干扰用户体验（毕竟这玩意调出来的是模态窗口），所以不是上策。

笔者最后采用的方式是，点击后在鼠标指针位置上方显示一个小气泡，提示用户复制成功：

<div id="copied-indicator">已复制</div>
<style>
    .coffee-div #copied-indicator {
        visibility: hidden;
        position: fixed;
        top: 0;
        left: 0;
        padding: 5px 8px;
        border-radius: 4px;
        color: white;
        background-color: #467B96;
    }
</style>

然后就是在复制完地址之后，调用弹窗部分的js就行：

let ind = document.querySelector('div#copied-indicator')

//为了美观起见，显示在鼠标指针上方
ind.style.top = String(e.clientY - ind.offsetHeight - 5) + 'px'
ind.style.left = String(e.clientX - ind.offsetWidth  / 2) + 'px'

ind.style.visibility = 'visible'
setTimeout(() => {
    ind.style.visibility = 'hidden'
}, 500)

写在最后

简单修改而已，记个笔记，方便下次参考。

（完）