{"id":25429963,"url":"https://github.com/davidyslu/papogen-demo","last_synced_at":"2025-05-14T10:35:32.462Z","repository":{"id":93934380,"uuid":"139314201","full_name":"davidyslu/papoGen-demo","owner":"davidyslu","description":"This repository is demo environment for papoGen ","archived":false,"fork":false,"pushed_at":"2018-07-19T06:04:07.000Z","size":59,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-14T10:33:09.453Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidyslu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-01T08:59:31.000Z","updated_at":"2018-07-19T07:36:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"3065e277-207f-4dda-823e-2567b8acb773","html_url":"https://github.com/davidyslu/papoGen-demo","commit_stats":null,"previous_names":["davidyslu/papogen-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidyslu%2FpapoGen-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidyslu%2FpapoGen-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidyslu%2FpapoGen-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidyslu%2FpapoGen-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidyslu","download_url":"https://codeload.github.com/davidyslu/papoGen-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254121162,"owners_count":22018115,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-17T02:32:52.781Z","updated_at":"2025-05-14T10:35:32.442Z","avatar_url":"https://github.com/davidyslu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](https://github.com/toolbuddy/papoGen/blob/master/design/badge.png)\n\n# *papoGen* DEMO\n\n本專案將透過 *papoGen* 來快速生成一個網頁，使用者可以透過 CLI 指令來做產生；以下會展示如何使用、以及指令參數的意義。\n* `src/` - 存放生成來源，並透過目前支援的「主題」(i.e., *Paper.css* 與 *papoGen.css*) 的資料夾分類。\n* `out/` - 存放生成結果。\n\n\u003e * [*papoGen* @npm](https://www.npmjs.com/package/papogen)\n\u003e * [papoGen @GitHub](https://github.com/toolbuddy/papoGen)\n\u003e * [papoGen.css @GitHub](https://github.com/toolbuddy/papoGen.css)\n\n---\n## 開始使用\n\n### 事前環境準備\n\n1. 安裝 Node.js\n    * Debian/Ubuntu Linux 安裝 Node.js\n        ```bash\n        » source \u003c(curl -s https://raw.githubusercontent.com/toolbuddy/ssfw/master/install_nodejs.sh)\n        ```\n    * macOS 安裝 Node.js\n        * 開啟 [Node.js](https://nodejs.org/en/) 官方網站。\n        * 下載 Node.js 版本：[macOS (x64) 8.11.3 LTS Installer](https://nodejs.org/dist/v8.11.3/node-v8.11.3.pkg)。\n    * Windows 安裝 Node.js\n        * 開啟 [Node.js](https://nodejs.org/en/) 官方網站。\n        * 下載 Node.js 版本：\n            * [Windows (x86) 8.11.3 LTS Installer](https://nodejs.org/dist/v8.11.3/node-v8.11.3-x86.msi)\n            * [Windows (x64) 8.11.3 LTS Installer](https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi)\n2. 安裝 *papoGen*\n    透過 **npm** 安裝 [*papoGen*](https://www.npmjs.com/package/papogen)\n    ```bash\n    » [sudo] npm install -g papogen\n    ```\n    * 說明：關於 *papoGen* 的操作指令可以由以下指令列出輔助說明。\n        ```bash\n        » papogen -h\n        » papogen --help\n        ```\n3. 下載 [*papoGen* DEMO 專案](https://github.com/yungshenglu/papoGen-demo)\n    ```bash\n    » git clone https://github.com/yungshenglu/papoGen-demo\n    ```\n    * 說明：\n        * `out/` - 存放生成的結果\n        * `src/` - 存放生成的來源\n            * `paper/` - 存放使用 *Paper.css* 作為主題的來源\n            * `papogen/` - 存放使用 *papoGen.css* 作為主題的來源\n        * `README.md` - 本說明文件\n4. 完成前置作業，可以開始體驗 *papoGen*！\n\n---\n## *papoGen* 指令說明\n\n* 指令格式\n\t```bash\n\t» papogen -s [--src] \u003csrc_path\u003e \\\n            -o [--out] \u003cout_path\u003e \\\n            -t [--title] \u003ctitle\u003e \\\n            -g [--gen] \u003ctype\u003e \\\n            -m [--model] \u003cname\u003e \\\n            --theme \u003ctheme\u003e \\\n\t        -h [--help]\n\t```\n\n    | 選項 | 選項值 | 說明 |\n    |---|---|---|\n    | `-s [--src]` | URL | 生成來源的資料夾 URL |\n    | `-o [--out]` | URL | 生成結果的資料夾 URL |\n    | `-t [--title]` | 字串文字 | 網頁的標頭名稱 |\n    | `-g [--gen]` | `md` / `json` / `yaml` | 生成來源的檔案格式 |\n    | `-m [--model]` | `md_doc`* / `doc` / `resume` / `papogen`+ | 欲使用的模板來生成網頁 |\n    | `--theme` | `paper`# / `papogen`+ | 欲使用的主題來生成網頁 |\n    | `-h [--help]` | 無 | 列出 *papoGen* 輔助說明 |\n    \n    * `md_doc`*: 目前唯一支援 Markdown 的模板。\n    * `paper`#: 預設主題。\n    * `papogen`+: 目前唯一支援 `papogen` 主題的模板。注意，如果已經給定模板為 `papogen` (即：`-m papogen`)，則 *papoGen＊ 會自動預設主題為 `papogen` (即：`--theme papogen`)，可以不需要再做設定。\n\n//**(注意！ 以下練習都是在這個 `example/` 資料夾中做的演示！)**\n\n---\n## Let's *papoGen*!\n\n* 目標：**使用 YAML 快速生成個人履歷。**\n    * [如何編輯 YAML 格式？](https://github.com/toolbuddy/papoGen/blob/master/test/json/README.md) (與 JSON 格式最相近！)\n    * 使用主題：*papoGen.css*。\n* 步驟：\n    1. 準備素材\n        * 請下載您的 Facebook 大頭照 (或正方形的照片)。\n        * 將您的大頭照命名為 `avatar.png` 取代 `./src/avatar.png`。\n    2. 生成範例網頁：\n        * *papoGen* 生成指令：\n            ```bash\n            » papogen -s src/papogen/ -o out/yaml -g yaml -m papogen\n            ```\n        * 生成完畢後，可以至 `./out/papogen/` 瀏覽生成的範例網頁。\n            * `./out/papogen/res/` - 存放網頁所使用到的圖檔。\n            * `./out/papogen/asset/` - 存放網頁所使用到的 CSS、字型等資源檔。\n        * 瀏覽完畢後請將 `./out/papogen` 整個資料夾刪除 (驗證確實有生成用)。\n    3. 開啟檔案 `./src/papogen/yaml/profile.yaml`。\n        * 姓名：將行數 25 的 `/* NAME */` 改為您的姓名。\n        * 目前職位：將行數 28 的 `/* SUBJECT */` 改為您目前職位。\n        * EMAIL：將行數 55 的 `/* EMAIL */` 改為您的電子信箱。\n        * 社群連結：\n            * 將行數 79 的 `/* GITHUB */` 改為您的 GitHub 帳號連結。\n            * 亦可自行新增連結 (選做)\n                * 參考行數 78 - 82 自行新增。\n                * 符號都是請參照 [Font Awesome](https://fontawesome.com/)，使用時只需要輸入官方給定的「符號名稱」，符號名稱中間的 `-` 請以「空白」取代。若符號有 `-alt`，請以 `alternate` 取代，\n    4. 開啟檔案 `./src/papogem/yaml/resume.yaml`\n        * 個人簡介：將行數 8 的 `/* ABOUT_YOU */` 改為您的自我介紹。\n        * 工作經歷：此處以「表格」的方式呈現，而呈現方式為每一個直欄的方式紀錄。\n            * 在行數 16 的 `attr` 中新增 `selectable: true` 與 `sample: true`。\n            * 將行數 20 的 `/* COMPANY_1 */` 改為您的公司名稱。`/* COMPANY_2 */` 以此類推。\n            * 將行數 26 的 `/* POSITION_1 */` 改為您的公司名稱。`/* POSITION_2 */` 以此類推。\n        * 能力與興趣：此處以「直觀統計數字的方式」呈現。每一個統計數字都是數值 (`value`) 與名稱 (`content`) 的組合。\n            * 行數 37 的 `color: blue` 為控制該時間軸的顏色，以下為 *papoGen.css* 定義好的顏色，可以改為以下試試看：\n                ```yaml\n                color: red / orange / yellow / green / blue / navy / purple / pink / brown / grey\n                ```\n            * 將行數 41 的 `/* SKILL */` 改為您的最擅長的能力或技術明稱。\n            * 將行數 40 - 42 的 `value` 與行數 43 `label` 的順序對調，改為先 `label` 再 `value`。\n            * 行數 45 - 49 與行數 51 - 55 為搭配一個符號的呈現方式，在此以 GitHub 貢獻次數作為示範，可自行修改練習。\n        * 學歷：此處以時間軸 (Timeline) 的方式來呈現。注意的是，時間軸是有先後順序的，所以在 `data: []` 中每個元素順序就是時間軸「由上至下」的順序。\n            * 行數 64 的 `color: navy` 為控制該時間軸的顏色，以下為 *papoGen.css* 定義好的顏色，可以改為以下試試看：\n                ```yaml\n                color: red / orange / yellow / green / blue / navy / purple / pink / brown / grey\n                ```\n            * 將行數 67 - 70 的 `/* YOUR_SCHOOL */` 改為您的學歷。\n        * 圖片呈現：此模板支援同時多個圖片呈現。\n            * 行數 79 的 `circular: true` 為設定該圖片組的圓形圖片。\n            * 行數 80 的 `size: tiny` 為控制該圖片組的圖片大小，可以改為以下試試看：\n                ```yaml\n                size: mini / tiny / small / big / large / huge / massive\n                ```\n            * 若想要圖片有邊緣有圓角的效果：請在該 `attr` 中新增 `rounded: true`。\n            * 行數 83 - 92 的 `url` 為每一張圖片的相對路徑，可自行修改練習。\n        * 程式碼、數學式呈現：行數 106 - 110 與行數 118 - 121。\n    5. 完成以上修改後，可以生成自己的靜態網頁！\n        ```bash\n        » papogen -s src/papogen/ -o out/yaml -g yaml -m papogen\n        ```\n    6. 查看生成結果：請查看 `./out/papogen/index.html`。\n\n---\n## *papoGen* 支援的生成方式\n\n### Markdown (Recommended)\n\n* 範例指令：\n    ```bash\n    » papogen -s src/md -o out/md -g md -m md_doc\n    ```\n* 選項說明：\n    * `-s` 指定了來源，這邊因為要使用 Markdown 格式，所以使用 `test/md` 底下的所有檔案\n    * `-o` 則是指定輸出的位置，這邊會輸出一份靜態網頁（可以透過 `google-chrome-stable out/md/index.html` 或是 `firefox out/md/index.html` 來做開啟 ）\n    * `-g` 則是指定我們要用的來源格式，這邊我們要用的是 Markdown 格式，所以給予 `md` 的值\n    * `-m` 這邊則是指定網站的版型，目前 Markdown 的支援只有 `md_doc`，也就是 document 的格式 （支援版型可以參考根目錄中 `lib/template/` 裡頭的 `Pug.js`）\n* 額外內容：\n    * `-t` 可以指定產生網頁的標題\n    * `--theme` 可以指定 CSS theme template (正在籌備其他 CSS 主題當中)\n\n### JSON\n\n* 範例指令：\n    ```bash\n    # 產生 document 版型 - doc\n    » papogen -s src/json -o out/json -m doc\n    # 產生 resume 版型 - resume\n    » papogen -s src/json -o out/json -m resume\n    ```\n* 選項說明：\n    * `-s` 指定了來源，這邊因為要使用 JSON 格式，所以使用 `test/json` 底下的所有檔案\n    * `-o` 則是指定輸出的位置，這邊會輸出一份靜態網頁\n    * 由於 *papogen* 預設是以 JSON 格式來做輸出，所以如果要產生 JSON 格式，可以不需要指定！\n    * `-m` 這邊則是指定網站的版型，JSON 格式目前支援兩種 - `doc`, `resume`，可以依據需求做指定\n* 額外內容：\n    * `-t` 可以指定產生網頁的標題\n    * `--theme` 可以指定 CSS theme template (正在籌備其他 CSS 主題當中)\n\n\u003e [如何編輯 JSON 格式？](https://github.com/toolbuddy/papoGen/blob/master/test/json/README.md)\n\n### YAML\n\n* 範例指令：\n    ```bash\n    # 產生 document 版型 - doc\n    » papogen -s src/yaml -o out/yaml -m doc -g yaml\n    # 產生 resume 版型 - resume\n    » papogen -s src/yaml -o out/yaml -m resume -g yaml\n    ```\n* 選項說明：\n    * `-s` 指定了來源，這邊因為要使用 YAML 格式，所以使用 `test/yaml` 底下的所有檔案\n    * `-o` 則是指定輸出的位置，這邊會輸出一份靜態網頁\n    * `-g` 由於 *papoGen* 預設是以 YAML 格式來做輸出，所以如果要產生 yaml 格式，就必須透過 `-g yaml` 來做指定\n    * `-m` 這邊則是指定網站的版型，YAML 格式目前支援兩種 - `doc`, `resume`，可以依據需求做指定\n* 額外內容：\n    * `-t` 可以指定產生網頁的標題\n    * `--theme` 可以指定 CSS theme template (正在籌備其他 css 主題當中)\n\n\u003e [如何編輯 YAML 格式？](https://github.com/toolbuddy/papoGen/blob/master/test/json/README.md) (與 JSON 格式最相近！)\n\n---\n## *papoGen* 透過指令產生腳本範本\n\n* 在 `0.0.12` 版開始，可以支援透過 *papoGen* 產生可支援的腳本格式！\n* 利用 `papogen -h` 來列出有所支援的元件後，便可以利用 `\u003cscript\u003e` 以及 `\u003cformat\u003e` 的組合來產生腳本；\n    * 組合方式： `\u003cscript\u003e`/`\u003cformat\u003e`\n    * \b`\u003cscript\u003e` 目前支援 JSON / YAML / Markdown。\n    * `\u003cformat\u003e` 則有多種，可以透過 `papogen -h` 來做察看。\n* 示範指令\n    * 產生一個 JSON 格式中 `text` 樣式的腳本到目前的工作目錄\n        ```bash\n        $ papogen -c json/text -o .\n        ```\n    * 多個樣式 (生成 `text.json`, `list.json`, 以及 `table.json`)\n        ```bash\n        $ papogen -c json/text/list/table -o .\n        ```\n    * 全部範本都做生成\n        ```bash\n        $ papogen -c json/all -o .\n        ```\n\n---\n## Authors\n\n* [David Lu](https://github.com/yungshenglu), yungshenglu1994@gmail.com\n\n\u003e If you have any problem, please feel free to ask me.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidyslu%2Fpapogen-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidyslu%2Fpapogen-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidyslu%2Fpapogen-demo/lists"}