阅读需时约 3 分钟
我把 Toast 按钮改成了爱心！我还删除了显示 Toast 总数的文字，并将其替换为与帖子中 Toast 数量相同的爱心。
如果你还没有烤过它，那么它看起来是什么样的： 
多次烘烤后的样子以及烘烤后的样子： 
下面的 JavaScript 代码用于获取祝酒总数并添加心形数。
<script> document.addEventListener("DOMContentLoaded", function(){ // get the total number of toasts let countText = document.querySelector('.upvote-count'); let total = parseInt(countText.innerText); let count = total > 1 ? total : 1; // finds the upvote button and add the hearts in span elements let heartList = document.querySelector('.upvote-button'); heartList.title = 'Thank you 🖤'; for (let i = 0; i < count; i ++) { let heartspan = document.createElement('span'); let heart = document.createTextNode('🖤'); heartspan.appendChild(heart); heartList.appendChild(heartspan); } }); </script>
完成后的 DOM 是这样的。我尝试过把所有爱心都添加到一个 span 里，也尝试过把它们添加到按钮外面，但为了使所有爱心和加号都能按照我想要的方式对齐，最终还是把它们作为单独的 span 添加到按钮里效果更好。 
这是 CSS：
/* lets the text and hearts sit next to each other */ #upvote-form { display: flex !important; } /* adds the text before the button */ #upvote-form::before { content: "Leave a like:"; margin-right: .3rem; background-color: var(--second-color); height: 26px; min-width: 124px; } /* lays out the hearts so they're next to each other and wrap when there's a lot */ .upvote-button { position: relative; display: flex; font-size: 16px; flex-wrap: wrap; flex-direction: row !important; } /* hides the default icon and text */ .upvote-button svg, .upvote-button small { display: none; } /* changes the button content from + to 🖤 depending on its status */ .upvote-button::before, .upvote-button:hover::before { content: '+'; display: block; font-size: 20px; margin: 0 5px; } .upvote-button:disabled::before, .upvote-button.upvoted::before, .upvote-button.upvoted:hover::before { content: '🖤' !important; display: block; font-size: 16px; margin: 0; }
我好像还发现了一个奇怪的bug，因为修改了点赞按钮的CSS之后，我又能点赞我的帖子了？这挺方便的，因为我需要测试一下这个按钮，但不确定这是否应该发生。
向我提到的将 Toast 按钮更改为表情符号的这两篇帖子致敬：
- 撰写日期：2025年6月23日
- 发布日期：
- 最后更新时间：前
- 通过电子邮件回复