prevjs下載 - prevjs原始碼下載

prevjs

其他類別

1.0.0

下載

關於

PrevJS 是一個基於 EJS 模板建立的超級簡單的靜態網站產生器。它的主要目標是以更少的工作來建立、最佳化和部署靜態網站。

特徵

?‍ 創建 - 為想要使用純 html、js 和 css進行編碼的前端人員創建。這也意味著您可以輕鬆地將現有的靜態網站轉換為 prevjs 網站
⏱ 建置 - 透過網站地圖產生、頁面預取、webp 轉換和縮小，針對 SEO 進行了最佳化導出。在 Google pagespeed 工具中得分為 99。
？部署 - 點擊即可託管到您的 CDN。對AWS CloudFront 的開箱即用支持
？動態範本 - 使用單一範本從 JSON 資料動態產生靜態網頁。對於部落格、文件有用
？動態模板預覽，無需匯出。只要在瀏覽器中輸入動態路徑，PrevJS 就會自動載入包含相關資料的頁面
？ PrevJS 網站可以是您現有網站的一部分。由於 prevjs 站點幾乎沒有相依性或節點模組。即使它是 JSP 或 PHP 網站，它也可以是您現有網站的一部分。
？網站即時預覽- 編輯後無需重新載入網頁
？面向未來，開發和匯出中的程式碼都是 Web 原生的，因為它不需要特殊的修改或函式庫（ejs 除外）。這意味著即使在 PrevJS 未維護的罕見事件中，您的程式碼也不會像其他未維護的網站產生器那樣崩潰。
Ⓜ️原生支援Markdown 網站。將帶有 .md 檔案的網站以及樣式和腳本轉換為 html。範例：https://prevjs.com

先決條件

軟體

從 http://nodejs.org/ 安裝 nodejs 和 npm。
（可選 - NPM 的替代方案）Yarn 套件管理器，安裝 https://yarnpkg.com/getting-started/install

知識

需求：網頁設計所需的基本HTML、CSS
可選：了解 https://ejs.co/ 範本是一個很大的優勢
可選：Jquery、Bootstrap 會有很大幫助
不需要了解任何高級應用程式框架（例如 React）。

如何使用

第 1 步：從 NPM 註冊表安裝 prevjs CLI 指令

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

範例recipe.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": ""
  }
}

使用 TEMPLATES 產生動態頁面

此 TEMPLATES 資料夾用於動態產生包含資料的頁面。資料可以內嵌在 template.json 中，也可以來自遠端 JSON url。當網頁設計不變但每個頁面的資料不同時很有用。

TEMPLATES 中的每個範本資料夾應包含以下具有這些特定名稱的檔案：

template.ejs = 包含填滿資料變數的模板 html 結構

template.json = 包含頁面資料數組，用於使用 template.ejs 產生頁面

範例模板.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"
    
    }
  ]
}