refo
1.0.0
Eine Website-Vorlage für das moderne Web.
Leistungsstarke Entwicklererfahrung trifft auf leichte Ausgabe.
Mühelose statische Site-Generierung mit Flexibilität
Fühlen Sie sich von der statischen Site-Generator-Landschaft überfordert? Refo bietet einen erfrischend einfachen und anpassbaren Ansatz , der vollständig auf Node.js basiert .
Im Gegensatz zu Jekyll, Gatsby, Astro und anderen können Sie bei uns die Leistungsfähigkeit der Node.js-Module direkt nutzen. Das bedeutet, dass Sie jede Art von Website erstellen können, die Sie sich vorstellen können, und das alles mit der Flexibilität Ihrer bevorzugten Node.js-Bibliotheken und -Server.
Hauptvorteile:
SVG -Dateien, nutzen Sie raw und style Ihre Komponenten ganz einfach.Gehen Sie über die Grenzen herkömmlicher statischer Site-Generatoren hinaus. Nutzen Sie die Leistungsfähigkeit und Flexibilität von Refo für Ihr nächstes Projekt!
️ Star, um unsere Arbeit zu unterstützen!
Lassen Sie sich per E-Mail über Neuerscheinungen benachrichtigen.
rawa , b , c , ..., aa , ab , ...)development mit Stack-TracerMarkdown Unterstützung für Strings in JSON -Dateien mit markdown-itPDF Generierung mit 
Puppenspieler mit Chromsucher JSON Datei.PDF , als HTML document und/oder als Seite auf einer Website.HTML und CSS an.PDF Dateien, die verschiedene Formate wie Letter und A4 unterstützen.PDF , nachdem Sie die Änderungen gespeichert haben, um die aktuelle PDF anzuzeigen. Abhängigkeiten installieren:
pnpm install
Benutzen Sie ein Unix-basiertes System? Mac? Linux? Wenn ja, möchten Sie vielleicht den
portimindexändern, der auf80eingestellt ist, was unter Windows funktioniert. Der Standardwert von Superstatic ist3474, sodass Sie ihn bei Bedarf entfernen können.
Starten Sie den Server im Entwicklungsmodus:
pnpm dev
Besuchen Sie http://localhost/, um auf die Website zuzugreifen.
Erstellen Sie eine statische Site:
pnpm static Öffnen Sie die index.html im static Ordner, um auf die Website zuzugreifen.
import | generierte Datei | |
|---|---|---|
| Index/ | static / | |
• favicon .ico ( file (Node.js-Modul)) | • Favicon .ico | |
• main .js .js (Node.js- module ) | → | • Haupt .js |
• index .html .jsx (Node.js- module ) | • .html indizieren | |
firebase .json .js (Node.js- module ) | Firebase .json |
Die importierten
file(die eine bestimmte Dateierweiterung (ico,png) haben) (Node.js)-Module) kopieren die Dateien selbst in denstaticOrdner, wenn die Module geladen werden. Im Modul-Neulademodus werden sie entfernt, wenn sie nicht mehr importiert werden.
Der
defaultvon (Node.js)module(die eine bestimmte Dateierweiterung (js,json,html) in ihrem Basisdateinamenexport) wird als Inhalt der Ausgabedateien (in denstaticOrdner) geschrieben. Die vollständigen Dateinamen der Ausgabedateien sind die Basisdateinamen der (Node.js)module.
️ Star, um unsere Arbeit zu unterstützen!
index .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 >
</ > index .html (generierte Datei):
<!DOCTYPE HTML > < html lang = en > < head > < style > .a{font-weight:700} </ style > </ head > < body class = a > example content </ body > </ html > Sie können den statischen docs unverändert bereitstellen.
Möglicherweise möchten Sie das prefixum in den folgenden Dateien entsprechend dem Namen Ihres project site Repositorys ändern: index/index/site/ main/
index/resume/index/index Sie können das prefixum vollständig entfernen, wenn Sie einen user or an organization site veröffentlichen.
prefixum aus den oben unter GitHub Pages Deployment aufgeführten Dateien..firebaserc Datei mit Ihrer Firebase-Projekt-ID hinzu: {
"projects" : {
"default" : " <projectId> "
}
}Stellen Sie Ihre Website auf Firebase Hosting bereit:
pnpm deploy
Es kann sinnvoll sein, die Lebenslaufvorlage zu trennen und als neues Refo-Paket zu veröffentlichen.
Öffnen Sie eine neue Ausgabe, wenn Sie der Meinung sind, und lassen Sie uns darüber diskutieren. Wir können dies auf jeden Fall umsetzen, wenn es sich als nützlich erweist.
In diesem Beispiel wird der JSON-Handler von Refo verwendet. So können Sie steuern, wie und ob bestimmte Eigenschaften in der Datei index/index/site/index/resume/data.js angezeigt werden, wie in der Readme-Datei von Refo im Abschnitt „Nutzung des JSON-Handlers“ beschrieben.
Dieses Projekt verwendet Superstatic, um die generierten statischen Dateien bereitzustellen. Sie können eine beliebige ähnliche Bibliothek zum Bereitstellen der Dateien verwenden oder gar keine Bibliothek verwenden, falls Sie die Dateien direkt durchsuchen möchten. Dies kann beispielsweise für Offline-Dokumentationen nützlich sein.
Wenn Sie möchten, können Sie Superstatic entfernen und stattdessen Firebase-Tools verwenden (das Superstatic verwendet). In diesem Fall können Sie die scripts in der Datei package.json ändern und superstatic durch firebase serve -Befehle ersetzen.
Dieses Projekt verwendet gleichzeitig die Ausführung von Refo im Überwachungsmodus und die Bereitstellung der Dateien mit Superstatic. Sie können eine beliebige ähnliche Bibliothek wie npm-run-all verwenden, um Refo und einen Server parallel auszuführen, oder gar keine Bibliothek, wenn Sie keinen Dateiserver benötigen.
Wenn Sie möchten, könnte die Datei firebase.json auch superstatic.json heißen. Diese Vorlage ist nicht von Firebase selbst abhängig. Sie bieten jedoch eine der, wenn nicht sogar die durchweg schnellste statische Hosting-Lösung.
JavaScript-Vorlagenliterale werden zum Erstellen von Vorlagen für HTML-Dokumente verwendet.
In diesem Beispiel werden in bestimmten Vorlagen auch Common-Tags verwendet, was in vielen Fällen die Verwendung einer kürzeren Syntax ermöglicht.
Hier sind einige Szenarios, die in diesem Beispiel häufig verwendet werden:
Standardmäßig können Sie einen optionalen Wert anzeigen und einen bedingten Operator verwenden, um die Anzeige falscher Werte wie undefined zu verhindern, zum Beispiel:
module . exports = `
${ item ? item : '' }
`Common-Tags erledigt dies für Sie. Sie können also eine kürzere Syntax mit einem getaggten Vorlagenliteral verwenden:
const { html } = require ( 'common-tags' )
module . exports = html `
${ item }
` Standardmäßig können Sie einen optionalen Vorlagenteil anzeigen und einen bedingten Operator verwenden, um die Anzeige falscher Werte wie undefined zu verhindern, zum Beispiel:
module . exports = `
${ item ? `
<div>
` + item + `
</div>
` : '' }
`Mit Common-Tags können Sie eine einfache Bedingung mit einem logischen Operator verwenden, um dasselbe zu erreichen:
const { html } = require ( 'common-tags' )
module . exports = html `
${ item && `
<div>
` + item + `
</div>
` }
` Standardmäßig können Sie das Ergebnis beim Durchlaufen eines Arrays von Elementen join , um zu verhindern, dass Kommas zwischen den zurückgegebenen Elementen angezeigt werden:
module . exports = `<section>
${ items . map ( item => `
<div>
${ item }
</div>
` ) . join ( '' ) }
</section>`Common-Tags erledigt dies für Sie. Sie können also eine kürzere Syntax verwenden:
const { html } = require ( 'common-tags' )
module . exports = html ` < section >
${ items . map ( item => `
<div>
${ item }
</div>
` ) }
</ section > ` Wenn Sie kein getaggtes Vorlagenliteral mit common-tags oder einer ähnlichen Bibliothek verwenden, können Sie Vorlagenteile bei Bedarf mit dem + -Operator verketten:
module . exports = `
<div>
` + item + `
</div>
` Oder Sie können stattdessen einen Platzhalter mit der Syntax ${expression} verwenden:
module . exports = `
<div>
${ item }
</div>
`In manchen Fällen kann einer davon leichter zu lesen sein als der andere, sodass Sie den Stil je nach Kontext verwenden können oder einen der anderen vorziehen und konsistent bleiben können. In diesem Beispiel werden beide verwendet.
Einige Code-Editoren wie Atom und GitHub heben beispielsweise html markierte Vorlagenliterale als HTML hervor, wie Sie auch oben sehen können.
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 "
}
}
}
} Jetzt können Sie die Syntaxhervorhebungsoption JS Custom - Default für JavaScript-Dateien verwenden.
Der JSON-Handler ist ein eigenständiges Paket. Es ist vor allem für die Verarbeitung von lebenslaufbezogenen Daten nützlich, Sie können es aber auch für alles andere verwenden.
Sie können es auch verwenden, wie Sie im Beispiel (asset/resume/getHandledJson.js) sehen können:
const handleJSON = require ( 'refo-handle-json' )
var json = JSON . parse ( JSON . stringify ( require ( './data' ) ) )
json = handleJSON ( json ) Es wird empfohlen, eine Kopie des erforderlichen JSON mit den Funktionen JSON.parse(JSON.stringify(json)) zu erstellen, beispielsweise wenn Sie Refo im watch verwenden (siehe Kommentar), da der JSON-Hander Objekteigenschaften ändert.
Der JSON-Handler analysiert String-Objektwerte als Markdown mithilfe von markdown-it. Beispiel: example/asset/resume/data.json#L7
Eigenschaften, die mit -private enden, sind ENTFERNT . Beispiel: example/asset/resume/data.json#L4
Objekte mit einer Eigenschaft namens private werden ebenfalls entfernt.
Eigenschaften, die mit -full enden, werden nur einbezogen, wenn ein zweiter Parameter mit wahrem Wert an die Handlerfunktion übergeben wird. Beispiel: example/asset/resume/data.json#L8, example/asset/resume/getHandledJson.js#L9
Objekte, die über eine Eigenschaft namens full verfügen, werden nur einbezogen, wenn ein zweiter True-Value-Parameter an die Handler-Funktion übergeben wird.
Wenn ein Objekt eine startDate -Eigenschaft ohne eine endDate Eigenschaft enthält, kann eine hidePresent -Eigenschaft verwendet werden, um eine aktuelle Beschriftung auszublenden und stattdessen das aktuelle Jahr anzuzeigen.
Eine hideEndDate Eigenschaft kann verwendet werden, um das aktuelle Jahr anstelle einer aktuellen Beschriftung auszublenden.
Mit der Eigenschaft hideDuration kann die berechnete Dauer ausgeblendet werden. Andernfalls wird eine duration mit der berechneten Dauer definiert (Beispiele: 7 Monate, 1 Jahr, 1,5 Jahre, 2 Jahre).
Es kann nützlich sein, eine ausführliche Dokumentation zu jedem Refo-Paket zu erstellen.
Öffnen Sie eine neue Ausgabe, wenn Sie der Meinung sind, und lassen Sie uns darüber diskutieren. Wir können dies auf jeden Fall umsetzen, wenn es sich als nützlich erweist.
Schlagen Sie eine Dateiänderung vor, um Ihr Projekt hier hinzuzufügen.
Lebenslauf + Port fo lio = Refo
