Az olyan alacsony kódú eszközök, mint a WordPress, leegyszerűsítik a blogkészítés folyamatát. Használhat egy előre elkészített témát, és órákon belül elkezdhet blogbejegyzéseket írni. Ha jobban szeretné irányítani a kódot, és van egy kis ideje a kezében, jobb, ha a semmiből építi fel blogját. A folyamat leegyszerűsítésére akár olyan keretrendszert is használhat, mint a Next.js.
Ismerje meg, hogyan hozhat létre egy egyszerű Next.js blogot, amely leértékelési bejegyzéseket jelenít meg.
Next.js projekt létrehozása
A Next.js egy React keretrendszer, amely leegyszerűsíti az alkalmazások létrehozását. Számos eszközt és konfigurációt kínál a dobozból, lehetővé téve a kódírás azonnali megkezdését a telepítés után.
A Next.js használatának legegyszerűbb módja a create-next-app parancs futtatása egy terminálon:
npx teremt-következő-app markdown-blog
Ez a parancs létrehoz egy Next.js projektet, amely tartalmazza az indításhoz szükséges összes fájlt.
Először is tisztítsa meg a index.js fájl így néz ki:
import Fej tól től 'következő/fej'
import stílusok tól től "../styles/Home.module.css"
exportalapértelmezettfunkcióitthon() {
Visszatérés (
<div className={styles.container}>
<Fej>
<cím>Következő alkalmazás létrehozása</title>
<meta név="leírás" tartalom="A következő alkalmazás létrehozása által generált" />
<link rel="ikon" href="/favicon.ico" />
</Head>
</div>
)
}
Markdown blogbejegyzések létrehozása
A blog meg fog jelenni leértékelési fájlok helyileg a projekt mappájában tárolva. Tehát hozzon létre egy új mappát a gyökérben tartalom a fájlok tárolására. Ebben a mappában hozzon létre egy új fájlt create-active-link-nextjs.md és add hozzá a következőket:
cím: Hogyan teremt egy aktív linkban ben Nextjs
leírás: Aktív hivatkozások testreszabása a useRouter() segítségével
Megjelent: igaz
közzétéveDátum: 2022.07.22
címkék:
- következő
## Központi téma
A leértékelési fájl neve a bejegyzés URL-jének része lesz, ezért győződjön meg róla, hogy jó. Jegyezze fel a kötőjelek közötti tartalmat is. Ez a bejegyzés metaadata, és az elülső anyagnak hívják.
Markdown fájlok elemzése
Minden blogbejegyzésnél elemezni kell a leértékelés tartalmát és az elülső részt. A Markdown-hoz használja a react-markdown-t, az elülső adatokhoz pedig a szürkeállományt.
A React-markdown egy megjegyzésre épülő React komponens, amely biztonságosan konvertálja a leértékelést HTML formátumba. A szürkeállomány-könyvtár elemzi az elülső anyagot, és a YAML-t objektummá alakítja.
Hajtsa végre a következő parancsot a terminálban a react-markdown és a gray-matter telepítéséhez.
npm telepítés react-markdown szürkeállomány
Az utils nevű új mappában hozzon létre egy új md.js nevű fájlt. Segítő funkciókat fog létrehozni, amelyek visszaadják a blogbejegyzés tartalmát ebben a fájlban.
Az összes közzétett bejegyzés lekérése
Az md.js fájlban adja hozzá a következő kódot a tartalommappában lévő összes bejegyzés visszaadásához.
import fs tól től "fs";
import pálya tól től "pálya";
import ügy tól től "szürkeállomány";exportconst getPath = (mappa: string) => {
Visszatérés path.join (process.cwd(), `/${folder}`); // Get teljes elérési út
}exportconst getFileContent = (fájlnév: string, mappát:string) => {
const POSTS_PATH = getPath (mappa)
return fs.readFileSync (path.join (POSTS_PATH, fájlnév), "utf8");
};exportconst getAllPosts = (mappa: string) => {
const POSTS_PATH = getPath (mappa)
Visszatérés fs
.readdirSync (POSTS_PATH) // fájlok beszerzése a könyvtárban
.filter((elérési út) => /\\.md?$/.test (útvonal)) // csak .md fájlok
.map((fájlnév) => { // leképezi az egyes fájlokat
const forrás = getFileContent (fájlnév, mappa); // lekérni a fájl tartalmát
const slug = fileName.replace(/\\.md?$/, ""); // a slug lekérése a fájlnévből
const { adat } = anyag (forrás); // frontmatter kivonat
Visszatérés {
frontanyag: adatok,
csiga: csiga,
};
});
};
A getAllPosts() függvényben:
- Szerezze meg a tartalommappa teljes elérési útját az elérési út modul segítségével.
- Szerezze be a fájlokat a tartalommappában az fs.readdirSync() metódussal.
- Szűrje le a fájlokat úgy, hogy csak az .md kiterjesztésű fájlokat tartalmazza.
- Keresse le az egyes fájlok tartalmát, beleértve az elülső részt is a térkép módszerrel.
- Adjon vissza egy tömböt, amely tartalmazza az egyes fájlok elülső részét és a slug-ot (a fájlnév .md kiterjesztése nélkül).
Ha csak a közzétett bejegyzéseket szeretné megjeleníteni, szűrheti az összes bejegyzést, és csak azokat adja vissza, amelyeknek az elülső kérdésben szereplő isPublished kulcs értéke igaz.
exportconst getAllPublished = (mappa: string) => {
const hozzászólások = getAllPosts (mappa)const közzétéve = posts.filter((post) => {
Visszatérés post.frontmatter.isPublished igaz
})
Visszatérés közzétett
}
Az md.js fájlban adja hozzá a getSinglePost() függvényt egyetlen bejegyzés tartalmának lekéréséhez.
exportconst getSinglePost = (slug: string, mappát:string) => {
const forrás = getFileContent(`${slug}.md`, mappa);
const { adat: frontanyag, tartalom } = anyag (forrás);
Visszatérés {
frontügy,
tartalom,
};
};
Ez a függvény meghívja a getFileContent() függvényt az egyes fájlok tartalmának lekéréséhez. Ezután a szürkeállomány csomagot használva a függvény lekéri az elülső anyagot és a leértékelési tartalmat.
Az összes blogbejegyzés megjelenítése
A Next.js különböző megjelenítési lehetőségeket kínál, amelyek közül az egyik a statikus generálás. A statikus generálás az előmegjelenítés egy olyan típusa, ahol a Next.js az összes HTML-oldalt előállítja a felépítési idő alatt. Gyors statikus oldalak létrehozására használja.
Nézze meg a hivatalos Nextjs dokumentáció a rendereléssel kapcsolatos további információkért.
A Next.js előrendereli az oldalt az összeállításkor a getStaticProps függvény által visszaadott kellékek segítségével. Ebben az esetben a kellékek egy sor közzétett bejegyzés lesz.
exportconst getStaticProps = async () => {
const posts = getAllPublished("hozzászólások");
Visszatérés {
kellékek: { posts },
};
};
Módosítsa az index.js fájlt a blogbejegyzések listájának megjelenítéséhez.
import Fej tól től "következő/fej";
import Link tól től "következő/link";
import { getAllPublished } tól től "../utils/md";funkcióitthon({ bejegyzések }) {
Visszatérés (
<div className={styles.container}>
<Fej>
<cím>Következő alkalmazás létrehozása</title>
<meta név="leírás" tartalom="A következő alkalmazás létrehozása által generált" />
<link rel="ikon" href="/favicon.ico" />
</Head>
<div>
{posts.map((bejegyzés) => (
<cikk kulcsa={post.slug}>
<p>[ {post.frontmatter.tags.join(", ")} ]</p>
`bejegyzések/${post.slug}`}>
<a>{post.frontmatter.title}</a>
</Link>{""}
<p>{post.frontmatter.description}</p>
</article>
))}
</div>
</div>
);
}exportconst getStaticProps = async () => {
const posts = getAllPublished("tartalom");Visszatérés {
kellékek: { posts },
};
};
exportalapértelmezett Itthon;
A Home komponens a getStaticProps által visszaadott bejegyzéseket használja. A térkép funkció segítségével ismételgeti őket, és minden bejegyzésnél megjelenik egy cím, egy link a teljes bejegyzésre és egy leírás.
Blogbejegyzés megjelenítése
Amint már említettük, a bejegyzések fájlnevei URL-útvonalként lesznek használva. Ezek az útvonalak szintén dinamikusak, ezért az összeállítási idő alatt kell létrehozni őket. A Next.js lehetővé teszi ezt a getStaticPaths() függvény használatával.
Például ebben a kódban az elérési utak a leértékelési fájlok nevéből jönnek létre.
exportconst getStaticPaths = async () => {
const paths = getAllPublished("hozzászólások").map(({ slug }) => ({ params: { slug } }));
Visszatérés {
utak,
tartalék: hamis,
};
};
Vegye figyelembe, hogy a korábban létrehozott getAllPublished() segédfüggvény által visszaadott bejegyzésadatokat használja.
A tartalékot is false értékre állítja, ami visszaadja a 404-es hiba nem létező utakért.
A getStaticPaths()-t általában a getStaticProps()-hoz használják, amely lekéri az egyes bejegyzések tartalmát a paraméterek alapján.
exportconst getStaticProps = async ({ params }) => {
const hozzászólás = várja getSinglePost (params.slug, "posts");
Visszatérés {
kellékek: { ...bejegyzés },
};
};
A markdown HTML formátumban történő megjelenítéséhez használja a react-markdown parancsot.
import ReactMarkdown tól től 'react-markdown'
import { getAllPosts, getSinglePost } tól től "../../utils/md";
const Bejegyzés = ({ tartalom, frontanyag }) => {
Visszatérés (
<div>
<p>{frontmatter.tags.join(', ')}</p>
<h2>{frontmatter.title}</h2>
<span>{frontmatter.publishedDate}</span>
<ReactMarkdown>{tartalom}</ReactMarkdown>
</div>
);
};
Ez az összetevő megjeleníti az egyes blogbejegyzések tartalmát és a megfelelő URL-t.
Ha fejlesztői blogot hoz létre, megteheti szintaktikai kiemelés hozzáadása képesség minden komponenshez.
A Next.js Markdown Blog stílusának kialakítása
Eddig létrehozott egy Next.js markdown blogot, amely megjeleníti a blogbejegyzések listáját, és megjeleníti a bejegyzés tartalmát. A blog szebb kinézete érdekében CSS-stílusokat kell hozzáadnia.
A Next.js jó CSS-támogatással rendelkezik, és választhat a CSS-in-JS könyvtárak, például a stílusos összetevők használata mellett. Ha jobban szeretné elválasztani a CSS-t a JS-től, használhat CSS-modulokat.
