восхождение на вьюпресс тур

Vue.js VuePress

предисловие

Несколько дней назад мне вдруг захотелось завести личный блог. Самостоятельно завести сайт оказалось слишком хлопотно. Кажется, hexo очень хорош от Baidu к Baidu. Но не знаю почему, уже неделю не разобрался, то ли эта ошибка, то ли та ошибка. Как классифицировать теги и управлять ими — это беспорядок, а писать документы очень хлопотно. Потом я сдался. Мне не потребовалось много времени, чтобы узнать, что есть еще одна вещь, называемая vuepress. Хотя сейчас почти 9102, я еще не использовал vue несколько раз. Поэтому я решил взять этот проект, чтобы попрактиковаться и, кстати, изучить Vue. Факты доказали, что это очередной раз наступить на яму, но результат хороший.Спустя долгое время сайт был создан.

1. Что такое вьюпресс

Vuepress — это статическая система блогов, основанная на Vue. Что такое статический блог? Статический блог — это блог, которому не нужно заниматься фоном, а только отображать функции. То есть ни комментариев, ни лайков, ни обсуждений в сети и т.д. Эй, мне становится неловко, когда я это вижу, а комментариев нет, а вдруг я кому-нибудь приглянусь? Но для взаимодействия нужна база данных и бэкграунд. Они бесконечны. Также нужно потратить много денег. Подумав об этом, подумав об этом и, наконец, решив не заводить девушку. Я начну вести статичный блог и в конце просто оставлю свой WeChat. Если увидите мою сестру, можете добавить меня (smiling.jpg).

2. Установите vuepress

Для установки vuepress официальный сайт рекомендует использовать yarn. Получается, что официальная рекомендация была правильной. Я использую npm в своем окне, и результат продолжает получать ошибки. В итоге перешла на пряжу.

что такое пряжа? Я знал об этом еще год назад, но пользуюсь впервые. Вы можете думать о пряже как о npm. Это лишь немного лучше, чем npm. Используемые команды разные. Функционал тот же, а модули скачиваются из библиотеки npm.

шаги установки:

  1. Создайте новую папку, например, с именем blog
  2. Использовать статус администратораЗапустите инструмент командной строки, войдите во вновь созданную папку блога и выполнитеyarn init -yсгенерировать package.json
  3. воплощать в жизньyarn global add vuepressУстановите vuepress глобально, а затем выполнитеyarn add -D vuepressУстановить пряжу локально
  4. выполнение командной строкиmkdir docs, Создайте новую папку документов в папке блога.
  5. Выполнение командной строки echo '# hello world' > docs/README.md Создайте новый файл уценки в папке docs
  6. воплощать в жизньnpx vuepress dev docsПредварительный просмотр эффекта.

2.1 Подробное объяснение шагов:

Как объяснялось на шаге 3, глобальная установка vuepress предназначена для облегчения вызова команд vuepress в командной строке. Также нет необходимости устанавливать vuepress локально, цель локальной установки — разъединить. Когда глобальный vuepress обновляется до другой версии, предыдущую версию vuepress также можно использовать локально, чтобы избежать недоступности проекта из-за обновления. Глобальная установка предназначена только для использования команд из командной строки, и фактический используемый код по-прежнему является локальным кодом.

С шага 1 по шаг 4, после выполнения, результат каталога папки выглядит следующим образом:

В файле блога есть два файла (папки), package.json и docs. На самом деле, в папке блога есть еще папка node_modules. Я проигнорировал ее здесь. Если вы знаете, что она там, я не буду печатать это в командной строке.

.
|-blog
  |-docs
    |-README.md
  |-package.json

воплощать в жизньvuepress dev .Результат выглядит следующим образом:

Командная строка:

命令行效果

Браузер:

浏览器效果

Формат, отображаемый браузером, неверен, он должен отображаться в формате заголовка 1, а результат отображается как «# Hello VuePress!». Такое случается часто. Это не имеет значения. Позже мы можем использовать наш собственный инструмент уценки для редактирования README.md в папке docs.

2.2 Изменить package.json

Добавьте несколько команд в package.json, чтобы упростить нашу работу.

"scripts": {
	"docs:dev": "vuepress dev docs",
	"docs:build": "vuepress build docs"
}

когда мы бежимyarn docs:devэквивалентно бегуvuepress dev docs

когда мы бежимyarn docs:buildэквивалентно бегуvuepress build docs

На данный момент полный код package.json выглядит следующим образом:

{
  "name": "blog",
  "version": "1.0.0",
  "main": "index.js",
	"scripts": {
		"docs:dev": "vuepress dev docs",
		"docs:build": "vuepress build docs"
	},
  "license": "MIT"
}

2.3 Эффект предварительного просмотра

выполнение командной строкиyarn docs:devПредварительный просмотр эффекта. В настоящее время вы можете использовать свой инструмент уценки, чтобы изменить содержимое README.md в разделе docs.После модификации браузер автоматически обновится, чтобы отобразить последний контент.

2.4 Упаковка

выполнение командной строкиyarn docs:build, vuepress упакует наши файлы уценки для создания html-файлов. Упаковка создаст папку .vuepress в папке docs, а сгенерированные html-файлы будут храниться в папке dist в папке .vuepress.

Мы можем создать новый файл config.js в .vuepress, и, изменив dest, файл можно создать в другом каталоге. Я не буду его изменять.

Сгенерированный html файл можно развернуть на любой статический сервер, я залил его на github.

На данный момент структура каталогов показана на рисунке:

|-blog
  |-docs
  |  |-.vuepress
  |  |  |-dist
  |  |  |  |-404.html
  |  |  |  |-assets
  |  |  |  |  |-css
  |  |  |  |  |  |-0.styles.f164d2bb.css
  |  |  |  |  |-img
  |  |  |  |  |  |-search.83621669.svg
  |  |  |  |  |-js
  |  |  |  |  |  |-2.aae77c18.js
  |  |  |  |  |  |-3.48b292a8.js
  |  |  |  |  |  |-4.6947e3e9.js
  |  |  |  |  |  |-app.0ffe2193.js
  |  |  |  |-index.html
  |  |-README.md
  |-package.json

2.5 Резюме

Вышеизложенное является основным использованием vuepress, я считаю, что большинство людей могут успешно его выполнить. Далее идет продвинутая стадия.

3. Настройте избранное.icon

Это небольшая точка знаний, но ее также очень хлопотно бросить. favourite.icon - вот это.

image

Шаги для его настройки следующие:

1. Сделать иконку, размер может быть 16*16 или 32*32 или 64*64. Вы можете решить, какой размер вы хотите. Вы можете сделать его в PS или скачать с Baidu.

2. Создайте новую общую папку под .vuepress и поместите в нее созданный значок.

3. Создайте новый файл конфигурации config.js в разделе .vuepress. Есть много элементов, которые можно настроить в config.js, вы можете щелкнуть здесь, чтобы просмотретьнастроить, Я говорю только о самом основном здесь.

Структура каталогов на данный момент выглядит следующим образом:

|-blog
  |-.gitignore
  |-docs
  |  |-.vuepress
  |  |  |-config.js
  |  |  |-public
  |  |  |  |-favicon.ico
  |  |  |  |-favorite.png
  |  |-README.md
  |-package.json

4. Настройте config.js

module.exports = {
	title:"前端蜗牛路",
	description:"郭邯同学的个人博客",
	head:[
		['link',{rel:'icon',href:'/favicon.ico'}]
	]
}

Обратите внимание, что href ссылки здесь является прямой ссылкой на корневой каталог, о чем я писал ранее:/public/favicon.icoРезультат обусловлен.

Хорошо, теперь снова запустите командную строкуyarn docs:devВы можете увидеть эффект (иногда можно обновить, иногда нет).

添加了favorite

4. Настройте панель навигации

4.1 Какова цель

Я хочу такую ​​панель навигации, которая включает в себя Home, Articles, Nuggets, GitHub, Zhihu и Girlfriends.

  • Нажмите «Главная», чтобы вернуться на главную страницу блога.
  • Нажмите «Статья», чтобы отобразить раскрывающийся список с двумя пунктами «soft skills» и «webgl». Вот два типа контента блога, которым я хочу поделиться
  • Нажмите «Самородки», «GitHub» и «Zhihu», чтобы перейти на соответствующие другие домашние страницы моего веб-сайта.
  • "Подружка" - это одни из моих необоснованных эмоций (закрывая лицо клавиатурой)

4.2 Настройка config.js

С вышеуказанными целями настраиваем config.js. Мы модифицируем config.js следующим образом:

Навигация под themeConfig — это панель навигации, которую мы настроили.

module.exports = {
	title:"前端蜗牛路",
	description:"郭邯同学的个人博客",
	head:[
		['link',{rel:'icon',href:'/favicon.ico'}]
	],
  themeConfig: {
    nav: [
        { text: '首页', link: '/' },
        { 
          text: '文章', 
          items:[
            { text: '软技能' , link:'/softskill/'},
            { text: 'webgl' , link:'/webgl/'}
          ]
        },
        { text: '掘金', link: 'https://juejin.cn/user/8451823770045' },
        { text: 'GitHub', link: 'https://github.com/ggwork'},
        { text: '知乎', link: 'https://www.zhihu.com/people/yagb/activities'},
        { text: '女朋友', link: '/girlfriend/'}
      ],
  }
}

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

Перед настройкой:

nav配置前

После настройки:

nav配置后

4.3 Создайте новый каталог

В дополнение к внешним ссылкам на панели навигации мы также настроили несколько ссылок, которых еще не существует, '/softskill/', '/webgl/', '/girlfriend/'. Эти ссылки соответствуют соответствующим каталогам на нашем сервере. Если у нас нет этих каталогов на нашем сервере, нажатие на эти меню сообщит об ошибке 404.

Итак, мы должны создать эти каталоги (папки)

Создайте папки softskil, webgl и girlfriend в том же каталоге, что и .vuepress.В каждой папке должен быть файл readme.md, иначе будет сообщено об ошибке.

Структура каталогов на данный момент выглядит следующим образом:

|-blog
  |-docs
  |  |-.vuepress
  |  |  |-config.js
  |  |  |-public
  |  |  |  |-favicon.ico
  |  |  |  |-favorite.png
  |  |-girlfriend
  |  |  |-readme.md
  |  |-README.md
  |  |-softskill
  |  |  |-readme.md
  |  |-webgl
  |  |  |-readme.md
  |-package.json

Вернитесь в браузер, обновите, нажмите на панель навигации, вы можете обнаружить, что панель навигации уже доступна. Например, нажмите «Подруга». Результат выглядит следующим образом:

导航栏-女朋友

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

5. Настройте боковую панель

5.1 Описание требований

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

5.2 Настройка config.js

Для настройки боковой панели также необходимо настроить config.js, конфигурация следующая:

module.exports = {
  title: '前端蜗牛路',
  description: '郭邯同学的个人博客',
  head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      {
        text: '文章',
        items: [
          { text: '软技能', link: '/softskill/' },
          { text: 'webgl', link: '/webgl/' }
        ]
      },
      { text: '掘金', link: 'https://juejin.cn/user/8451823770045' },
      { text: 'GitHub', link: 'https://github.com/ggwork' },
      { text: '知乎', link: 'https://www.zhihu.com/people/yagb/activities' },
      { text: '女朋友', link: '/girlfriend/' }
    ],
    sidebar: {
      '/softskill/': [
        '',
        '软技能-代码之外的生存指南1（职业篇）',
        '软技能-代码之外的生存指南2（自我营销篇）',
        '软技能-代码之外的生存指南3（自我学习）',
        '软技能-代码之外的生存指南4（生产力）',
        '软技能-代码之外的生存指南5（理财）',
        '软技能-代码之外的生存指南6（健身）',
        '软技能-代码之外的生存指南7（精神）'
      ],
      '/webgl/': ['']
    }
  }
}

боковая панель — это боковая панель, softskill — наши мягкие навыки. '' под softskill означает, что нажмите «soft skills», чтобы отобразить под ним файл readme.md. Все остальное — соответствующий файл уценки.

5.3 Создайте новый файл уценки

На данный момент структура каталогов выглядит следующим образом:

.
|-blog
  |-docs
  |  |-.vuepress
  |  |  |-config.js
  |  |  |-public
  |  |  |  |-favicon.ico
  |  |  |  |-favorite.png
  |  |-girlfriend
  |  |  |-readme.md
  |  |-README.md
  |  |-softskill
  |  |  |-readme.md
  |  |  |-软技能-代码之外的生存指南1（职业篇）.md
  |  |  |-软技能-代码之外的生存指南2（自我营销篇）.md
  |  |  |-软技能-代码之外的生存指南3（自我学习）.md
  |  |  |-软技能-代码之外的生存指南4（生产力）.md
  |  |  |-软技能-代码之外的生存指南5（理财）.md
  |  |  |-软技能-代码之外的生存指南6（健身）.md
  |  |  |-软技能-代码之外的生存指南7（精神）.md
  |  |-webgl
  |  |  |-readme.md

Обновите браузер, все прошло успешно.

侧边栏软技能

Здесь следует отметить одну вещь: текст боковой панели, настроенный в config.js, может отличаться от текста, отображаемого на боковой панели браузера. Текст, настроенный в конфигурации, является именем файла соответствующей статьи уценки. Текст, отображаемый на боковой панели браузера, является первым текстом, отформатированным как заголовок 1 в содержании статьи с уценкой.

6. Статические ресурсы

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

Однако лично мне это не нравится, потому что иногда мой блог часто нужно копировать и вставлять на другие сайты. В это время, если вы используете статические ресурсы, это будет более хлопотно, и вам придется каждый раз загружать макет. Здесь я рекомендую объектное хранилище Tencent Cloud, почему вы рекомендуете его? Поскольку он бесплатный и имеет 50 ГБ свободного места, этого мне достаточно, чтобы использовать его в течение многих лет.

Для подробного использования, пожалуйста, нажмите здесь.Хранилище объектов Tencent

7. Развертывание

Для развертывания официальный сайт предоставляет файл .sh, но, к сожалению, файл .sh нельзя запустить в Windows. Во всяком случае, согласно руководству, данному на официальном сайте, я долгое время безуспешно. В настоящее время, согласно моим результатам Baidu, у vuepress нет никакого автоматического метода развертывания, В конце концов, я честно использую git, чтобы вручную загружать папку dist на мою страницу github после каждой упаковки.

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

Рекомендуемый адрес метода развертывания на официальном сайте находится здесь:развертывать

8. Другое расширенное использование

Vuepress прост, но мощен.С помощью описанных выше шагов мы можем создать веб-сайт, который выглядит некрасиво, но очень практичен. Vuepress можно украсить, и есть много продвинутых применений, например, расширение синтаксиса уценки — это круто, и вы можете сами создавать компоненты. Я не буду их представлять, я доволен уродливым веб-сайтом. Для более подробного использования, пожалуйста, нажмите здесь:

документация vuepress

Также рекомендую мой собственный сайт:передняя улитка

Я загрузил демо vuepress на github, вы можете посмотреть его здесь.демо vuepress

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

Категории