?? ??? ??? ?????? ??? ?????. ?? ???? ??? ????? ?? ? ??? ??? ?? ? ??? ?? ? ? ?? ?? ??? ??? ?????.

Astro? ??? ?? ??? ??? ??? ?? ? ??? ??? ?????. Astro Actions? ?? ? ??? ?? ?? ?? ? ?? ???? ???? ??? ?? ??? ??????. ???? ?? ???? ?? ??? ???? ????? ??? ?? ?? ???, SAAS ??? ?? ?? ??? ???? ?? ?? ? ? ??? ?????.

Astro? ??? ?? ?? ?? ??? ????? ?? ? ?? (? : Fuse.js)? ?? ??? ?????. ? ??? fuse.js? ???? ?? ?? ?? ? ??? ??? ???? ?? ??? ?? ??? ?????.

Github ??? ??

???? ??

?? Astro ???? ?? :

 NPM Astro@???? ????

????? ????? :

• ???? ?? : (???? ????, ?? ??, ./astro-search )
• ???? ??? : ?? ?????? ???
• ??? ?? : ?
• GIT ??? ??? : ??

???? ????? ???? npm run dev ??????. ?? Astro ????? ?????.

?? ??

?? ???? ??? ( /src/pages/index.astro )? ??????. ?? ?? CSS ?? :

 NPX Astro Add Tailwind

CLI ??? ?? Tailwind? ??????. /src/pages/index.astro ? ?? ?? ?? ??????.

 ---
// ./src/pages/index.astro
'../layouts/layout.astro'?? ???? ?? ??;
---

<layout>
  <div>
    <h1>? ?? ???</h1>
    <p>??? ??? ??? ??? ?? ?? 10 ????.</p>
  </div>
</layout>

??? ??? ??

??? ??? ??? (?? ?? ??? GitHub ???? 110 ? ??? ?? ??)? ??????. ??? ???? ???? /src/data/bookmarks.json ? ????. (?? ???? ?? ??? ??????).

?? Astro? ??? ??? API? ??????. /src/content.config.ts ??? :

 "Astro : Content"?? {definecollection, z} ?? ??;
'Astro/Loaders'?? {file} ?? ??;

const ??? = ?? ?? ({{
  ??? : Z.Object ({
    pagetitle : z.string (),
    URL : z.string (),
    ?? : z.string (). ?? ()
  }),
  ?? : ?? ( "src/data/bookmarks.json"),
});

???? const ??? = {???};

??? ?? ?????? ( npm run dev ).

??? ??

/src/pages/index.astro ? bookmarks ???? ???? ??????.

 ---
'../layouts/layout.astro'?? ???? ?? ??;
'Astro : Content'?? {getCollection} ?? ??;

const ??? = getCollection ( '???');
---

<layout>
  <div>
    <h1>? ?? ???</h1>
    <p>??? {bookmarks.length} ??????</p>

    <h2>?? ???</h2>
    <ul>
      {Bookmarks.slice (0, 10) .map ((??) => (
        <li>
          <a href="http://www.miracleart.cn/link/881ad08b23bec80777fe4bce8bee4e0a">
            </a>{item.ataa..pagetitle}
            <p>{item..description}</p>
          
        </li>
      ))}
    </ul>
  </div>
</layout>

?? ??? ???? ?????.

?? ? JavaScript? ?? ??

? ?? ?? /src/components/Search.astro ? ???? :

Astro ?? ??

Netlify ?? ?? :

 NPX Astro? NetLify? ?????

?? ??? ?? /src/actions/index.js ??????.

 // ... (Fuse.js? ???? ?? ????? ?? ?? ??) ...

?? ??

?? ?? ??? JavaScript? ?????? actions.search ??? ?????? (?? ??? ????? Fuse.js? ?? ??? ?????? ?? ??).

??

? ??? ???? Astro Actions ? Fuse.js? ???? ?? ??? ???? ? ???? ???? ??? ? ??? ?????. ?? ? ??? ?? ???? ?? ? ?? ??? ???????. ?? ?????? ??? ?? ?? ? Astro Islands ??? React? ?? ?? ????? ? ??? ??? ???? ?? ??? ? ????.

? ??? Astro Actions ? Fuse.js? ??? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!