refo
1.0.0
Templat situs web untuk web modern.
Pengalaman pengembang yang kuat berpadu dengan keluaran yang ringan.
Pembuatan Situs Statis yang Mudah dengan Fleksibilitas
Merasa kewalahan dengan lanskap generator situs statis? Refo menawarkan pendekatan menyegarkan yang sederhana dan dapat disesuaikan yang dibangun sepenuhnya di Node.js.
Tidak seperti Jekyll, Gatsby, Astro, dan lainnya, kami membiarkan Anda memanfaatkan kekuatan modul Node.js secara langsung. Ini berarti Anda dapat membuat situs web apa pun yang dapat Anda bayangkan, semuanya dengan fleksibilitas perpustakaan dan server Node.js favorit Anda.
Manfaat utama:
SVG , manfaatkan impor raw , dan style komponen Anda dengan mudah.Melampaui batasan generator situs statis tradisional. Manfaatkan kekuatan dan fleksibilitas Refo untuk proyek Anda berikutnya!
️ Bintangi untuk mendukung pekerjaan kami!
Dapatkan pemberitahuan tentang rilis baru melalui email.
rawa , b , c , ..., aa , ab , ...)development menggunakan stack-tracerMarkdown untuk string dalam file JSON dengan penurunan hargaPDF menggunakan 
Dalang dengan pencari krom JSON .PDF , document HTML , dan atau sebagai halaman di situs web.HTML dan CSS .PDF yang mendukung format berbeda seperti Letter dan A4 .PDF setelah menyimpan perubahan untuk melihat PDF terbaru. Instal dependensi:
pnpm install
Apakah Anda menggunakan sistem berbasis Unix? Mac? Linux? Jika demikian, Anda mungkin ingin mengubah
portdi modulindex, yang disetel ke80yang berfungsi di Windows. Default Superstatic adalah3474sehingga Anda dapat menghapusnya jika Anda mau.
Mulai server dalam mode pengembangan:
pnpm dev
Kunjungi http://localhost/ untuk mengakses situs web.
Hasilkan situs statis:
pnpm static Buka index.html di dalam folder static untuk mengakses situs web.
import | file yang dihasilkan | |
|---|---|---|
| indeks/ | static / | |
• favicon .ico ( file ikon (modul Node.js)) | • favicon .ico | |
• .js .js utama ( module Node.js) | → | • .js utama |
• indeks .html .jsx ( module Node.js ) | • indeks .html | |
firebase .json .js ( module Node.js) | firebase .json |
fileyang diimpor (yang memiliki ekstensi file tertentu (ico,png)) (Node.js) modul) menyalin file itu sendiri ke dalam folderstaticketika modul dimuat. Dalam mode relading modul, mereka menghapusnya jika tidak diimpor lagi.
exportdefaultmodule(Node.js) (yang memiliki ekstensi file tertentu (js,json,html) dalam nama file dasarnya) ditulis sebagai konten file output (ke dalam folderstatic). Nama file lengkap dari file keluaran adalah nama file dasarmodule(Node.js).
️ Bintangi untuk mendukung pekerjaan kami!
indeks .html .jsx ( import module ed ):
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 >
</ > indeks .html (file yang dihasilkan):
<!DOCTYPE HTML > < html lang = en > < head > < style > .a{font-weight:700} </ style > </ head > < body class = a > example content </ body > </ html > Anda dapat menyebarkan folder docs statis apa adanya.
Anda mungkin ingin mengubah prefixum pada file berikut sesuai dengan nama repositori project site Anda: index/index/site/ main/
index/resume/index/index Anda dapat menghapus prefixum sepenuhnya jika Anda menerbitkan user or an organization site .
prefixum dari file yang tercantum di atas pada Penerapan Halaman GitHub..firebaserc dengan ID proyek Firebase Anda: {
"projects" : {
"default" : " <projectId> "
}
}Terapkan situs Anda ke Firebase Hosting:
pnpm deploy
Akan berguna untuk memisahkan templat resume dan menerbitkannya sebagai paket Refo baru.
Buka terbitan baru jika Anda berpikir demikian dan mari kita bahas ini. Ini pasti bisa kita terapkan jika ternyata bermanfaat.
Contoh ini menggunakan penangan JSON Refo. Jadi Anda dapat mengontrol bagaimana dan apakah properti tertentu ditampilkan dari file index/index/site/index/resume/data.js seperti yang dijelaskan dalam readme Refo di bagian Penggunaan handler JSON.
Proyek ini menggunakan superstatic untuk menyajikan file statis yang dihasilkan. Anda dapat menggunakan perpustakaan serupa untuk menyajikan file atau tidak menggunakan perpustakaan sama sekali jika Anda ingin menelusuri file secara langsung. Misalnya, ini berguna untuk dokumentasi offline.
Anda dapat menghapus superstatic dan menggunakan firebase-tools (yang menggunakan superstatic) jika Anda mau. Dalam hal ini, Anda dapat memodifikasi scripts di file package.json dan mengganti superstatic dengan perintah firebase serve .
Proyek ini digunakan secara bersamaan untuk menjalankan Refo dalam mode tontonan dan menyajikan file dengan superstatis. Anda dapat menggunakan perpustakaan serupa seperti npm-run-all untuk menjalankan Refo dan server secara paralel atau tanpa perpustakaan sama sekali jika Anda tidak memerlukan server file.
File firebase.json dapat diberi nama superstatic.json jika Anda mau. Templat ini tidak bergantung pada Firebase itu sendiri. Namun, mereka menyediakan salah satu solusi hosting statis tercepat secara konsisten.
Literal templat JavaScript digunakan untuk membuat templat dokumen HTML.
Contoh ini juga menggunakan tag umum di templat tertentu yang memungkinkan penggunaan sintaksis yang lebih pendek dalam banyak kasus.
Berikut adalah beberapa skenario yang umum digunakan dalam contoh ini:
Secara default, Anda dapat menampilkan nilai opsional dan menggunakan operator kondisional untuk mencegah menampilkan nilai palsu seperti undefined misalnya:
module . exports = `
${ item ? item : '' }
`Tag umum melakukan ini untuk Anda. Jadi, Anda dapat menggunakan sintaks yang lebih pendek dengan literal templat yang diberi tag:
const { html } = require ( 'common-tags' )
module . exports = html `
${ item }
` Secara default, Anda dapat menampilkan bagian templat opsional dan menggunakan operator kondisional untuk mencegah menampilkan nilai palsu seperti undefined misalnya:
module . exports = `
${ item ? `
<div>
` + item + `
</div>
` : '' }
`Dengan tag umum Anda dapat menggunakan kondisi sederhana dengan operator logika untuk mencapai hal yang sama:
const { html } = require ( 'common-tags' )
module . exports = html `
${ item && `
<div>
` + item + `
</div>
` }
` Secara default, Anda dapat join hasilnya saat mengulang array item untuk mencegah munculnya koma di antara item yang dikembalikan:
module . exports = `<section>
${ items . map ( item => `
<div>
${ item }
</div>
` ) . join ( '' ) }
</section>`Tag umum melakukan ini untuk Anda. Jadi Anda bisa menggunakan sintaks yang lebih pendek:
const { html } = require ( 'common-tags' )
module . exports = html ` < section >
${ items . map ( item => `
<div>
${ item }
</div>
` ) }
</ section > ` Bila Anda tidak menggunakan literal templat yang diberi tag dengan tag umum atau dengan pustaka serupa, Anda dapat menggabungkan bagian templat dengan operator + jika Anda mau:
module . exports = `
<div>
` + item + `
</div>
` Atau Anda dapat menggunakan placeholder dengan sintaks ${expression} sebagai gantinya:
module . exports = `
<div>
${ item }
</div>
`Dalam beberapa kasus, salah satu dari ini mungkin lebih mudah dibaca daripada yang lain sehingga Anda dapat menggunakan gaya sesuai dengan konteksnya atau Anda dapat memilih salah satu dari yang lain dan tetap konsisten. Contoh ini menggunakan keduanya.
Beberapa editor kode seperti Atom dan GitHub, misalnya, menyoroti literal templat yang diberi tag html sebagai HTML seperti yang juga Anda lihat di atas.
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 "
}
}
}
} Sekarang Anda dapat menggunakan opsi sorotan sintaksis JS Custom - Default untuk file JavaScript.
Penangan JSON adalah paket mandiri. Hal ini terutama berguna untuk menangani data terkait resume, tetapi Anda juga dapat menggunakannya untuk hal lain.
Anda dapat menggunakannya seperti yang Anda lihat pada contoh (asset/resume/getHandledJson.js) juga:
const handleJSON = require ( 'refo-handle-json' )
var json = JSON . parse ( JSON . stringify ( require ( './data' ) ) )
json = handleJSON ( json ) Disarankan untuk membuat salinan JSON yang diperlukan menggunakan fungsi JSON.parse(JSON.stringify(json)) misalnya saat Anda menggunakan Refo dalam mode watch (komentar terkait), karena hander JSON mengubah properti objek.
Penangan JSON sedang mengurai nilai objek string sebagai Markdown menggunakan markdown-it. Contoh: contoh/aset/resume/data.json#L7
Properti yang diakhiri dengan -private adalah DIHAPUS . Contoh: contoh/aset/resume/data.json#L4
Objek yang memiliki properti bernama private juga akan dihapus.
Properti yang diakhiri dengan -full hanya disertakan ketika parameter nilai sebenarnya kedua diteruskan ke fungsi handler. Contoh: contoh/aset/resume/data.json#L8, contoh/aset/resume/getHandledJson.js#L9
Objek yang memiliki properti bernama full hanya disertakan ketika parameter nilai sebenarnya kedua diteruskan ke fungsi handler.
Ketika suatu objek berisi properti startDate tanpa properti endDate maka properti hidePresent dapat digunakan untuk menyembunyikan label saat ini dan sebagai gantinya menampilkan tahun berjalan.
Properti hideEndDate dapat digunakan untuk menyembunyikan tahun berjalan yang ditampilkan, bukan label saat ini.
Properti hideDuration dapat digunakan untuk menyembunyikan durasi yang dihitung. Jika tidak, properti duration ditentukan dengan durasi yang dihitung (contoh: 7 bulan, 1 tahun, 1,5 tahun, 2 tahun).
Akan berguna untuk membuat dokumentasi mendalam tentang setiap paket Refo.
Buka terbitan baru jika Anda berpikir demikian dan mari kita bahas ini. Ini pasti bisa kita terapkan jika ternyata bermanfaat.
Usulkan perubahan file untuk menambahkan proyek Anda di sini.
Resume + port fo lio = Refo
