От автора: Evan You, создатель Vue, недавно всполошил сообщество с выпуском VuePress, нового генератора статических сайтов, работающего под управлением Vue. Статический сайт — это тот, который написан на чистом HTML. HTML-код предоставляется пользователю в том виде, в котором он есть. Генератор статических сайтов принимает исходные файлы (Markdown, Vue файлы или что-то еще) и динамически генерирует полностью статический HTML-сайт. Это может помочь значительно улучшить ваш SEO.
Если вы знакомы с Nuxt.js, вы уже знаете, что у него есть функция nuxt generate, которая позволяет создавать статическую версию приложения, генерируя каждый роут в виде HTML-файла.
Вы можете спросить: «чем VuePress отличается от Nuxt? Что я могу делать с VuePress, чего нет в Nuxt? Можно ли с помощью VuePress создать блог?»
В этом посте мы рассмотрим самые большие различия между ними и основные преимущества использования VuePress.
Приложения или документация
Nuxt, в первую очередь, представляет собой фреймворк более высокого уровня, целью которого является упрощение разработки универсальных приложений JavaScript. Он имеет функцию nuxt generate, которая позволяет создавать статическую версию приложения, генерируя каждый роут в виде файла HTML.
С другой стороны, VuePress — это генератор статических сайтов, который упрощает создание сайтов документации, таких как Vue.js docs. VuePress был вдохновлен Nuxt функцией nuxt generate наряду с другими подобными фреймворками типа Gatsby.js, статический генератор сайтов для React.
Все, что можно сделать в VuePress, можно делать и в Nuxt. Вы можете думать о VuePress как о подмножестве того, на что способен Nuxt с функциями, которые облегчают обработку большого количества контента.
Вот 3 способа, которыми VuePress позволяет вам легко писать документацию, содержащую контент.
1. Используйте Markdown для контента
С VuePress по умолчанию вы получаете собственную компиляцию файлов разметки. Другими словами, вы можете написать файл разметки, а затем преобразовать его в HTML без дополнительной настройки плагинов преобразования.
Nuxt по умолчанию не компилирует markdown файлы – для их компиляции нужно задать чуть больше настроек.
Например, Nuxt использует Nuxt для собственной документации. Они также используют markdown для своего контента, но им пришлось внедрить посреднический сервер API для перевода своих файлов разметки в JSON для использования сайта. Все эти промежуточные шаги можно убрать с помощью VuePress.
Использование компонентов Vue внутри markdown
Еще одно преимущество VuePress заключается в том, что он активирует markdown, позволяя вам использовать компоненты Vue непосредственно в файле markdown. Способ, которым это работает, заключается в том, что каждый файл markdown сначала компилируется в HTML, а затем передается как компонент Vue в vue-loader . Это означает, что вы можете использовать шаблоны и компоненты Vue в своем тексте.
|
1 2 3 4 |
# Blogging Like a Hacker **My Component:** <Stats :start="3"></Stats> <p v-for="n of 15">{{ n }}</p> |
YAML Front-matter в файлах разметки
Вы также можете взять YAML , язык сериализации данных, который обычно используется для конфигурации, front-matter поверх файлов markdown, и VuePress автоматически интерпретирует его для вас.
|
1 2 3 4 5 6 |
--- title: Blogging Like a Hacker lang: en-US --- # Blogging Like a Hacker **My Component:** |
Вы можете использовать YAML front-matter, чтобы настроить свои названия, мета-описание и другие теги, связанные с SEO, на ваших отдельных страницах.
Нажмите здесь, чтобы узнать больше обо всем остальном, что можно делать с Markdown в VuePress, посмотрите раздел markdown в документации.
2. Многоязыковая поддержка по умолчанию
VuePress также поддерживает i18n по умолчанию, чтобы ваш сайт документации мог поддерживать различные языки. Например, сам сайт VuePress настроен с версией на китайском языке.
Вы можете добавить дополнительные языки, добавив объект locales в объект themeConfig в файле config.js для вашего проекта VuePress.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
locales: { '/': { label: 'English', selectText: 'Languages', editLinkText: 'Edit this page on GitHub', nav: [ { text: 'Guide', link: '/guide/', }, { text: 'Config Reference', link: '/config/' }, { text: 'Default Theme Config', link: '/default-theme-config/' } ], sidebar: { '/guide/': genSidebarConfig('Guide') } }, '/zh/': { label: '简体中文', selectText: '选择语言', editLinkText: '在 GitHub 上编辑此页', nav: [ { text: '指南', link: '/zh/guide/', }, { text: '配置', link: '/zh/config/' }, { text: '默认主题', link: '/zh/default-theme-config/' } ], sidebar: { '/zh/guide/': genSidebarConfig('指南') } } } |
Чтобы увидеть полный пример, ознакомьтесь с файлом config.js для сайта документации VuePress на GitHub здесь.
3. Полнофункциональная тема по умолчанию
VuePress поставляется с темой по умолчанию, предназначенной для плавного прочтения технической документации. В ней есть боковая панель, где перечислены все ваши страницы, и навигационная панель с полнофункциональным поиском по всему сайту.
Нажмите здесь, чтобы просмотреть различные параметры, которые вы можете настроить с помощью темы VuePress по умолчанию.
Можно ли с помощью VuePress создать блог?
Да, технически вы могли бы, но по состоянию на данный момент (апрель 2018 года) у него нет всех функций, которые существуют, например, у других статических фреймворков блогов, таких как Jekyll . Во-первых, в нем отсутствует система тегов и более удобный blogger-friendly шаблон по умолчанию.
Сейчас в планах сделать VuePress более blogger-friendly. Поддержка блога активно обсуждается, и, согласно Evan You, главная цель — довести API ядра VuePress до такого уровня, чтобы сообщество могли войти и начать добавлять функции для поддержки ведения блога.
Если вы заинтересованы в прогрессе в том, чтобы сделать VuePress blog-friendly, взгляните на эту проблему на GitHub, где она активно обсуждается.
Итак, когда я должен использовать VuePress?
Лучшее время для использования VuePress — это создание веб-сайта документации, использующего Markdown для контента. Если вы уже используете Nuxt для чего-то подобного, вам серьезно стоит подумать о переходе на VuePress.
Автор: Derick Sozo
Источник: //medium.com/
Редакция: Команда webformyself.
