Zema koda rīki, piemēram, WordPress, vienkāršo emuāra izveides procesu. Varat izmantot iepriekš izveidotu motīvu un dažu stundu laikā sākt rakstīt emuāra ierakstus. Ja vēlaties vairāk kontrolēt savu kodu un jums ir nedaudz laika, labāk ir izveidot savu emuāru no nulles. Lai vienkāršotu procesu, varat pat izmantot tādu sistēmu kā Next.js.
Uzziniet, kā izveidot vienkāršu Next.js emuāru, kas atveido atzīmes.
Next.js projekta izveide
Next.js ir React sistēma, kas vienkāršo lietojumprogrammu izveidi. Tas nodrošina daudzus rīkus un konfigurācijas, kas ļauj jums sākt rakstīt kodu tūlīt pēc tā instalēšanas.
Vienkāršākais veids, kā sākt darbu ar Next.js, ir terminālī palaist komandu Create-next-app:
npx izveidot-Nākamais-app markdown-emuārs
Šī komanda izveido Next.js projektu, kurā ir visi palaišanai nepieciešamie faili.
Vispirms notīriet index.js lai fails izskatītos šādi:
imports Galva no "nākamais/galva"
imports stilus no "../styles/Home.module.css"
eksportētnoklusējumafunkcijuMājas() {
atgriezties (
<div className={styles.container} >
<Galva>
<virsraksts>Izveidot nākamo lietotni</title>
<meta nosaukums ="apraksts" saturs="Ģenerēts, izveidojot nākamo lietotni" />
<saite rel="ikonu" href="/favicon.ico" />
</Head>
</div>
)
}
Izveidojiet Markdown emuāra ziņas
Emuārs tiks renderēts atzīmes faili glabājas lokāli projekta mapē. Tātad saknē izveidojiet jaunu mapi ar nosaukumu saturu lai saglabātu failus. Šajā mapē izveidojiet jaunu failu ar nosaukumu Create-active-link-nextjs.md un pievienojiet sekojošo:
nosaukums: Kā izveidot aktīvs saiteiekšā Nākamais
apraksts: aktīvo saišu pielāgošana, izmantojot useRouter()
isPublicēts: taisnība
publicētsDatums: 22.07.2022
tagi:
- Nākamais
## Galvenais saturs
Atzīmes faila nosaukums būs daļa no ziņas URL, tāpēc pārliecinieties, vai tas ir labs. Ņemiet vērā arī saturu starp domuzīmēm. Šie ir ziņas metadati, un tos sauc par priekšējo lietu.
Markdown failu parsēšana
Katram emuāra ierakstam ir jāparsē atzīmes saturs un priekšpuse. Atzīmēšanai izmantojiet react-markdown, bet priekšējiem datiem izmantojiet pelēko vielu.
React-markdown ir React komponents, kas balstīts uz piezīmi, kas droši pārvērš atzīmes par HTML. Pelēkās vielas bibliotēka parsē priekšējo vielu un pārvērš YAML par objektu.
Terminālī izpildiet šo komandu, lai instalētu react-markdown un pelēkās vielas.
npm uzstādīt reaģēt-markdown pelēkā viela
Jaunā mapē ar nosaukumu utils izveidojiet jaunu failu ar nosaukumu md.js. Jūs izveidosit palīgfunkcijas, kas atgriež emuāra ziņas saturu šajā failā.
Saņemiet visas publicētās ziņas
Lai atgrieztu visas satura mapē esošās ziņas, failā md.js pievienojiet šo kodu.
imports fs no "fs";
imports ceļš no "ceļš";
imports jautājums no "Pelēkā viela";eksportētkonst getPath = (mape: virkne) => {
atgriezties path.join (process.cwd(), `/${folder}`); // Iegūstiet pilnu ceļu
}eksportētkonst getFileContent = (faila nosaukums: virkne, mapi:string) => {
konst POSTS_PATH = getPath (mape)
atgriezt fs.readFileSync (path.join (POSTS_PATH, faila nosaukums), "utf8");
};eksportētkonst getAllPosts = (mape: virkne) => {
konst POSTS_PATH = getPath (mape)
atgriezties fs
.readdirSync (POSTS_PATH) // iegūt failus direktorijā
.filter((ceļš) => /\\.md?$/.test (ceļš)) // tikai .md faili
.map((faila nosaukums) => { // kartē katru failu
konst avots = getFileContent (faila nosaukums, mape); // izgūt faila saturu
konst slug = fileName.replace(/\\.md?$/, ""); // iegūt slug no faila nosaukuma
konst {dati} = matērija (avots); // izvilkt frontmatter
atgriezties {
frontmatter: dati,
gliemeža: gliemeža,
};
});
};
Funkcijā getAllPosts():
- Iegūstiet pilnu ceļu uz satura mapi, izmantojot ceļa moduli.
- Iegūstiet failus satura mapē, izmantojot fs.readdirSync() metodi.
- Filtrējiet failus, lai iekļautu tikai failus ar paplašinājumu .md.
- Izgūstiet katra faila saturu, ieskaitot priekšējo daļu, izmantojot kartes metodi.
- Atgrieziet masīvu, kurā ir katra faila priekšpuse un slug (faila nosaukums bez paplašinājuma .md).
Lai iegūtu tikai publicētās ziņas, varat filtrēt visas ziņas un atgriezt tikai tās, kuru atslēgas isPublished priekšpusē ir iestatīta vērtība True.
eksportētkonst getAllPublished = (mape: virkne) => {
konst ziņas = getAllPosts (mape)konst publicēts = posts.filter((post) => {
atgriezties post.frontmatter.isPublished taisnība
})
atgriezties publicēts
}
Programmā md.js pievienojiet funkciju getSinglePost(), lai izgūtu vienas ziņas saturu.
eksportētkonst getSinglePost = (slug: virkne, mapi:string) => {
konst avots = getFileContent(`${slug}.md`, mape);
konst { datus: frontmatter, content } = matērija (avots);
atgriezties {
priekšplānā,
saturs,
};
};
Šī funkcija izsauc funkciju getFileContent(), lai iegūtu katra faila saturu. Pēc tam, izmantojot pelēkās vielas pakotni, funkcija izgūst priekšējo vielu un atzīmes saturu.
Parādīt visus emuāra ierakstus
Next.js nodrošina dažādas renderēšanas iespējas, viena no tām ir statiskā ģenerēšana. Statiskā ģenerēšana ir iepriekšējas renderēšanas veids, kurā Next.js izveides laikā ģenerē visas HTML lapas. Jūs to izmantojat, lai izveidotu ātras statiskas lapas.
Apskatiet oficiālā Nextjs dokumentācija lai iegūtu vairāk informācijas par renderēšanu.
Next.js iepriekš atveidos lapu izveides laikā, izmantojot funkcijas getStaticProps atgrieztos rekvizītus. Šajā gadījumā rekvizīti būs publicēto ziņu masīvs.
eksportētkonst getStaticProps = asinhrons () => {
const posts = getAllPublished("ziņas");
atgriezties {
rekvizīti: { posts },
};
};
Modificējiet failu index.js, lai parādītu emuāra ziņu sarakstu.
imports Galva no "nākamais/galva";
imports Saite no "nākamais/saite";
imports { getAllPublished } no "../utils/md";funkcijuMājas({ posts }) {
atgriezties (
<div className={styles.container}>
<Galva>
<virsraksts>Izveidot nākamo lietotni</title>
<meta nosaukums ="apraksts" saturs="Ģenerēts, izveidojot nākamo lietotni" />
<saite rel="ikonu" href="/favicon.ico" />
</Head>
<div>
{posts.map((post) => (
<raksta atslēga={post.slug}>
<lpp>[ {post.frontmatter.tags.join(", ")} ]</lpp>
`posts/${post.slug}`}>
<a>{post.frontmatter.title}</a>
</Link>{""}
<lpp>{post.frontmatter.description}</lpp>
</article>
))}
</div>
</div>
);
}eksportētkonst getStaticProps = asinhrons () => {
const posts = getAllPublished("saturu");atgriezties {
rekvizīti: { posts },
};
};
eksportētnoklusējuma Mājas;
Sākuma komponents izmanto getStaticProps atgrieztās ziņas. Tas atkārto tos, izmantojot kartes funkciju, un katrai ziņai tiek parādīts nosaukums, saite uz pilnu ziņu un apraksts.
Parādiet emuāra ziņu
Kā minēts, ziņu failu nosaukumi tiks izmantoti kā URL ceļi. Šie ceļi ir arī dinamiski, tāpēc tie ir jāģenerē izveides laikā. Next.js ļauj to izdarīt, izmantojot funkciju getStaticPaths().
Piemēram, šajā kodā ceļi tiek ģenerēti no atzīmes failu nosaukumiem.
eksportētkonst getStaticPaths = asinhrons () => {
const ceļi = getAllPublished("ziņas").map(({ slug }) => ({ parametri: { slug } }));
atgriezties {
ceļi,
atkāpties: viltus,
};
};
Ņemiet vērā, ka izmantojat iepriekš izveidotās palīgfunkcijas getAllPublished() atgrieztos ziņu datus.
Jūs arī iestatāt atkāpšanos uz false, kas atgriež a 404 kļūda ceļiem, kas neeksistē.
getStaticPaths() parasti izmanto kopā ar getStaticProps(), kas izgūst katras ziņas saturu, pamatojoties uz parametriem.
eksportētkonst getStaticProps = asinhrons ({ parametri }) => {
konst ziņa = gaidīt getSinglePost (params.slug, "posts");
atgriezties {
rekvizīti: { ...post },
};
};
Lai atveidotu atzīmes HTML formātā, izmantojiet react-markdown.
imports ReactMarkdown no 'reaģēt-markdown'
imports { getAllPosts, getSinglePost } no "../../utils/md";
konst Ziņa = ({ content, frontmatter }) => {
atgriezties (
<div>
<lpp>{frontmatter.tags.join(', ')}</lpp>
<h2>{frontmatter.title}</h2>
<span>{frontmatter.publishedDate}</span>
<ReactMarkdown>{saturs}</ReactMarkdown>
</div>
);
};
Šis komponents atveidos katra emuāra ziņas saturu un tai atbilstošo URL.
Ja veidojat izstrādātāja emuāru, varat pievienot sintakses izcelšanu spēja katram komponentam.
Next.js Markdown emuāra veidošana
Līdz šim esat izveidojis Next.js atzīmes emuāru, kurā tiek parādīts emuāra ziņu saraksts un tiek renderēts šīs ziņas saturs. Lai emuārs izskatītos jaukāks, jums vajadzētu pievienot CSS stilus.
Next.js ir labs CSS atbalsts, un jūs varat izvēlēties izmantot CSS-in-JS bibliotēkas, piemēram, stila komponentus. Ja vēlaties atdalīt CSS no JS, varat izmantot CSS moduļus.
