static timeline generator

Generator garis waktu statis

Buat halaman web garis waktu statis dengan mudah seperti garis waktu Wikimedia saya. Lihat pratinjau situs contoh ini, yang diterapkan dengan Halaman GitHub: https://molly.github.io/static-timeline-generator/.

Isi

• Memasang
• Sesuaikan
  • Konten utama
  • Meta
• Kustomisasi tambahan
• Menyebarkan
  • Halaman GitHub
  • Layanan lainnya
• Daya tanggap
• Kompatibilitas peramban
• Di bawah tenda

Memasang

Kloning repositori ini, lalu jalankan npm install dari direktori.

npm run-script serve akan membangun proyek dan menyajikan file statis secara lokal di http://localhost:8080. npm run-script build hanya menjalankan langkah build tanpa memulai server pengembangan.

Sesuaikan

Hampir semua konten yang perlu Anda ubah ada di src/_data/content.js .

Konten utama

• header (HTML, opsional): Konten yang akan ditampilkan di header di bagian atas halaman.
• footer (HTML, opsional): Konten yang akan ditampilkan di footer di bagian bawah halaman.
• entries (array objek, wajib ): Daftar entri yang akan ditampilkan pada timeline, sesuai urutan tampilannya.
  • id (string, wajib ): ID unik untuk entri garis waktu ini.
  • categories (array string, opsional): Daftar kategori yang berlaku untuk entri ini. Ini akan muncul sebagai kotak centang di bagian atas halaman, dan memungkinkan pembaca memfilter timeline. Mereka mungkin tidak mengandung koma. Mereka dapat dipisahkan dengan tanda hubung atau spasi ( sample category atau sample-category akan ditampilkan di halaman sebagai Sample category ). Entri tanpa kategori apa pun akan selalu ditampilkan.
  • color (string, opsional): Warna lingkaran yang ditampilkan pada garis timeline. Opsi yang sudah ditentukan adalah green , red , dan grey . Anda dapat menentukan warna tambahan di css/custom.css (lihat di bawah).
  • faicon (string, opsional): Nama ikon Font Awesome yang akan digunakan dalam lingkaran pada garis timeline. Jelajahi pilihannya. Ini hanyalah nama ikon (tanpa awalan fa- ). Misalnya: anchor .
  • datetime (string, baik datetime atau date harus ada): Penentu tanggal dan waktu untuk item tersebut. Ini bisa dalam format apa pun yang dikenali moment.js . Saya biasanya melakukan "YYYY-MM-DD HH-SS". Jika tidak ada waktu, hanya tanggal, gunakan parameter date bukan datetime .
  • date (string, baik datetime atau date harus ada): Penentu tanggal untuk item tersebut. "YYYY-MM-DD".
  • title (HTML, wajib diisi ): Judul entri garis waktu.
  • image (opsional): Gambar untuk ditampilkan di entri
    • src (string, wajib diisi): URL langsung ke file gambar yang akan disematkan pada halaman, atau link relatif ke gambar di direktori ini (misalnya img/filename.png ).
    • link (string, opsional): Hyperlink ke halaman yang berisi gambar, jika Anda ingin orang dapat mengkliknya untuk melihat versi yang lebih besar, dll.
    • alt (string, opsional): Teks alternatif yang menjelaskan gambar.
    • caption (HTML, opsional): Judul yang mendeskripsikan gambar.
  • body (HTML, wajib diisi ): Teks entri garis waktu. Jika Anda ingin beberapa paragraf, Anda harus menyertakan tag <p> sendiri; jika tidak, itu akan ditambahkan.
  • links (array objek, opsional): Serangkaian tautan untuk ditampilkan di bagian bawah entri.
    • href (string, wajib ): Target tautan.
    • linkText (HTML, wajib ): Teks tautan.
    • extra (HTML, opsional): HTML ekstra untuk ditampilkan di akhir tautan.

Meta

• pageTitle (string, wajib ): Teks yang akan dimasukkan ke dalam tag <title> , untuk mengatur judul halaman di browser.
• pageDescription (string, opsional): Deskripsi halaman untuk dimasukkan ke dalam tag meta.
• pageAuthor (string, optinal): Penulis halaman untuk masuk ke tag meta.

Kustomisasi tambahan

Jika Anda ingin menambahkan lebih banyak pilihan warna untuk lingkaran di timeline, Anda dapat mengedit file src/css/custom.css untuk menambahkan warna Anda sendiri. Anda dapat menggunakan alat ini untuk memilih warna dan mendapatkan kode warna hexnya. Mereka didefinisikan seperti ini:

. timeline-icon . yourcolorhere {
  background-color : # hexcol or code;
}

Anda kemudian akan menggunakan color: yourcolorhere di file content.js.

Ganti gambar di folder src/img untuk menyesuaikan halaman favicon dan gambar OpenGraph.

Menyebarkan

Setelah Anda menjalankan npm run-script buld , Anda akan melihat direktori _site yang berisi file HTML/CSS/JS statis dengan konten situs Anda. Anda sekarang dapat menggunakan hosting situs statis apa pun untuk menyebarkan file-file ini!

halaman GitHub

Untuk menyebarkan situs statis Anda di halaman GitHub (gratis), buat cabang yang berisi file statis di direktori root dengan menjalankan git subtree push --prefix _site origin gh-pages . Kemudian Anda dapat pergi ke Pengaturan > Opsi Halaman repositori Anda dan pilih "Terapkan dari cabang", lalu pilih gh-pages sebagai cabang.

Layanan lainnya

Ada beberapa tutorial bagus di luar sana untuk menerapkan situs statis di berbagai layanan gratis lainnya. Beberapa tercantum di bawah ini.

Anda juga dapat mencari tutorial tentang cara menerapkan situs yang dibangun dengan Eleventy, karena itulah yang menggerakkan proyek ini. Beberapa layanan webhosting seperti Vercel secara khusus mendukung sebelas dalam beberapa cara yang sangat berguna.

• Netlifikasi
• Vercel
• Memberikan
  • Buat Situs Statis baru di Render
  • Setel "perintah build" ke npm run-script build
  • Setel "terbitkan direktori" ke _site

Daya tanggap

Garis waktu akan ditampilkan dengan baik di tablet:

atau perangkat seluler:

Kompatibilitas peramban

Ini seharusnya berfungsi dengan baik di semua browser modern. IE <9 tidak didukung.

Tanpa mengaktifkan JavaScript, halaman akan terdegradasi dengan baik. Namun, postingan akan ditampilkan dalam timeline satu kolom dan filter tidak akan ditampilkan.

Di bawah tenda

Proyek ini menggunakan

• 11 puluh
• EJS
• momen.js
• Font Luar Biasa
• normalisasi.css
• daftar kelas-polyfill

Ini dirilis di bawah lisensi MIT.