Nástroje s nízkym kódom, ako je WordPress, zjednodušujú proces vytvárania blogu. Môžete použiť predpripravenú tému a začať písať blogové príspevky v priebehu niekoľkých hodín. Ak chcete mať väčšiu kontrolu nad kódom a mať k dispozícii trochu času, je lepšie vytvoriť si blog od začiatku. Na zjednodušenie procesu môžete dokonca použiť rámec ako Next.js.
Zistite, ako vytvoriť jednoduchý blog Next.js, ktorý vykresľuje príspevky s označením.
Vytvorenie projektu Next.js
Next.js je rámec React, ktorý zjednodušuje vytváranie aplikácií. Poskytuje mnoho nástrojov a konfigurácií hneď po inštalácii, čo vám umožňuje začať písať kód ihneď po jeho inštalácii.
Najjednoduchší spôsob, ako začať s Next.js, je spustiť príkaz create-next-app v termináli:
npx vytvoriť-Ďalšie-app markdown-blog
Tento príkaz vytvorí projekt Next.js obsahujúci všetky potrebné súbory na spustenie.
Po prvé, najprv vyčistite index.js súbor vyzerať takto:
importovať Hlava od 'ďalší/hlava'
importovať štýlov od '../styles/Home.module.css'
export predvolenáfunkciuDomov() {
vrátiť (
<div className={styles.container}>
<Hlava>
<titul>Vytvoriť ďalšiu aplikáciu</title>
<meta meno="popis" obsah ="Vygenerované vytvorením ďalšej aplikácie" />
<odkaz rel="ikonu" href="/favicon.ico" />
</Head>
</div>
)
}
Vytvorte blogové príspevky Markdown
Blog sa vykreslí markdown súbory uložené lokálne v priečinku projektu. Takže vytvorte nový priečinok v koreňovom adresári s názvom obsahu na ukladanie súborov. V tomto priečinku vytvorte nový súbor s názvom create-active-link-nextjs.md a pridajte nasledujúce:
názov: Ako na to vytvoriť aktívny odkazv Nextjs
popis: Prispôsobenie aktívnych odkazov pomocou useRouter()
isPublished: pravda
zverejnenéDátum: 22.07.2022
značky:
- Ďalšie
## Hlavný obsah
Názov súboru markdown bude súčasťou adresy URL príspevku, takže sa uistite, že je dobrý. Všimnite si aj obsah medzi pomlčkami. Toto sú metadáta príspevku a nazýva sa to úvodná záležitosť.
Analýza súborov Markdown
Pre každý blogový príspevok musíte analyzovať obsah označenia a úvodnú časť. Pre Markdown použite reakciu-markdown a pre údaje prednej hmoty použite šedú hmotu.
React-markdown je komponent React postavený na poznámke, ktorý bezpečne prevádza markdown do HTML. Knižnica šedej hmoty analyzuje prednú hmotu a konvertuje YAML na objekt.
Vykonajte nasledujúci príkaz v termináli a nainštalujte reakciu markdown a sivú hmotu.
npm Inštalácia reakcia-markdown šedá hmota
V novom priečinku s názvom utils vytvorte nový súbor s názvom md.js. Vytvoríte pomocné funkcie, ktoré vrátia obsah blogového príspevku v tomto súbore.
Získajte všetky publikované príspevky
V md.js pridajte nasledujúci kód na vrátenie všetkých príspevkov v priečinku s obsahom.
importovať fs od "fs";
importovať cesta od "cesta";
importovať záležitosť od "šedá hmota";exportkonšt getPath = (priečinok: reťazec) => {
vrátiť path.join (process.cwd(), `/${folder}`); // Získajte úplnú cestu
}exportkonšt getFileContent = (názov súboru: reťazec, priečinok:string) => {
konšt POSTS_PATH = getPath (priečinok)
return fs.readFileSync (path.join (POSTS_PATH, názov súboru), "utf8");
};exportkonšt getAllPosts = (priečinok: reťazec) => {
konšt POSTS_PATH = getPath (priečinok)
vrátiť fs
.readdirSync (POSTS_PATH) // získať súbory v adresári
.filter((cesta) => /\\.md?$/.test (cesta)) // iba súbory .md
.map((názov súboru) => { // mapovať každý súbor
konšt source = getFileContent (názov súboru, priečinok); // načítanie obsahu súboru
konšt slug = fileName.replace(/\\.md?$/, ""); // získajte slimáka z názvu súboru
konšt { údaje } = hmota (zdroj); // extrahovať frontmatter
vrátiť {
frontmat: dáta,
slimák: slimák,
};
});
};
Vo funkcii getAllPosts():
- Získajte úplnú cestu k priečinku s obsahom pomocou modulu cesty.
- Získajte súbory v priečinku s obsahom pomocou metódy fs.readdirSync().
- Filtrujte súbory tak, aby obsahovali iba súbory s príponou .md.
- Získajte obsah každého súboru vrátane prednej časti pomocou metódy mapy.
- Vráti pole obsahujúce úvodnú látku a slug (názov súboru bez prípony .md) každého súboru.
Ak chcete získať iba zverejnené príspevky, môžete filtrovať všetky príspevky a vrátiť len tie, ktorých kľúč isPublished v úvodnej časti je nastavený na hodnotu true.
exportkonšt getAllPublished = (priečinok: reťazec) => {
konšt príspevky = getAllPosts (priečinok)konšt zverejnené = posts.filter((post) => {
vrátiť post.frontmatter.isPublished pravda
})
vrátiť publikovaný
}
V md.js pridajte funkciu getSinglePost() na získanie obsahu jedného príspevku.
exportkonšt getSinglePost = (slug: string, priečinok:string) => {
konšt zdroj = getFileContent(`${slug}.md`, priečinok);
konšt { údajov: frontmatter, obsah } = hmota (zdroj);
vrátiť {
frontman,
obsah,
};
};
Táto funkcia volá funkciu getFileContent() na získanie obsahu každého súboru. Potom pomocou balíka šedej hmoty funkcia načíta prednú hmotu a obsah označenia.
Zobraziť všetky blogové príspevky
Next.js poskytuje rôzne možnosti vykresľovania, jednou z nich je statické generovanie. Statické generovanie je typ predbežného vykresľovania, kde Next.js generuje všetky HTML stránky počas zostavovania. Používate ho na vytváranie rýchlych statických stránok.
Pozrite sa na oficiálna dokumentácia Nextjs pre viac informácií o vykresľovaní.
Next.js predbežne vykreslí stránku v čase zostavovania pomocou rekvizít vrátených funkciou getStaticProps. V tomto prípade budú rekvizitami pole publikovaných príspevkov.
exportkonšt getStaticProps = async () => {
const posts = getAllPublished("príspevky");
vrátiť {
rekvizity: { príspevky },
};
};
Upravte súbor index.js, aby sa zobrazil zoznam blogových príspevkov.
importovať Hlava od "ďalší/hlava";
importovať Odkaz od "ďalší/odkaz";
importovať { getAllPublished } od "../utils/md";funkciuDomov({ príspevky }) {
vrátiť (
<div className={styles.container}>
<Hlava>
<titul>Vytvoriť ďalšiu aplikáciu</title>
<meta meno="popis" obsah ="Vygenerované vytvorením ďalšej aplikácie" />
<odkaz rel="ikonu" href="/favicon.ico" />
</Head>
<div>
{posts.map((post) => (
<kľúč článku={post.slug}>
<p>[ {post.frontmatter.tags.join(", ")} ]</str>
`posts/${post.slug}`}>
<a>{post.frontmatter.title}</a>
</Link>{""}
<p>{post.frontmatter.description}</str>
</article>
))}
</div>
</div>
);
}exportkonšt getStaticProps = async () => {
const posts = getAllPublished("obsahu");vrátiť {
rekvizity: { príspevky },
};
};
exportpredvolená Domov;
Komponent Home používa príspevky vrátené getStaticProps. Iteruje ich pomocou funkcie mapy a pre každý príspevok zobrazí názov, odkaz na celý príspevok a popis.
Zobraziť blogový príspevok
Ako už bolo spomenuté, názvy súborov príspevkov sa použijú ako cesty URL. Tieto cesty sú tiež dynamické, takže ich musíte vygenerovať počas zostavovania. Next.js vám to umožňuje pomocou funkcie getStaticPaths().
Napríklad v tomto kóde sú cesty generované z názvov súborov markdown.
exportkonšt getStaticPaths = async () => {
const paths = getAllPublished("príspevky").map(({ slimák }) => ({ params: { slug } }));
vrátiť {
cesty,
záložný: falošný,
};
};
Všimnite si, že používate údaje o príspevkoch, ktoré vrátila pomocná funkcia getAllPublished(), ktorú ste predtým vytvorili.
Nastavujete tiež záložnú možnosť na hodnotu false, ktorá vráti a chyba 404 pre cesty, ktoré neexistujú.
getStaticPaths() sa zvyčajne používa s getStaticProps(), ktorý získava obsah každého príspevku na základe parametrov.
exportkonšt getStaticProps = async ({ params }) => {
konšt príspevok = čakať getSinglePost (params.slug, "príspevky");
vrátiť {
rekvizity: { ...príspevok },
};
};
Na vykreslenie markdown do HTML použite reakciu-markdown.
importovať ReactMarkdown od 'react-markdown'
importovať { getAllPosts, getSinglePost } od "../../utils/md";
konšt Príspevok = ({ content, frontmatter }) => {
vrátiť (
<div>
<p>{frontmatter.tags.join(', ')}</str>
<h2>{frontmatter.title}</h2>
<rozpätie>{frontmatter.publishedDate}</span>
<ReactMarkdown>{content}</ReactMarkdown>
</div>
);
};
Tento komponent vykreslí obsah každého blogového príspevku a jeho zodpovedajúcu adresu URL.
Ak vytvárate blog pre vývojárov, môžete pridať zvýraznenie syntaxe schopnosti pre každý komponent.
Úprava štýlu blogu Next.js Markdown
Doteraz ste vytvorili blog značky Next.js, ktorý zobrazuje zoznam blogových príspevkov a vykresľuje obsah tohto príspevku. Aby blog vyzeral krajšie, mali by ste pridať štýly CSS.
Next.js má dobrú podporu CSS a môžete sa rozhodnúť používať knižnice CSS-in-JS, ako sú komponenty so štýlom. Ak uprednostňujete oddelenie CSS od JS, môžete použiť moduly CSS.
