Narzędzia niskokodowe, takie jak WordPress, upraszczają proces tworzenia bloga. Możesz użyć gotowego motywu i zacząć pisać posty na blogu w ciągu kilku godzin. Jeśli chcesz mieć większą kontrolę nad swoim kodem i masz trochę wolnego czasu, lepiej zbudować swojego bloga od podstaw. Możesz nawet użyć frameworka takiego jak Next.js, aby uprościć ten proces.

Dowiedz się, jak utworzyć prosty blog Next.js, który renderuje posty z przecenami.

Tworzenie projektu Next.js

Next.js to framework React, który upraszcza tworzenie aplikacji. Zapewnia wiele narzędzi i konfiguracji od razu po wyjęciu z pudełka, umożliwiając rozpoczęcie pisania kodu natychmiast po jego zainstalowaniu.

Najprostszym sposobem na rozpoczęcie pracy z Next.js jest uruchomienie komendy create-next-app w terminalu:

npx tworzyć-Następny-blog z przecenami aplikacji

To polecenie tworzy projekt Next.js zawierający wszystkie pliki niezbędne do uruchomienia.

Po pierwsze, posprzątaj indeks.js plik, aby wyglądał tak:

import Głowa z „następny / głowa”
import style z „../style/Home.module.css”





instagram viewer

eksportdomyślnyfunkcjonowaćDom() {
powrót (
<div className={styles.container}>
<Głowa>
<tytuł>Utwórz następną aplikację</title>
<metanazwa="opis" zawartość="Wygenerowane przez utworzenie następnej aplikacji" />
<link rel="Ikona" href="/favicon.ico" />
</Head>
</div>
 )
}

Twórz posty na blogu Markdown

Blog zostanie wyrenderowany pliki przeceny przechowywane lokalnie w folderze projektu. Utwórz więc nowy folder w katalogu głównym o nazwie treść do przechowywania plików. W tym folderze utwórz nowy plik o nazwie create-active-link-nextjs.md i dodaj następujące:


tytuł: Jak tworzyć aktywny połączyćW Nextjs
opis: Dostosowywanie aktywnych łączy za pomocą useRouter()
jest opublikowany: PRAWDA
Data publikacji: 22.07.2022
tagi:
 - Następny

## Główna zawartość

Nazwa pliku przeceny będzie częścią adresu URL posta, więc upewnij się, że jest dobra. Zwróć także uwagę na zawartość między myślnikami. To są metadane postu i nazywają się frontem.

Analizowanie plików Markdown

W przypadku każdego posta na blogu musisz przeanalizować treść przeceny i treść frontu. W przypadku Markdown użyj przeceny reagowania, a dla danych z przodu użyj szarej materii.

React-markdown to komponent React oparty na uwagach, który bezpiecznie konwertuje markdown na HTML. Biblioteka szarej materii analizuje przednią materię i konwertuje YAML na obiekt.

Wykonaj następujące polecenie w terminalu, aby zainstalować przecenę reagowania i szarą materię.

np zainstalować reaguj na szarą materię przecenową

W nowym folderze o nazwie utils utwórz nowy plik o nazwie md.js. Utworzysz funkcje pomocnicze, które zwracają zawartość wpisów na blogu w tym pliku.

Pobierz wszystkie opublikowane posty

W pliku md.js dodaj następujący kod, aby zwrócić wszystkie posty w folderze zawartości.

import fs z "fs";
import ścieżka z "ścieżka";
import materiał z "szare komórki";
eksportkonst getPath = (folder: string) => {
powrót path.join (process.cwd(), `/${folder}`); // Pobierz pełną ścieżkę 
}


eksportkonst getFileContent = (nazwa pliku: string, teczka:string) => {
konst POSTS_PATH = getPath (folder)
 return fs.readFileSync (ścieżka.join (POSTS_PATH, nazwa pliku), "utf8");
};


eksportkonst getAllPosts = (folder: string) => {
konst POSTS_PATH = getPath (folder)
powrót fs
 .readdirSync (POSTS_PATH) // pobierz pliki z katalogu
 .filter((ścieżka) => /\\.md?$/.test (ścieżka)) // tylko pliki .md
 .map((nazwa_pliku) => { // mapuje każdy plik
konst źródło = getFileContent (nazwa pliku, folder); // pobierz zawartość pliku
konst slug = nazwa_pliku. zastąp (/\\.md?$/, ""); // pobierz slug z nazwy pliku
konst { dane } = sprawa (źródło); // wyodrębnij frontmatter
powrót {
 frontmatter: dane,
 ślimak: ślimak,
 };
 });
};

W funkcji getAllPosts():

  • Uzyskaj pełną ścieżkę do folderu zawartości za pomocą modułu path.
  • Pobierz pliki z folderu zawartości za pomocą metody fs.readdirSync().
  • Przefiltruj pliki, aby zawierały tylko pliki z rozszerzeniem .md.
  • Pobierz zawartość każdego pliku, w tym materiał z przodu, używając metody mapy.
  • Zwróć tablicę zawierającą przednią część i ślimak (nazwa pliku bez rozszerzenia .md) każdego pliku.

Aby uzyskać tylko opublikowane posty, możesz filtrować wszystkie posty i zwracać tylko te, których klucz isPublished w pierwszej sprawie jest ustawiony na true.

eksportkonst getAllPublished = (folder: string) => {
konst posty = getAllPosts (folder)
konst opublikowane = posts.filter((post) => {
powrót post.frontmatter.isPublished PRAWDA
 })
powrót opublikowany
 }

W md.js dodaj funkcję getSinglePost(), aby pobrać zawartość pojedynczego posta.

eksportkonst getSinglePost = (slug: string, teczka:string) => {
konst źródło = pobierzZawartośćPliku(`${ślimak}.md`, teczka);
konst { dane: frontmatter, content } = sprawa (źródło);
powrót {
 frontmateria,
 treść,
 };
};

Ta funkcja wywołuje funkcję getFileContent() w celu pobrania zawartości każdego pliku. Następnie za pomocą pakietu szarej materii funkcja pobiera przednią materię i zawartość przeceny.

Wyświetl wszystkie posty na blogu

Next.js udostępnia różne opcje renderowania, z których jedną jest generowanie statyczne. Generowanie statyczne to rodzaj wstępnego renderowania, w którym Next.js generuje wszystkie strony HTML w czasie kompilacji. Używasz go do tworzenia szybkich stron statycznych.

Sprawdź oficjalna dokumentacja Nextjs aby uzyskać więcej informacji na temat renderowania.

Next.js wstępnie wyrenderuje stronę w czasie kompilacji, używając rekwizytów zwróconych przez funkcję getStaticProps. W tym przypadku rekwizytami będzie tablica opublikowanych postów.

eksportkonst getStaticProps = asynchroniczny () => {
 posty const = getAllPublished("posty");
powrót {
 rekwizyty: {posty},
 };
};

Zmodyfikuj plik index.js, aby wyświetlić listę postów na blogu.

import Głowa z „następny / głowa”;
import Połączyć z "następny/link";
import { getAllPublished } z "../narzędzia/md";
funkcjonowaćDom({ wpisy }) {
powrót (
<div className={styles.container}>
<Głowa>
<tytuł>Utwórz następną aplikację</title>
<metanazwa="opis" zawartość="Wygenerowane przez utworzenie następnej aplikacji" />
<link rel="Ikona" href="/favicon.ico" />
</Head>
<dz>
 {posty. map((post) => (
<klucz artykułu={post.slug}>
<P>[ {post.frontmatter.tags.join(", ")} ]</P>
`posty/${post.slug}`}>
<A>{post.frontmatter.title}</A>
</Link>{""}
<P>{post.frontmatter.description}</P>
</article>
 ))}
</div>
</div>
 );
}


eksportkonst getStaticProps = asynchroniczny () => {
 posty const = getAllPublished("treść");


powrót {
 rekwizyty: {posty},
 };
};
eksportdomyślny Dom;

Komponent Home używa postów zwróconych przez getStaticProps. Iteruje je za pomocą funkcji map, a dla każdego posta wyświetla tytuł, link do pełnego postu i opis.

Wyświetl wpis na blogu

Jak wspomniano, nazwy plików postów będą używane jako ścieżki URL. Te ścieżki są również dynamiczne, więc musisz je wygenerować podczas kompilacji. Next.js pozwala to zrobić za pomocą funkcji getStaticPaths().

Na przykład w tym kodzie ścieżki są generowane na podstawie nazw plików przeceny.

eksportkonst getStaticPaths = asynchroniczny () => {
 const ścieżki = getAllPublished("posty").map(({ ślimak }) => ({ parametry: { slug } }));
powrót {
 ścieżki,
 awaryjna: FAŁSZ,
 };
};

Zauważ, że używasz danych postów zwróconych przez utworzoną wcześniej funkcję pomocniczą getAllPublished().

Ustawiasz również rezerwę na false, która zwraca a błąd 404 dla ścieżek, które nie istnieją.

Metoda getStaticPaths() jest zwykle używana z funkcją getStaticProps(), która pobiera zawartość każdego postu na podstawie parametrów.

eksportkonst getStaticProps = asynchroniczny ({ parametry }) => {
konst poczta = czekać na getSinglePost (params.slug, "posty");
powrót {
 rekwizyty: { ...post },
 };
};

Aby wyrenderować przecenę do HTML, użyj reaguj-przecena.

import ZareagujMarkdown z „reaguj na przecenę”
import { pobierz wszystkie posty, pobierz pojedynczy post } z "../../narzędzia/md";
konst Post = ({ treść, frontmatter }) => {
powrót (
<dz>
<P>{frontmatter.tags.join(', ')}</P>
<h2>{frontmatter.title}</h2>
<Zakres>{frontmatter.publishedDate}</span>
<ZareagujMarkdown>{treść}</ReactMarkdown>
</div>
 );
};

Ten komponent renderuje zawartość każdego posta na blogu i odpowiadający mu adres URL.

Jeśli tworzysz blog dla programistów, możesz dodaj podświetlanie składni możliwości dla każdego komponentu.

Stylizacja bloga Next.js Markdown

Do tej pory utworzyłeś blog ze znacznikami Next.js, który wyświetla listę postów na blogu i renderuje zawartość tego posta. Aby blog wyglądał ładniej, należy dodać style CSS.

Next.js ma dobrą obsługę CSS i możesz użyć bibliotek CSS-in-JS, takich jak stylizowane komponenty. Jeśli wolisz oddzielić CSS od JS, możesz użyć modułów CSS.