主页 / coding / 问题 / 79175682
Accepted
Gumrai Aung
Asked: 2024-11-11 04:13:51 +0800 CST

Svelte 中的 Buy Me Coffee 脚本标签

  • 772

我如何在 svelte 中添加这个 buymecoffee 脚本标签。

  type="text/javascript"
  src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js"
  data-name="bmc-button"
  data-slug="slug_name"
  data-color="#FFDD00"
  data-emoji="☕"
  data-font="Lato"
  data-text="Buy me a coffee"
  data-outline-color="#000000"
  data-font-color="#000000"
  data-coffee-color="#ffffff"
></script>;

我的页面中已经有另一个脚本标签，如下所示：

<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);
    });
  </script>

我如何才能将这两个脚本标签合并到一个页面中。是否可以将 buymecoffee 按钮放置在我想要的位置？

svelte

1 个回答

  1. Best Answer

    可以通过将常规脚本标签嵌套在元素内来插入它们（只能有一个顶层<script>，它是特殊的，用于 Svelte 的组件逻辑）。例如

    <script>
  <!-- [component code] -->
</script>

<div>
  <script ...>
</div>

    <head>您还可以使用特殊<svelte:head>元素将脚本移动到。

    <svelte:head>
  <script ...>
</svelte:head>

    如果脚本以 ESM 格式提供，您也可以直接import从顶层获取它<script>。

    • 1

相关问题