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).
Для расширенного использования, пожалуйста, ознакомьтесь с документацией.