Nuxt内容のヘッダーにクリック可能なアンカーリンクを加えてください

ドキュメントサイトを閲覧しているときは、ちょっとしたリンクやハッシュのテキストを越えたときに表示されるハッシュのアイコンがあることがよくわかります.

これらは、そのヘッダーのアンカータグにリンクしているため、これらのドキュメントは、ドキュメントの特定のセクションを簡単に共有することが素晴らしいです.🤝
私はCleavr's documentation siteを使用している間、私はNuxtJS Content module Aを作成しました.あなたのサイトを訪問する場合は、また、この機能を有効になっていることに気づくでしょう.
それで、もちろん、私は割れ目の医者のためにそれをしたかったです!
あなたがタップすることができるクラスa hrefとiconとスタイルのicon-linkタグがあるので、それは比較的簡単に追加することです.
あなただけのリンクを公開するいくつかのスタイルを追加する必要があります.
私はそれを表示する方法を示すCreate a Blog with Nuxt Contentに参照があったが、それは私だけでは、ヘッダーのテキスト上のホバーを表示するアイコンをしたい半分の仕事をしないでください.
NuxtコンテンツとTailWindCSSを使用している場合は、次のように動作します.

静的ディレクトリにアイコンを追加する
たとえば、私はthe hero icons link icon

更新CSS
次に、static/icons/link.svgファイルを次のように更新しました.

.icon.icon-link {
  @apply absolute  opacity-0 h-4 -ml-6 w-10 bg-no-repeat;
  background-image: url('/icons/link.svg');
  margin-top: 6px
}

h2:hover .icon.icon-link, h3:hover .icon.icon-link, h4:hover .icon.icon-link, h5:hover .icon.icon-link {
  @apply opacity-100;
}

そして、それ!
不透明度の上にホバーの場合は、クリーナー探している方法を知っている場合は、以下のコメントしてください!🙏