框架整合

你可以在任何框架中使用 emfont！以下是幾個小提醒：

元素要保留 emfont 的 class。
小元件局部渲染，可以使用 root 參數，只針對那塊重新掃描。
動態更新內容後（比如聊天室、編輯器、動態清單）一定要自己再呼叫一次 emfont.init({ root })。

以下是一些常見框架的範例：

React / Next.js

靜態使用：
元件掛載時只執行一次 emfont.init()。

useEffect(() => {
    import('https://font.emtech.cc/emfont.js').then((mod) => {
        mod.emfont.init();
    });
}, []);

動態追蹤：
內文改變時，針對該元素重新 init。

import { useEffect, useRef } from 'react';
 
export default function App({ content }) {
    const textRef = useRef(null);
 
    useEffect(() => {
        import('https://font.emtech.cc/emfont.js').then((mod) => {
            if (textRef.current) {
                mod.emfont.init({ root: textRef.current });
            }
        });
    }, [content]);
 
    return <p className="emfont-jfopenhuninn" ref={textRef}>{content}</p>;
}

Vue 3 / Nuxt 3

靜態使用：
元件掛載時執行一次 emfont.init()。

<script setup>
import { onMounted } from 'vue'
 
onMounted(async () => {
    const mod = await import('https://font.emtech.cc/emfont.js')
    mod.emfont.init()
})
</script>

動態追蹤：
資料改變時，指定元素重新 init。

<script setup>
import { ref, watch } from 'vue'
 
const content = ref('Hello')
const textRef = ref(null)
 
watch(content, async () => {
    const mod = await import('https://font.emtech.cc/emfont.js')
    if (textRef.value) mod.emfont.init({ root: textRef.value })
})
</script>
 
<template>
  <p class="emfont-jfopenhuninn" ref="textRef">{{ content }}</p>
</template>

Svelte / SvelteKit

靜態使用：
元件初始化時 init。

<script>
  import { onMount } from 'svelte';
 
  onMount(async () => {
    const mod = await import('https://font.emtech.cc/emfont.js');
    mod.emfont.init();
  });
</script>

動態追蹤：
當文字變動時重新對元素 init。

<script>
  import { onMount } from 'svelte';
  let textRef;
  export let content;
 
  $: if (content) {
    import('https://font.emtech.cc/emfont.js').then((mod) => {
      if (textRef) mod.emfont.init({ root: textRef });
    });
  }
</script>
 
<p class="emfont-jfopenhuninn" bind:this={textRef}>{content}</p>

Astro

靜態使用：
因為 Astro 預設是 SSR，通常載入一次就夠。

<p class="emfont-jfopenhuninn">Hello emfont</p>
 
<script type="module">
    import "https://font.emtech.cc/emfont.js";
    emfont.init();
</script>

動態追蹤：
如果是使用像 React/Vue 子元件，可以用它們各自的方法（見上）。

Angular

靜態使用：
在元件初始化後執行一次。

import { AfterViewInit } from '@angular/core';
 
export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    import('https://font.emtech.cc/emfont.js').then((mod) => {
      mod.emfont.init();
    });
  }
}

動態追蹤：
使用 @ViewChild 搭配 ngAfterViewChecked 重新 init。

import { AfterViewChecked, ElementRef, ViewChild } from '@angular/core';
 
export class AppComponent implements AfterViewChecked {
  @ViewChild('textRef') textRef!: ElementRef;
 
  ngAfterViewChecked() {
    import('https://font.emtech.cc/emfont.js').then((mod) => {
      if (this.textRef) {
        mod.emfont.init({ root: this.textRef.nativeElement });
      }
    });
  }
}

<p #textRef class="emfont-jfopenhuninn">{{ content }}</p>

SolidJS

靜態使用：
元件載入時執行一次。

import { onMount } from 'solid-js';
 
export default function App() {
  onMount(() => {
    import('https://font.emtech.cc/emfont.js').then((mod) => {
      mod.emfont.init();
    });
  });
 
  return <p class="emfont-jfopenhuninn">Hello emfont</p>;
}

動態追蹤：
綁定元素並監聽變數。

import { createEffect } from 'solid-js';
 
export default function App(props) {
  let textRef;
 
  createEffect(() => {
    import('https://font.emtech.cc/emfont.js').then((mod) => {
      if (textRef) mod.emfont.init({ root: textRef });
    });
  });
 
  return <p class="emfont-jfopenhuninn" ref={(el) => textRef = el}>{props.content}</p>;
}

Qwik

靜態使用：
用 useVisibleTask$ 加載 emfont。

import { useVisibleTask$ } from '@builder.io/qwik';
 
export default component$(() => {
  useVisibleTask$(() => {
    import('https://font.emtech.cc/emfont.js').then((mod) => {
      mod.emfont.init();
    });
  });
 
  return <p class="emfont-jfopenhuninn">Hello emfont</p>;
});

動態追蹤：
監聽元素變動，局部 re-init。

import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';
 
export default component$(() => {
  const textRef = useSignal<HTMLElement>();
 
  useVisibleTask$(({ track }) => {
    track(() => textRef.value);
    if (textRef.value) {
      import('https://font.emtech.cc/emfont.js').then((mod) => {
        mod.emfont.init({ root: textRef.value });
      });
    }
  });
 
  return <p class="emfont-jfopenhuninn" ref={textRef}>Hello emfont</p>;
});

WordPress / 傳統網站

WordPress 可以自訂 HTML，或是在 header.php 或佈景主題中加入：

靜態使用：
在頁面 HTML 完成後一次初始化。

<script src="https://font.emtech.cc/emfont.js" defer></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        emfont.init();
    });
</script>

然後在文章或小工具內使用 class="emfont-xxxx" 即可。

動態追蹤：
內文手動更新後，針對該元素重新 init。

<p id="my-paragraph" class="emfont-jfopenhuninn">原本內容</p>
<button onclick="updateParagraph()">更新內文</button>
 
<script>
function updateParagraph() {
    const el = document.getElementById('my-paragraph');
    el.innerHTML = '新的內文';
    emfont.init({ root: el });
}
</script>

框架整合

On this page