papoGen
Using paper.css and Pug to generate.
If you feel papogen is good, hope you can give a star!
About
papoGen is a static webpage's generator. To generate a webpage, you won't need to have web develop experience. Only need do is know the format of Markdown, JSON and YAML. Then you can generate your own webpage by our pre-defined templates. Besides, if you want to design your own style of web page, you can also develop your own template by papoGen without having too much time. papoGen is developed by Toolbuddy. If you have like papoGen or our other tools, please give us a "star"! If you have any problem or suggestion, please feel free to contact with us. We'd love to help you.
Demo
JSON format:
YAML format:
Markdown format:
papogen format:
Demonstration
以下展示了如何透過 papoGen 來快速生成一個網頁，使用者可以透過 CLI 指令來做產生; 以下會展示如何使用、以及指令參數的意義
- 測試來源腳本放置於
src/ 底下，並透過不同來源種類做資料夾分類
- 產生的結果放置於
out/ 底下，一樣透過來源種類做分類
Get Started
Help Manual:
任何疑惑可以下 -h 的參數做察看
papogen -h
完成基本需求後，可以進到下面的練習部份囉！
(注意！ 以下練習都是在這個 example/ 資料夾中做的演示！)
Markdown (Recommended)
JSON
YAML
透過指令產生腳本範本
- 在
0.0.12 版開始，可以支援透過 papoGen 產生可支援的腳本格式！
- 利用
papogen -h 來列出有支援哪些後，便可以利用 <script>以及 <format>的組合，來產生腳本；
- 組合方式：
<script>/<format>
<script> 目前支援 JSON / YAML / Markdown。<format> 則有多種，可以透過 papogen -h 來做察看。
- 示範指令
- 產生一個 JSON 格式中
text 樣式的腳本到目前的工作目錄$ papogen -c json/text -o .
- 多個樣式 (生成
text.json, list.json, 以及 table.json)$ papogen -c json/text/list/table -o .
- 全部範本都做生成
$ papogen -c json/all -o .
JSON 規格的使用
papoGen 如何使用 JSON ？
- 在 papoGen 當中，目前支援的 JSON 格式
- 而可以在主頁的
README.md 中看到 command 的使用情況，可以指定一個資料夾作為生成來源的依據
- 我們可以指定一個 folder 來做生成；而這時我們就可以把所有 JSON 檔案放在這裏面！
- 每個 JSON 都會佔據一個 tab ，並以其
檔案名稱當作該 tab 的顯示名稱 (網站中的其中一頁，詳情請參考 repo 首頁上方的 demo 連結)
- 而其內部內容就會轉換成為那一頁的顯示內容
- 依據 command 指定的 template，在生成上會有些微的差異
- 接下來我們就可以進到每個 JSON 檔內支援什麼格式囉
Type support
- 先來看到一個 JSON 檔案內概況：
- 每個檔案內都有個欄位
article 作為該頁的主題（顯示於內文最上方）
- 並跟隨一個 json array:
article_content
{
article: "Title name",
article_content: [ ... ]
}
article_content 格式：
- 每個 element 都有以下的欄位：
title： Subtitle namecontent： 為 json array，內部會裝載各式各樣支援的格式（以下會詳細介紹），papoGen 則會依據你所指定的以下格式來做轉換，成為美美的 document!
{
title: "Subtitle Name",
content: [ ... ]
}
- 那麼接下來就開始介紹
content 內部格式吧！
- 以下每個種類都是放置於
content 內的元件！
Normal Article
- 為一般文字支援
- 每個
data 裡頭的 element 都會自成獨立的一行
[
... (assume inside `content` array)
{
"type": "text",
"data": [
"sentence 1",
"sentence 2"
]
},
...
]
HyperLinks
- 為超連結支援
- 可與一般文字混用
- 注意在這個型態使用底下時，換行字元
要自行加在要換行的字串後面！
- 容許超連結與文章混合
[
... (assume inside `content` array)
{
"type": "hyper",
"data": [
{
"text": [
"sentence1","sentence2",...
]
},
{
"hyper":[
{ "text": "display text", "link":"<url>" } ...
]
}
]
},
...
]
Image support
- 為圖片支援
- 來源位置是為跟該 JSON 檔案的相對位置
[
... (assume inside `content` array)
{
"type": "image",
"data": [
{
"url": "../path/to/your/img or http://....",
"size": 300 // px
}
]
},
...
]
Code support
- 為原始碼支援，支援兩種來源
url: 透過檔案的方式做引入raw: 可以直接輸入程式碼
- 來源位置是為跟該 JSON 檔案的相對位置
[
... (assume inside `content` array)
{
"type": "code",
"data": [
{
"url": "../path/to/your/code"
},
{
"raw": "const var = require('meme')"
}
]
},
...
]
[
... (assume inside `content` array)
{
"type": "formula",
"data": [
"`x = (-b +- sqrt(b^2-4ac))/(2a) .`"
]
},
...
]
Table support
- 表格的支援
- 每個
data 內的元素，都是一條獨立的 column
- 而各自都
items 的 JSON array 來裝屬於該 column 的 elements
- 注意！ 每個
items 內的欄位數目要相同！否則會有 undefined behavior 發生！
{
... (assume inside `content` array)
{
"type": "table",
"data": [
{
"name": "column title 1",
"items": [
"var1", "var2" ,...
]
},
{
"name": "column title 2",
"items": [
"var1-attr", "var2-attr" ,...
]
}
]
},
...
}
Card Support
- 這個支援主要是依照 paper.css 的 card 格式產生
- 產生結果可以參考 DEMO page，而格式參考下方：
{
...
{
"type": "card",
"data":[
{
"url": "<img url>",
"title": "Card example with image",
"subtitle": "I am subtitle!",
"text": [
"Example sentence 1.",
"Example sentence 2."
],
"tag": [
"example",
"tag"
]
},
}
}