Alati s niskim kodom poput WordPressa pojednostavljuju proces stvaranja bloga. Možete koristiti unaprijed napravljenu temu i početi pisati postove na blogu za nekoliko sati. Ako želite veću kontrolu nad svojim kodom i imate malo vremena na raspolaganju, bolje je izgraditi svoj blog od nule. Možete čak koristiti okvir kao što je Next.js da pojednostavite postupak.
Naučite kako izgraditi jednostavan Next.js blog koji renderira markdown postove.
Stvaranje Next.js projekta
Next.js je okvir Reacta koji pojednostavljuje izradu aplikacija. Pruža mnoge alate i konfiguracije odmah nakon instalacije, što vam omogućuje da počnete pisati kod odmah nakon instalacije.
Najjednostavniji način za početak rada s Next.js je pokretanjem create-next-app naredbe u terminalu:
npx stvoriti-Sljedeći-app markdown-blog
Ova naredba stvara Next.js projekt koji sadrži sve potrebne datoteke za pokretanje.
Prije svega, očistite index.js datoteka da izgleda ovako:
uvoz glava iz 'sljedeća/glava'
uvoz stilovi iz '../styles/Home.module.css'
izvozzadanofunkcijaDom() {
povratak (
<div className={styles.container}>
<glava>
<titula>Stvori sljedeću aplikaciju</title>
<meta naziv="opis" sadržaj="Generirano stvaranjem sljedeće aplikacije" />
<veza rel="ikona" href="/favicon.ico" />
</Head>
</div>
)
}
Stvorite Markdown postove na blogu
Blog će se prikazati markdown datoteke pohranjeni lokalno u mapi projekta. Dakle, stvorite novu mapu u korijenu pod nazivom sadržaj za pohranjivanje datoteka. U ovoj mapi kreirajte novu datoteku pod nazivom create-active-link-nextjs.md i dodajte sljedeće:
naslov: Kako stvoriti aktivan vezau Nextjs
opis: Prilagodba aktivnih veza pomoću useRouter()
je objavljeno: pravi
Datum objave: 22.7.2022
oznake:
- Sljedeći
## Glavni sadržaj
Naziv datoteke za označavanje bit će dio URL-a objave, stoga provjerite je li dobar. Također, obratite pažnju na sadržaj između crtica. Ovo su metapodaci objave i nazivaju se prednji sadržaj.
Raščlanjivanje Markdown datoteka
Za svaki post na blogu morate raščlaniti sadržaj oznake i naslovnicu. Za Markdown upotrijebite react-markdown, a za podatke o prednjoj tvari upotrijebite gray-matter.
React-markdown je React komponenta izgrađena na remarku koja sigurno pretvara markdown u HTML. Knjižnica sive tvari analizira prednju materiju i pretvara YAML u objekt.
Izvršite sljedeću naredbu u terminalu da instalirate react-markdown i gray-matter.
npm instalirati react-markdown siva tvar
U novoj mapi pod nazivom utils stvorite novu datoteku pod nazivom md.js. Stvorit ćete pomoćne funkcije koje vraćaju sadržaj posta bloga u ovoj datoteci.
Dobijte sve objavljene postove
U md.js dodajte sljedeći kod za vraćanje svih postova u mapi sa sadržajem.
uvoz fs iz "fs";
uvoz staza iz "staza";
uvoz materija iz "siva tvar";izvozkonst getPath = (mapa: niz) => {
povratak path.join (process.cwd(), `/${mapa}`); // Dohvati punu putanju
}izvozkonst getFileContent = (naziv datoteke: niz, mapa:string) => {
konst POSTS_PATH = getPath (mapa)
return fs.readFileSync (path.join (POSTS_PATH, naziv datoteke), "utf8");
};izvozkonst getAllPosts = (mapa: niz) => {
konst POSTS_PATH = getPath (mapa)
povratak fs
.readdirSync (POSTS_PATH) // dohvati datoteke u direktorij
.filter((put) => /\\.md?$/.test (put) // samo .md datoteke
.map((fileName) => { // preslikati svaku datoteku
konst izvor = getFileContent (naziv datoteke, mapa); // dohvaćanje sadržaja datoteke
konst slug = FileName.replace(/\\.md?$/, ""); // dohvati slug iz naziva datoteke
konst { podaci } = materija (izvor); // izdvajanje prednje tvari
povratak {
frontmatter: podaci,
puž: puž,
};
});
};
U funkciji getAllPosts():
- Dobijte puni put do mape sa sadržajem pomoću modula puta.
- Dobijte datoteke u mapi sa sadržajem pomoću metode fs.readdirSync().
- Filtrirajte datoteke tako da uključuju samo datoteke s nastavkom .md.
- Dohvatite sadržaj svake datoteke, uključujući prednji dio pomoću metode karte.
- Vrati niz koji sadrži prednju materiju i slug (naziv datoteke bez ekstenzije .md) svake datoteke.
Da biste dobili samo objavljene postove, možete filtrirati sve postove i vratiti samo one čiji je ključ isPublished u prednjoj temi postavljen na true.
izvozkonst getAllPublished = (mapa: niz) => {
konst postovi = getAllPosts (mapa)konst objavljeno = postovi.filter((post) => {
povratak post.frontmatter.isPublished pravi
})
povratak Objavljeno
}
U md.js dodajte funkciju getSinglePost() za dohvaćanje sadržaja jednog posta.
izvozkonst getSinglePost = (slug: niz, mapa:string) => {
konst izvor = getFileContent(`${slug}.md`, mapa);
konst { podaci: prednja tvar, sadržaj } = materija (izvor);
povratak {
frontmatter,
sadržaj,
};
};
Ova funkcija poziva funkciju getFileContent() da dobije sadržaj svake datoteke. Zatim pomoću paketa sive tvari funkcija dohvaća prednju materiju i sadržaj oznake.
Prikaz svih postova na blogu
Next.js pruža različite opcije renderiranja, a jedna od njih je statička generacija. Statičko generiranje vrsta je predrenderiranja gdje Next.js generira sve HTML stranice tijekom vremena izrade. Koristite ga za izradu brzih statičnih stranica.
Provjerite službena Nextjs dokumentacija za više informacija o renderiranju.
Next.js će unaprijed renderirati stranicu u vrijeme izgradnje koristeći props koje vraća funkcija getStaticProps. U ovom slučaju, rekviziti će biti niz objavljenih postova.
izvozkonst getStaticProps = asinkroni () => {
const postovi = getAllPublished("postovi");
povratak {
rekviziti: { postovi },
};
};
Izmijenite datoteku index.js za prikaz popisa postova na blogu.
uvoz glava iz "sljedeća/glava";
uvoz Veza iz "sljedeća/link";
uvoz {getAllPublished} iz "../utils/md";funkcijaDom({ postovi }) {
povratak (
<div className={styles.container}>
<glava>
<titula>Stvori sljedeću aplikaciju</title>
<meta naziv="opis" sadržaj="Generirano stvaranjem sljedeće aplikacije" />
<veza rel="ikona" href="/favicon.ico" />
</Head>
<div>
{posts.map((post) => (
<ključ članka={post.slug}>
<str>[ {post.frontmatter.tags.join(", ")} ]</str>
`postovi/${post.slug}`}>
<a>{post.frontmatter.title}</a>
</Link>{""}
<str>{post.frontmatter.description}</str>
</article>
))}
</div>
</div>
);
}izvozkonst getStaticProps = asinkroni () => {
const postovi = getAllPublished("sadržaj");povratak {
rekviziti: { postovi },
};
};
izvozzadano Dom;
Komponenta Početna koristi postove koje vraća getStaticProps. Ponavlja ih pomoću funkcije karte i za svaki post prikazuje naslov, poveznicu na cijeli post i opis.
Prikažite post na blogu
Kao što je spomenuto, nazivi datoteka objava koristit će se kao URL staze. Ove su staze također dinamične, pa ih morate generirati tijekom izgradnje. Next.js vam omogućuje da to učinite pomoću funkcije getStaticPaths().
Na primjer, u ovom kodu, staze se generiraju iz naziva datoteka za označavanje.
izvozkonst getStaticPaths = asinkroni () => {
const paths = getAllPublished("postovi").map(({ slug }) => ({ params: { slug } }));
povratak {
staze,
zamjena: lažno,
};
};
Imajte na umu da koristite podatke o objavama koje je vratila pomoćna funkcija getAllPublished() koju ste prije stvorili.
Također postavljate zamjenu na false, što vraća a 404 pogreška za staze koje ne postoje.
getStaticPaths() se obično koristi s getStaticProps() koji dohvaća sadržaj svake objave na temelju parametara.
izvozkonst getStaticProps = asinkroni ({params}) => {
konst post = čekati getSinglePost (params.slug, "postovi");
povratak {
rekviziti: { ...post },
};
};
Da biste renderirali markdown u HTML, upotrijebite react-markdown.
uvoz ReactMarkdown iz 'react-markdown'
uvoz { getAllPosts, getSinglePost } iz "../../utils/md";
konst Post = ({ content, frontmatter }) => {
povratak (
<div>
<str>{frontmatter.tags.join(', ')}</str>
<h2>{frontmatter.title}</h2>
<raspon>{frontmatter.publishedDate}</span>
<ReactMarkdown>{sadržaj}</ReactMarkdown>
</div>
);
};
Ova komponenta će prikazati sadržaj svakog posta na blogu i njegov odgovarajući URL.
Ako stvarate blog razvojnog programera, možete dodati isticanje sintakse sposobnost za svaku komponentu.
Stiliziranje bloga Next.js Markdown
Do sada ste stvorili Next.js markdown blog koji prikazuje popis postova na blogu i renderira sadržaj tog posta. Kako bi blog izgledao ljepše, dodajte CSS stilove.
Next.js ima dobru podršku za CSS, a možete odabrati korištenje CSS-in-JS biblioteka poput stiliziranih komponenti. Ako želite odvojiti CSS od JS-a, možete koristiti CSS module.