Lavkodeverktøy som WordPress forenkler bloggopprettingsprosessen. Du kan bruke et forhåndsdefinert tema og begynne å skrive blogginnlegg i løpet av få timer. Hvis du vil ha mer kontroll over koden din og har litt tid på deg, er det bedre å bygge bloggen din fra bunnen av. Du kan til og med bruke et rammeverk som Next.js for å forenkle prosessen.
Lær hvordan du bygger en enkel Next.js-blogg som gjengir markdown-innlegg.
Opprette et Next.js-prosjekt
Next.js er et React-rammeverk som forenkler hvordan du bygger applikasjoner. Det gir mange verktøy og konfigurasjoner ut av esken, slik at du kan begynne å skrive kode umiddelbart etter at du har installert den.
Den enkleste måten å komme i gang med Next.js på er ved å kjøre kommandoen create-next-app i en terminal:
npx skape-neste-app markdown-blogg
Denne kommandoen oppretter et Next.js-prosjekt som inneholder alle nødvendige filer for å starte.
Først må du rydde opp index.js fil til å se slik ut:
import Hode fra 'neste/hode'
import stiler fra '../styles/Home.module.css'
eksportmisligholdefunksjonHjem() {
komme tilbake (
<div className={styles.container}>
<Hode>
<tittel>Lag neste app</title>
<metanavn="beskrivelse" innhold="Generert av opprette neste app" />
<link rel="ikon" href="/favicon.ico" />
</Head>
</div>
)
}
Lag Markdown-blogginnlegg
Bloggen vil gjengi markdown-filer lagret lokalt i prosjektmappen. Så, opprett en ny mappe ved roten kalt innhold for å lagre filene. I denne mappen oppretter du en ny fil som heter create-active-link-nextjs.md og legg til følgende:
tittel: Hvordan skape en aktiv linki Nextjs
beskrivelse: Tilpasse aktive lenker ved å bruke useRouter()
er publisert: ekte
publiseringsdato: 2022/07/22
tagger:
- neste
## Hovedinnhold
Navnet på markdown-filen vil være en del av post-URLen, så sørg for at den er god. Legg også merke til innholdet mellom strekene. Dette er metadataene til innlegget og kalles frontsaken.
Parsing Markdown-filer
For hvert blogginnlegg må du analysere markdown-innholdet og frontsaken. For Markdown, bruk react-markdown og for frontmateriedataene, bruk grå materie.
React-markdown er en React-komponent bygget på bemerkning som trygt konverterer markdown til HTML. Gråstoffbiblioteket analyserer frontmaterie og konverterer YAML til et objekt.
Utfør følgende kommando i terminalen for å installere react-markdown og grey-materie.
npm installere reager-markdown grå materie
Opprett en ny fil kalt md.js i en ny mappe kalt utils. Du vil lage hjelpefunksjoner som returnerer blogginnlegg i denne filen.
Få alle publiserte innlegg
I md.js legger du til følgende kode for å returnere alle innleggene i innholdsmappen.
import fs fra "fs";
import sti fra "sti";
import saken fra "grå materie";eksportkonst getPath = (mappe: streng) => {
komme tilbake path.join (process.cwd(), `/${folder}`); // Få full bane
}eksportkonst getFileContent = (filnavn: streng, mappe:streng) => {
konst POSTS_PATH = getPath (mappe)
returner fs.readFileSync (path.join (POSTS_PATH, filnavn), "utf8");
};eksportkonst getAllPosts = (mappe: streng) => {
konst POSTS_PATH = getPath (mappe)
komme tilbake fs
.readdirSync (POSTS_PATH) // få filer i katalogen
.filter((bane) => /\\.md?$/.test (bane)) // bare .md-filer
.map((filnavn) => { // kart over hver fil
konst source = getFileContent (filnavn, mappe); // hente filinnholdet
konst slug = filnavn.erstatt(/\\.md?$/, ""); // få slug fra filnavnet
konst { data } = materie (kilde); // trekke ut frontmaterie
komme tilbake {
frontmatter: data,
snegl: snegl,
};
});
};
I getAllPosts()-funksjonen:
- Få hele banen til innholdsmappen ved å bruke banemodulen.
- Hent filene i innholdsmappen ved å bruke fs.readdirSync()-metoden.
- Filtrer filene slik at de bare inkluderer filer med filtypen .md.
- Hent innholdet i hver fil, inkludert frontsaken ved hjelp av kartmetoden.
- Returner en matrise som inneholder frontsaken og slug (filnavnet uten .md-utvidelsen) til hver fil.
For å få kun publiserte innlegg, kan du filtrere alle innleggene og bare returnere de hvis isPublished-nøkkel i frontsaken er satt til sann.
eksportkonst getAllPublished = (mappe: streng) => {
konst posts = getAllPosts (mappe)konst publisert = posts.filter((post) => {
komme tilbake post.frontmatter.er publisert ekte
})
komme tilbake publisert
}
I md.js legger du til getSinglePost()-funksjonen for å hente innholdet i et enkelt innlegg.
eksportkonst getSinglePost = (snegl: streng, mappe:streng) => {
konst kilde = getFileContent(`${slug}.md`, mappe);
konst { data: frontmatter, innhold } = materie (kilde);
komme tilbake {
frontmaterie,
innhold,
};
};
Denne funksjonen kaller getFileContent()-funksjonen for å få innholdet i hver fil. Deretter ved å bruke gråstoffpakken henter funksjonen frem forstoffet og nedmerkingsinnholdet.
Vis alle blogginnleggene
Next.js tilbyr forskjellige gjengivelsesalternativer, en av dem er statisk generering. Statisk generering er en type forhåndsgjengivelse der Next.js genererer alle HTML-sidene i løpet av byggetiden. Du bruker den til å lage raske statiske sider.
Sjekk ut offisiell Nextjs-dokumentasjon for mer informasjon om gjengivelse.
Next.js vil forhåndsrendere en side ved byggetidspunkt ved å bruke rekvisittene som returneres av getStaticProps-funksjonen. I dette tilfellet vil rekvisittene være en rekke publiserte innlegg.
eksportkonst getStaticProps = asynkron () => {
const posts = getAllPublished("innlegg");
komme tilbake {
rekvisitter: { innlegg },
};
};
Endre index.js-filen for å vise en liste over blogginnlegg.
import Hode fra "neste/hode";
import Link fra "neste/lenke";
import { getAllPublished } fra "../utils/md";funksjonHjem({ innlegg }) {
komme tilbake (
<div className={styles.container}>
<Hode>
<tittel>Lag neste app</title>
<metanavn="beskrivelse" innhold="Generert av opprette neste app" />
<link rel="ikon" href="/favicon.ico" />
</Head>
<div>
{posts.map((post) => (
<artikkelnøkkel={post.slug}>
<s>[ {post.frontmatter.tags.join(", ")} ]</s>
`innlegg/${post.slug}`}>
<en>{post.frontmatter.title}</en>
</Link>{""}
<s>{post.frontmatter.description}</s>
</article>
))}
</div>
</div>
);
}eksportkonst getStaticProps = asynkron () => {
const posts = getAllPublished("innhold");komme tilbake {
rekvisitter: { innlegg },
};
};
eksportmisligholde Hjem;
Hjem-komponenten bruker innleggene som returneres av getStaticProps. Den itererer over dem ved hjelp av kartfunksjonen, og for hvert innlegg viser den en tittel, en lenke til hele innlegget og en beskrivelse.
Vis et blogginnlegg
Som nevnt vil postenes filnavn brukes som URL-stier. Disse banene er også dynamiske, så du må generere dem under byggetiden. Next.js lar deg gjøre dette ved å bruke getStaticPaths()-funksjonen.
For eksempel, i denne koden, genereres banene fra navnene på markdown-filene.
eksportkonst getStaticPaths = asynkron () => {
const paths = getAllPublished("innlegg").map(({ slug }) => ({ params: { slug } }));
komme tilbake {
stier,
falle tilbake: falsk,
};
};
Merk at du bruker innleggsdataene som returneres av getAllPublished()-hjelpefunksjonen du opprettet før.
Du setter også fallback til false, som returnerer en 404 feil for stier som ikke finnes.
getStaticPaths() brukes vanligvis med getStaticProps() som henter innholdet i hvert innlegg basert på parameterne.
eksportkonst getStaticProps = asynkron ({ params }) => {
konst innlegg = avvente getSinglePost (params.slug, "posts");
komme tilbake {
rekvisitter: { ...post },
};
};
For å gjengi markdown til HTML, bruk react-markdown.
import ReactMarkdown fra 'reager-markdown'
import { getAllPosts, getSinglePost } fra "../../utils/md";
konst Innlegg = ({ innhold, frontmatter }) => {
komme tilbake (
<div>
<s>{frontmatter.tags.join(', ')}</s>
<h2>{frontmatter.title}</h2>
<span>{frontmatter.publishedDate}</span>
<ReactMarkdown>{innhold}</ReactMarkdown>
</div>
);
};
Denne komponenten vil gjengi innholdet i hvert blogginnlegg og tilhørende URL.
Hvis du oppretter en utviklerblogg, kan du legge til syntaksutheving kapasitet for hver komponent.
Styler Next.js Markdown-bloggen
Så langt har du opprettet en Next.js markdown-blogg som viser en liste over blogginnlegg og gjengir innholdet i det innlegget. For å få bloggen til å se penere ut bør du legge til CSS-stiler.
Next.js har god CSS-støtte, og du kan velge å bruke CSS-in-JS-biblioteker som stylede komponenter. Hvis du foretrekker å skille CSS fra JS, kan du bruke CSS-moduler.
