Инструменты с низким кодом, такие как WordPress, упрощают процесс создания блога. Вы можете использовать готовую тему и начать писать сообщения в блоге за считанные часы. Если вы хотите больше контролировать свой код и иметь немного свободного времени, лучше создать свой блог с нуля. Вы даже можете использовать фреймворк, например Next.js, чтобы упростить процесс.

Узнайте, как создать простой блог Next.js, отображающий сообщения с уценкой.

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

Next.js — это фреймворк React, упрощающий создание приложений. Он предоставляет множество инструментов и конфигураций из коробки, что позволяет начать писать код сразу после его установки.

Самый простой способ начать работу с Next.js — запустить команду create-next-app в терминале:

npx создавать-следующий-app markdown-блог

Эта команда создает проект Next.js, содержащий все необходимые файлы для запуска.

Перво-наперво, очистить index.js файл, чтобы он выглядел так:

Импортировать Голова от 'следующий / голова'
Импортировать стили от '../стили/Home.module.css'





instagram viewer

экспортпо умолчаниюфункцияДом() {
возвращаться (
<div className={styles.container}>
<Голова>
<заголовок>Создать следующее приложение</title>
<мета имя ="описание" содержание ="Создано путем создания следующего приложения" />
<ссылка отн="икона" ссылка="/favicon.ico" />
</Head>
</div>
 )
}

Создание сообщений в блоге Markdown

Блог будет отображать файлы уценки хранится локально в папке проекта. Итак, создайте новую папку в корне с именем содержание для хранения файлов. В этой папке создайте новый файл с именем создать-активную-ссылку-nextjs.md и добавьте следующее:


Название: Как создавать активный связьв Nextjs
описание: Настройка активных ссылок с помощью useRouter()
Опубликовано: истинный
опубликованоДата: 22.07.2022
теги:
 - следующий

## Основное содержание

Имя файла уценки будет частью URL-адреса публикации, поэтому убедитесь, что оно правильное. Также обратите внимание на содержимое между тире. Это метаданные поста, которые называются вступительными.

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

Для каждого поста в блоге вы должны проанализировать содержимое уценки и вступительную часть. Для Markdown используйте react-markdown, а для основных данных используйте серое вещество.

React-markdown — это компонент React, построенный на примечаниях, который безопасно конвертирует уценку в HTML. Библиотека серого вещества анализирует переднюю часть и преобразует YAML в объект.

Выполните следующую команду в терминале, чтобы установить реакцию-уценку и серое вещество.

нпм установить реакция-уценка серого вещества

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

Получить все опубликованные сообщения

В md.js добавьте следующий код, чтобы вернуть все сообщения в папке содержимого.

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


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


экспортконстанта getAllPosts = (папка: строка) => {
константа POSTS_PATH = getPath (папка)
возвращаться фс
 .readdirSync (POSTS_PATH) // получить файлы в каталоге
 .фильтр((путь) => /\\.md?$/.тест (путь)) // только файлы .md
 .map((имя_файла) => { // сопоставляем каждый файл
константа источник = getFileContent (имя файла, папка); // получаем содержимое файла
константа slug = имя_файла.replace(/\\.md?$/, ""); // получить слаг из имени файла
константа {данные} = материя (источник); // извлекаем основную информацию
возвращаться {
 главное: данные,
 слизень: слизняк,
 };
 });
};

В функции getAllPosts():

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

Чтобы получить только опубликованные сообщения, вы можете отфильтровать все сообщения и вернуть только те, чей ключ isPublished во вступительной части имеет значение true.

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

В md.js добавьте функцию getSinglePost() для получения содержимого отдельного сообщения.

экспортконстанта getSinglePost = (слаг: строка, папка:строка) => {
константа источник = получить содержимое файла (`${слаг}.md`, папка);
константа { данные: обложка, содержание } = материя (источник);
возвращаться {
 передний план,
 содержание,
 };
};

Эта функция вызывает функцию getFileContent() для получения содержимого каждого файла. Затем, используя пакет серого вещества, функция извлекает вступительную часть и содержимое уценки.

Показать все сообщения в блоге

Next.js предоставляет различные варианты рендеринга, одним из которых является статическая генерация. Статическая генерация — это тип предварительного рендеринга, при котором Next.js генерирует все HTML-страницы во время сборки. Вы используете его для создания быстрых статических страниц.

Проверьте официальная документация Nextjs для получения дополнительной информации о рендеринге.

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

экспортконстанта getStaticProps = асинхронный () => {
 константные сообщения = getAllPublished("сообщения");
возвращаться {
 реквизит: {сообщения},
 };
};

Измените файл index.js, чтобы отобразить список сообщений блога.

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


экспортконстанта getStaticProps = асинхронный () => {
 константные сообщения = getAllPublished("содержание");


возвращаться {
 реквизит: {сообщения},
 };
};
экспортпо умолчанию Дом;

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

Показать сообщение в блоге

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

Например, в этом коде пути генерируются из имен файлов уценки.

экспортконстанта получитьстатические пути = асинхронный () => {
 константные пути = getAllPublished("сообщения").map(({слаг}) => ({параметры: {слаг}}));
возвращаться {
 пути,
 отступать: ЛОЖЬ,
 };
};

Обратите внимание, что вы используете данные сообщений, возвращаемые вспомогательной функцией getAllPublished(), которую вы создали ранее.

Вы также устанавливаете для возврата значение false, которое возвращает ошибка 404 для путей, которых не существует.

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

экспортконстанта getStaticProps = асинхронный ({параметры}) => {
константа сообщение = Ждите getSinglePost(params.slug, "сообщения");
возвращаться {
 реквизит: {...пост},
 };
};

Чтобы отобразить уценку в HTML, используйте react-markdown.

Импортировать ReactMarkdown от 'реакция-уценка'
Импортировать {getAllPosts, getSinglePost} от "../../утилиты/мд";
константа Сообщение = ({контент, передний план}) => {
возвращаться (
<див>
<п>{frontmatter.tags.join(', ')}</п>
<h2>{передний план.название}</h2>
<охватывать>{frontmatter.publishedDate}</span>
<ReactMarkdown>{содержание}</ReactMarkdown>
</div>
 );
};

Этот компонент будет отображать содержимое каждой записи в блоге и соответствующий URL-адрес.

Если вы создаете блог разработчика, вы можете добавить подсветку синтаксиса возможностей для каждого компонента.

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

Итак, вы создали блог уценки Next.js, в котором отображается список сообщений блога и отображается содержимое этого сообщения. Чтобы блог выглядел красивее, вы должны добавить стили CSS.

Next.js имеет хорошую поддержку CSS, и вы можете использовать библиотеки CSS-in-JS, такие как стилизованные компоненты. Если вы предпочитаете отделять CSS от JS, вы можете использовать модули CSS.