Vuepress - это новая популярность, когда дело доходит до генераторов статических сайтов. Создатель Vue Эван Вы разработали этот инструмент для написания документации, однако он настолько мощный и гибкий, что его можно полностью настроить в соответствии с вашими потребностями 💪. Сегодня я покажу вам, как создать блог с помощью Vuepress.
В этом руководстве предполагается, что вы имеете базовое представление о Vuepress.
Структура этого проекта:
. ├── docs │ ├── .vuepress │ │ ├── components │ │ │ └── Posts.vue │ │ ├── config.js │ │ └── public │ │ ├── image.jpg │ │ ├── image-1.jpg │ │ └── image-2.jpg │ ├── README.md │ └── interviews │ ├── README.md │ ├── post-1.md │ ├── post-2.md │ ├── post-3.md │ └── post-4.md ├── package-lock.json └── package.json
Создание постов
Создайте новый каталог с именем по вашему выбору внутри docs, в данном случае мы назовем его interviews. Внутри interviews мы можем создавать наши файлы уценки и называть их как угодно, за одним исключением, если существует README.md, который действует как базовый путь для этого маршрута.
например ,README.md в каталоге интервью будет отображаться как /interviews/
Чтобы мы могли собирать и упорядочивать наши посты, мы будем использовать то, как Vuepress использует frontmatter. Вверху каждого файла разметки, который мы создали в каталоге интервью, мы собираемся добавить yaml:
--- image: /example-image.jpg title: Example title description: This is the example description for our first post. date: 03-25-18 (mm-dd-yy) ---
Свойство и значения следует менять местами и изменять в зависимости от сообщения. Все это должно быть самоочевидным, однако, если это не так, это будет иметь смысл позже.
Компонент Vue
Если вы посмотрите на структуру проекта ранее в этом посте, вы увидите каталог .vuepress, именно здесь мы можем настроить Vuepress.
Примечание. Если вы хотите создать свою собственную тему, вы можете eject Vuepress и использовать тему по умолчанию в качестве отправной точки.
В папке components создайте файл Posts.vue со следующим кодом:
Когда файлы Vue создаются в /components, они автоматически регистрируются как глобальные асинхронные компоненты (убедитесь, что имя пользовательского компонента содержит дефис или находится в PascalCase).
Примечание: когда мы используем компонент в нашей уценке, он будет выглядеть как <Posts page="interviews"> (где опора страницы является необязательной).
Чтобы немного объяснить, что здесь происходит в наших тегах скрипта, мы сначала делаем значение props доступным для нашего компонента. Затем мы объявили вычисляемое свойство posts. currentPage затем принимает либо значение свойства страницы, которое было передано вниз, либо текущее базовое имя пути (в этом примере это будет /interviews/)
this.$site.pages получает метаданные для каждой страницы сайта, и отсюда мы можем получить доступ к пути для каждой страницы. Метод фильтра выполняет итерацию по всем страницам и возвращает только те, которые соответствуют значению currentPage и имеют расширение .html. Мы делаем это так, чтобы наша сетка / список отображала только сообщения из нужного нам каталога.
Вот здесь и появляются основные данные. Мы получаем доступ к дате через .frontMatter.date, создаем объект new Date и затем возвращаем массив со всеми сообщениями, упорядоченными от самых последних к самым старым.
В нашем template директива v-if проверяет, существуют ли какие-либо posts, если их нет posts, то div не отображается. Директива v-for проходит через все posts, каждая из которых становится доступной в рамках цикла как post. Эта концепция должна показаться вам очень знакомой, если вы использовали for of в javascript. Для SPA мы используем router-link вместо <a href=""></a>, поскольку мы хотим перехватить событие клика, чтобы браузер не пытался перезагрузить страницу.
Теперь все просто, мы создаем элементы для изображения, заголовка и описания и используем обложку каждого поста, чтобы заполнить каждое из них данными.
Примечание: img src предполагает, что все ваши изображения находятся в общей папке вашего .vuepress каталога.
Config.js
Далее мы собираемся создать файл config.js в каталоге .vuepress со следующим:
Это очень простая конфигурация, которая добавляет заголовок вашего сайта и несколько ссылок на вашу навигацию. Вы можете более подробно изучить доступные варианты на странице https://vuepress.vuejs.org/config/.
Собираем все вместе
Теперь мы написали наш компонент и можем использовать его в нашей уценке. В наших Интервью README.md мы можем добавить<Posts />, и все сообщения из interviews будут обработаны, ура! Заметили, как мы не пропустили реквизит? Это потому, что нам нужны только сообщения в этом каталоге. Однако, если бы мы хотели, чтобы сообщения из интервью отображались на главной странице, мы бы добавили <Posts page="interviews" /> в наши документы README.md, и все наши сообщения из интервью отображались на нашей домашней странице!
Компонент, который можно использовать повторно, и мы можем использовать его любое количество раз, это означает, что если у нас есть несколько каталогов, заполненных сообщениями, мы могли бы сделать что-то вроде:
<Posts page="interviews" /> <Posts page="travel" />
и он будет отображать сообщения из каждой коллекции 🙌
Стили
Имейте в виду, что в этом примере используются только собственные стили Vuepress. Для дальнейшей настройки (что я рекомендую вам сделать) вы можете добавить свои собственные стили, больше об этом можно найти на https://vuepress.vuejs.org/default-theme-config/#simple-css-override.
Le Fin
Я надеюсь, что этот пост был полезен и поможет вам лучше понять одно из возможных решений для создания блога на Vuepress.
Я создал более полный пример на https://adam-collier.github.io/Midl/, однако сначала он был удален, и многие стили и компоненты по умолчанию были изменены.
Преимущество подхода, продиктованного в этом посте, заключается в том, что ни один из кодов Vuepress по умолчанию не был изменен, поэтому у вас есть возможность обновить Vuepress без каких-либо последствий.
Если у вас есть вопросы, напишите мне в твиттер! @Collieradam
