Hexo-Butterfly 自定义打赏人员展示名单

前言

最近在搭建Hexo-Butterfly博客，搜索到了好多魔改的Butterfly主题，并且特别好看，特别是张洪HEO的那个魔改主题，然后自己也跃跃欲试，参考了他的主题的打赏名单，自己做了一个类似的样式

效果

打赏人员展示

具体实现

此展示样式是js加css编写，在主目录下新建js和css文件夹，分别建showAppreciation.js和showAppreciation.css两个文件，然后在_config.butterfly.yml里面inject位置引入

inject:
  head:
    - <link rel="stylesheet" href="/css/showAppreciation.css">
  bottom:
    - <script src="/js/showAppreciation.js"></script>

新建一个md文件，我的是放在关于本站里面，在md文件最下面添加

1	<div class="reward-wrap" id='reward'></div>

作为样式的展示地方，然后就是写对应的css和js了，css里面为了适配手机端，加了媒体查询，直接上代码
注意事项：

当改了一版本css之后，发布到环境上发现不生效，这是因为缓存导致的，因为我们的css文件名称没换，建议修改样式之后加一个v1这样后缀名，然后再发布

showAppreciation.js

const data = [
    { name: 'tiger', money: '5.20', date: '2023/10/30'},
    { name: '哎哟喂傻了吧你', money: '1', date: '2023/10/30'},
    { name: '像风一样', money: '1.66', date: '2023/11/1'},
    { name: 'Simpson', money: '5', date: '2023/11/1'},
];

(function(){
    const rewardDom = document.getElementById('reward');
    var html = '';
    for(var i = 0; i < data.length; i++) {
        html += `<div class="reward-item-content">
        <div class="reward-item-name">${data[i].name}</div>
        <div class="reward-item-time">
            <div class="reward-item-money">￥${data[i].money}</div>
            <div>${data[i].date}</div>
        </div>
        </div>`;
    };
    rewardDom.innerHTML = html;
})();

showAppreciation.css

.reward-wrap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 1rem -0.25rem 0.5rem -0.25rem
}

.reward-item-content {
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid #e3e8f7;
    width: calc((100% / 4) - 0.5rem);
    box-shadow: 0 8px 16px -4px #2c2d300c;
    margin: 0 .25rem .5rem .25rem
}

.reward-item-name {
    font-size: 20px;
    font-weight: 700;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei"
}

.reward-item-time {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    align-items: center;
}

.reward-item-money {
    padding: 4px;
    background: #363636;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    margin-right: 4px;
    white-space: nowrap;
    height: 26px;
    line-height: 18px;
}

@media screen and (max-width: 700px){
    .reward-item-content {
        width: 100%;
    
    }
}