Jak vytvořit blog Next.js Markdown pomocí Reag-markdown

Nízkokódové nástroje, jako je WordPress, zjednodušují proces vytváření blogu. Můžete použít předem připravené téma a začít psát blogové příspěvky během několika hodin. Pokud chcete mít nad kódem větší kontrolu a mít trochu času, je lepší vytvořit si blog od začátku. Pro zjednodušení procesu můžete dokonce použít framework jako Next.js.

Přečtěte si, jak vytvořit jednoduchý blog Next.js, který vykresluje příspěvky s markdownem.

Vytvoření projektu Next.js

Next.js je framework React, který zjednodušuje vytváření aplikací. Poskytuje mnoho nástrojů a konfigurací ihned po instalaci, což vám umožní začít psát kód ihned po jeho instalaci.

Nejjednodušší způsob, jak začít s Next.js, je spustit příkaz create-next-app v terminálu:

npx vytvořit-další-app markdown-blog

Tento příkaz vytvoří projekt Next.js obsahující všechny potřebné soubory ke spuštění.

Za prvé, vyčistěte index.js soubor vypadat takto:

import Hlava z 'další/hlava'
import styly z '../styles/Home.module.css'
vývoznívýchozífunkceDomov() {
vrátit se





instagram viewer
 (
<div className={styles.container}>
<Hlava>
<titul>Vytvořit další aplikaci</title>
<meta jméno="popis" obsah ="Vygenerováno vytvořením další aplikace" />
<odkaz rel="ikona" href="/favicon.ico" />
</Head>
</div>
 )
}

Vytvářejte příspěvky na blogu Markdown

Blog se vykreslí markdown soubory uloženy lokálně ve složce projektu. Vytvořte tedy novou složku v kořenovém adresáři s názvem obsah k ukládání souborů. V této složce vytvořte nový soubor s názvem create-active-link-nextjs.md a přidejte následující:

název: Jak na to vytvořit aktivní odkazv Nextjs
popis: Přizpůsobení aktivních odkazů pomocí useRouter()
isPublished: skutečný
zveřejněnoDatum: 22.07.2022
značky:
 - další

## Hlavní obsah

Název souboru markdown bude součástí adresy URL příspěvku, takže se ujistěte, že je správný. Všimněte si také obsahu mezi pomlčkami. Toto jsou metadata příspěvku a nazývá se přední záležitost.

Analýza souborů Markdown

U každého příspěvku na blogu musíte analyzovat obsah markdown a úvodní látku. Pro Markdown použijte reakci-markdown a pro data přední hmoty použijte šedou hmotu.

React-markdown je komponenta React postavená na poznámkách, která bezpečně převádí markdown do HTML. Knihovna šedé hmoty analyzuje přední hmotu a převádí YAML na objekt.

Provedením následujícího příkazu v terminálu nainstalujte response-markdown a gray-matter.

npm Nainstalujte reagovat-markdown šedá hmota

V nové složce s názvem utils vytvořte nový soubor s názvem md.js. Vytvoříte pomocné funkce, které vrátí obsah blogového příspěvku v tomto souboru.

Získejte všechny publikované příspěvky

V md.js přidejte následující kód, abyste vrátili všechny příspěvky ve složce obsahu.

import fs z "fs";
import cesta z "cesta";
import hmota z "šedá hmota";
vývozníkonst getPath = (složka: řetězec) => {
vrátit se path.join (process.cwd(), `/${folder}`); // Získejte úplnou cestu 
}
vývozníkonst getFileContent = (název souboru: řetězec, složku:string) => {
konst POSTS_PATH = getPath (složka)
 return fs.readFileSync (path.join (POSTS_PATH, název souboru), "utf8");
};
vývozníkonst getAllPosts = (složka: řetězec) => {
konst POSTS_PATH = getPath (složka)
vrátit se fs
 .readdirSync (POSTS_PATH) // získání souborů v adresáři
 .filter((cesta) => /\\.md?$/.test (cesta)) // pouze soubory .md
 .map((název_souboru) => { // mapuje každý soubor
konst source = getFileContent (název_souboru, složka); // načtení obsahu souboru
konst slug = název_souboru.replace(/\\.md?$/, ""); // získat slug z názvu souboru
konst { data } = hmota (zdroj); // extrahujte frontmatter
vrátit se {
 frontmat: data,
 slimák: slimák,
 };
 });
};

Ve funkci getAllPosts():

• Získejte úplnou cestu ke složce obsahu pomocí modulu cesty.
• Získejte soubory ve složce obsahu pomocí metody fs.readdirSync().
• Filtrujte soubory tak, aby zahrnovaly pouze soubory s příponou .md.
• Načtěte obsah každého souboru, včetně přední části pomocí metody mapy.
• Vraťte pole obsahující přední látku a slug (název souboru bez přípony .md) každého souboru.

Chcete-li získat pouze publikované příspěvky, můžete filtrovat všechny příspěvky a vrátit pouze ty, jejichž klíč isPublished v úvodní části je nastaven na hodnotu true.

vývozníkonst getAllPublished = (složka: řetězec) => {
konst příspěvky = getAllPosts (složka)
konst publikováno = posts.filter((příspěvek) => {
vrátit se post.frontmatter.isPublished skutečný
 })
vrátit se zveřejněno
 }

V md.js přidejte funkci getSinglePost() k načtení obsahu jednoho příspěvku.

vývozníkonst getSinglePost = (slug: řetězec, složku:string) => {
konst zdroj = getFileContent(`${slug}.md`, složka);
konst { data: frontmatter, obsah } = hmota (zdroj);
vrátit se {
 frontmat,
 obsah,
 };
};

Tato funkce volá funkci getFileContent(), aby získala obsah každého souboru. Poté pomocí balíčku šedé hmoty funkce načte přední hmotu a obsah markdown.

Zobrazit všechny příspěvky na blogu

Next.js poskytuje různé možnosti vykreslování, jednou z nich je statické generování. Statické generování je typ předběžného vykreslování, kdy Next.js generuje všechny HTML stránky během doby sestavování. Využijete jej k vytvoření rychlých statických stránek.

Podívejte se na oficiální dokumentace Nextjs pro více informací o vykreslování.

Next.js předběžně vykreslí stránku v době sestavování pomocí rekvizit vrácených funkcí getStaticProps. V tomto případě bude rekvizitou pole publikovaných příspěvků.

vývozníkonst getStaticProps = asynchronní () => {
 const posts = getAllPublished("příspěvky");
vrátit se {
 rekvizity: { příspěvky },
 };
};

Upravte soubor index.js, aby se zobrazil seznam blogových příspěvků.

import Hlava z "další/hlava";
import Odkaz z "další/odkaz";
import { getAllPublished } z "../utils/md";
funkceDomov({ příspěvky }) {
vrátit se (
<div className={styles.container}>
<Hlava>
<titul>Vytvořit další aplikaci</title>
<meta jméno="popis" obsah ="Vygenerováno vytvořením další aplikace" />
<odkaz rel="ikona" href="/favicon.ico" />
</Head>
<div>
 {posts.map((post) => (
<klíč článku={post.slug}>
<p>[ {post.frontmatter.tags.join(", ")} ]</str>
`příspěvky/${post.slug}`}>
<A>{post.frontmatter.title}</A>
</Link>{""}
<p>{post.frontmatter.description}</str>
</article>
 ))}
</div>
</div>
 );
}
vývozníkonst getStaticProps = asynchronní () => {
 const posts = getAllPublished("obsah");
vrátit se {
 rekvizity: { příspěvky },
 };
};
vývoznívýchozí Domov;

Komponenta Home používá příspěvky vrácené getStaticProps. Iteruje je pomocí funkce mapy a u každého příspěvku zobrazí název, odkaz na celý příspěvek a popis.

Zobrazit příspěvek na blogu

Jak bylo zmíněno, názvy souborů příspěvků budou použity jako cesty URL. Tyto cesty jsou také dynamické, takže je musíte generovat během doby sestavení. Next.js vám to umožňuje pomocí funkce getStaticPaths().

Například v tomto kódu jsou cesty generovány z názvů souborů markdown.

vývozníkonst getStaticPaths = asynchronní () => {
 const paths = getAllPublished("příspěvky").map(({ slimák }) => ({ params: { slug } }));
vrátit se {
 cesty,
 ustoupit: Nepravdivé,
 };
};

Všimněte si, že používáte data příspěvků vrácená pomocnou funkcí getAllPublished(), kterou jste vytvořili dříve.

Nastavujete také nouzovou hodnotu na hodnotu false, která vrátí a chyba 404 pro cesty, které neexistují.

getStaticPaths() se obvykle používá s getStaticProps(), která načte obsah každého příspěvku na základě parametrů.

vývozníkonst getStaticProps = asynchronní ({ params }) => {
konst příspěvek = čekat getSinglePost (params.slug, "příspěvky");
vrátit se {
 rekvizity: { ...příspěvek },
 };
};

Pro vykreslení markdown do HTML použijte response-markdown.

import ReactMarkdown z 'react-markdown'
import { getAllPosts, getSinglePost } z "../../utils/md";
konst Příspěvek = ({ content, frontmatter }) => {
vrátit se (
<div>
<p>{frontmatter.tags.join(', ')}</str>
<h2>{frontmatter.title}</h2>
<rozpětí>{frontmatter.publishedDate}</span>
<ReactMarkdown>{obsah}</ReactMarkdown>
</div>
 );
};

Tato komponenta vykreslí obsah každého blogového příspěvku a jeho odpovídající URL.

Pokud vytváříte vývojářský blog, můžete přidat zvýraznění syntaxe schopnosti pro každou komponentu.

Styling blogu Next.js Markdown

Doposud jste vytvořili blog Next.js markdown, který zobrazuje seznam blogových příspěvků a vykresluje obsah tohoto příspěvku. Aby blog vypadal hezčí, měli byste přidat styly CSS.

Next.js má dobrou podporu CSS a můžete se rozhodnout používat knihovny CSS-in-JS jako stylizované komponenty. Pokud dáváte přednost oddělení CSS od JS, můžete použít moduly CSS.