Orodja z nizko kodo, kot je WordPress, poenostavljajo postopek ustvarjanja spletnega dnevnika. Uporabite lahko vnaprej pripravljeno temo in začnete pisati objave v spletnem dnevniku v nekaj urah. Če želite več nadzora nad svojo kodo in imate nekaj časa na voljo, je bolje, da svoj spletni dnevnik ustvarite iz nič. Za poenostavitev postopka lahko uporabite celo ogrodje, kot je Next.js.

Naučite se ustvariti preprost blog Next.js, ki upodablja objave z oznako.

Ustvarjanje projekta Next.js

Next.js je ogrodje React, ki poenostavi, kako gradite aplikacije. Ponuja številna orodja in konfiguracije takoj po namestitvi, kar vam omogoča, da začnete pisati kodo.

Najenostavnejši način za začetek uporabe Next.js je zagon ukaza create-next-app v terminalu:

npx ustvariti-Naslednji-app markdown-blog

Ta ukaz ustvari projekt Next.js, ki vsebuje vse potrebne datoteke za zagon.

Najprej najprej počistite index.js datoteka izgleda takole:

uvoz glava od 'naprej/glava'
uvoz stilov od '../styles/Home.module.css'
izvozprivzeto





instagram viewer


funkcijodomov() {
vrnitev (
<div className={styles.container}>
<glava>
<naslov>Ustvari naslednjo aplikacijo</title>
<meta ime="opis" vsebina="Ustvarjeno z ustvarjanjem naslednje aplikacije" />
<povezava rel="ikona" href="/favicon.ico" />
</Head>
</div>
 )
}

Ustvarite objave v spletnem dnevniku Markdown

Blog bo upodobljen markdown datoteke shranjen lokalno v mapi projekta. Torej ustvarite novo mapo v korenu, imenovanem vsebino za shranjevanje datotek. V tej mapi ustvarite novo datoteko z imenom create-active-link-nextjs.md in dodajte naslednje:


Naslov: Kako ustvariti aktivni povezavav Nextjs
opis: Prilagajanje aktivnih povezav z uporabo useRouter()
je objavljeno: prav
objavljeno: 22.7.2022
oznake:
 - Naslednji

## Glavna vsebina

Ime datoteke za označevanje bo del URL-ja objave, zato se prepričajte, da je dobro. Upoštevajte tudi vsebino med pomišljaji. To so metapodatki objave in se imenujejo sprednja zadeva.

Razčlenjevanje Markdown datotek

Za vsako objavo v spletnem dnevniku morate razčleniti vsebino oznake in sprednjo stran. Za Markdown uporabite react-markdown in za podatke o sprednji snovi uporabite gray-matter.

React-markdown je komponenta React, zgrajena na pripombi, ki varno pretvori markdown v HTML. Knjižnica sive snovi razčleni sprednjo snov in pretvori YAML v objekt.

Izvedite naslednji ukaz v terminalu, da namestite react-markdown in gray-matter.

npm namestite reakcija-markdown siva snov

V novi mapi z imenom utils ustvarite novo datoteko z imenom md.js. Ustvarili boste pomožne funkcije, ki vrnejo vsebino objave v spletnem dnevniku v tej datoteki.

Pridobite vse objavljene objave

V md.js dodajte naslednjo kodo, da vrnete vse objave v mapi z vsebino.

uvoz fs od "fs";
uvoz pot od "pot";
uvoz zadeva od "siva snov";
izvozkonst getPath = (mapa: niz) => {
vrnitev path.join (process.cwd(), `/${mapa}`); // Pridobi celotno pot 
}


izvozkonst getFileContent = (ime datoteke: niz, mapo:string) => {
konst POSTS_PATH = getPath (mapa)
 return fs.readFileSync (path.join (POSTS_PATH, ime datoteke), "utf8");
};


izvozkonst getAllPosts = (mapa: niz) => {
konst POSTS_PATH = getPath (mapa)
vrnitev fs
 .readdirSync (POSTS_PATH) // pridobi datoteke v imeniku
 .filter((pot) => /\\.md?$/.test (pot)) // samo datoteke .md
 .map((imedatoteke) => { // preslikava čez vsako datoteko
konst vir = getFileContent (ime datoteke, mapa); // pridobi vsebino datoteke
konst slug = fileName.replace(/\\.md?$/, ""); // pridobi polž iz imena datoteke
konst { podatki } = snov (vir); // ekstrahiraj sprednjo snov
vrnitev {
 frontmatter: podatki,
 polž: polž,
 };
 });
};

V funkciji getAllPosts():

  • Pridobite celotno pot do mape vsebine z uporabo modula poti.
  • Pridobite datoteke v mapi z vsebino z metodo fs.readdirSync().
  • Filtrirajte datoteke tako, da vključujejo samo datoteke s pripono .md.
  • Pridobite vsebino vsake datoteke, vključno s sprednjo stranjo, z uporabo metode zemljevida.
  • Vrne matriko, ki vsebuje sprednjo zadevo in polž (ime datoteke brez pripone .md) vsake datoteke.

Če želite pridobiti samo objavljene objave, lahko filtrirate vse objave in vrnete samo tiste, katerih ključ isPublished v sprednji zadevi je nastavljen na true.

izvozkonst getAllPublished = (mapa: niz) => {
konst objave = getAllPosts (mapa)
konst objavljeno = posts.filter((objava) => {
vrnitev post.frontmatter.isPublished prav
 })
vrnitev objavljeno
 }

V md.js dodajte funkcijo getSinglePost() za pridobitev vsebine posamezne objave.

izvozkonst getSinglePost = (polžek: niz, mapo:string) => {
konst vir = getFileContent(`${slug}.md`, mapa);
konst { podatke: frontmatter, content } = snov (vir);
vrnitev {
 frontmatter,
 vsebina,
 };
};

Ta funkcija pokliče funkcijo getFileContent(), da pridobi vsebino vsake datoteke. Nato z uporabo paketa sivih snovi funkcija pridobi sprednjo vsebino in vsebino oznake.

Prikažite vse objave v spletnem dnevniku

Next.js ponuja različne možnosti upodabljanja, ena od njih je statična generacija. Statično generiranje je vrsta predupodabljanja, kjer Next.js generira vse strani HTML med gradnjo. Uporabljate ga za ustvarjanje hitrih statičnih strani.

Oglejte si uradna dokumentacija Nextjs za več informacij o upodabljanju.

Next.js bo vnaprej upodobil stran v času gradnje z uporabo rekvizitov, ki jih vrne funkcija getStaticProps. V tem primeru bo rekvizit vrsta objavljenih objav.

izvozkonst getStaticProps = asinh () => {
 const objave = getAllPublished("objave");
vrnitev {
 rekviziti: { objave },
 };
};

Spremenite datoteko index.js za prikaz seznama objav v spletnem dnevniku.

uvoz glava od "naprej/glava";
uvoz Povezava od "naprej/povezava";
uvoz { getAllPublished } od "../utils/md";
funkcijodomov({ objave }) {
vrnitev (
<div className={styles.container}>
<glava>
<naslov>Ustvari naslednjo aplikacijo</title>
<meta ime="opis" vsebina="Ustvarjeno z ustvarjanjem naslednje aplikacije" />
<povezava rel="ikona" href="/favicon.ico" />
</Head>
<div>
 {posts.map((objava) => (
<ključ članka={post.slug}>
<str>[ {post.frontmatter.tags.join(", ")} ]</str>
`objave/${post.slug}`}>
<a>{post.frontmatter.title}</a>
</Link>{""}
<str>{post.frontmatter.description}</str>
</article>
 ))}
</div>
</div>
 );
}


izvozkonst getStaticProps = asinh () => {
 const objave = getAllPublished("vsebino");


vrnitev {
 rekviziti: { objave },
 };
};
izvozprivzeto Domov;

Komponenta Domov uporablja objave, ki jih vrne getStaticProps. Preleti jih s funkcijo zemljevida in za vsako objavo prikaže naslov, povezavo do celotne objave in opis.

Pokaži objavo v spletnem dnevniku

Kot že omenjeno, bodo imena datotek objav uporabljena kot poti URL. Te poti so tudi dinamične, zato jih morate ustvariti med gradnjo. Next.js vam omogoča, da to storite s funkcijo getStaticPaths().

Na primer, v tej kodi so poti ustvarjene iz imen datotek markdown.

izvozkonst getStaticPaths = asinh () => {
 const poti = getAllPublished("objave").map(({ slug }) => ({ params: { slug } }));
vrnitev {
 poti,
 pasti nazaj: lažno,
 };
};

Upoštevajte, da uporabljate podatke o objavah, ki jih vrne pomožna funkcija getAllPublished(), ki ste jo ustvarili prej.

Nadomestno vrednost nastavljate tudi na false, kar vrne a 404 napaka za poti, ki ne obstajajo.

getStaticPaths() se običajno uporablja z getStaticProps(), ki pridobi vsebino vsake objave na podlagi parametrov.

izvozkonst getStaticProps = asinh ({ params }) => {
konst objava = čakati getSinglePost (params.slug, "objave");
vrnitev {
 rekviziti: { ...objava },
 };
};

Če želite upodobiti oznako v HTML, uporabite react-markdown.

uvoz ReactMarkdown od 'react-markdown'
uvoz { getAllPosts, getSinglePost } od "../../utils/md";
konst Objava = ({ content, frontmatter }) => {
vrnitev (
<div>
<str>{frontmatter.tags.join(', ')}</str>
<h2>{frontmatter.title}</h2>
<razpon>{frontmatter.publishedDate}</span>
<ReactMarkdown>{vsebina}</ReactMarkdown>
</div>
 );
};

Ta komponenta bo upodobila vsebino vsake objave v spletnem dnevniku in njen ustrezen URL.

Če ustvarjate blog za razvijalce, lahko dodajte označevanje sintakse zmogljivost za vsako komponento.

Oblikovanje bloga Next.js Markdown

Doslej ste ustvarili blog z oznako Next.js, ki prikazuje seznam objav v spletnem dnevniku in upodablja vsebino te objave. Če želite, da bo blog videti lepši, dodajte sloge CSS.

Next.js ima dobro podporo za CSS in lahko se odločite za uporabo knjižnic CSS-in-JS, kot so stilizirane komponente. Če raje ločite CSS od JS, lahko uporabite module CSS.