Загрузка prevjs - Загрузка исходного кода prevjs

prevjs

Другие категории

1.0.0

Скачать

Логотип

О

PrevJS — это очень простой генератор статических веб-сайтов, созданный на основе шаблонов EJS. Его основная цель — создавать, оптимизировать и развертывать статические веб-сайты с гораздо меньшими усилиями.

Функции

?‍ Create — создан для людей, которые хотят писать код на простом HTML, JS и CSS . Это также означает, что вы можете легко преобразовать существующий статический веб-сайт в сайт prevjs.
⏱ Сборка — экспорт оптимизирован для SEO с генерацией карты сайта, предварительной загрузкой страниц, преобразованием веб-страниц и минимизацией. Оценка 99 в Google PageSpeed Tool.
? Развертывание — разместите свой CDN в один клик. Готовая поддержка AWS CloudFront
? Динамические шаблоны. Динамическое создание статических веб-страниц на основе данных JSON с помощью одного шаблона. Полезно для блога, док
? Динамический просмотр шаблона без экспорта. Просто введите динамический путь в своем браузере, и PrevJS автоматически загрузит страницу со связанными данными.
? Сайты PrevJS могут быть частью вашего существующего веб-сайта . Поскольку сайт prevjs почти не имеет зависимостей или узловых модулей. Он может быть частью вашего существующего веб-сайта, даже если это сайт JSP или PHP.
? Предварительный просмотр сайта в реальном времени - без перезагрузки веб-страниц после редактирования
? Готовность к будущему : код как при разработке, так и при экспорте является веб-нативным, поскольку не требует специальных модификаций или библиотек (кроме ejs). Это означает, что даже в маловероятном случае, если PrevJS не будет поддерживаться, ваш код не обанкротится, как другие необслуживаемые генераторы сайтов.
Ⓜ️ Изначально поддерживает сайты с уценкой . Конвертируйте веб-сайт с файлами .md в html вместе со стилями и скриптами. Пример: https://prevjs.com.

Предварительные условия

Программное обеспечение

Установите nodejs и npm с http://nodejs.org/.
(Необязательно — альтернатива NPM) Менеджер пакетов Yarn, установите https://yarnpkg.com/getting-started/install.

Знание

Требуется: базовый HTML, CSS, необходимый для дизайна веб-страницы.
Необязательно: знание шаблонов https://ejs.co/ будет большим плюсом.
Необязательно: Jquery, Bootstrap очень поможет.
Никаких знаний о каких-либо продвинутых платформах приложений, таких как React, не требуется.

Как использовать

Шаг 1. Установите команду CLI prevjs из реестра NPM.

npm install @produle/prevjs -g

(Необязательно — альтернатива NPM) Команда Yarn: yarn --global add @produle/prevjs

Шаг 2. Создание простого сайта prevjs (необязательно).

prevjs --create /path-to-where-my-website-folder-should-be/

Шаг 3. Предварительный просмотр вашего веб-сайта на локальном компьютере

prevjs --run /path-to-my-website-folder/recipe.json

Шаг 4. Оптимизация и экспорт вашего веб-сайта для производства.

prevjs --export /path-to-my-website-folder/recipe.json

Шаг 5. Развертывание экспортированного веб-сайта в рабочем облаке AWS.

prevjs --deploy /path-to-my-website-folder/recipe.json (требуется настройка команды aws)

Чтобы перечислить локально доступные рецепты веб-сайта

prevjs --list-recipes local

Чтобы установить конкретный рецепт

prevjs --create business1 /path-to-my-site/recipe.json

Пример структуры сайта PrevJS

 website/recipe.json => Stores configuration of this website for PrevJS
website/index.ejs => Index page of the website
website/about/index.ejs => Example route of another page in site

website/DRAFTS => Any page that should not be deployed, are placed inside this folder
website/DRAFTS/working.ejs => Example drafts page

website/PARTIALS => All re-used components and sections of website used in multiple pages
website/PARTIALS/header.ejs => Example partial for header in all pages

website/TEMPLATES => Contains templates for dynamically generating pages from json data
website/TEMPLATES/example-template/template.ejs => HTML page with data variables of an example template
website/TEMPLATES/example-template/template.json => Contains array of page data each with unique dynamic route

website/STATIC => All static files like images,js and css are stored here
website/STATIC/css/external => All third party css files
website/STATIC/css/internal => All internal styles written for this site
website/STATIC/js/external => All third party JS files and libraries
website/STATIC/js/internal => All internal js code written for this site
website/STATIC/images => Images used in this website, can be nested like webpages
website/STATIC/favicon.ico => Website Favicon

Пример файла рецепта.json

 {
  "recipe_ver": "0.0.1",
  "name": "business-website",
  "description": "Business - Product site",
  "author": "Business Inc",
  "production_url": "https://business.com",
  
   "optimize": {
    "webp": "true",
    "minify_js": "true",
    "minify_css": "true",
    "minify_html": "true"
  },
  "deploy": {
    "domain": "https://business.com",
    "type": "aws",
    "aws_bucket": "",
    "aws_cfdistributions": ""
  }
}

Динамическая генерация страниц с использованием ШАБЛОНОВ

Эта папка ШАБЛОНЫ используется для динамического создания страниц с данными. Данные могут быть либо встроенными в файл template.json, либо из удаленного URL-адреса JSON. Полезно, когда дизайн веб-страницы не меняется, а только данные различаются для каждой страницы.

Каждая папка шаблона внутри TEMPLATES должна содержать следующие файлы со следующими именами:

template.ejs = Содержит HTML-структуру шаблона, заполненную переменными данных.

template.json = Содержит массив данных страницы, который используется для создания страниц с помощью template.ejs.

Пример файла template.json

 {
  "generate": true,
  "pages": [
    {
      "path": "doc/article1",
      "source": "inline",
      "data": {
        "title": "Doc Title 1",
        "post": "Post article 1"
      }
    },
    {
      "path": "doc/article2",
      "source": "jsonurl",
      "dataurl": "https://recipes.prevjs.com/examples/basic/article2.json"
    
    }
  ]
}

Советы

Чтобы настроить абсолютные пути к ресурсам внутри файлов ejs, используйте эту переменную <%= siteobj.urlpath => Она сопровождается косой чертой в конце и автоматически определяет локальную и производственную среды.