Lågkodsverktyg som WordPress förenklar processen för att skapa bloggar. Du kan använda ett färdigt tema och börja skriva blogginlägg inom några timmar. Om du vill ha mer kontroll över din kod och ha lite tid på dig är det bättre att bygga din blogg från grunden. Du kan till och med använda ett ramverk som Next.js för att förenkla processen.
Lär dig hur du bygger en enkel Next.js-blogg som återger markdown-inlägg.
Skapa ett Next.js-projekt
Next.js är ett React-ramverk som förenklar hur du bygger applikationer. Den tillhandahåller många verktyg och konfigurationer direkt, så att du kan börja skriva kod direkt efter installationen.
Det enklaste sättet att komma igång med Next.js är genom att köra kommandot create-next-app i en terminal:
npx skapa-Nästa-app markdown-blogg
Detta kommando skapar ett Next.js-projekt som innehåller alla nödvändiga filer för att starta.
Först till kvarn, städa upp index.js fil för att se ut så här:
importera Huvud från 'nästa/huvud'
importera stilar från '../styles/Home.module.css'
exporterastandardfungeraHem() {
lämna tillbaka (
<div className={styles.container}>
<Huvud>
<titel>Skapa nästa app</title>
<metanamn="beskrivning" innehåll="Genereras av skapa nästa app" />
<länk rel="ikon" href="/favicon.ico" />
</Head>
</div>
)
}
Skapa Markdown-blogginlägg
Bloggen kommer att renderas markdown-filer lagras lokalt i projektmappen. Så skapa en ny mapp vid roten som heter innehåll för att lagra filerna. I den här mappen skapar du en ny fil som heter create-active-link-nextjs.md och lägg till följande:
titel: Hur man skapa en aktiv länki Nextjs
beskrivning: Anpassa aktiva länkar med useRouter()
Publiceras: Sann
publiceringsdatum: 2022/07/22
taggar:
- Nästa
## Huvudinnehåll
Namnet på markdown-filen kommer att vara en del av inläggets URL, så se till att den är bra. Notera också innehållet mellan strecken. Detta är inläggets metadata och kallas frontmateria.
Parsar Markdown-filer
För varje blogginlägg måste du analysera markdown-innehållet och frontsaken. För Markdown, använd react-markdown och för frontmateriadata, använd gråmateria.
React-markdown är en React-komponent byggd på anmärkning som säkert konverterar markdown till HTML. Gråmateriabiblioteket analyserar frontmateria och omvandlar YAML till ett objekt.
Utför följande kommando i terminalen för att installera react-markdown och grey-matter.
npm Installera reagera-markdown grå materia
Skapa en ny fil som heter md.js i en ny mapp som heter utils. Du kommer att skapa hjälpfunktioner som returnerar blogginläggsinnehåll i den här filen.
Hämta alla publicerade inlägg
I md.js lägger du till följande kod för att returnera alla inlägg i innehållsmappen.
importera fs från "fs";
importera väg från "väg";
importera materia från "grå materia";exporterakonst getPath = (mapp: sträng) => {
lämna tillbaka path.join (process.cwd(), `/${folder}`); // Få full väg
}exporterakonst getFileContent = (filnamn: sträng, mapp:string) => {
konst POSTS_PATH = getPath (mapp)
returnera fs.readFileSync (path.join (POSTS_PATH, filnamn), "utf8");
};exporterakonst getAllPosts = (mapp: sträng) => {
konst POSTS_PATH = getPath (mapp)
lämna tillbaka fs
.readdirSync (POSTS_PATH) // hämta filer i katalogen
.filter((sökväg) => /\\.md?$/.test (sökväg)) // endast .md-filer
.map((filnamn) => { // mappa över varje fil
konst source = getFileContent (filnamn, mapp); // hämta filens innehåll
konst slug = filnamn.ersätt(/\\.md?$/, ""); // hämta snigeln från filnamnet
konst { data } = materia (källa); // extrahera frontmatter
lämna tillbaka {
frontmatter: data,
snigel: snigel,
};
});
};
I getAllPosts()-funktionen:
- Få hela sökvägen till innehållsmappen med hjälp av sökvägsmodulen.
- Hämta filerna i innehållsmappen med metoden fs.readdirSync().
- Filtrera filerna så att de bara inkluderar filer med filtillägget .md.
- Hämta innehållet i varje fil, inklusive frontmaterialet med hjälp av kartmetoden.
- Returnera en array som innehåller frontmateria och slug (filnamnet utan .md-tillägget) för varje fil.
För att bara få de publicerade inläggen kan du filtrera alla inlägg och bara returnera de vars isPublished-nyckel i frontsaken är satt till sant.
exporterakonst getAllPublished = (mapp: sträng) => {
konst inlägg = getAllPosts (mapp)konst publicerad = posts.filter((post) => {
lämna tillbaka post.frontmatter.publiceras Sann
})
lämna tillbaka publiceras
}
I md.js lägger du till funktionen getSinglePost() för att hämta innehållet i ett enskilt inlägg.
exporterakonst getSinglePost = (slug: sträng, mapp:string) => {
konst source = getFileContent(`${slug}.md`, mapp);
konst { data: frontmatter, innehåll } = materia (källa);
lämna tillbaka {
frontmateria,
innehåll,
};
};
Den här funktionen anropar funktionen getFileContent() för att hämta innehållet i varje fil. Med hjälp av grey-matter-paketet hämtar funktionen sedan framsidan och markdown-innehållet.
Visa alla blogginlägg
Next.js erbjuder olika renderingsalternativ, ett av dem är statisk generering. Statisk generering är en typ av förrendering där Next.js genererar alla HTML-sidor under byggtiden. Du använder den för att skapa snabba statiska sidor.
Kolla in officiell Nextjs-dokumentation för mer information om rendering.
Next.js kommer att förrendera en sida vid byggtid med hjälp av rekvisita som returneras av getStaticProps-funktionen. I det här fallet kommer rekvisita att vara en rad publicerade inlägg.
exporterakonst getStaticProps = asynkron () => {
const posts = getAllPublished("inlägg");
lämna tillbaka {
rekvisita: { inlägg },
};
};
Ändra filen index.js för att visa en lista med blogginlägg.
importera Huvud från "nästa/huvud";
importera Länk från "nästa/länk";
importera { getAllPublished } från "../utils/md";fungeraHem({ inlägg }) {
lämna tillbaka (
<div className={styles.container}>
<Huvud>
<titel>Skapa nästa app</title>
<metanamn="beskrivning" innehåll="Genereras av skapa nästa app" />
<länk rel="ikon" href="/favicon.ico" />
</Head>
<div>
{posts.map((post) => (
<artikelnyckel={post.slug}>
<sid>[ {post.frontmatter.tags.join(", ")} ]</s>
`inlägg/${post.slug}`}>
<a>{post.frontmatter.title}</a>
</Link>{""}
<sid>{post.frontmatter.description}</s>
</article>
))}
</div>
</div>
);
}exporterakonst getStaticProps = asynkron () => {
const posts = getAllPublished("innehåll");lämna tillbaka {
rekvisita: { inlägg },
};
};
exporterastandard Hem;
Home-komponenten använder inläggen som returneras av getStaticProps. Den itererar över dem med hjälp av kartfunktionen, och för varje inlägg visar den en titel, en länk till hela inlägget och en beskrivning.
Visa ett blogginlägg
Som nämnts kommer inläggens filnamn att användas som URL-sökvägar. Dessa vägar är också dynamiska, så du måste generera dem under byggtiden. Next.js låter dig göra detta med funktionen getStaticPaths() .
Till exempel, i den här koden genereras sökvägarna från namnen på markdown-filerna.
exporterakonst getStaticPaths = asynkron () => {
const sökvägar = getAllPublished("inlägg").map(({ snigel }) => ({ params: { snigel } }));
lämna tillbaka {
stigar,
Retirera: falsk,
};
};
Observera att du använder inläggsdata som returneras av hjälpfunktionen getAllPublished() som du skapade tidigare.
Du ställer också in fallback till false, vilket returnerar en 404 fel för vägar som inte finns.
getStaticPaths() används vanligtvis med getStaticProps() som hämtar innehållet i varje inlägg baserat på parametrarna.
exporterakonst getStaticProps = asynkron ({ params }) => {
konst inlägg = vänta getSinglePost (params.slug, "inlägg");
lämna tillbaka {
rekvisita: { ...post },
};
};
För att återge markdown till HTML, använd react-markdown.
importera ReactMarkdown från 'reagera-markdown'
importera { getAllPosts, getSinglePost } från "../../utils/md";
konst Post = ({ content, frontmatter }) => {
lämna tillbaka (
<div>
<sid>{frontmatter.tags.join(', ')}</s>
<h2>{frontmatter.title}</h2>
<spänna>{frontmatter.publishedDate}</span>
<ReactMarkdown>{innehåll}</ReactMarkdown>
</div>
);
};
Den här komponenten återger innehållet i varje blogginlägg och dess motsvarande URL.
Om du skapar en utvecklarblogg kan du lägga till syntaxmarkering kapacitet för varje komponent.
Stylar Next.js Markdown-bloggen
Hittills har du skapat en Next.js markdown-blogg som visar en lista med blogginlägg och återger innehållet i det inlägget. För att bloggen ska se snyggare ut bör du lägga till CSS-stilar.
Next.js har bra CSS-stöd, och du kan välja att använda CSS-in-JS-bibliotek som stiliserade komponenter. Om du föredrar att separera CSS från JS kan du använda CSS-moduler.