Section 7
フックを使う
Astro SarkaraではAstroコンポーネントだけではなくフックを用意しています。
よく使うフック
useLink(href, options)
リンクの種別を自動に判別し、ベースパスの自動的な付与と属性を取得するフック。
例えばサイト内リンクのとき、href="/posts/"
、サイトのベースパスが/base-path
とすると、useLink(href)
の返り値は{ href: "/base-path/posts/" }
となる。
外部リンクの場合、href="https://panda-css.com/"
とすると、useLink(href)
の返り値は{ href: "https://panda-css.com/", target: "_blank", rel: "noreferrer noopener" }
となる。
---
import type { HTMLAttributes } from "astro/types";
import { useLink } from "@cieloazul310/astro-sarkara";
type Props = HTMLAttributes<"a">;
const { href, ...props } = Astro.props;
const link = useLink(href);
/*
=> {
href: string | URL | null;
target?: "_blank";
rel?: "noreferrer noopener";
}
*/
---
<a {...props} {...link}>
<slot />
</a>
TypeScript
docs.astro.build