Peco - это генератор статических веб-сайтов, который похож на Hexo, за исключением того, что он основан на веб-пакете и серверном рендерере Vue.

Для начала:

mkdir my-blog
cd my-blog
yarn init -y
yarn add peco

Затем вы можете создать файл конфигурации peco.config.yml здесь:

title: My Blog
description: I'm writing some bs here.

Запустите yarn peco dev в этом каталоге, и вы сможете увидеть свой оживленный блог за секунды.

Фактически, это то же самое, что и Hexo, вы заполняете страницы в source/*.md и публикуете в source/_posts/*.md. Например:

📝 source / about.md:

---
title: About me
---
Let me introduce myself, my name is __EGOIST__
...

Затем вы можете посетить эту страницу через /about.

📝source / _posts / hello-world.md

---
title: Hello World
date: 2018-04-30
---
> Just saying...

Этот пост также будет доступен на /2018/04/30/hello-world.

Тематика

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

📝 peco.config.yml:

theme: ./theme

Затем Peco будет использовать ./theme/layouts/index.vue для обращения, ./theme/layouts/page.vue для страниц и ./theme/layouts/post.vue для сообщений.

Каждый компонент макета принимает опору page, которая в основном разбирается на передней части и теле уценки:

interface Page {
  // front-matter
  attributes: {
    [k: string]: any
  }
  // html
  body: string
  // link to the page
  permalink: string
  // slugified filename
  slug: string
}

Для компонента макета домашней страницы page имеет два дополнительных ключа:

// An array of posts
posts: Page[]
pagination: {
  hasPrev: boolean
  hasNext: boolean
  prevLink: string
  nextLink: string
  total: number
  current: number
}

Для справки: мой блог был перенесен на Peco, вы можете проверить исходный код здесь или визуально увидеть, насколько он быстр / эффективен (размещен на Netlify.com).

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