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
