Beranda>Kode sumber ASP>Kategori lainnya
Unduh

tinystatic

logo.png

Generator situs web statis kecil yang fleksibel dan mudah digunakan. Ini fleksibel, karena tidak diperlukan struktur situs web atau konsep khusus blog apa pun. Mudah digunakan, karena kita dapat memulai dengan situs HTML standar dan memperkenalkan tinystatic secara bertahap.

Konsep tinystatic sederhana saja: Dari setiap file di direktori masukan, buat file di direktori keluaran yang kemudian dapat kita gunakan sebagai direktori publik server web kita. Cara tinystatic menghasilkan file keluaran bergantung pada ekstensi file masukan: Penurunan harga dikonversi ke HTML, sedangkan CSS, JS, dan gambar hanya disalin. Untuk penurunan harga dan file HTML, Anda dapat menentukan meta data di bagian atas file. Dengan menentukan template dalam meta data file ini, dan menyediakan template di direktori terpisah, Anda dapat menggunakan mesin template HTML Go. Berikut contoh situs blog pada umumnya dan untuk panduan memulai cepat, lihat di bawah.

Memasang

Biner yang sudah dibuat sebelumnya

Unduh biner tinystatic untuk sistem operasi Anda:

  • Linux
  • macOS

Secara opsional, tambahkan biner ke jalur shell Anda, dengan menempatkan biner ke direktori yang sudah ada seperti /usr/bin atau dengan menambahkan direktori induk biner ke variabel jalur Anda.

Jika Anda menambahkan tinystatic ke jalur Anda, Anda seharusnya bisa menelepon 

tinystatic -help

Jika tidak, Anda perlu menentukan jalur ke biner tinystatic saat memanggilnya 

/path/to/tinystatic -help

Kompilasi dari sumber

Jika Anda tidak ingin menggunakan biner bawaan, Anda perlu menginstal kompiler Golang untuk mengkompilasi tinystatic. Kemudian, Anda dapat menginstal tinystatic dengan menjalankannya 

go install -u github.com/julvo/tinystatic

atau dengan mengkloning repositori dan menjalankan go install atau go build di direktori root repositori ini.

Mulai cepat

Ini adalah tutorial 10 menit di mana kita membangun sebuah blog kecil, dimulai dengan satu halaman HTML dan memperkenalkan fitur tinystatic satu per satu.

Pertama, kita buat folder bernama routes . Di dalam folder ini, kita membuat satu file HTML index.html dengan isi sebagai berikut: 

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      < h1 > Welcome to our blog </ h1 >
  </ body >
</ html >

Sekarang, kita dapat menjalankan tinystatic untuk pertama kalinya. Secara default, tinystatic diharapkan dipanggil di direktori yang berisi direktori routes , tetapi Anda dapat mengubahnya dengan menggunakan parameter -routes . Setelah menjalankan perintah, Anda akan melihat output folder muncul di sebelah folder routes . Struktur file kami sekarang terlihat seperti ini: 

 my-blog/
    routes/
        index.html
    output/
        index.html

Sekarang kita dapat menjalankan server web di direktori keluaran, misalnya menggunakan server bawaan Python untuk membuka situs web kita di http://localhost:8000 : 

 cd output
python3 -m http.server

Sejauh ini, yang dilakukan tinystatic hanyalah menyalin index.html dari routes ke output - tidak terlalu berguna, tapi bertahanlah...

Mari tambahkan file HTML kedua ke routes , misalnya about.html : 

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      < h1 > About us </ h1 >
  </ body >
</ html >

Setelah kita menjalankan tinystatic lagi, dan server web kita masih berjalan, sekarang kita dapat menavigasi ke http://localhost:8000/about . Perhatikan bagaimana tidak ada lagi .html di rute ini, karena tinystatic membuat folder about satu index.html di dalamnya, seperti: 

 output/
    index.html
    about/
        index.html

Apa yang tidak kami sukai dari halaman kami saat ini adalah duplikasi semua struktur dasar HTML. Bukankah lebih baik menggunakan template bersama untuk index.html dan about.html ?. Untuk melakukan ini, kita membuat folder bernama templates di sebelah folder routes kita dan menempatkan file HTML default.html di dalamnya: 

 my-blog/
    routes/
        index.html
        about.html
    templates/
        default.html

Konten default.html seharusnya: 

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      {{template "body" .}}
  </ body >
</ html >

Selain itu, kami mengubah konten routes/index.html menjadi 

---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >
{{end}}

dan konten routes/about.html ke 

---
template: default.html
---
{{define "body"}}
< h1 > About us </ h1 >
{{end}}

Saat menjalankan tinystatic lagi, keluarannya sama dengan keluaran sebelumnya, tetapi kami menggabungkan kerangka HTML ke dalam satu tempat.

Seperti yang terlihat sekarang, kita dapat menentukan template untuk merender konten kita dengan memberikan nama template dalam meta data di bagian atas file. Kita juga dapat menyertakan template lain (lihat di bawah) dan menggunakan pipeline template Go. Saat merender, kita memiliki akses ke meta data yang ditentukan di bagian atas file, sebuah struct Route dengan bidang Route.Href , Route.FilePath dan Route.Meta yang juga merupakan peta meta data yang ditentukan di bagian atas file. Selain itu, kita dapat mengakses Routes , yang merupakan potongan (pikirkan: array untuk orang yang baru mengenal Go) dari semua rute, yang akan kita pelajari lebih lanjut di bagian bawah.

Mari kita gunakan meta data ini bersama dengan templating primitif Go untuk mengubah judul halaman tergantung pada halaman saat ini. Untuk ini, kami mengubah meta data di routes/about.html menjadi 

 ---
template: default.html
title: About
---

dan terakhir ubah templates/default.html menjadi 

 <!doctype html >
< html >
  < head >
    < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
  </ head >
  < body >
      {{template "body" .}}
  </ body >
</ html >

Setelah membuat ulang situs web, browser sekarang akan menampilkan judul halaman yang berbeda untuk indeks dan halaman tentang kami.

Sekarang, mari kita buat beberapa postingan blog di folder rute kita, misalnya 

 routes/
    index.html
    about.html
    posts/
        first_post.md
        second_post.md

Tempatkan beberapa penurunan harga di dalam file .md ini dengan bagian meta data di bagian atas yang menentukan templat sebagai default.html , serupa dengan cara kami menentukan meta data di routes/index.html dan routes/about.html . Untuk first_post.md , ini akan terlihat seperti ini: 

 ---
template : default.html
title : First Post
---

# Here could be some fine content

Menjalankan tinystatic lagi untuk membuat ulang keluarannya, sekarang kita dapat mengunjungi http://localhost:8000/posts/first_post dan http://localhost:8000/posts/second_post . Penurunan harga telah dikonversi menjadi HTML dan ditempatkan di dalam templat yang disebut body untuk kita, sehingga dirender ke dalam placeholder {{template "body" .}} di templates/default.html . Perhatikan perbedaannya dengan file .html , di mana kita perlu memanggil {{define "body"}} ... {{end}} secara manual.

Selanjutnya, mari buat daftar postingan kita dengan menggunakan potongan Routes yang disebutkan di atas. Kami mengubah konten routes/index.html menjadi: 

---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >

< ul >
{{range .Routes | filterFilePath "**/posts/*.md"}}
< li >
    < a href = {{.Href}} > {{.title}} </ a >
</ li >
{{end}}
</ ul >

Setelah melakukan regenerasi, kita akan melihat daftar postingan kita di halaman indeks. Irisan Routes menyediakan daftar semua rute yang dapat kita filter menggunakan fungsi pembantu yang telah ditentukan sebelumnya, misalnya

  • .Routes | filterFilePath "**/posts/*.md" untuk menampilkan semua file yang diakhiri dengan .md di folder mana pun yang disebut posts
  • .Routes | sortAsc "title" untuk mengurutkan rute berdasarkan title kolom meta data
  • .Routes | limit 10 untuk hanya mendapatkan 10 rute pertama
  • .Routes | offset 3 untuk melewati tiga rute pertama
  • .Routes | filter "title" "*Post" untuk memfilter berdasarkan title bidang data meta yang cocok dengan pola *Post
  • .Routes | filterFileName "*.md" untuk mendapatkan semua file yang diakhiri dengan *.md
  • .Routes | filterHref "/*" untuk mendapatkan semua rute tingkat atas
  • .Routes | filterFilePath "**/posts/*.md" | sortDesc "title" | limit 10 untuk menggabungkan beberapa hal di atas

Selanjutnya, kami ingin menggunakan tata letak yang berbeda untuk postingan dibandingkan halaman lainnya. Postingan harus memiliki gambar sebelum teks, sehingga kita ingin menentukan URL gambar di meta data postingan. Oleh karena itu, kami menambahkan template kedua bernama templates/post.html dengan konten berikut: 

 <!doctype html >
< html >
  < head >
    < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
  </ head >
  < body >
      < img src = {{.image}} />
      {{template "body" .}}
  </ body >
</ html >

Kami mengubah meta data postingan menjadi 

 ---
template: post.html
title: First Post
image: https://some-image.url
---

Meregenerasi hasilnya akan memberi kita gambar yang indah di atas postingan kita. Namun, kami juga mendapatkan duplikat kode HTML di template kami lagi. Untuk meningkatkannya, kami membuat folder lain di samping routes dan templates yang disebut partials . Di dalam parsial, kita membuat file bernama head.html dengan 

{{define "head"}}
< head >
  < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
{{end}}

dan kami mengganti <head>...</head> di templat kami dengan {{template "head" .}} , seperti itu 

 <!doctype html >
< html >
  {{template "head" .}}
  < body >
      {{template "body" .}}
  </ body >
</ html >

Sekarang kami mengurangi replikasi kode antar templat yang berbeda seminimal mungkin. Kita dapat menggunakan direktori partials ini untuk menyimpan semua jenis komponen yang berulang, misalnya bilah navigasi atau footer.

Perhatikan bahwa kita sebenarnya tidak perlu menyusun proyek menggunakan nama folder yang kita gunakan dalam tutorial ini. Nama folder ini hanyalah nama default, namun dapat diubah menggunakan argumen baris perintah masing-masing (lihat tinystatic -help untuk informasi lebih lanjut).

Ada contoh lengkap blog di sini.

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua