Low-code tools zoals WordPress vereenvoudigen het maken van een blog. U kunt een vooraf gemaakt thema gebruiken en binnen enkele uren beginnen met het schrijven van blogposts. Als je meer controle over je code wilt en wat tijd over hebt, is het beter om je blog helemaal opnieuw op te bouwen. U kunt zelfs een framework zoals Next.js gebruiken om het proces te vereenvoudigen.
Leer hoe u een eenvoudige Next.js-blog bouwt die markdown-berichten weergeeft.
Een Next.js-project maken
Next.js is een React-framework dat het bouwen van applicaties vereenvoudigt. Het biedt out-of-the-box veel tools en configuraties, zodat u direct na installatie kunt beginnen met het schrijven van code.
De eenvoudigste manier om aan de slag te gaan met Next.js is door de opdracht create-next-app in een terminal uit te voeren:
npx creëren-volgende-app markdown-blog
Met deze opdracht wordt een Next.js-project gemaakt met alle benodigde bestanden om te starten.
Eerste dingen eerst, opruimen index.js bestand er zo uit te zien:
importeren Hoofd van 'volgende/hoofd'
importeren stijlen van '../styles/Home.module.css'
exporterenstandaardfunctieThuis() {
opbrengst (
<div className={styles.container}>
<Hoofd>
<titel>Maak de volgende app</title>
<metanaam="beschrijving" inhoud="Gegenereerd door create next app" />
<link rel="icoon" href="/favicon.ico" />
</Head>
</div>
)
}
Markdown-blogberichten maken
De blog wordt weergegeven markdown-bestanden lokaal opgeslagen in de projectmap. Maak dus een nieuwe map aan in de root met de naam inhoud om de bestanden op te slaan. Maak in deze map een nieuw bestand met de naam create-active-link-nextjs.md en voeg het volgende toe:
titel: hoe creëren een actieve koppelingin Volgendejs
description: Actieve links aanpassen met useRouter()
is gepubliceerd: WAAR
gepubliceerdDatum: 2022/07/22
labels:
- volgende
## Belangrijkste inhoud
De naam van het markdown-bestand zal deel uitmaken van de post-URL, dus zorg ervoor dat deze goed is. Let ook op de inhoud tussen de streepjes. Dit is de metadata van de post en wordt het voorwerk genoemd.
Markdown-bestanden parseren
Voor elke blogpost moet u de markdown-inhoud en het voorwerk analyseren. Gebruik voor Markdown react-markdown en voor de front matter data, gebruik grey-matter.
React-markdown is een React-component gebouwd op opmerking die markdown veilig omzet in HTML. De bibliotheek met grijze materie ontleedt frontmaterie en converteert YAML naar een object.
Voer de volgende opdracht uit in de terminal om react-markdown en gray-matter te installeren.
npm installeren reactie-markdown grijze materie
Maak in een nieuwe map met de naam utils een nieuw bestand met de naam md.js. U maakt helperfuncties die de inhoud van blogposts in dit bestand retourneren.
Krijg alle gepubliceerde berichten
Voeg in md.js de volgende code toe om alle berichten in de inhoudsmap te retourneren.
importeren fs van "fs";
importeren pad van "pad";
importeren materie van "grijze massa";exporterenconst getPath = (map: tekenreeks) => {
opbrengst pad.join (proces.cwd(), `/${folder}`); // Krijg het volledige pad
}exporterenconst getFileContent = (bestandsnaam: string, map:string) => {
const POSTS_PATH = getPath (map)
return fs.readFileSync (path.join (POSTS_PATH, bestandsnaam), "utf8");
};exporterenconst getAllPosts = (map: string) => {
const POSTS_PATH = getPath (map)
opbrengst fs
.readdirSync (POSTS_PATH) // bestanden in map ophalen
.filter((pad) => /\\.md?$/.test (pad)) // alleen .md-bestanden
.map((bestandsnaam) => { // map over elk bestand
const bron = getFileContent (bestandsnaam, map); // haal de inhoud van het bestand op
const slug = bestandsnaam.vervangen(/\\.md?$/, ""); // haal de slug uit de bestandsnaam
const { data } = materie (bron); // haal voorwerk uit
opbrengst {
frontmaterie: gegevens,
slak: slak,
};
});
};
In de functie getAllPosts():
- Haal het volledige pad naar de inhoudsmap op met behulp van de padmodule.
- Download de bestanden in de inhoudsmap met behulp van de methode fs.readdirSync().
- Filter de bestanden om alleen bestanden met de extensie .md op te nemen.
- Haal de inhoud van elk bestand op, inclusief het voorwerk, met behulp van de kaartmethode.
- Retourneert een array met het voorwerk en de slug (de bestandsnaam zonder de extensie .md) van elk bestand.
Om alleen de gepubliceerde berichten te krijgen, kun je alle berichten filteren en alleen de berichten retourneren waarvan de sleutel isPublished in het voorwerk is ingesteld op waar.
exporterenconst getAllPublished = (map: string) => {
const posts = getAllPosts (map)const gepubliceerd = posts.filter((post) => {
opbrengst post.frontmatter.is gepubliceerd WAAR
})
opbrengst gepubliceerd
}
Voeg in md.js de functie getSinglePost() toe om de inhoud van een enkel bericht op te halen.
exporterenconst getSinglePost = (slak: tekenreeks, map:string) => {
const bron = haalBestandInhoud(`${slak}.md`, map);
const { gegevens: frontmatter, inhoud } = materie (bron);
opbrengst {
frontmaterie,
inhoud,
};
};
Deze functie roept de functie getFileContent() aan om de inhoud van elk bestand op te halen. Vervolgens haalt de functie met behulp van het grijze-materiepakket de voormaterie en de markdown-inhoud op.
Geef alle blogberichten weer
Next.js biedt verschillende weergave-opties, waaronder statische generatie. Statische generatie is een soort pre-rendering waarbij Next.js alle HTML-pagina's genereert tijdens het bouwen. Je gebruikt het om snelle statische pagina's te maken.
Bekijk de officiële Nextjs-documentatie voor meer informatie over renderen.
Next.js zal tijdens het bouwen een pagina vooraf renderen met behulp van de rekwisieten die worden geretourneerd door de functie getStaticProps. In dit geval zijn de rekwisieten een reeks gepubliceerde berichten.
exporterenconst getStaticProps = asynchroon () => {
const posts = getAllPublished("posten");
opbrengst {
rekwisieten: { berichten },
};
};
Pas het bestand index.js aan om een lijst met blogposts weer te geven.
importeren Hoofd van "volgende/hoofd";
importeren Koppeling van "volgende/link";
importeren { getAllPublished } van "../utils/md";functieThuis({ berichten }) {
opbrengst (
<div className={styles.container}>
<Hoofd>
<titel>Maak de volgende app</title>
<metanaam="beschrijving" inhoud="Gegenereerd door create next app" />
<link rel="icoon" href="/favicon.ico" />
</Head>
<div>
{posts.map((post) => (
<artikelsleutel={post.slug}>
<P>[ {post.frontmatter.tags.join(", ")} ]</P>
`berichten/${post.slug}`}>
<A>{post.frontmatter.title}</A>
</Link>{""}
<P>{post.frontmatter.description}</P>
</article>
))}
</div>
</div>
);
}exporterenconst getStaticProps = asynchroon () => {
const posts = getAllPublished("inhoud");opbrengst {
rekwisieten: { berichten },
};
};
exporterenstandaard Thuis;
De Home-component gebruikt de berichten die worden geretourneerd door getStaticProps. Het herhaalt ze met behulp van de kaartfunctie en voor elk bericht geeft het een titel, een link naar het volledige bericht en een beschrijving weer.
Geef een blogpost weer
Zoals vermeld, worden de bestandsnamen van de berichten gebruikt als URL-paden. Deze paden zijn ook dynamisch, dus u moet ze genereren tijdens het bouwen. Met Next.js kunt u dit doen met behulp van de functie getStaticPaths().
In deze code worden de paden bijvoorbeeld gegenereerd op basis van de namen van de markdown-bestanden.
exporterenconst getStaticPaths = asynchroon () => {
const paden = getAllPublished("posten").map(({ slak }) => ({ params: { slug } }));
opbrengst {
paden,
terugvallen: vals,
};
};
Merk op dat u de berichtgegevens gebruikt die zijn geretourneerd door de helperfunctie getAllPublished() die u eerder hebt gemaakt.
U stelt ook fallback in op false, wat een retourneert 404-fout voor wegen die niet bestaan.
getStaticPaths() wordt meestal gebruikt met getStaticProps() die de inhoud van elk bericht ophaalt op basis van de parameters.
exporterenconst getStaticProps = asynchroon ({ parameters }) => {
const plaatsen = wachten getSinglePost (params.slug, "berichten");
opbrengst {
rekwisieten: { ...post },
};
};
Gebruik react-markdown om de prijsverlaging naar HTML weer te geven.
importeren ReagerenMarkdown van 'reageer-afprijs'
importeren { getAllPosts, getSinglePost } van "../../utils/md";
const Bericht = ({ content, frontmatter }) => {
opbrengst (
<div>
<P>{frontmatter.tags.join(', ')}</P>
<h2>{frontmatter.titel}</h2>
<span>{frontmatter.publishedDate}</span>
<ReagerenMarkdown>{inhoud}</ReactMarkdown>
</div>
);
};
Deze component geeft de inhoud van elk blogbericht en de bijbehorende URL weer.
Als je een ontwikkelaarsblog maakt, kan dat voeg syntaxisaccentuering toe mogelijkheden voor elk onderdeel.
Styling van de Next.js Markdown-blog
Tot nu toe heb je een Next.js markdown-blog gemaakt die een lijst met blogberichten weergeeft en de inhoud van dat bericht weergeeft. Om de blog er mooier uit te laten zien, moet je CSS-stijlen toevoegen.
Next.js heeft goede CSS-ondersteuning en u kunt ervoor kiezen om CSS-in-JS-bibliotheken te gebruiken zoals gestileerde componenten. Als u liever CSS van JS scheidt, kunt u CSS-modules gebruiken.
