В предыдущем выпуске этой серии я рассказал об основах создания статического сгенерированного сайта с помощью Nuxt. В сегодняшней статье я покажу вам, как использовать Markdown и Front Matter для разработки богатого контента для вашего блога.

Не читали первую часть? Ознакомьтесь с разделом Создание SEO-дружественного блога: начало работы с Nuxt.

Прежде чем мы напишем какой-либо код, первое, что нам нужно сделать, это установить загрузчик webpack для уценки. В вашем терминале, находясь в каталоге проекта, запустите npm i frontmatter-markdown-loader, чтобы добавить эту зависимость в ваш файл package.json. Далее нам нужно настроить Nuxt, чтобы он знал, как загружать файлы уценки. В корневом каталоге создайте файл с именем nuxt.config.js и добавьте следующий код для расширения webpack.

export default { 
  target: 'static',
  build: { 
    extend (config, ctx) { 
      config.module.rules.push({ 
        test: /\.md$/, 
        use: [{ loader: 'frontmatter-markdown-loader' }] 
      }) 
    } 
  } 
}

Теперь, когда мы настроили наш проект для работы с уценкой, мы можем создать нашу первую статью. Непосредственно в корневом каталоге создайте каталог с именем articles. Внутри этого каталога создайте файл уценки с именем dogs.md.

--- 
slug: dogs 
title: 'Dogs are the Best Animal - Fight Me' 
date: '2020-09-25' tags: dogs,doggo,pupper,floofer,woofters 
description: "Whether you call them dogs, doggos, puppers, floofers, or woofters, they are the best animal. I am willing to fight you over this if you say I'm wrong." 
--- 
# Dogs are the Best Animal - Fight Me 
Whether you call them dogs, doggos, puppers, floofers, or woofters, they are the best animal. I am willing to fight you over this if you say I'm wrong. All doggos are a heckin' good fren. Anyone who disagrees is a monster.

Вы заметите, что в начале нашего файла уценки есть немного кода YAML. Это называется основной вопрос, и это способ включить метаданные в ваш уцененный контент.

Следующий шаг — заставить наш слаг извлекать правильный файл уценки на основе параметра URL. Хотя я обычно рекомендую не требовать динамических зависимостей в вашем коде JavaScript, мы можем безопасно сделать это здесь с нашим файлом уценки. Мы знаем, что этот код будет работать во время генерации, поэтому, если есть какие-то отсутствующие файлы, мы поймаем их в процессе сборки.

Внутри slug.vue обновите функцию asyncData, чтобы она стала следующей.

asyncData ({route}) { 
  const { params: { slug } } = route 
  const markdown = require(`~/articles/${slug}.md`) 
  return { markdown } 
}

Эта функция получает параметр URL, требует соответствующий файл уценки и делает результаты файла уценки доступными для шаблона. Результатом является объект с двумя ключами, html и attributes. Клавиша html звучит так; это HTML-представление вашего файла уценки. Ключ attributes — это объект пар ключ/значение всех метаданных, которые вы включили во вступительную часть.

Последняя часть подключения — добавить его в шаблон. Для этого мы будем использовать v-html, но это функция Nuxt, которую следует использовать с осторожностью. Эта функция будет вставлять любой полученный HTML-код на страницу, что может сделать вас уязвимым для атаки XSS. Никогда не используйте v-html для отображения пользовательского контента. Эту функцию следует использовать только с доверенным содержимым.

Чтобы отобразить содержимое статьи, обновите шаблон до следующего кода:

Если вы введете команду npm run dev и перейдете к http://localhost/blog/dogs, вы увидите содержание своей статьи.

Теперь давайте обновим нашу целевую страницу, чтобы она динамически генерировала список статей на основе наших файлов уценки. Webpack позволяет запрашивать файлы через контекст, то есть вы можете запрашивать все файлы, соответствующие определенному шаблону. Это чрезвычайно полезно для нашего случая, поскольку мы можем получить данные о каждой статье, которую мы написали, не требуя вручную каждого файла по отдельности.

В файле index.vue добавьте следующее в конец файла.

<script> 
export default { 
  asyncData () { 
    const articles = [] 
    const r = require.context('~/articles', false, /\.md/) 
    r.keys().forEach((key) => { 
      articles.push(r(key)) 
    }) 
    return { articles } 
  } 
} 
</script>

Этот скрипт загружает все статьи, помещает их в массив и делает их доступными для шаблона страницы. Поскольку мы включили параметр slug в метаданные статьи, мы можем использовать его для вывода списка статей на целевой странице. Вот новый код для нашего шаблона.

<template> 
  <div> 
    <h1>Articles</h1> 
      <ul> 
        <li v-for="(article, index) in articles" :key="index"> 
          <nuxt-link :to="`/blog/${article.attributes.slug}`">
            {{ article.attributes.title }}
          </nuxt-link> 
       </li> 
     </ul> 
  </div>
</template>

Если вы перейдете к http://localhost:3000, вы увидите единственную ссылку на одну статью, которую мы написали. Если бы вы добавили еще одну статью в каталог статей, она бы тоже появилась здесь.

Вот и все! В следующей и последней части этой серии мы рассмотрим, как использовать атрибуты, которые мы установили во вступительном слове, чтобы предоставить поисковым системам больше контекста для нашей статьи.

Третья часть уже доступна. Ознакомьтесь с разделом Создание SEO-дружественного блога: добавление схем и протокола Open Graph в Nuxt.

Первоначально опубликовано на https://jessie.codes 25 сентября 2020 г.