С сегодняшнего дня используйте VuePress для создания собственного эксклюзивного блога.

Vue.js
С сегодняшнего дня используйте VuePress для создания собственного эксклюзивного блога.

VuePress (версия 0.x)

КнигаblogПредоставляется простой пример конфигурации на основе VuePress, этот вариант конфигурации включает в себя этоblogБольшинство случаев конфигурации, пожалуйста, перейдите сюда для получения более подробной информацииКейс конфигурации VuePress

предисловие

В: О чем эта статья?
A: Перечислите распространенные конфигурации сайтов блогов и предоставьте подробные шаги настройки и снимки экрана конфигурации.

В: Кому подходит эта статья?
Ответ: Хочу вести блог, но не умею писать и знаю VuePress, но не знаю как его настроить

В: Как понять этот каталог статей?
Ответ: После прочтения базовой конфигурации вы можете начать работу с конфигурацией, а после прочтения расширенной конфигурации вы сможете ознакомиться с VuePress.

Установить

Основная версия VuePress в этом блоге — 0.x, и последняя конфигурация, связанная с 1.x, также совместима, пожалуйста, используйте ее с уверенностью. Также убедитесь, что ваш Node.js >= 8

Глобальная установка (рекомендуется)

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

$ npm install -g vuepress

локальная установка

В отличие от глобальной установки, локальная установкаnpmПакет установлен в этом проекте, создавая файл с именемnode_modulesкаталог, который можно установить локально с помощью следующих команд (необходимо установить одновременно)vuepressиwebpack-dev-middleware)

$ npm install vuepress webpack-dev-middleware --save-dev

базовая конфигурация

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

команда сценария

Нам потребуются как минимум две команды скрипта, которые используются для локальной разработки и упаковки соответственно.Команды скрипта нужно настроить вdocs/package.jsonфайл, он настроен следующим образом

{
  "scripts": {
    // 本地开发
    "docs:dev": "vuepress dev docs",
    // 打包上线
    "docs:build": "vuepress build docs"
  }
}

Для локальной разработки используйте следующую команду, которая включает небольшой сервер локально, который вы можете использовать в браузере.localhost:8080(по умолчанию) для доступа

$ npm run docs:dev

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

$ npm run docs:build

каталог проекта

В качестве статического генератора веб-сайта Vuepress имеет определенные ограничения на каталог проекта. Базовая структура проекта выглядит следующим образом

|-- docs // 特定的目录
    |-- README.md // 首页
    |-- .vuepress // 特定的目录
        |-- config.js // 特定的配置文件
|-- package.json // 脚本命令

титульная страница

Тема по умолчанию предоставляет домашнюю страницу (HomePage), то есть в приведенной выше структуре каталоговREADME.mdСодержимое в файле, домашняя страница не является обязательным, для домашней страницы темы по умолчанию в VuePress мы можем настроить следующим образом

---
home: true
lang: zh-CN
heroText: A  Personal Blog
heroImage: /logo.jpg
actionText: 开始 →
actionLink: /interview/
features:
- title: A Blog
  details: 专注写作前端博客，记录日常所得。
- title: For Me
  details: 故九万里，则风斯在下矣，而后乃今培风；背负青天，而莫之夭阏者，而后乃今将图南。
- title: For Interview
  details: 广州，已入坑ღ( ´･ᴗ･` )比心
footer: Copyright © 2019-present Wangtunan
---

Приведенная выше конфигурация является эффектом домашней страницы этого блога.

Инструкции по домашней настройке

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

  • home:true: отметить, является ли эта страница домашней страницей
  • lang:zh-CN: указывает, что язык этой страницы — zh-CN (упрощенный китайский).
  • heroText: Заголовок главной страницы.
  • heroImage: Заглавное изображение домашней страницы, где указан полный путь.docs/.vuepress/public/logo.jpg, по умолчаниюpublicНайти статические ресурсы в каталоге
  • actionText: содержимое кнопки перехода на домашнюю страницу
  • actionLink: Путь вызова кнопки перехода на домашнюю страницу, где полный путьdocs/interview/readme.md,дефолтreadmeИменованный файл может опускать следующее содержимое без ссылки, а опущенная ссылка указана выше.
  • features: Указывает характеристики домашней страницы, фиксированный форматtitle + details, отображаемый в трехколоночном макете потока
  • footer: нижний контент, как обычные веб-страницы, мы можемfooterНапишите информацию об авторских правах внутри

Панель навигации

Настройка панели навигации должна быть настроена в файле .vuepress/config.js.

В теме по умолчанию панель навигации должна бытьthemeConfigнастроить в свойствахnavдва важных свойства панели навигации:textиlink,вtextУказывает текстовое содержание навигации,linkУказаны навигационные ссылки.

Основная панель навигации

Базовую ссылку на панели навигации можно настроить следующим образом.

module.exports = {
  // 其它配置
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: 'HTML', link: '/html/' },
      { text: 'CSS', link: '/CSS/' },
      { text: 'JavaScript', link: '/JavaScript/' }
    ]
  }
}

Основные результаты настройки панели навигации

выпадающее меню панели навигации

Выпадающий список должен быть настроенitemsсвойство, это массив, объект в массиве по-прежнему является обычным навигационным объектом, т. е. имеетtextиlinkсвойства, раскрывающийся список панели навигации можно настроить следующим образом

module.exports = {
  // 其它配置
  themeConfig: {
    nav: [
      { text: '首页', link: '/' },
      { text: '前端三剑客', items: [
        { text: 'HTML', link: '/html/' },
        { text: 'CSS', link: '/CSS/' },
        { text: 'JavaScript', link: '/JavaScript/' }
      ]},
      { text: 'Vue.jss', link: '/vue/' },
    ]
  }
}

Результаты настройки раскрывающегося списка панели навигации

Отключить панель навигации

Существует два случая отключения панели навигации. Первый — отключить все панели навигации, а второй — отключить панель навигации на определенной странице. Для этих двух разных случаев соответствующие конфигурации различаются, как показано ниже.
Первое:Отключите все панели навигации, настроивnavbarсобственностьfalse, после отключения этого методане будет существоватьлюбая панель навигации

module.exports = {
  // 其它配置
  themeConfig: {
    navbar: false
  }
}

Второй тип:Отключите NAVBAR индивидуально, на каждой странице (.mdфайл) вверху настройтеnavbarСвойство имеет значение false. После отключения этого метода соответствующая панель навигации все еще существует, ноНе могу нажать, чтобы прыгнуть.

---
navbar: false
---

Встроенный поиск

В процессе настройки панели навигации выше, в дополнение к навигации, которую мы настроили, также будет окно поиска, которое является встроенным поиском VuePress, Встроенный поиск может искать только страницы страницы.h2иh3Для индекса, образованного заголовком, мы все еще можем настроить встроенный поиск следующим образом:

  • search: Настроив это свойство какfalse, чтобы отключить встроенный поиск
  • searchMaxSuggestions: Ограничьте максимальное количество результатов для встроенного поиска, настроив это свойство на число.
module.exports = {
  // 其它配置
  themeConfig: {
    search: false,
    searchMaxSuggestions: 10
  }
}

Боковая панель

группировка боковой панели

Группировка боковой панели означает группировку ссылок, каждая ссылка соответствует странице.

Группировку боковой панели можно настроить следующим образом, гдеcollapsableсвойство установлено наfalse, что означает, что для расширения группы свойство установлено вtrue, что означает свернуть группу.

module.exports = {
  themeConfig: {
    // 其它配置
    sidebar: [
      {
        title: '前端三剑客',
        collapsable: false,
        children: [
          '/CSS/',
          '/HTML/',
          '/JavaScript/'
        ]
      },
      {
        title: 'Vue.js',
        collapsable: false,
        children: [
          '/Vue/',
          '/Vue/Vuex.md',
          '/Vue/Vue-Router.md',
        ]
      }
    ]
  }
}

Для достижения вышеуказанных результатов группировки структура каталогов может быть следующей:

|-- docs
|   |-- CSS
|   |   |-- README.md
|   |-- HTML
|   |   |-- README.md
|   |-- JavaScript
|   |   |-- README.md
|   |-- Vue
|       |-- README.md
|       |-- Vue-Router.md
|       |-- Vuex.md
|   |-- README.md

Результаты группировки боковой панели

Автоматически создавать боковую панель

Если мы просто хотим автоматически генерировать боковую панель на основе заголовка в .md, мы можем установить атрибут sidebar: auto.

если бы мы были.mdЕсли вы включаете автоматическое создание боковых панелей, вам необходимо настроить следующее

module.exports = {
  themeConfig: {
    // 所有页面全部开启自动生成侧边栏
    sidebar: 'auto',
  }
}

Если мы нацелимся только на определенный.mdЕсли файл включен для автоматического создания боковой панели, он должен находиться в.mdВерхняя часть файла, установивYAMLсвойства, соответствующая конфигурация выглядит следующим образом

---
sidebar: auto
---
# Vue.js
这里是Vue.js文件的内容部分

Отключить боковую панель

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

---
sidebar: false
---
# Vue.js
这里是Vue.js文件的内容部分

Время последнего обновления

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

Время последнего обновления можно настроить с помощьюlastUpdated, его значение по умолчанию равноfalse, который принимает строку (String) и логическое (boolean)

module.exports = {
  themeConfig: {
    // 1.接受字符串，它设置了最后更新时间的label，例如：最后更新时间：2019年5月3日 21:51:53
    lastUpdated: '最后更新时间',
    // 2.设置true，开启最后更新时间
    lastUpdated: true,
    // 3.设置false，不开启最后更新时间(默认)
    lastUpdated: false
}

Предыдущий Следующий

Если у нас нет предыдущей или следующей статьи, нам просто нужно установить для соответствующего свойства YAML значение false.

Предыдущий/следующий можно настроить с помощьюYAMLизprevиnextДля отображения конфигурации адрес ссылки имеет те же правила написания, что и адрес навигации, один настроен с предыдущей/следующей статьей.mdФайл может выглядеть так

---
prev: /HTML/
next: /JavaScript/
---
# HTML5

这里是HTML5的内容部分

Репозиторий Git и ссылка на редактирование

При экспорте нашего статического веб-сайта нам может понадобиться навигационная ссылка на нашGitHubСклад, мы можем решить это требование с помощью следующей конфигурации

repo представляет наш адрес ссылки, repoLabel представляет имя ссылки, оно автоматически появится в последней позиции нашей навигации после настройки

module.exports = {
  themeConfig: {
    // 其它配置
    repo: 'https://github.com/wangtunan/blog',
    repoLabel: 'Github',
    nav: [
      { text: '首页', link: '/' },
      { text: '前端三剑客', items: [
        { text: 'HTML', link: '/html/' },
        { text: 'CSS', link: '/CSS/' },
        { text: 'JavaScript', link: '/JavaScript/' }
      ]},
      { text: 'Vue.js', link: '/vue/' },
    ]
  }
}

Функция редактирования не включена по умолчанию. Мы можем настроить editLinks, чтобы указать, будет ли отображаться ссылка редактирования. editLinkText указывает текстовое содержимое функции редактирования.

Конфигурация с включенными ссылками редактирования может выглядеть так

module.exports = {
  themeConfig: {
    // 其它配置
    repo: 'https://github.com/wangtunan/blog',
    repoLabel: 'Github',
    editLinks: true,
    editLinkText: '编辑此页',
    nav: [
      { text: '首页', link: '/' },
      { text: '前端三剑客', items: [
        { text: 'HTML', link: '/html/' },
        { text: 'CSS', link: '/CSS/' },
        { text: 'JavaScript', link: '/JavaScript/' }
      ]},
      { text: 'Vue.jss', link: '/vue/' },
    ]
  }
}

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

Вы также можете установитьYAMLв индивидуальном порядке запретить.mdФайл включает функцию редактирования ссылки

---
editLink: false
---

Расширение уценки

Ссылка на сайт

якорная ссылка

Все во VuePress.mdзаголовок в файле (по умолчаниюh2иh3) автоматически добавит якорные ссылки (anchor), поэтому, если нам нужно перейти к фиксированной точке привязки, мы можем установить ее следующим образом

[锚点链接](/vuepress/#pwa配置)

Внутренняя ссылка

Внутри VuePress с.mdили.htmlконец файла, будет преобразован в<router-link>используется дляSPAНавигация чувствительна к регистру.
Если имя файлаREADME.md, он будет скомпилирован вindex.html, поэтому, когда мы посещаем/vuepress/на самом деле получает доступ/vuepress/README.mdили/vuepress/index.html

пользовательский контейнер

VuePress имеет встроенные пользовательские контейнеры в трех разных состояниях, которыеtip,warningиdangerТри типа, рядом с типом вы можете установить собственный заголовок контейнера, если он не написан, по умолчаниюTIP, правила их написания следующие

::: tip 提醒
这里是tip容器
:::

::: warning 警告
这里是警告容器
:::

::: danger 危险
这里是危险容器
:::

Результаты трех пользовательских контейнеров показаны ниже.

категория кодового блока

Для разных кодовых блоков необходимо установить разные типы для отображения.

  • htmlТип: указывает, что кодовый блокhtmlформатированный
  • cssТип: указывает, что кодовый блокcssформатированный
  • jsТип: указывает, что кодовый блокjavascriptформатированный
  • stylusТип: указывает, что кодовый блокstylusФормат, похожие типы такжеlessиscss
  • mdТип: указывает, что кодовый блокmarkdownформатированный
  • jsonТип: указывает, что кодовый блокjsonформатированный

Их соответствующая конфигурация показана ниже
HTMLОтформатированный кодовый блок (обратите внимание на маленькую угловую метку в правом верхнем углу кодового блока)

<div class="box">html类型的代码块</html>

cssОтформатированный кодовый блок (обратите внимание на маленькую угловую метку в правом верхнем углу кодового блока)

.box {
  width: 100px;
  height: 100px;
}

jsОтформатированный кодовый блок (обратите внимание на маленькую угловую метку в правом верхнем углу кодового блока)

console.log('js格式的代码块')

Блоки кода в других форматахтак же, здесь не повторяется

Подсветка блоков кода и номера строк

подсветка блока кода

Слепки не поддерживают подсветку блоков кода, используйте конфигурацию VuePress для просмотра результатов.

существуетMarkdown, мы можем установить подсветку блока кода следующим образом (тип, за которым следует фигурная скобка)

`` js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
``

Его результат может выглядеть следующим образом (выделена четвертая строка,количество строк не начинается с 0)

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

Чтобы выделить несколько строк, просто разделите номера строк запятыми, напримерjs {1,3,5}

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

номер строки кода

Конфигурация номера строки блока кода также должна быть вconfig.jsв конфигурации следующим образом

module.exports = {
  // 其它配置
  markdown: {
    // 显示代码块行号
    lineNumbers: true
  }
}

После настройки результат номера строки блока кода показан на следующем рисунке.

Используйте эмодзи

Поддерживаются не все выражения Emoji (самородки не поддерживают, но я могу только удалить пример)

существует.mdфайл, мы можем использоватьEmojiсмайлики, вы также можете получить доступEmoji Searchнайти свою любимуюEmojiсмайлики, посетитеCommon Emojiдля доступа к часто используемымEmoji,ОдинEmojiможно написать так

#### 这里是Emoji表情 :tada:
:100: :rocket:

Таблицы в стиле Github

Иногда мы хотим.mdПеречислил несколько простых форм в файле, вы можете настроить его ниже

| 序号          | 订单编号      | 订单金额|
| -------------|:-------------:| ------:|
| 1             | 20180101     | $1600  |
| 2             | 20180102     |   $12  |
| 3             | 20180103     |    $1  |

Вышеприведенная таблица аналогичнаGithubСтиль таблицы согласован, и его результат показан ниже.

серийный номер номер заказа сумма заказа
1 20180101 $1600
2 20180102 $12
3 20180103 $1

автоматически сгенерированный каталог

Иногда мы хотим автоматически генерировать оглавление на основе заголовка, вы можете использовать[[toc]]для вывода нашего каталога, который по умолчанию только перечисляетh2титул иh3заглавие

[[toc]]

# H1标题

## h2标题
### h3标题
### h3标题

## h2标题
### h3标题
### h3标题

Его результат может выглядеть так

Использовать синтаксис шаблона Vue

Интерполяция

существует.mdфайл, вы можете использовать выражения интерполяции Vue, например следующие

# 插值表达式
1 + 1 的结果是 {{1+1}}

Результатом 1 + 1 является {{1+1}}(Самородки не поддерживаются, используйте VuePress, чтобы просмотреть этот случай самостоятельно)

инструкция

Вместо использования выражений интерполяции, подобных приведенным выше, мы также можем использоватьv-forи другие инструкции, следующее использованиеv-forпример инструкции

列表渲染的结果是：<span v-for="number in 5">{{number}}</span>

Результат рендеринга списка:{{number}}(То же, что и выше, самородки не поддерживаются)

Используйте собственный JavaScript и CSS

Если мы хотим работать с DOM в собственном JS, то мы должны помнить, что страница VuePress отображается сервером, и лучше всего работать с DOM после загрузки страницы.

VuePress дает нам.mdПишите родной прямо в файлjsиcssвозможности, они могут иметь форму

<!--样式内容-->
<style>
.box {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #fff;
  background-color: #58a;
}
</style>

<!--.md内容-->
#### 使用原生的JS和CSS
<div id="container"></div>

<!--js内容-->
<script>
window.onload = function() {
  var dom = document.getElementById('container');
  dom.innerHTML = 'box content'
  dom.className = 'box'
}
</script>

Результат приведенного выше кода показан ниже

Используйте препроцессор CSS

VuePress не только позволяет нам использовать нативныеJSиCSSвозможность также дать нам возможность использоватьCSSВозможности препроцессора со встроенными связаннымиCSSДля настройки препроцессора нам нужно только установить соответствующие зависимости и использовать их.Важно отметить, что VuePress имеет встроенныйStylus, нам не нужно его устанавливать, мы можем использовать его напрямую, теперь давайте использоватьStylusпереписать приведенный выше пример

<!--样式内容-->
<style lang="stylus">
.box
  width: 100%
  height: 100px
  line-height: 100px
  text-align: center
  color: #fff
  background-color: #fb3
</style>

<!--.md内容-->
#### 使用原生的JS和CSS
<div id="container"></div>

<!--js内容-->
<script>
window.onload = function() {
  var dom = document.getElementById('container');
  dom.innerHTML = 'box content'
  dom.className = 'box'
}
</script>

использоватьStylusРезультат после препроцессора показан на следующем рисунке:

Используйте встроенные компоненты

внешняя ссылка

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

Ниже приведена конфигурация внешней ссылки, ведущей на Baidu.

[百度一下](https://www.baidu.com)

На данный момент маленькая иконка за текстом Baidu является встроенным компонентом.OutboundLink Байду(На Наггетс нет маленького значка)

Значок

Встроенные компонентыBadgeНеобходимо передать три свойства

  • text: указывает содержимое угловой метки
  • type: Подобно пользовательским контейнерам, он имеет три разных типа, а именноtip,warnиerror, по умолчаниюtip
  • vertical: Указывает выравнивание угловой метки с содержимым. Есть два значения, а именноtopиmiddle, по умолчаниюtop

Использование угловых меток выглядит следующим образом.

#### Vue <Badge text="2.5.0+"/> 
#### Vuex <Badge text="beta" type="warn" vertical="top"/> 
#### Vue-Resource<Badge text="废弃" vertical="middle" type="error"/>

Использование компонентов Vue

Помимо того, что мы можем использовать встроенные компоненты, VuePress также позволяет нам использовать наши собственные компоненты, которые по умолчанию.vuepress/componentsВсе компоненты каталога зарегистрированы глобально, после регистрации мы можем напрямую.mdиспользуется в файле. мы первые.vuepress/componentsВ каталоге (если нет, создайте новый)customer-componentиз.vueфайл, его содержание следующее

<template>
  <div class="customer-component">
    todoList:
    <div v-for="item in list" :key="item.id">
      项目：{{item.text}}，状态：{{item.done ? '完成': '进行中'}}
    </div>
  </div>
</template>
<script>
export default {
  name: 'CustomerComponent',
  data () {
    return {
      list: []
    }
  },
  created () {
    this.list = [
      { id: 1, text: 'JavaScript', done: false },
      { id: 2, text: 'HTML', done: false },
      { id: 3, text: 'CSS', done: true },
      { id: 4, text: 'Vue.js', done: true },
      { id: 5, text: 'VuePress', done: true }
    ]
  }
}
</script>

существует.mdимпортируется в файл

### 使用自定义组件
<customer-component/>

Результат работы VuePress

Расширенная конфигурация

API базовой конфигурации

титул (название)

Заголовок заголовка позволяет нам настроить заголовок статического сайта, который закреплен в верхнем левом углу.

Его можно настроить следующим образомtitle

module.exports = {
  // 其它配置
  title: 'VuePress Blog'
}

Результат после настройки показан на следующем рисунке.

описание (описание сайта)

описание Будет отображаться в HTML текущей страницы как тег , который распознается поисковыми системами и относится к конфигурации SEO.

Можно настроить такdescription

module.exports = {
  // 其它配置
  title: 'VuePress Blog',
  description: 'VuePress Blog 的网站描述'
}

Результат после настройки показан на следующем рисунке.

base

Значение базы по умолчанию — /, которое принадлежит процессу развертывания.Чтобы настроить его, мы можем получить доступ к нашему проекту, в котором каталог страниц GitHub

Простые термины, если мы должны были настроитьhttps://xxx.github.io/blog/этот адрес, то нашbaseТребуется следующая конфигурация

module.exports = {
  // 其它配置
  base: '/blog/',
  title: 'VuePress Blog',
  description: 'VuePress Blog 的网站描述'
}

host (имя хоста) и post (порт)

Значение хоста по умолчанию 0.0.0.0, этот параметр может указывать имя нашего хоста (IP-адрес), Значение порта по умолчанию 8080, этот параметр может указывать наш номер порта

настроенhostиportПосле этого мы можем использовать браузерIPадрес+portпорт для доступа, например.

module.exports = {
  // 其它配置
  port: 3000,
  host: '127.0.0.1',
  base: '/blog/',
  title: 'VuePress Blog',
  description: 'VuePress Blog 的网站描述'
}

После того, как вышеуказанная конфигурация будет успешной, мы можем127.0.0.1:3000посетить наши проекты

dest (выходной каталог)

Значение по умолчанию для dest — .vuepress/dist. Его настройка может помочь нам установить выходной каталог упакованного файла.

Если мы хотим поставитьdistВывод каталога находится по корневому пути, а не.vuepressпапку, вы можете настроить следующие

module.exports = {
  // 其它配置
  dest: 'dist',
  port: 3000,
  host: '127.0.0.1',
  base: '/blog/',
  title: 'VuePress Blog',
  description: 'VuePress Blog 的网站描述'
}

Простое переопределение стиля

Если вы просто хотите иметь возможность выполнять некоторые простые переопределения стилей в стилях по умолчанию, вам нужно.vuepressСоздайте два файла стилей в каталогеoverride.stylиstyle.styl, они всеstylusдокумент(Также могут быть файлы стилей других типов.), конкретные роли этих двух файлов следующие:

  1. override.stylСбросить переменные стиля для темы по умолчанию
  2. style.stylПользовательские стили, примененные к теме по умолчанию

override.styl

Для темы VuePress по умолчанию он предоставляет некоторые константы темы, которые мы можем свободно настраивать.Константы, которые можно настроить, и их соответствующие пояснения приведены ниже.

// 默认主题下的hover颜色(主题绿)
$accentColor = #3eaf7c 
// 默认主题下的文本颜色
$textColor = #2c3e50
// 默认主题下的border颜色
$borderColor = #eaecef
// 默认主题下的代码块背景色(背景黑)
$codeBgColor = #282c34

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

$accentColor = #fb3 
$textColor = green
$borderColor = red
$codeBgColor = #58a

Эффект вышеперечисленных настроек следующий

style.styl

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

.content
  code
    background-color: #fff5f5;
    color: #ff502c;

После применения вышеуказанного пользовательского стиля эффект однострочного блока кода в теме по умолчанию выглядит следующим образом.

Внедрение фрагментов кода

если бы мы писали.mdВ документ нам нужно импортировать наш существующийjsкод, и мы не хотим использовать блок кода для его повторного копирования и вставки, на этот раз VuePress позволяет нам импортировать существующийjsФрагмент кода, его синтаксис следующий

<<< @filepath
// 导入的同时也支持高亮
<<< @filepath{highlightLines}

Конкретные примеры следующие

<<< @/docs/.vuepress/js/hello.js {2}

Результат импорта фрагмента кода

Алголия Поиск

В главе о базовой настройке мы говорили о встроенном поиске, встроенный поиск будет использоваться только для страницыh2иh3Название создает индекс, и если мы хотим искать полный текстовый поиск, вам нужно использовать это резюме.AlgoliaИскал, его конфигурация может быть следующей

module.exports = {
  // 其它配置
  themeConfig: {
    algolia: {
      apiKey: '<API_KEY>',
      indexName: '<INDEX_NAME>'
    }
  }
}

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

Конфигурация этой сводки не была успешно настроена из-за ее особенностей. Если вы заинтересованы, перейдите сюда.Алголия Поиск
Если вы настроите его успешно, эффект их поиска будет следующим (Официальный сайт Вью)

Управление статическими ресурсами

существует.mdВ файле, если мы хотим использовать статические ресурсы, у нас есть следующие способы ссылки на ресурсы

  • относительный путь/абсолютный путь
  • Webpackпсевдоним

Давайте представим их один за другим

относительный путь

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

// 格式
![图片缺失时的alt](图片的路径)

// 示例：绝对路径
![百度logo](https://www.baidu.com/logo.png)
// 示例：相对路径
![Algolia搜索](../images/vuepress/16.png)

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

Псевдонимы Webpack

какVue-cliПодобно скаффолдингу, когда путь длинный или структура каталогов сложная, используйтеWebpackпсевдоним для доступа, обычно он очень удобный, его конфигурация может быть такой

// .vuepress/config.js下配置
module.exports = {
  // 其它配置
  configureWebpack: {
    resolve: {
      alias: {
        '@vuepress': '../images/vuepress',
        '@vue': '../images/vue',
        '@interview': '../images/interview'
      }
    }
  }
}

После приведенной выше конфигурации мы можем.mdиспользуется в таком файле

// 不使用别名
![Algolia搜索](../images/vuepress/16.png)

// 使用别名
![Algolia搜索](~@vuepress/16.png)

пользовательский класс стиля страницы

Иногда мы хотим использовать определенный стиль на определенной странице, VuePress позволяет нам это сделать, вам просто нужно.vuepress/style.stylВы можете написать собственные стили и использовать их на соответствующих страницах, они могут быть настроены следующим образом

// .vuepress/style.styl
.customer-page-class
  color: #fb3;
  background-color: #333;

в соответствующем.mdв самом верху файла используйтеYAMLсинтаксис для ссылки на пользовательские стили

---
pageClass: customer-page-class
---

Использование пользовательских стилей приводит к

Настроить макет страницы

В теме по умолчанию каждый.mdфайлы будут отображаться в<div class="page"></div>В такой вкладке одновременно генерируются боковая панель страницы, ссылка на редактирование (если есть), время последнего обновления (если есть) и предыдущая/следующая статья (если есть).
Но если мы не хотим генерировать такую ​​страницу, а хотим использовать пользовательский макет, то есть использоватьVueкомпоненты для разработки пользовательских страниц, VuePress предоставляет нам такие возможности, это всохранить панель навигацииИсходя из всего остального, что мы можем настроить, его конфигурация может быть такой.

// 在需要自定义的.md文件中使用YAML语法
---
layout: customerComponent
---

Для имени компонента, подобного приведенному выше, его соответствующий путь.vuepress/components/customerComponent.vue, так как VuePress автоматически поможет нам поставить.vuepress/componentsВсе компоненты в каталоге зарегистрированы, так что мы можем.mdфайл для использования,customerComponent.vueКод может быть следующим

<template>
  <div class="customer-component">
    <div class="left">123</div>
    <div class="center">123</div>
    <div class="right">123</div>
  </div>
</template>
<style lang="stylus">
  .customer-component
    height: calc(100vh - 60px);
    display: flex;
    background-color: #333;
    color: #fff;
    & > div
      flex: 0 0 200px;
      width: 200px;
      text-align: center
    .left
      background-color: #58a;
    .center
      flex: 1;
      background-color: #fb3;
    .right
      background-color: #58a;
</style>

Результат использования пользовательского макета выглядит следующим образом

Используйте сторонние темы

VuePress поддерживает использование сторонних тем, которые необходимо.vuepress/config.jsВы можете настроить его следующим образом

Название плагина VuePress фиксированное, обычно vuepress-theme-xxx.После того, как npm install установит стороннюю тему, при настройке нужно написать только фамилию. Например: тема vuepress-theme-reco, просто настройте следующим образом.

module.exports = {
  // 其它配置
  theme: 'reco'
}

Используйте сторонние библиотеки

При написании документов, если мы хотим использоватьnpmпакет или другая сторонняя библиотека, как мы ее используем, VuePress предоставляет ее намenhanceApp.jsчтобы позволить нам выполнять настройку уровня приложения, его путь.vuepress/enhanceApp.js, соответствующая конфигурация выглядит следующим образом

// 使用自定义样式
import './style/index.styl'
// 使用第三方包
import _ from 'lodash'
// 其它
// import xxx from xxx

export default ({
  Vue,
  options,
  router,
  siteData 
}) => {
  // ...做一些其他的应用级别的优化
}

развертывать

Развернуть на страницах Github

развернуть вGithub Pages, нам нужны следующие шаги

  • Генерация пакетаdistпапка
  • Создать новый склад, создать новый под этим складомgh-pagesфилиал
  • Отправьте код в удаленный репозиторий (включаяmasterфилиал иgh-pagesфилиал)

Бэйл

Перед развертыванием нам нужно использовать команду упаковки, которую мы настроили.

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

Запустите команду пакетаnpm run docs:build, это будет в.vuepressсоздать каталогdistпапку, то нам просто нужно загрузить эту папку вGithubТо есть его результаты упаковки могут относиться к следующим

> vuepress build docs
 WAIT  Extracting site metadata...
[23:53:00] Compiling Client
[23:53:00] Compiling Server
Language does not exist sh
Language does not exist sh
[23:53:07] Compiled Server in 7s
[23:53:12] Compiled Client in 12s
WAIT  Rendering static HTML...
DONE  Success! Generated static files in docs\.vuepress\dist.

Создайте новый репозиторий и создайте ветку Github Pages

создать новыйgithubКонкретные шаги склада и новой ветки здесь не описываются.Если вы успешно создадите новую ветку, ваш склад должен выглядеть так

Отправить на Гитхаб

Выше мы создали новый удаленный склад, мы можемdistВыполните следующую команду в каталоге

// 新建仓库
$ git init

// 关联你的远程仓库
$ git remote add origin xxxx

// 切换到gh-pages分支
$ git checkout gh-pages

// 提交代码到gh-pages分支
$ git push origin gh-pages

// 合并到master分支
$ git checkout master
$ git merge gh-pages

После успешной отправки вы можете пройтиhttps://xxx.github.ioилиhttps://xxx.github.io/xxx/(Это зависит от того, настроили ли выbaseсобственность) для доступа

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

Категории