Hexo надоело смотреть, попробуем VuePress построить личный блог

внешний интерфейс GitHub Vue.js Hexo VuePress

VuePress

Давайте кратко представим VuePress, новое колесо, выпущенное Youda в апреле 2018 года.

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

Это официальная документация VuePress. Это китайская документация VuePress.

Начать

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

  1. Сначала установите VuePress глобально
npm install -g vuepress
  1. Затем клонируйте репозиторий VuePress на свой компьютер.
git clone git@github.com:docschina/vuepress.git
  1. Выполнить в файле документации (убедитесь, что ваша версия Node.js >= 8)
cd vuepress
cd docs
vuepress dev

Это успешно, когда вы видите эту строку:

 VuePress dev server listening at http://localhost:8080/

Ниже мы открываемhttp://localhost:8080/Установлено, что документ VuePress был действительно открыт:

Следующей задачей является замена данных, но мы должны сначала взглянуть на структуру каталогов документов:

├─.vuepress
│  ├─components
│  └─public
│      └─icons
│   └─config.js // 配置文件
├─config // Vuepress文档的配置参考内容
├─default-theme-config // Vuepress文档的默认主题配置内容
├─guide // Vuepress文档的指南内容
└─zh // 中文文档目录
    ├─config
    ├─default-theme-config
    └─guide
└─README.md // 首页配置文件

Документ разделен на две части: документ на китайском языке находится в каталоге /zh/, а документ на английском языке — в корневом каталоге.

На самом деле содержимое каталога очень легко понять.Прежде всего, три каталога: руководство, default-theme-config и config являются основным содержанием документа Vuepress.Из китайского документа вы также можете увидеть что заменены только эти три каталога.

Домашняя конфигурация

Тема по умолчанию обеспечивает макет домашней страницы, чтобы использовать ее, вам нужно находиться в корневом каталоге.README.md из YAML front matterуказано вhome：true, а также некоторые другие метаданные.

Давайте сначала посмотрим на README, md в корневом каталоге:

home: true // 是否使用Vuepress默认主题
heroImage: /hero.png // 首页的图片
actionText: Get Started →  // 按钮的文字
actionLink: /guide/ // 按钮跳转的目录
features: // 首页三个特性
- title: Simplicity First
  details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
  details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
  details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2018-present Evan You // 页尾

Я действительно не понимаю,Официальный сайтЕсть более подробная инструкция по настройке, чем моя.

Конфигурация навигации

Профиль навигации.vuepress/config.jsсередина

В файле конфигурации навигации nav управляет ссылкой панели навигации, вы можете изменить ее на свой собственный каталог блога.

nav: [
    {
        text: 'Guide',
        link: '/guide/',
    },
    {
        text: 'Config Reference',
        link: '/config/'
    },
    {
        text: 'Default Theme Config',
        link: '/default-theme-config/'
    }
]

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

Изменить цвет темы по умолчанию

ты сможешь.vuepress/создать каталогoverride.stylдокумент. vuepress предоставляет четыре сменных цвета:

$accentColor = #3eaf7c // 主题色
$textColor = #2c3e50 // 文字颜色
$borderColor = #eaecef // 边框颜色
$codeBgColor = #282c34 // 代码背景颜色

Я изменил это на это:

Реализация боковой панели

Так как в области комментариев много людей спрашивают, я обновлю это здесь, На самом деле, даже если я пишу здесь подробно, всем лучше прочитать официальную документацию. Конфигурация боковой панели также.vuepress/config.jsсередина:

sidebar: [
  {
    title: 'JavaScript', // 侧边栏名称
    collapsable: true, // 可折叠
    children: [
      '/blog/JavaScript/学会了ES6，就不会写出那样的代码', // 你的md文件地址
    ]
  },
  {
    title: 'CSS', 
    collapsable: true,
    children: [
      '/blog/CSS/搞懂Z-index的所有细节',
    ]
  },
  {
    title: 'HTTP',
    collapsable: true,
    children: [
      '/blog/HTTP/认识HTTP-Cookie和Session篇',
    ]
  },
]

Соответствующая структура документа:

├─blog // docs目录下新建一个博客目录
│  ├─CSS
│  ├─HTTP
│  └─JavaScript

мой блог:brownhu

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

После настройки вашего блога командная строка выполняет:

Vuepress build

Это успешно, когда вы видите эту строку:

Success! Generated static files in vuepress.

Загрузите упакованный каталог vuepress в свой репозиторий github и сотрудничайте со страницей github, чтобы настроить свой веб-сайт блога.

Категории