Madala koodiga tööriistad, nagu WordPress, lihtsustavad ajaveebi loomise protsessi. Saate kasutada valmis teemat ja hakata mõne tunni pärast blogipostitusi kirjutama. Kui soovite oma koodi üle rohkem kontrollida ja teil on veidi aega, on parem luua oma ajaveebi nullist. Protsessi lihtsustamiseks võite isegi kasutada raamistikku, nagu Next.js.

Siit saate teada, kuidas luua lihtsat Next.js ajaveebi, mis renderdab allahindluspostitusi.

Next.js projekti loomine

Next.js on Reacti raamistik, mis lihtsustab rakenduste loomist. See pakub palju tööriistu ja konfiguratsioone, mis võimaldavad teil alustada koodi kirjutamist kohe pärast selle installimist.

Lihtsaim viis Next.js-iga alustamiseks on käivitada terminalis käsk create-next-app:

npx luua-järgmiseks-rakenduse allahindlus-blogi

See käsk loob projekti Next.js, mis sisaldab kõiki käivitamiseks vajalikke faile.

Kõigepealt puhastage index.js fail näeb välja selline:

importida Pea alates 'järgmine/pea'
importida stiilid alates '../styles/Home.module.css'





instagram viewer

eksportidavaikimisifunktsiooniKodu() {
tagasi (
<div className={styles.container}>
<Pea>
<pealkiri>Loo järgmine rakendus</title>
<meta nimi="kirjeldus" sisu="Loodud järgmise rakenduse loomisega" />
<link rel="ikooni" href="/favicon.ico" />
</Head>
</div>
 )
}

Loo Markdowni ajaveebi postitusi

Blogi renderdatakse allahindlusfailid salvestatakse kohapeal projekti kausta. Niisiis, loo juure uus kaust nimega sisu failide salvestamiseks. Looge selles kaustas uus fail nimega create-active-link-nextjs.md ja lisage järgmine:


pealkiri: Kuidas luua aktiivne linksisse Nextjs
kirjeldus: aktiivsete linkide kohandamine kasutades useRouter()
on avaldatud: tõsi
avaldatudKuupäev: 22.07.2022
sildid:
 - järgmine

## Peamine sisu

Allahindlusfaili nimi on osa postituse URL-ist, seega veenduge, et see oleks hea. Pange tähele ka sisu sidekriipsude vahel. Need on postituse metaandmed ja seda nimetatakse esiteks.

Markdowni failide sõelumine

Iga ajaveebi postituse puhul peate analüüsima allahindluse sisu ja esiosa. Markdowni jaoks kasutage react-markdowni ja esiosa andmete jaoks halli ainet.

React-markdown on Reacti komponent, mis on üles ehitatud märkusele, mis teisendab allahindluse ohutult HTML-iks. Hallaine teek analüüsib esiosa ja teisendab YAML-i objektiks.

React-markdowni ja hallaine installimiseks käivitage terminalis järgmine käsk.

npm installida reageeri-markdown hallaine

Looge uues kaustas nimega utils uus fail nimega md.js. Loote abifunktsioonid, mis tagastavad selles failis blogipostituse sisu.

Hankige kõik avaldatud postitused

Lisage faili md.js järgmine kood, et tagastada kõik sisukaustas olevad postitused.

importida fs alates "fs";
importida tee alates "tee";
importida asja alates "hall aine";
eksportidakonst getPath = (kaust: string) => {
tagasi path.join (process.cwd(), `/${folder}`); // Hankige täielik tee 
}


eksportidakonst getFileContent = (failinimi: string, kausta:string) => {
konst POSTS_PATH = getPath (kaust)
 tagasta fs.readFileSync (path.join (POSTS_PATH, failinimi), "utf8");
};


eksportidakonst getAllPosts = (kaust: string) => {
konst POSTS_PATH = getPath (kaust)
tagasi fs
 .readdirSync (POSTS_PATH) // hankige failid kataloogi
 .filter((tee) => /\\.md?$/.test (tee)) // ainult .md failid
 .map((failinimi) => { // kaardistada iga failiga
konst allikas = getFileContent (failinimi, kaust); // toovad faili sisu alla
konst slug = failinimi.replace(/\\.md?$/, ""); // hankige slug failinimest
konst { andmed } = aine (allikas); // frontmatteri väljavõte
tagasi {
 esikülg: andmed,
 nälkjas: nälkjas,
 };
 });
};

Funktsioonis getAllPosts() tehke järgmist.

  • Hankige teemooduli abil sisukausta täielik tee.
  • Hankige failid sisukaustas, kasutades meetodit fs.readdirSync().
  • Filtreerige failid, et hõlmata ainult .md laiendiga faile.
  • Hankige kaardimeetodi abil iga faili sisu, sealhulgas esiosa.
  • Tagastab massiivi, mis sisaldab iga faili esiosa ja slugi (failinimi ilma laiendita .md).

Ainult avaldatud postituste saamiseks saate filtreerida kõik postitused ja tagastada ainult need, mille esiosa isPublished-võti on seatud väärtusele Tõene.

eksportidakonst getAllPublished = (kaust: string) => {
konst postitused = getAllPosts (kaust)
konst avaldatud = posts.filter((postitus) => {
tagasi post.frontmatter.isPublished tõsi
 })
tagasi avaldatud
 }

Lisage faili md.js funktsioon getSinglePost(), et tuua ühe postituse sisu.

eksportidakonst getSinglePost = (nälkjas: string, kausta:string) => {
konst source = getFileContent(`${slug}.md`, kaust);
konst { andmeid: frontmatter, sisu } = mateeria (allikas);
tagasi {
 eesmine asi,
 sisu,
 };
};

See funktsioon kutsub iga faili sisu hankimiseks funktsiooni getFileContent(). Seejärel hangib funktsioon halli aine paketti kasutades esiosa ja allahindluse sisu.

Kuva kõik blogipostitused

Next.js pakub erinevaid renderdusvalikuid, millest üks on staatiline genereerimine. Staatiline genereerimine on eelrenderduse tüüp, kus Next.js genereerib ehituse ajal kõik HTML-lehed. Kasutate seda kiirete staatiliste lehtede loomiseks.

Tutvuge ametlik Nextjs dokumentatsioon renderdamise kohta lisateabe saamiseks.

Next.js eelrenderdab lehe ehituse ajal, kasutades funktsiooni getStaticProps tagastatud rekvisiite. Sel juhul on rekvisiidid avaldatud postituste massiiv.

eksportidakonst getStaticProps = asünkr () => {
 const postitused = getAllPublished("postitusi");
tagasi {
 rekvisiidid: { postitused },
 };
};

Muutke faili index.js, et kuvada ajaveebipostituste loend.

importida Pea alates "järgmine/pea";
importida Link alates "järgmine/link";
importida { getAllPublished } alates "../utils/md";
funktsiooniKodu({ postitusi }) {
tagasi (
<div className={styles.container}>
<Pea>
<pealkiri>Loo järgmine rakendus</title>
<meta nimi="kirjeldus" sisu="Loodud järgmise rakenduse loomisega" />
<link rel="ikooni" href="/favicon.ico" />
</Head>
<div>
 {posts.map((postitus) => (
<artikli võti={post.slug}>
<lk>[ {post.frontmatter.tags.join(", ")} ]</lk>
`postitused/${post.slug}`}>
<a>{post.frontmatter.title}</a>
</Link>{""}
<lk>{post.frontmatter.description}</lk>
</article>
 ))}
</div>
</div>
 );
}


eksportidakonst getStaticProps = asünkr () => {
 const postitused = getAllPublished("sisu");


tagasi {
 rekvisiidid: { postitused },
 };
};
eksportidavaikimisi Kodu;

Kodukomponent kasutab getStaticPropsi tagastatud postitusi. See kordab neid kaardifunktsiooni kasutades ja kuvab iga postituse pealkirja, lingi täieliku postituse juurde ja kirjeldust.

Kuvage ajaveebi postitus

Nagu mainitud, kasutatakse URL-i teedena postituste failinimesid. Need teed on ka dünaamilised, nii et peate need loomise ajal genereerima. Next.js võimaldab seda teha funktsiooni getStaticPaths() abil.

Näiteks selles koodis genereeritakse teed allahindlusfailide nimedest.

eksportidakonst getStaticPaths = asünkr () => {
 const paths = getAllPublished("postitusi").map(({ slug }) => ({ params: { slug } }));
tagasi {
 teed,
 tagavara: vale,
 };
};

Pange tähele, et kasutate varem loodud abifunktsiooni getAllPublished() tagastatud postituste andmeid.

Määrate ka varu väärtuseks false, mis tagastab a 404 viga teede jaoks, mida pole olemas.

getStaticPaths() kasutatakse tavaliselt koos getStaticProps()-ga, mis otsib parameetrite alusel iga postituse sisu.

eksportidakonst getStaticProps = asünkr ({ params }) => {
konst postitus = ootama getSinglePost (params.slug, "postitused");
tagasi {
 rekvisiidid: { ...postitus },
 };
};

HTML-i allahindluse renderdamiseks kasutage react-markdowni.

importida ReactMarkdown alates 'react-markdown'
importida { getAllPosts, getSinglePost } alates "../../utils/md";
konst Postitus = ({ sisu, esindus }) => {
tagasi (
<div>
<lk>{frontmatter.tags.join(', ')}</lk>
<h2>{frontmatter.title}</h2>
<ulatus>{frontmatter.publishedDate}</span>
<ReactMarkdown>{sisu}</ReactMarkdown>
</div>
 );
};

See komponent renderdab iga ajaveebi postituse sisu ja sellele vastava URL-i.

Kui loote arendaja ajaveebi, saate seda teha lisada süntaksi esiletõst võime iga komponendi jaoks.

Next.js Markdowni ajaveebi stiili kujundamine

Siiani olete loonud Next.js-i allahindlusblogi, mis kuvab ajaveebipostituste loendi ja renderdab selle postituse sisu. Et ajaveebi ilusam välja näeks, tuleks lisada CSS-stiile.

Next.js-l on hea CSS-i tugi ja saate kasutada CSS-in-JS-i teeke nagu stiiliga komponente. Kui eelistate CSS-i JS-ist eraldada, võite kasutada CSS-mooduleid.