Инструменти с нисък код като WordPress опростяват процеса на създаване на блог. Можете да използвате предварително създадена тема и да започнете да пишете публикации в блога след няколко часа. Ако искате повече контрол върху кода си и разполагате с известно време, по-добре е да създадете своя блог от нулата. Можете дори да използвате рамка като Next.js, за да опростите процеса.

Научете как да създадете прост блог Next.js, който изобразява публикации с маркдаун.

Създаване на проект Next.js

Next.js е рамка на React, която опростява начина, по който създавате приложения. Той предоставя много инструменти и конфигурации извън кутията, което ви позволява да започнете да пишете код веднага след инсталирането му.

Най-лесният начин да започнете с Next.js е като изпълните командата create-next-app в терминал:

npx създавам-следващия-блог за маркиране на приложения

Тази команда създава проект Next.js, съдържащ всички необходими файлове за стартиране.

Първо, първо почистете index.js файл да изглежда така:

instagram viewer 
импортиране Глава от "следваща/глава"
импортиране стилове от '../styles/Home.module.css'
износпо подразбиранефункцияУ дома() {
връщане (
<div className={styles.container}>
<Глава>
<заглавие>Създаване на следващо приложение</title>
<мета име="описание" съдържание="Генерирано от създаване на следващо приложение" />
<връзка rel="икона" href="/favicon.ico" />
</Head>
</div>
 )
}

Създайте Markdown публикации в блога

Блогът ще се визуализира файлове за маркиране съхранявани локално в папката на проекта. И така, създайте нова папка в корена, наречена съдържание за съхраняване на файловете. В тази папка създайте нов файл, наречен create-active-link-nextjs.md и добавете следното:


заглавие: Как да създавам активен връзкав Nextjs
описание: Персонализиране на активни връзки с помощта на useRouter()
е публикувано: вярно
публикувана дата: 22.07.2022 г
тагове:
 - следващия

## Главно съдържание

Името на файла за маркиране ще бъде част от URL адреса на публикацията, така че се уверете, че е добро. Също така обърнете внимание на съдържанието между тиретата. Това са метаданните на публикацията и се наричат ​​предната материя.

Разбор на Markdown файлове

За всяка публикация в блог трябва да анализирате съдържанието на маркдаун и предната част. За Markdown използвайте react-markdown, а за данните от предната материя използвайте gray-matter.

React-markdown е компонент на React, изграден върху забележка, който безопасно преобразува markdown в HTML. Библиотеката на сивата материя анализира предната материя и преобразува YAML в обект.

Изпълнете следната команда в терминала, за да инсталирате react-markdown и gray-matter.

npm Инсталирай реакция-маркдаун сиво вещество

В нова папка, наречена utils, създайте нов файл, наречен md.js. Ще създадете помощни функции, които връщат съдържание на публикация в блога в този файл.

Вземете всички публикувани публикации

В md.js добавете следния код, за да върнете всички публикации в папката със съдържание.

импортиране fs от "fs";
импортиране път от "път";
импортиране материя от "сива материя";
износконст getPath = (папка: низ) => {
връщане path.join (process.cwd(), `/${папка}`); // Получаване на пълен път 
}


износконст getFileContent = (име на файл: низ, папка:низ) => {
конст POSTS_PATH = getPath (папка)
 връщане на fs.readFileSync (path.join (POSTS_PATH, име на файл), "utf8");
};


износконст getAllPosts = (папка: низ) => {
конст POSTS_PATH = getPath (папка)
връщане fs
 .readdirSync (POSTS_PATH) // получаване на файлове в директорията
 .filter((path) => /\\.md?$/.test (път)) // само .md файлове
 .map((fileName) => { // карта върху всеки файл
конст източник = getFileContent (име на файл, папка); // извличане на съдържанието на файла
конст slug = fileName.replace(/\\.md?$/, ""); // вземете охлюва от името на файла
конст {данни} = материя (източник); // извличане на преден материал
връщане {
 frontmatter: данни,
 охлюв: охлюв,
 };
 });
};

Във функцията getAllPosts():

  • Получете пълния път до папката със съдържание, като използвате модула за път.
  • Вземете файловете в папката със съдържание чрез метода fs.readdirSync().
  • Филтрирайте файловете, за да включвате само файлове с разширение .md.
  • Извлечете съдържанието на всеки файл, включително предния материал, като използвате метода на картата.
  • Връща масив, съдържащ предната материя и плужека (името на файла без разширението .md) на всеки файл.

За да получите само публикуваните публикации, можете да филтрирате всички публикации и да върнете само онези, чийто ключ isPublished в предния въпрос е зададен на true.

износконст getAllPublished = (папка: низ) => {
конст публикации = getAllPosts (папка)
конст публикувано = posts.filter((post) => {
връщане post.frontmatter.isPublished вярно
 })
връщане публикувани
 }

В md.js добавете функцията getSinglePost(), за да извлечете съдържанието на една публикация.

износконст getSinglePost = (slug: низ, папка:низ) => {
конст източник = getFileContent(`${slug}.md`, папка);
конст { данни: предна материя, съдържание } = материя (източник);
връщане {
 фронтматер,
 съдържание,
 };
};

Тази функция извиква функцията getFileContent(), за да получи съдържанието на всеки файл. След това, използвайки пакета за сиво вещество, функцията извлича предния материал и съдържанието на маркдаун.

Показване на всички публикации в блога

Next.js предоставя различни опции за изобразяване, една от които е статично генериране. Статичното генериране е вид предварително изобразяване, при което Next.js генерира всички HTML страници по време на компилация. Използвате го за създаване на бързи статични страници.

Разгледайте официална документация на Nextjs за повече информация относно изобразяването.

Next.js ще визуализира предварително страница по време на компилация, като използва реквизитите, върнати от функцията getStaticProps. В този случай реквизитите ще бъдат масив от публикувани публикации.

износконст getStaticProps = асинхронен () => {
 const публикации = getAllPublished("публикации");
връщане {
 подпорки: { публикации },
 };
};

Променете файла index.js, за да покажете списък с публикации в блогове.

импортиране Глава от "следваща/глава";
импортиране Връзка от "следваща/връзка";
импортиране { getAllPublished } от "../utils/md";
функцияУ дома({ публикации }) {
връщане (
<div className={styles.container}>
<Глава>
<заглавие>Създаване на следващо приложение</title>
<мета име="описание" съдържание="Генерирано от създаване на следващо приложение" />
<връзка rel="икона" href="/favicon.ico" />
</Head>
<див>
 {posts.map((post) => (
<ключ на статията={post.slug}>
<стр>[ {post.frontmatter.tags.join(", ")} ]</стр>
`постове/${post.slug}`}>
<а>{post.frontmatter.title}</a>
</Link>{""}
<стр>{post.frontmatter.description}</стр>
</article>
 ))}
</div>
</div>
 );
}


износконст getStaticProps = асинхронен () => {
 const публикации = getAllPublished("съдържание");


връщане {
 подпорки: { публикации },
 };
};
износпо подразбиране У дома;

Компонентът Home използва публикациите, върнати от getStaticProps. Той ги обхожда с помощта на функцията карта и за всяка публикация показва заглавие, връзка към цялата публикация и описание.

Показване на публикация в блог

Както споменахме, имената на файловете на публикациите ще се използват като URL пътища. Тези пътища също са динамични, така че трябва да ги генерирате по време на изграждането. Next.js ви позволява да направите това с помощта на функцията getStaticPaths().

Например в този код пътищата се генерират от имената на файловете за маркиране.

износконст getStaticPaths = асинхронен () => {
 const paths = getAllPublished("публикации").map(({ slug }) => ({params: {slug}}));
връщане {
 пътеки,
 резервен: невярно,
 };
};

Имайте предвид, че използвате данните за публикациите, върнати от помощната функция getAllPublished(), която сте създали преди.

Вие също така задавате резервен вариант на false, който връща a 404 грешка за пътища, които не съществуват.

getStaticPaths() обикновено се използва с getStaticProps(), който извлича съдържанието на всяка публикация въз основа на параметрите.

износконст getStaticProps = асинхронен ({параметри}) => {
конст пост = изчакайте getSinglePost (params.slug, "публикации");
връщане {
 подпорки: {... публикация },
 };
};

За да изобразите маркдауна в HTML, използвайте react-markdown.

импортиране ReactMarkdown от 'react-markdown'
импортиране { getAllPosts, getSinglePost } от "../../utils/md";
конст Публикация = ({ съдържание, предна част }) => {
връщане (
<див>
<стр>{frontmatter.tags.join(', ')}</стр>
<h2>{frontmatter.title}</h2>
<педя>{frontmatter.publishedDate}</span>
<ReactMarkdown>{съдържание}</ReactMarkdown>
</div>
 );
};

Този компонент ще визуализира съдържанието на всяка публикация в блога и съответния URL адрес.

Ако създавате блог за разработчици, можете добавете подчертаване на синтаксиса възможност за всеки компонент.

Оформяне на блога Next.js Markdown

Досега сте създали блог за маркиране на Next.js, който показва списък с публикации в блогове и изобразява съдържанието на тази публикация. За да изглежда блогът по-добре, трябва да добавите CSS стилове.

Next.js има добра CSS поддръжка и можете да изберете да използвате CSS-in-JS библиотеки като стилизирани компоненти. Ако предпочитате да отделите CSS от JS, можете да използвате CSS модули.