refo
1.0.0
最新の Web 用の Web サイト テンプレート。
強力な開発者エクスペリエンスと軽量の出力が融合します。
柔軟性を備えた簡単な静的サイト生成
静的サイトジェネレーターの状況に圧倒されていませんか? Refo は、完全に Node.js に基づいて構築された、非常にシンプルでカスタマイズ可能なアプローチを提供します。
Jekyll、Gatsby、Astro などとは異なり、Node.js モジュールのパワーを直接活用できるようにします。これは、お気に入りの Node.js ライブラリとサーバーの柔軟性をすべて利用して、想像できるあらゆる種類の Web サイトを生成できることを意味します。
主な利点:
SVGをインポートし、 rawインポートを利用し、コンポーネントのstyle簡単に設定できます。従来の静的サイト ジェネレーターの制限を超えます。次のプロジェクトでは、Refo のパワーと柔軟性を活用してください。
️ 私たちの仕事をサポートするスター！
新しいリリースに関する通知を電子メールで受け取ります。
raw輸入品a 、 b 、 c 、 ...、 aa 、 ab 、 ... など)developmentモードでのクラス名ラベルJSONファイル内の文字列のMarkdownサポートPDF生成
クロムファインダーを備えた人形遣いJSONファイル内の履歴書データを編集します。PDF 、 HTML document 、または Web サイト上のページとして表示および公開します。HTMLとCSS使用して履歴書のレイアウトをデザインおよびカスタマイズします。LetterやA4などのさまざまな形式をサポートする 1 つ以上のPDFを生成します。PDF更新すると、最新のPDF表示されます。 依存関係をインストールします。
pnpm install
何らかの Unix ベースのシステムを使用していますか?マック？リナックス？その場合は、
indexモジュールのport変更するとよいでしょう。このポートは、Windows で動作する80に設定されています。 Superstatic のデフォルトは3474なので、必要に応じて削除できます。
サーバーを開発モードで起動します。
pnpm dev
http://localhost/ にアクセスして Web サイトにアクセスします。
静的サイトを生成します。
pnpm static staticフォルダー内のindex.htmlを開いてWebサイトにアクセスします。
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のdefaultのexport(基本ファイル名に特定のファイル拡張子 (js、json、html) が付いています) は、出力ファイルの内容として (staticフォルダーに) 書き込まれます。出力ファイルの完全なファイル名は、(Node.js)moduleのベース ファイル名です。
️ 私たちの仕事をサポートするスター！
インデックス.html .jsx ( importされた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 Hosting にデプロイします。
pnpm deploy
履歴書テンプレートを分離し、新しい Refo パッケージとして公開すると便利な場合があります。
そう思われる場合は、新しい問題を開いて、これについて話し合いましょう。これが役立つことが判明した場合は、間違いなく実装できます。
この例では、Refo の JSON ハンドラーを使用します。そのため、Refo の readme の「JSON ハンドラーの使用法」セクションに記載されているように、index/index/site/index/resume/data.js ファイルから特定のプロパティを表示する方法と表示するかどうかを制御できます。
このプロジェクトでは、生成された静的ファイルを提供するために superstatic を使用します。同様のライブラリを使用してファイルを提供することも、ファイルを直接参照したい場合にはライブラリをまったく使用しないこともできます。これは、オフラインのドキュメントなどに役立ちます。
必要に応じて、superstatic を削除し、代わりに (superstatic を使用する) firebase-tools を使用することもできます。この場合、 package.jsonファイル内のscripts変更し、 superstatic firebase serveコマンドに置き換えることができます。
このプロジェクトは、監視モードで Refo を実行し、スーパースタティックでファイルを提供するために同時に使用します。 npm-run-all などの同様のライブラリを使用して、Refo とサーバーを並行して実行することも、ファイル サーバーが必要ない場合はライブラリをまったく使用しないこともできます。
必要に応じて、 firebase.jsonファイルにsuperstatic.jsonという名前を付けることもできます。このテンプレートは Firebase 自体には依存しません。ただし、これらは、一貫して最速ではないにしても、静的ホスティング ソリューションの 1 つを提供します。
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 )たとえば、Refo をwatchモードで使用している場合 (関連コメント)、JSON ハンドラーはオブジェクトのプロパティを変更しているため、 JSON.parse(JSON.stringify(json))関数を使用して必要な JSON のコピーを作成することをお勧めします。
JSON ハンドラーは、markdown-it を使用して文字列オブジェクト値をMarkdownとして解析します。例: example/asset/resume/data.json#L7
-privateで終わるプロパティは次のとおりです。削除されました。例: example/asset/resume/data.json#L4
privateという名前のプロパティを持つオブジェクトも削除されます。
-fullで終わるプロパティは、2 番目の true 値パラメーターがハンドラー関数に渡された場合にのみ含まれます。例: example/asset/resume/data.json#L8、example/asset/resume/getHandledJson.js#L9
fullという名前のプロパティを持つオブジェクトは、2 番目の true 値パラメーターがハンドラー関数に渡された場合にのみ含まれます。
オブジェクトにendDateプロパティのないstartDateプロパティが含まれている場合、 hidePresentプロパティを使用して現在のラベルを非表示にし、代わりに現在の年を表示できます。
hideEndDateプロパティを使用すると、現在のラベルの代わりに表示される現在の年を非表示にすることができます。
hideDurationプロパティを使用すると、計算された期間を非表示にすることができます。それ以外の場合、 durationプロパティは計算された期間で定義されます (例: 7 か月、1 年、1.5 年、2 年)。
各 Refo パッケージに関する詳細なドキュメントを作成すると便利です。
そう思われる場合は、新しい問題を開いて、これについて話し合いましょう。これが役立つことが判明した場合は、間違いなく実装できます。
ここにプロジェクトを追加するためのファイル変更を提案します。
履歴書 +ポートフォリオ= Refo
