Научу вас создавать личную станцию ​​с помощью vue

внешний интерфейс JavaScript Vue.js React.js Markdown vue-router
Научу вас создавать личную станцию ​​с помощью vue

С тех пор, как я перешел на фронтенд, я всегда хотел реализовать желание:

«Создайте свой собственный личный веб-сайт, который может автоматически анализировать документы Markdown»

Я наконец-то понял это сегодня, сначала вставь мойАдрес блога

Подтвердить потребности

На самом деле, самый простой личный веб-сайт — это множество HTML-страниц, главное, чтобы вы могли написать их в HTML, а затем сделать ссылку наGithub pagesначальство. Но это не то, чего я хочу.

Есть также много людей, которые предпочитают использовать фреймворки блогов, такие как Vuepress, Hexo, Wordpress, Jekyll и т. д., для создания своих собственных блогов. Я пробовал их все. Есть много тем на выбор. Вы даже можете написать Темы других людей делают ваш блог уникальным, но это не то, чего я хочу.

Итак, чего я хочу?

Пишите блоги в синтаксисе Markdown и поддерживайте подсветку кода.

  • Все страницы блога оформлены в индивидуальном стиле.
  • Начало YAML в Markdown поддерживает настраиваемые поля для удобного отображения на странице.
  • Поддерживайте обновления страницы во время написания блога и наблюдайте за эффектом в режиме реального времени.
  • Другие основные функции блога.

На самом деле, многие из вышеперечисленных систем блогов или статических генераторов блогов могут соответствовать большинству вышеперечисленных условий.Основные причины, по которым я их не использую, заключаются в следующем:

  • Мне сложно контролировать весь процесс, а если я хочу добавить какие-то функции на чужие тематические страницы, то очень сложно.
  • Конфигурация блога будет иметь неожиданные последствия.
  • Некоторые темы не идеальны, всегда отсутствуют нужные им функции, а поддержка некоторых основных функций Markdown также неравномерна.
  • Недостаточно свободы в структуре страницы и настройке стиля.

Анализ требований

Видя эти требования, на самом деле, дело не в том, какой фреймворк вы используете для написания. Можно использовать Vue или React или даже Jquery или собственный JS.

Дело в том, как вы обрабатываете файл Markdown, конвертируете его в нужные вам объекты, а в своей странице можете управлять переключением контента страницы через роутинг.

Короче, два момента:

  • данные блога
  • маршрутизация страниц

Когда ты можешь решить эти две проблемы, тогда и все проблемы решены, потому что остальное - листать страницу, небо высоко тебе летать, бок о бок с солнцем.

получение данных

Может быть, вы можете изменить подзаголовок, как получить данные в Markdown и прочитать данные на странице?

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

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

Потом, когда я впервыеReact-staticВ исходном коде я нашел это:Jdown

Это пакет для синтаксического анализа Markdown, и я даже сначала использовал его для анализа содержимого тегов YAML в моих файлах Markdown, а также я много болтал с DanWebb, автором пакета, о создании личного веб-сайта.

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

Потом я нашелgray-matter

Я успешно использовал этот пакет для анализа заголовка YAML файла Markdown в объект JSON. Как мне это сделать?

В JS проекта (упаковано/скомпилировано):

  • Пройдите по фиксированному каталогу (то есть каталогу, в котором хранятся все мои файлы md) и получите все файловые объекты, оканчивающиеся на md.
  • Преобразуйте информацию заголовка YAML каждого файла, чтобы получить объект JSON.
  • Разобрать содержимое объекта JSON, например, извлечь все теги и сохранить их в одном массиве (вы также можете сделать это на странице)
  • Поместите все объекты JSON страницы в массив и запишите их в массив с помощью модуля fs nodeJS.data.jsв файле (это вы можете определить каталог самостоятельно)

На этом процесс получения данных для всех страниц завершен. При использовании его на странице вам нужно только ввести этоdata.jsФайл, а затем вы можете получить данные страницы~

маршрутизация страниц

Маршрутизация страниц — это ключ к нашей реализации этой системы блогов, потому что на предыдущем шаге мы только что получилиYAML, но мы не получили содержимое этого документа. Даже если мы получили содержимое, нам нужно преобразовать его в HTML, прежде чем мы сможем его отобразить. Так что же нам теперь делать?

На самом деле любой, кто пользовался webpack, знает, что в webpack есть загрузчик. Для этого мы используем загрузчик уценки. Загрузчик похож на инструмент перевода. После обработки содержимого исходного файла он возвращает новый результат или даже Вы можете вернуться после нескольких переводов. Затем нам нужно использовать загрузчик Markdown.

Затем мы можем установить его в маршрутизации и установить компонент в соответствующий md-файл.В это время Webpack будет использовать загрузчик для анализа md-файла и превращения его в нужную нам HTML-страницу.Определенный синтаксис для улучшения и настройки нашей уценки .

Настройки в файле маршрутизатора аналогичны следующим

{
 path: "/post/2018-05-20-first",
 component: () => import('../posts/2018-05-20-first.md')
}

Вы думали, что это так легко закончится?

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

Статью написать не можем, просто добавим запись в этот роутер, да?

Меня этот шаг тоже давно беспокоил, путем сбора информации и просмотра чужих исходников я нашел ответ в исходниках Vuepress. Как Юда это сделал?

Заинтересованные друзья могут прочитатьVuepressИсходный код , путь к ключевому файлу~/lib/prepare/codegen.js

Код опубликован (я прокомментировал ключевую информацию):

exports.genRoutesFile = async function ({
  siteData: { pages },
  sourceDir,
  pageFiles
}) {
  function genRoute ({ path: pagePath, key: componentName }, index) {
    const file = pageFiles[index]
    const filePath = path.resolve(sourceDir, file)
    // 这一段实际上就是你的路由信息
    let code = `
  {
    name: ${JSON.stringify(componentName)},
    path: ${JSON.stringify(pagePath)},
    component: ThemeLayout,
    beforeEnter: (to, from, next) => {
      import(${JSON.stringify(filePath)}).then(comp => {
        Vue.component(${JSON.stringify(componentName)}, comp.default)
        next()
      })
    }
  }`

    const dncodedPath = decodeURIComponent(pagePath)
    if (dncodedPath !== pagePath) {
      code += `,
  {
    path: ${JSON.stringify(dncodedPath)},
    redirect: ${JSON.stringify(pagePath)}
  }`
    }

    if (/\/$/.test(pagePath)) {
      code += `,
  {
    path: ${JSON.stringify(pagePath + 'index.html')},
    redirect: ${JSON.stringify(pagePath)}
  }`
    }

    return code
  }

  const notFoundRoute = `,
  {
    path: '*',
    component: ThemeNotFound
  }`


  return (
    //   这里你可以放入很多其他的需要在路由文件里面引入的信息
    `import ThemeLayout from '@themeLayout'\n` +
    `import ThemeNotFound from '@themeNotFound'\n` +
    `import { injectMixins } from '@app/util'\n` +
    `import rootMixins from '@app/root-mixins'\n\n` +
    `injectMixins(ThemeLayout, rootMixins)\n` +
    `injectMixins(ThemeNotFound, rootMixins)\n\n` +
    `export const routes = [${pages.map(genRoute).join(',')}${notFoundRoute}\n]`
  )
}

Что делает этот файл? Так как импорт не поддерживает динамические параметры, то мы можем напрямую сгенерировать файл маршрутизатора, а затем использовать этот маршрутизатор для настройки нашей маршрутизации, верно?

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

полная фигура

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

Опубликовать изображение:

Страница всех сообщений:

Контактная страница:

Страница тегов:

Страница сообщения:

Страница резюме:

напиши в конце

Эта система блогов также потратила почти месяц по частям и, наконец, подошла к концу.Конечно, в этой статье будет много частей, которые я не упомянул, например, как развернуть на доменное имя, как упаковать, скомпилировать и публикация Перейдите на страницы github, как добиться некоторых эффектов страницы.

Почему я не написал эти? Потому что на них есть много готовых ответов.

Наконец, новички просят внимания ~ Об этой системе блогов, если у вас есть какие-то неясные моменты, вы можете оставить свои комментарии или связаться со мной ~

Пожалуйста, укажите источник.

Категории