refo
1.0.0
現代網路的網站模板。
強大的開發人員體驗滿足輕量級輸出。
輕鬆靈活地產生靜態站點
是否對靜態站點生成器的景觀感到不知所措？ Refo 提供了一種完全基於 Node.js 構建的令人耳目一新的簡單且可自訂的方法。
與 Jekyll、Gatsby、Astro 等不同，我們讓您直接利用 Node.js 模組的強大功能。這意味著您可以產生您可以想像的任何類型的網站，所有這些都可以利用您最喜歡的 Node.js 庫和伺服器的靈活性。
主要優點：
SVG 、利用raw匯入並輕鬆style元件的樣式。超越傳統靜態網站產生器的限制。在您的下一個專案中充分利用 Refo 的強大功能和靈活性！
️ Star 支持我們的工作！
透過電子郵件取得有關新版本的通知。
raw進口a 、 b 、 c 、...、 aa 、 ab 、...）development模式下進行類別名稱標籤JSON檔案中的字串Markdown支持PDF產生使用
附有 chrome-finder 的 Puppeteer JSON文件中編輯您的簡歷資料。PDF 、 HTML document和/或網站頁面的形式檢視和發布您的履歷。HTML和CSS設計和自訂履歷表佈局。Letter和A4的PDF 。PDF以查看最新的PDF 。 安裝依賴項：
pnpm install
您使用的是某種基於 Unix 的系統嗎？蘋果？ Linux？如果是這樣，您可能需要更改
index模組中的port，該端口設置為80，適用於 Windows。 Superstatic 的預設值為3474，因此您可以根據需要將其刪除。
以開發模式啟動伺服器：
pnpm dev
造訪http://localhost/即可造訪該網站。
產生靜態站點：
pnpm static開啟static資料夾中的index.html即可存取網站。
import | 產生的文件 | |
|---|---|---|
| 指數/ | static / | |
• favicon .ico （圖示file （Node.js 模組）） | • 圖示.ico | |
• 主.js .js （Node.js module ） | → | • 主.js |
• 索引.html .jsx （Node.js module ） | • 索引.html | |
firebase .json .js （Node.js module ） | .json |
載入模組時，匯入的
file（具有特定檔案副檔名（ico、png））（Node.js）模組）會將檔案本身複製到static資料夾中。在模組重新載入模式下，如果不再匯入它們，它們將被刪除。
(Node.js)
module的defaultexport（其基本檔名中具有特定的檔案副檔名（js、json、html））被寫入輸出檔案的內容（寫入static資料夾）。輸出檔的完整檔名是 (Node.js)module的基本檔名。
️ Star 支持我們的工作！
索引.html .jsx （ import ed module ）：
import template from '#@SolidJS/template'
import use from '#@style'
const [ { styled } , extract ] = use ( )
const Body = styled . body `
font-weight: bold;
`
export default < >
{ template ( `<!DOCTYPE HTML>` ) }
< html lang = "en" >
{ template ( `<head>` ) }
< style > { extract ( ) } </ style >
{ template ( `</head>` ) }
< Body >
example content
</ Body >
</ html >
</ >索引.html （產生的文件）：
<!DOCTYPE HTML > < html lang = en > < head > < style > .a{font-weight:700} </ style > </ head > < body class = a > example content </ body > </ html > 您可以按原樣部署靜態docs資料夾。
您可能需要根據project site儲存庫的名稱變更以下文件中的prefixum ： index/index/site/ main/
index/resume/index/index如果您要發布user or an organization site則可以完全刪除prefixum 。
prefixum 。.firebaserc檔： {
"projects" : {
"default" : " <projectId> "
}
}將您的網站部署到 Firebase 託管：
pnpm deploy
分離履歷模板並將其發佈為新的 Refo 包可能很有用。
如果您這麼認為，請打開一個新問題，讓我們討論一下。如果它有用的話，我們絕對可以實現它。
此範例使用 Refo 的 JSON 處理程序。因此，您可以控制如何以及是否從 index/index/site/index/resume/data.js 檔案顯示某些屬性，如 Refo 的自述文件中 JSON 處理程序使用部分所述。
該專案使用 superstatic 來服務產生的靜態檔案。您可以使用任何類似的庫來提供文件，或者如果您想直接瀏覽文件，則根本不使用庫。例如，這對於離線文件很有用。
如果您願意，可以刪除 superstatic 並改用 firebase-tools （使用 superstatic）。在這種情況下，您可以修改package.json檔案中的scripts並將superstatic替換為firebase serve命令。
該專案同時使用在監視模式下運行 Refo 並以 superstatic 提供檔案。您可以使用任何類似的程式庫（例如 npm-run-all）來並行運行 Refo 和伺服器，或者如果您不需要檔案伺服器，則根本不使用程式庫。
如果您願意， firebase.json檔案可以命名為superstatic.json 。此範本不依賴 Firebase 本身。然而，他們提供了一種即使不是始終最快的靜態託管解決方案。
JavaScript 模板文字用於對 HTML 文件進行模板化。
此範例還在某些模板中使用通用標籤，這允許在許多情況下使用更短的語法。
以下是本例中常用的一些場景：
預設情況下，您可以顯示可選值並使用條件運算子來防止顯示錯誤值，例如undefined ：
module . exports = `
${ item ? item : '' }
`Common-tags 可以為你做到這一點。因此，您可以使用帶有標記模板文字的更短語法：
const { html } = require ( 'common-tags' )
module . exports = html `
${ item }
`預設情況下，您可以顯示可選的範本部分並使用條件運算子來防止顯示錯誤值，例如undefined ：
module . exports = `
${ item ? `
<div>
` + item + `
</div>
` : '' }
`使用通用標籤，您可以使用具有邏輯運算符的簡單條件來實現相同的效果：
const { html } = require ( 'common-tags' )
module . exports = html `
${ item && `
<div>
` + item + `
</div>
` }
`預設情況下，您可以在循環遍歷項目數組時join結果，以防止在傳回的項目之間顯示逗號：
module . exports = `<section>
${ items . map ( item => `
<div>
${ item }
</div>
` ) . join ( '' ) }
</section>`Common-tags 可以為你做到這一點。所以你可以使用更短的語法：
const { html } = require ( 'common-tags' )
module . exports = html ` < section >
${ items . map ( item => `
<div>
${ item }
</div>
` ) }
</ section > `當您不使用帶有通用標籤或類似庫的標記模板文字時，如果您願意，可以使用+運算符連接模板部分：
module . exports = `
<div>
` + item + `
</div>
`或者您可以使用帶有${expression}語法的佔位符：
module . exports = `
<div>
${ item }
</div>
`在某些情況下，其中一種可能比另一種可能更容易閱讀，因此您可以根據上下文使用樣式，或者您可以選擇其中一種並保持一致。本範例同時使用了兩者。
例如，一些程式碼編輯器（如 Atom 和 GitHub）將html標記的模板文字反白顯示為 HTML，正如您在上面看到的那樣。
Preferencies / Package Settings / JS Custom / Settings 。JS Custom.sublime-settings — User檔案： {
"configurations" : {
"jsx" : true
, "custom_templates" : {
"styled_components" : true
, "lookaheads" : {
" \ <" : " scope:text.html.basic "
, " \ .|height|padding|margin" : " scope:source.js.css "
, "import|minify|await|export|if|window| \ (|," : " scope:source.js "
}
, "tags" : {
"injectGlobal" : " scope:source.js.css "
, "css" : " scope:source.js.css "
, "html" : " scope:text.html.basic "
}
}
}
}現在，您可以對 JavaScript 檔案使用JS Custom - Default語法突出顯示選項。
JSON 處理程序是一個獨立的套件。它主要用於處理與簡歷相關的數據，但您也可以將其用於其他任何用途。
您也可以使用它，如範例 (asset/resume/getHandledJson.js) 中所示：
const handleJSON = require ( 'refo-handle-json' )
var json = JSON . parse ( JSON . stringify ( require ( './data' ) ) )
json = handleJSON ( json )建議使用JSON.parse(JSON.stringify(json))函數建立所需 JSON 的副本，例如當您在watch模式下使用 Refo 時（相關註解），因為 JSON 處理程序正在變更物件屬性。
JSON 處理程序使用 markdown-it 將字串物件值解析為Markdown 。範例：example/asset/resume/data.json#L7
以-private結尾的屬性是已刪除。範例：example/asset/resume/data.json#L4
具有名為private屬性的物件也會被刪除。
只有當第二個真值參數傳遞給處理函數時，才會包含以-full結尾的屬性。範例：example/asset/resume/data.json#L8、example/asset/resume/getHandledJson.js#L9
只有當將第二個真值參數傳遞給處理函數時，才會包含具有名為full屬性的物件。
當物件包含startDate屬性而沒有endDate屬性時，可以使用hidePresent屬性來隱藏目前標籤並顯示目前年份。
hideEndDate屬性可用於隱藏顯示的目前年份而不是目前標籤。
hideDuration屬性可用於隱藏計算的持續時間。否則，將使用計算出的持續時間定義duration屬性（例如：7 個月、1 年、1.5 年、2 年）。
建立有關每個 Refo 套件的深入文件可能很有用。
如果您這麼認為，請打開一個新問題，讓我們討論一下。如果它有用的話，我們絕對可以實現它。
建議更改文件以在此處添加您的項目。
簡歷+ 端口fo lio = Refo
