如何在Svelte中整合Buy Me Coffee脚本并自定义按钮位置？

一、整合两个脚本 #

无需额外添加独立的<script>标签，直接在现有TypeScript脚本的onMount钩子中动态加载Buy Me Coffee的外部脚本即可，既避免脚本加载顺序冲突，又能和现有代码完美兼容。

修改后的完整TypeScript代码如下：

<script lang='ts'>
    import { onMount } from 'svelte';
  
    let sectionsVisible = [false, false, false, false];
  
    function handleScroll() {
      const sections = document.querySelectorAll('section');
      sections.forEach((section, index) => {
        const rect = section.getBoundingClientRect();
        if (rect.top < window.innerHeight * 0.75) {
          sectionsVisible[index] = true;
        }
      });
    }
  
    onMount(() => {
      // 初始化滚动逻辑并绑定监听
      handleScroll();
      window.addEventListener('scroll', handleScroll);

      // 动态创建Buy Me Coffee脚本标签
      const bmcScript = document.createElement('script');
      bmcScript.type = 'text/javascript';
      bmcScript.src = 'https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js';
      // 配置BMC按钮属性
      bmcScript.setAttribute('data-name', 'bmc-button');
      bmcScript.setAttribute('data-slug', 'slug_name');
      bmcScript.setAttribute('data-color', '#FFDD00');
      bmcScript.setAttribute('data-emoji', '☕');
      bmcScript.setAttribute('data-font', 'Lato');
      bmcScript.setAttribute('data-text', 'Buy me a coffee');
      bmcScript.setAttribute('data-outline-color', '#000000');
      bmcScript.setAttribute('data-font-color', '#000000');
      bmcScript.setAttribute('data-coffee-color', '#ffffff');

      // 避免重复加载脚本
      if (!document.querySelector('script[data-name="bmc-button"]')) {
        document.body.appendChild(bmcScript);
      }

      // 组件卸载时清理资源
      return () => {
        window.removeEventListener('scroll', handleScroll);
        const existingScript = document.querySelector('script[data-name="bmc-button"]');
        if (existingScript) existingScript.remove();
        const bmcButton = document.querySelector('.bmc-button');
        if (bmcButton) bmcButton.remove();
      };
    });
  </script>

二、将按钮放置到指定位置 #

默认情况下BMC脚本会把按钮添加到body末尾，你可以通过以下步骤自定义按钮位置：

1. 在组件HTML部分的目标位置添加一个容器：

<!-- 放在你想要显示按钮的位置 -->
<div id="bmc-button-container" class="your-custom-styles"></div>

2. 在onMount中添加脚本加载完成后的按钮移动逻辑：
   在创建bmcScript的代码后，追加以下监听事件：

// 脚本加载完成后移动按钮到指定容器
bmcScript.onload = () => {
  setTimeout(() => {
    const bmcButton = document.querySelector('.bmc-button');
    const container = document.getElementById('bmc-button-container');
    if (bmcButton && container) {
      container.appendChild(bmcButton);
    }
  }, 100); // 短延迟确保按钮已被脚本创建
};

补充说明 #

• 延迟时间可根据实际情况调整，保证按钮元素已生成；
• 可通过给容器#bmc-button-container添加CSS，自定义按钮的布局样式；
• 卸载清理函数能避免页面残留无用元素与事件监听器。

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