アストロスクロールアンカー:滑らかなスクロールを見出し

32300 ワード
javascript astro webdev テキストリンク

⚓️ 何がAstroと何がアンカーにスクロールですか？


このポストでは、あなたの静的サイトに機能をアンカーするために、Astro Scrollを構築する方法を見ます.しかし、我々はそれに着手する前に、我々は、アストロとアンカーをスクロールするには、迅速なピークを取る必要があります.アストロは、高速なWebサイトを構築することができます新しい静的サイトビルダーです.そのスピードへの秘密は、部分的な水和と呼ばれるもので、開発者として、ページ上のJavaScriptがより多くの制御を受けることを意味します.あなたは、何も必要でないとき、ゼロのJavaScriptを出荷することさえできます.アンカーへのスクロールは、我々は見出しの上にホバーした場合小さなリンクのアイコンが表示されるサイトに期待して来ている素晴らしい機能です.リンクをクリックしてスムーズにその見出しにスクロールするだけでなく、コピーして、将来の参考のためにそれを保存することができます.

🧱 我々の建物



アストロのスーパーパワーが部分的な水和であると言って、我々は全く水和なしでスクロール機能を造ろうとしています.JavaScriptは、私たちのページが必要です意味我々は、スムーズなスクロールとリンクのオートショーを追加します/非表示のCSSを使用します.あなたが点灯、反応、SvelteまたはVueとアストロを使用することができますが、我々は機能を追加するには、純粋なアストロコンポーネントを作成します.これは、あなたの好みのフレームワークを使用して独自のAstroプロジェクトで使用するコードをリサイクルすることをより簡単にします.あなたがもっと知りたいならば、Astroを紹介しているポストを見てくださいpartial hydration and Astro’s islands architecture .
あなたがAstroに新しいならば、これを穏やかな導入と考えてください.しかし、しかし、あなたはすでにあなたのアストロアプリケーションにSVGのアイコンを追加するには、新しい効率的な方法が表示されますアストロといくつかの経験がある場合.これは、単一の依存関係を追加するだけで、任意のアイコンライブラリからアイコンを選択できるようになる.

🚀 始める


私たちは簡単に既存のプロジェクトに追加することができますを参照してください、しかし、もしあなたが次のプロジェクトに追加することができますだけで、次のプロジェクトに追加することができますアストロに新しいです!新しいプロジェクトを起動している場合は、端末でボールをローリングしましょう.
mkdir astro-scroll-to-anchor && cd $_
pnpm init astro
pnpm install
pnpm run dev
用途yarn or npm あなたがそれらを好むならばpnpm . テンプレートの一覧から最小値を選択します.Astro devサーバは通常ポート上で動作します3000 しかし、すでに実行されている何かがあるならば、それは次の利用できるポートを見つけます.次に、どのポートが解決したかをターミナルに教えます.

ここではポート3001を持ち、localhostのリンクでページにアクセスできます.これは素晴らしい機能ですが、一度に1つだけサーバーを実行することを確認!あなたは、複数のサーバーを実行することができますが、私はすでにプレビューモードで実行している間、私は新しいdevのサーバーを展開しているカップル.もちろん、プレビューの1つは、ブラウザで開いていたと私はなぜコードの変更を表示していないことができませんでした.
いずれにしても、あなたが一緒に続いているならば、ゼロから始めてくださいsrc/pages/index.astro これで
---
// frontmatter section - nothing to see here yet
---

<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro Scroll to Anchor</title>
  </head>
  <body>
    <main class="container">
      <div class="wrapper">
        <h1>
          <Heading text="Astro Scroll to Anchor" id="astro-scroll-to-anchor" />
        </h1>
        <h2>Lorem ipsum" /></h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Suscipit adipiscing bibendum est ultricies integer quis.
          Tortor vitae purus faucibus ornare suspendisse sed nisi lacus sed. At erat pellentesque
          adipiscing commodo elit at imperdiet. Suscipit adipiscing bibendum est ultricies integer
          quis auctor. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Imperdiet
          sed euismod nisi porta. Non blandit massa enim nec. Etiam dignissim diam quis enim
          lobortis scelerisque fermentum dui. Suspendisse sed nisi lacus sed viverra tellus in.
          Metus dictum at tempor commodo ullamcorper a. A scelerisque purus semper eget duis at.
          Ultrices dui sapien eget mi proin sed libero. Cursus metus aliquam eleifend mi in nulla
          posuere sollicitudin.
        </p>
        <h2>Amet porttitor</h2>
        <p>
          Amet porttitor eget dolor morbi. Ullamcorper eget nulla facilisi etiam dignissim diam quis
          enim. Cras tincidunt lobortis feugiat vivamus at. Eleifend donec pretium vulputate sapien
          nec sagittis aliquam malesuada bibendum. Curabitur gravida arcu ac tortor dignissim.
          Scelerisque purus semper eget duis. Amet nulla facilisi morbi tempus iaculis urna id. Et
          ligula ullamcorper malesuada proin libero. Risus pretium quam vulputate dignissim
          suspendisse in. Nec dui nunc mattis enim ut tellus elementum. At quis risus sed vulputate
          odio. Facilisi cras fermentum odio eu feugiat pretium. Lorem ipsum dolor sit amet
          consectetur. Sit amet massa vitae tortor condimentum lacinia quis. Amet volutpat consequat
          mauris nunc congue nisi vitae suscipit tellus. Posuere lorem ipsum dolor sit amet
          consectetur adipiscing elit duis. Ac turpis egestas integer eget aliquet nibh. In nibh
          mauris cursus mattis.
        </p>
        <h2>Blandit turpis</h2>
        <p>
          Blandit turpis cursus in hac habitasse platea. Egestas tellus rutrum tellus pellentesque
          eu. In eu mi bibendum neque. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor.
          Augue mauris augue neque gravida. Tristique nulla aliquet enim tortor at auctor. A
          pellentesque sit amet porttitor. Pharetra pharetra massa massa ultricies mi. Fringilla ut
          morbi tincidunt augue interdum velit euismod in pellentesque. Et leo duis ut diam quam
          nulla porttitor. Pharetra diam sit amet nisl suscipit. Lorem donec massa sapien faucibus.
          Tempor orci eu lobortis elementum nibh tellus. Urna porttitor rhoncus dolor purus non enim
          praesent elementum facilisis. Sed nisi lacus sed viverra tellus in hac habitasse.
          Fermentum leo vel orci porta non pulvinar neque laoreet suspendisse. Enim facilisis
          gravida neque convallis a cras. Enim nunc faucibus a pellentesque sit amet porttitor. Cras
          fermentum odio eu feugiat pretium.
        </p>
        <h2>Arcu dui</h2>
        <p>
          Arcu dui vivamus arcu felis bibendum ut tristique. Congue eu consequat ac felis donec et
          odio. Semper feugiat nibh sed pulvinar proin gravida hendrerit. Libero nunc consequat
          interdum varius sit. At volutpat diam ut venenatis. Euismod quis viverra nibh cras.
          Vestibulum morbi blandit cursus risus. Risus viverra adipiscing at in tellus integer
          feugiat scelerisque. Tristique senectus et netus et malesuada fames ac. Amet risus nullam
          eget felis eget nunc lobortis. Nisl pretium fusce id velit ut tortor pretium viverra.
          Turpis egestas sed tempus urna et pharetra pharetra massa massa. Fermentum dui faucibus in
          ornare quam viverra orci sagittis. Nam libero justo laoreet sit. Eget velit aliquet
          sagittis id consectetur purus ut faucibus pulvinar. Nullam ac tortor vitae purus faucibus
          ornare suspendisse.
        </p>
        <h2>Tellus in hac</h2>
        <p>
          Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Dignissim
          sodales ut eu sem integer vitae justo. Nunc vel risus commodo viverra. Nunc sed blandit
          libero volutpat sed cras. Arcu risus quis varius quam quisque id. Tristique sollicitudin
          nibh sit amet commodo nulla facilisi. Sed vulputate mi sit amet mauris commodo quis
          imperdiet. Tristique sollicitudin nibh sit amet commodo nulla facilisi. Tellus at urna
          condimentum mattis. Feugiat scelerisque varius morbi enim. Sit amet aliquam id diam
          maecenas ultricies mi. Lectus quam id leo in vitae turpis massa sed. Felis donec et odio
          pellentesque diam volutpat commodo sed egestas. Facilisis gravida neque convallis a cras
          semper. Velit laoreet id donec ultrices tincidunt. Sed lectus vestibulum mattis
          ullamcorper velit. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend.
        </p>
      </div>
    </main>
  </body>
</html>

<style>
  /* raleway-regular - latin */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: local(''), url('/fonts/raleway-v26-latin-regular.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: local(''), url('/fonts/raleway-v26-latin-700.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 900;
    src: local(''), url('/fonts/raleway-v26-latin-900.woff2') format('woff2');
  }

  :global(html) {
    --colour-background-hue: 47.36;
    --colour-background-saturation: 100%;
    --colour-background-luminance: 52.55%;

    --colour-text-hue: 282.86;
    --colour-text-saturation: 53.85%;
    --colour-text-luminance: 35.69%;

    --font-family-heading: Montserrat;
    --font-family-body: Raleway;

    --font-size-1: 1rem;
    --font-size-5: 2.441rem;
    --font-size-6: 3.052rem;

    --font-weight-bold: 700;
    --font-weight-black: 900;

    --line-height-relaxed: 1.75;

    --max-width-full: 100%;
    --max-width-wrapper: 38rem;

    --spacing-20: 5rem;

    background-color: hsl(
      var(--colour-background-hue) var(--colour-background-saturation)
        var(--colour-background-luminance)
    );
    color: hsl(var(--colour-text-hue) var(--colour-text-saturation) var(--colour-text-luminance));
  }

  :global(h1),
  :global(h2) {
    font-family: var(--font-family-heading);
  }

  :global(h1) {
    font-size: var(--font-size-6);
    font-weight: var(--font-weight-black);
  }
  :global(h2) {
    font-size: var(--font-size-5);
    font-weight: var(--font-weight-bold);
  }

  :global(p) {
    font-family: var(--font-family-body);
    font-size: var(--font-size-1);
    line-height: var(--line-height-relaxed);
  }

  .container {
    display: flex;
    align-items: center;
    padding-bottom: var(--spacing-20);
  }

  .wrapper {
    width: var(--max-width-full);
    max-width: var(--max-width-wrapper);
    margin: 0 auto;
  }
</style>
これは、いくつかのプレースホルダのテキストでは、いくつかのアストロ機能を我々はAstroのスクロール機能をアンカーを構築しようとします.

アストロファイルの解剖


Markdownファイルのように、アストロファイルにもFrontMatterセクションがあります.パッケージをインポートするだけでなく、出力用のJavaScriptを実行できます.また、フロントエンドでTypeScriptを使用することもできます.
ファイルの次の部分は本質的にテンプレートです.スクリプトタグにJavaScriptスクリプトを含めることができますが、実際にこのセクションの中でJavaScriptコードを実行することはできません(これは、例えば、反応で使用されるかもしれないJSXとは異なります).あなたがHTML/JavaScriptのみの背景から来ている場合、それを拾うのは簡単にHTMLの意味のsupersetです.
最後に底にスタイリングがあります.あなたのアストロファイルのスクリプトタグ内でこのように含めることができます.代替として、典型的なプロジェクトについては、グローバルCSSスタイルシートを作成することができますし、あなたの宇宙フロンティアにインポートします.この場合、このスタイルタグの現在のページのスタイルを含めることもできます.グローバルスタイルシートを使用したい場合は、どこかに保存してくださいsrc あなたのプロジェクトのフォルダをインポートします.

最後の準備


前に、我々はサイト上で使用するいくつかの自己ホストフォントをダウンロードしてください.保存raleway-latin-400-normal.woff2 and raleway-latin-700-normal.woff2 一緒にraleway-latin-900-normal.woff2 新たにpublic/fonts プロジェクト内のディレクトリ.

🧩 見出しコンポーネント


マークアップとスタイラスのためのスタイリングはアンカー機能を新しいアストロコンポーネントファイルに移動します.あなたは、Astroのコンポーネントだけでなく、ページを作成することができます.コンポーネントは、あなたが反応またはSveletKitアプリで持っているものに似ています.クリエイトアsrc/components フォルダとそのディレクトリ内の新しいHeading.astro ファイルを追加する
---
import { Icon } from 'astro-icon';

const { 'aria-label': ariaLabel, id, text } = Astro.props;

const href = `#${id}`;
---

<span {id} class="container">
  {text}
  <a aria-label={ariaLabel} {href}
    ><span class="anchor-link"><Icon name="heroicons-solid:link" /> </span></a
  >
</span>

<style lang="css">
  .anchor-link {
    visibility: hidden;
  }

  a {
    color: hsl(var(--colour-text-hue) var(--colour-text-saturation) var(--colour-text-luminance));
    text-decoration: none;
  }

  [astro-icon] {
    display: inline;
    width: var(--font-size-5);
    vertical-align: middle;
  }

  .container:focus .anchor-link,
  .container:hover .anchor-link {
    visibility: visible;
  }
</style>
ここでいくつかの宇宙機能を参照してください.まず、私たちのホームページのように3つのセクションがあります:フロントエンド、マークアップとスタイル.最初の行ではastro-icon パッケージでは、アストロメンテナ.これはAnthony Fu's fantastic iconês library ( iconifyパッケージで使用する).あなたがまだそれを聞いていないならば、それは確かに探索する価値があります.あなたが存在するすべてのライブラリからアイコンを見つけることができるアイコンのサイトに移動します.あなたのアプリとフードの下にしたいのアイコンを選ぶことができます.astro-icon 効率的に必要なものだけをインポートします.
私たちはラインでアイコンを使う12 , あなたはアイコンのアイコンのサイトにしたいアイコンを選択し、それはあなたの名前として追加するには<Icon> コンポーネントのインスタンス.その前にパッケージをインストールする必要があります.
pnpm add -D astro-icon
に設定し、astro.config.mjs プロジェクトのルートフォルダで
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  // Comment out "renderers: []" to enable Astro's default component support.
  renderers: [],
  vite: {
    ssr: {
      external: ['svgo'],
    },
  },
});

アストロプロップス


イン・ライン4 のHeader.astro Astroコンポーネントの小道具にアクセスする方法を参照してください.次の手順でホームページのマークアップにこれらを含めるでしょう.つの小道具は、スクロールリンクを作成するために使用されるIDと一緒にタイトルのテキストになります.これは、我々が作成する各リンクに一意である必要があります.我々は実際にtext マークアップのプロップ10 .
移動する11 私たちはあなたがSvelteを知っている場合は、これは身近なショートカットを使用します.変数の名前が、我々が割り当てたい属性の名前にマッチするたびに、このショートカットを使うことができます.
  <a aria-label={ariaLabel} {href}>
と等価です.
<a aria-label={ariaLabel} href={href}>
最後に26 –30は、我々はスタイルをアイコンを[astro-icon] . ホームページで定義されているグローバルCSS変数は、コンポーネントで利用可能です.

🔌 新しいコンポーネントの使用


新しいコンポーネントを使用すると簡単です.更新しましょうsrc/pages/index.astro まず、私たちの新しいHeading コンポーネント
---
import Heading from '../components/Heading.astro';
---
そして、それを見出しに使う
<div class="wrapper">
  <h1>
    <Heading text="Astro Scroll to Anchor" id="astro-scroll-to-anchor" />
  </h1>
  <h2><Heading id="lorem-ipsum" text="Lorem ipsum" /></h2>
  <p>

<h2><Heading id="amet-porttitor" text="Amet porttitor" /></h2>

<h2><Heading id="blandit-turpis" text="Blandit turpis" /></h2>

<h2><Heading id="arcu-dui" text="Arcu dui" /></h2>

<h2><Heading id="tellus-in-hac" text="Tellus in hac" /></h2>

代替実施


私たちはテキストを小道具として渡しています.これは、コンポーネントのタイトルテキストへのアクセスを簡単にするためです.たとえば、Widgetsを削除するコードを追加できます.これは、単一の短い単語を1行だけでタイポグラファーのペットペストです.コンポーネントを書き換えるには、見出しコンポーネントの間に挟まれたタイトルテキストを受け入れます.
<!-- EXAMPLE ONLY WILL NOT WORK WITHOUT UPDATING Heading COMPONENT -->
<h2><Heading id="tellus-in-hac">Tellus in hac</h2>
次に、見出しコンポーネントで、マークアップで置換する必要があります{text} with <slot/> . 我々は詳細には、ここでは、ちょうど別の方法が存在することをお知らせします.
場合は、保存し、見出しのいずれかの上にホバー、アイコンを表示する必要があります.

🛹 滑らかなスクロールの追加


最後の欠落部分は、スムーズなスクロールを得るためにCSSのタッチを追加することです.これは、直感的に見えるかもしれませんが、我々は減少運動を好むユーザーの機能をオフに切り替えます.これは、長いページでは、スクロールはかなり迅速であり、前庭障害を持つサイトの訪問者で吐き気を誘発する可能性があります.
<style>
  :global(html) {

    /* ...TRUNCATED */

    color: hsl(var(--colour-text-hue) var(--colour-text-saturation) var(--colour-text-luminance));

        scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    :global(html) {
      scroll-behavior: auto;
    }
  }
それは今です!次にテストしましょう.

🙌🏽 アストロスクロールアンカー


この投稿では、アストロに紹介して見ました.
  • インストゥルメントをアストラルコンポーネントに渡し、コンポーネント内からアクセスする方法
  • あなたのアストロアプリケーションにSVGアイコンを追加する便利で効率的な方法です.
  • どのようにスムーズにスクロールをよりアクセスできるようにします.
    • アプリのための完全なコードが利用可能ですAstro demo repo on Rodney Lab GitHub .
    私はこの記事が有用であることを発見し、あなた自身のプロジェクトでどのようにアストロコードを使用する計画を聞いて熱心です.

    🙏🏽 アストロスクロールアンカー


    そのポストは役に立ちましたか.代わりに別のトピックの記事を見たいですか?新しい投稿のアイデアと連絡を取る.また、もしあなたが私のライティングスタイルが気に入ったら、あなたの会社のサイトにいくつかの記事を書くことができます.記事を読む上で、さらに以下のタッチを取得する方法を見つける.あなたがこの1つに類似したポストを支持したいならば、数ドル、ユーロまたはポンドを準備することができますconsider supporting me through Buy me a Coffee .
    最後に、あなたのソーシャルメディアアカウントの投稿を共有すること自由に感じているすべてのあなたの信者は、それが役に立つでしょう.だけでなく、以下のコメントを残して、あなたはTwitterやaskRodney on Telegram . また、further ways to get in touch with Rodney Lab . 定期的に投稿Astro だけでなくSvelteKit . Also subscribe to the newsletter to keep up-to-date 我々の最新プロジェクトで.
    3.中間文字を入力
    反応ルータ:基礎