komponents

외부링크와 내부링크를 자동으로 탐지하기 w/ SvelteKitAutomatically detects external and internal links w/ SvelteKit

@ O612

SvelteKit에서는 Link 없이 바로 쓸 수 있습니다.

In SvelteKit, you can write directly without a Link.

언어
Svelte
타입스크립트 사용 여부
TypeScript사용함

컴포넌트Component

국문Korean

// src/lib/컴포넌트/앵커.svelte

<script lang="ts">
  export let 주소: string;

  const 도메인정규식 = /http[s]*:\/\/[www.]*domain\.com[/]?/;

  let 도메인비교 = 도메인정규식.test(주소);

  if (도메인비교) {
    주소 = 주소.replace(도메인정규식, '/');
  }
</script>

{#if href.startsWith('/')}
  <a {주소} {...$$props}><slot /></a>
{:else if !href.startsWith('http')}
  <a {주소} {...$$props}><slot /></a>
{:else}
  <a {주소} target="_blank" rel="noopener noreferrer nofollow" {...$$props}><slot /></a>
{/if}

영문English

// src/lib/components/Anchor.svelte

<script lang="ts">
  export let href: string;

  const domainRegex = /http[s]*:\/\/[www.]*domain\.com[/]?/;

  let sameDomain = domainRegex.test(href);

  if (sameDomain) {
    href = href.replace(domainRegex, '/');
  }
</script>

{#if href.startsWith('/')}
  <a {href} {...$$props}><slot /></a>
{:else if !href.startsWith('http')}
  <a {href} {...$$props}><slot /></a>
{:else}
  <a {href} target="_blank" rel="noopener noreferrer nofollow" {...$$props}><slot /></a>
{/if}

사용방법How to use

국문Korean

// routes/+page.svelte

<script lang="ts">
  import 앵커 from '$lib/컴포넌트/앵커.svelte';
</script>

<앵커 주소=`링크 경로`>헬로 월드</앵커>

영문English

// routes/+page.svelte

<script lang="ts">
  import LinkButton from '$lib/components/Anchor.svelte';
</script>

<Anchor href=`LinkUrl`>Hello world</AnchorLink>