如何修改Tumblr自定义ion-icon点赞按钮的图标名称？

需求说明 #

开发Tumblr主题时，需要用ion-icon实现自定义点赞按钮，满足以下要求：

• 鼠标悬停按钮时，图标从heart-outline切换为实心heart
• 帖子被点赞后，图标保持实心heart状态
• 取消点赞时，图标切换回heart-outline

以下是修改后的完整代码实现：

1. JavaScript代码（处理点赞状态同步） #

修复原代码逻辑错误，添加状态监听和图标更新逻辑：

var $container = $('.posts');

// 监听点赞按钮点击，延迟更新确保状态同步
$(document).on('click', '.like_button', function() {
  setTimeout(updateLikeIcons, 500);
});

// 更新所有点赞按钮的图标状态
function updateLikeIcons() {
  $('.likeb').each(function() {
    var $icon = $(this).find('ion-icon');
    $(this).hasClass('liked') 
      ? $icon.attr('name', 'heart') 
      : $icon.attr('name', 'heart-outline');
  });
}

// 处理新加载的帖子（如滚动加载场景）
function newElements() {
  var $newElems = $container.find('.posts:not(.processed)');
  $newElems.addClass('processed');
  
  var postIds = $newElems.map(function() {
    return this.id;
  }).get();
  
  Tumblr.LikeButton.get_status_by_post_ids(postIds);
  setTimeout(updateLikeIcons, 300);
}

// 页面初始化时同步一次状态
$(document).ready(updateLikeIcons);

2. CSS代码（实现悬停与状态样式） #

调整选择器，添加悬停图标切换和点赞状态样式：

.likeb {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.likeb:hover {
  color: #c20404;
  transition: all 0.3s ease;
}

/* 悬停时切换为实心爱心 */
.likeb:hover ion-icon {
  name: 'heart';
  --ionicon-stroke-width: 0;
}

.likeb .like_button iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
}

/* 点赞状态下的图标样式 */
.likeb.liked ion-icon {
  name: 'heart';
  color: #c20404;
  --ionicon-stroke-width: 0;
}

ion-icon {
  --ionicon-stroke-width: 32px;
  margin-bottom: -2.5px;
  transition: all 0.3s ease;
}

3. HTML结构（简化容器关联） #

简化结构，确保图标直接处于点赞按钮容器内：

<div class="posts" id="{PostID}">
  <a class="likeb">{LikeButton}<ion-icon name="heart-outline"></ion-icon></a>
</div>

<!-- 引入依赖资源 -->
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

关键逻辑说明 #

• 悬停效果：通过CSS :hover伪类直接修改ion-icon的name属性，同时调整描边宽度实现实心效果
• 状态同步：利用Tumblr自动添加的liked类，通过JS在页面初始化、点赞点击、新帖子加载后更新图标状态
• 新帖子兼容：标记已处理的帖子避免重复操作，调用Tumblr接口获取新帖子的点赞状态后更新图标

内容的提问来源于stack exchange，提问作者user22290473