Menggodam komponen penghalaan di Jekyll

3

Takeaways Key

Jekyll tidak mempunyai komponen penghalaan terbina dalam, yang boleh menjadi masalah apabila URL perlu diubah dan semua pautan ke URL lama mesti dikemas kini secara manual. Penyelesaian penyelesaian boleh dibuat menggunakan cecair dan markdown, sesuai untuk laman web yang dihoskan di halaman github di mana plugin dan kod ruby ​​tersuai tidak boleh digunakan.

Penghala boleh dibuat di Jekyll dengan memetakan URL ke nama (laluan) dalam fail YAML yang disimpan dalam folder _data. Ini membolehkan URL ditukar tanpa perlu mengemas kini semua pautan yang menunjuk ke URL lama, kerana pautan sekarang merujuk kepada nama laluan dan bukannya laluan URL.

Untuk menjadikan penghala lebih mesra pengguna, rujukan pautan Markdown boleh diiktiraf dari penghala, yang membolehkan laluan digunakan sebagai rujukan dalam mana-mana fail. Ini dilakukan dengan membuat separa cecair yang melingkari semua laluan dan mewujudkan rujukan markdown untuk setiap satu.

• Walaupun penyelesaian ini menyediakan penghala berfungsi di Jekyll, terdapat beberapa batasan. Ia hanya berfungsi di Markdown, bukan HTML biasa, dan sauh tidak boleh ditambah ke pautan. Di samping itu, sebahagian HTML mesti dimasukkan ke dalam semua halaman, yang boleh membosankan. Walaupun kelemahan ini, penyelesaian ini memberikan penyelesaian yang berdaya maju kepada kekurangan komponen penghalaan di Jekyll.
Pada mulanya saya akan tajuk artikel ini
• menggodam komponen penghalaan di Jekyll apabila dihoskan di halaman GitHub dengan markdown, cecair, dan yaml
. Jelas sekali, itu agak lama jadi saya terpaksa memendekkannya. Bagaimanapun, perkara itu tidak berubah: Jekyll tidak mempunyai beberapa jenis penghala, dan saya fikir saya dapati penyelesaian
• yang tidak begitu baik
untuk meniru satu.

tetapi perkara pertama yang pertama: Saya berasal dari latar belakang simfoni, jadi dengan router maksud saya komponen yang memetakan url ke nama - a.k.a. Tanpa perlu merangkak asas kod anda untuk mengemas kini semua pautan menuju ke lokasi usang. Mengapa kita memerlukan perkara sedemikian?

Saya kini bekerja keras untuk dokumen untuk Sassdoc v2 (belum dikeluarkan, seperti penulisan ini). Kami mempunyai sedikit kandungan; Lebih 20 halaman berpecah di 4 bahagian yang berbeza yang mengandungi banyak contoh kod dan rujukan silang. Beberapa kali semasa penulisan semula, saya ingin menukar URL. Masalahnya, apabila saya menukar URL saya perlu mengemas kini semua pautan yang menuju ke URL ini jika saya tidak mahu mereka dipecahkan. Merangkak lebih dari 20 halaman untuk memastikan semua URL baik -baik saja jauh dari ideal ... inilah sebabnya kita memerlukan komponen penghalaan. Kemudian kita akan merujuk kepada URL dengan nama dan bukannya dengan jalan mereka, membolehkan kita menukar jalan sambil mengekalkan nama itu dengan sempurna.

bagaimana ia berfungsi?

Jadi apa yang kita perlukan untuk membuat kerja ini? Jika anda menjalankan Jekyll tetapi tidak terhad kepada mod selamat (yang malangnya kes apabila menggunakan halaman GitHub untuk hosting), anda pasti dapat mencari/membina plugin ruby ​​untuk melakukan ini. Ini akan menjadi penyelesaian terbaik kerana ini biasanya sesuatu yang dikendalikan oleh bahasa sisi pelayan.

Sekarang, jika anda menjadi tuan rumah laman web anda di halaman GitHub yang lebih kerap berlaku daripada tidak dengan Jekyll, anda tidak boleh menggunakan plugin dan tidak boleh memperluaskan teras Jekyll dengan kod ruby ​​tersuai, jadi anda akhirnya menggodam penyelesaian dengan apa yang ada: Cecair dan markdown.

Idea utama adalah untuk mempunyai fail yang mengandungi semua laluan kami dipetakan ke URL sebenar. Syukurlah, Jekyll membolehkan kami menentukan pembolehubah global tersuai melalui fail YAML/JSON/CSV yang disimpan dalam folder _Data, kemudian diakses melalui site.data. . Oleh itu, kita boleh mengakses URL tersebut secara langsung di halaman kita dari nama mereka.

Untuk menambah sedikit gula sintaks di atas, kami akan membuat rujukan pautan markdown yang akan membolehkan sintaks yang lebih mesra - tetapi jangan terlalu cepat terlalu cepat.

Membuat penghala

Titik penghala adalah untuk mendedahkan laluan (a.k.a. nama ) dipetakan ke URL (satu hingga satu). Adalah mungkin untuk membuat fail YAML/JSON/CSV dalam folder _data mana -mana projek Jekyll, jadi mari kita pergi dengan fail YAML bernama Routes.yml:

home: "/"
about: "/about-us/"
faq: "/frequently-asked-questions/"
repository: "https://github.com/user/repository"

Anda mungkin telah menyatakan bahawa kami sudah tentu tidak terhad kepada pautan dalaman. Kami benar -benar boleh menentukan laluan untuk URL luaran untuk mengelakkan menaipnya lagi dan lagi jika mereka cenderung muncul secara teratur. Sepanjang baris yang sama, kami berhenti di 4 laluan untuk contoh kami, tetapi penghala boleh mengandungi beratus -ratus laluan.

Kerana fail itu berada di _data, kita boleh mengakses kandungannya di mana sahaja dengan site.data. . . Oleh itu, katakan kami mempunyai halaman yang mengandungi kod berikut:

---
layout: default
title: "About us"
---

<span><!-- Content about us -->
</span>
Go to our [GitHub repository]({{ site.data.routes.repository }}).
Or read the section dedicated to [Frequently Asked Questions]({{ site.data.routes.faq }}).

Seperti yang anda lihat, kami tidak lagi merujuk kepada URL, tetapi laluan sebaliknya. Ini bukan sihir, ia hanya memberitahu Jekyll untuk mengakses pembolehubah global yang disimpan di jalan yang diberikan (mis. Site.data.routes.faq).

Sekarang, jika repositori tidak lagi dihoskan di GitHub atau URL halaman "Mengenai" sekarang /kira -kira /, jangan risau! Dengan mengemas kini router, kami membuatnya berfungsi tanpa perlu kembali ke halaman kami untuk mengemas kini pautan kami.

Menambah gula sintaksis

Pada ketika ini, kami mempunyai penghala berfungsi yang membolehkan kami menukar mana -mana URL tanpa perlu merangkak laman web kami untuk membetulkan pautan yang rosak. Jadi anda boleh mengatakan ia sudah cukup keren. Walau bagaimanapun, perlu menaip site.data.routes.FAQ tidak begitu mudah. Kami pasti boleh menjadikannya lebih elegan!

Ya dan tidak. Pada mulanya, saya fikir membina fungsi laluan kecil () menerima nama utama dan mengembalikan nilai yang disimpan di site.data.Routes. . Masalahnya ialah kita menjalankan Jekyll dalam mod selamat, jadi kita tidak dapat melanjutkannya dengan kod Ruby. Tidak ada nasib.

Kemudian saya fikir ciri markdown yang saya tidak pernah gunakan sebelum ini: rujukan pautan. Ini adalah bagaimana pautan diwakili dalam markdown:

home: "/"
about: "/about-us/"
faq: "/frequently-asked-questions/"
repository: "https://github.com/user/repository"

anda juga boleh menetapkan pautan ke kepala ke rujukan - yang benar -benar tidak dapat dilihat dengan cara, ditakrifkan di mana sahaja di halaman, seperti SO:

---
layout: default
title: "About us"
---

<span><!-- Content about us -->
</span>
Go to our [GitHub repository]({{ site.data.routes.repository }}).
Or read the section dedicated to [Frequently Asked Questions]({{ site.data.routes.faq }}).

NOTA: Parentheses digantikan dengan kurungan apabila menggunakan rujukan dan bukannya URL.

Ini membolehkan anda mempunyai semua pautan anda yang ditakrifkan di tempat yang sama (di bahagian bawah misalnya) dan bukannya seluruh dokumen. Saya mesti mengatakan bahawa saya tidak menggunakan ciri ini banyak, tetapi dalam kes ini ia berguna.

Ideanya adalah untuk merujuk rujukan pautan dari penghala kami supaya kami dapat menggunakan laluan kami sebagai rujukan dalam mana -mana fail. Ternyata mudah untuk melakukan ini dalam cecair:

[I am a link](http://link.url/)

Dengan menambahkan ini untuk gelung di mana sahaja di halaman, ini mengarahkan Jekyll untuk memproses ini sebagai kod cecair, yang kemudiannya akan diproses sebagai rujukan markdown. Jadi misalnya, dan kembali kepada contoh sebelumnya, kita boleh lakukan:

[I am a link][id_reference]

​[id_reference]: http://link.url

Sekarang kita bercakap, bukan? Satu -satunya masalah adalah untuk memasukkan gelung ini di mana -mana halaman. Pada mulanya, saya fikir menambahnya dalam susun atur, jadi ia akan ditambah secara automatik ke mana -mana halaman menggunakan susun atur yang berkaitan. Masalahnya adalah bahawa susun atur tidak diproses sebagai markdown di Jekyll sehingga rujukan sebenarnya kelihatan di bahagian bawah DOM. Lebih buruk lagi, mereka tidak boleh digunakan di halaman kami kerana mereka tidak diproses sebagai markdown ... terlalu buruk.

Walau bagaimanapun, kita masih boleh melakukan sesuatu untuk menjadikannya lebih baik. Kita boleh meletakkan gelung ini dalam separa cecair dan memasukkan separa dalam setiap halaman dan bukannya menyalin gelung. Katakan kami membuat laluan.html sebahagian dalam folder _ termasuk:

# _includes/route.html
{% for route in site.data.routes %}
[{{ route[0] }}]: {{ route[1] }}
{% endfor %}

Dan kemudian, di halaman kami:

---
layout: default
title: "About us"
---

<span><!-- Content about us -->
</span>
Go to our [GitHub repository][repository].
Or read the section dedicated to [Frequently Asked Questions][faq].

{% for route in site.data.routes %}
[{{ route[0] }}]: {{ route[1] }}
{% endfor %}

NOTA: Anda boleh memasukkan separa di mana sahaja di halaman, bukan sahaja di atas. Anda benar -benar boleh meletakkannya sebagai baris terakhir fail.

Pemikiran Akhir

Itulah orang-orang, kami telah menggodam komponen penghalaan kecil dalam mod selamat Jekyll. Sekarang apakah kelemahan ini? Terdapat beberapa yang kecil:

• ia berfungsi dalam markdown; Sekiranya anda mempunyai pautan di HTML biasa, anda perlu kembali ke {{site.data.Routes. }}, yang tidak terlalu buruk kerana ia masih menyimpan pautan selamat dari kemas kini URL.
• anda tidak boleh menambah sauh ke pautan; Sekiranya anda perlu, kembali ke {{site.data.Routes. }}#anchor (sekali lagi, tidak terlalu buruk).
• Anda perlu memasukkan separa HTML di semua halaman, yang boleh membosankan (walaupun anda menganggap ini sebagai lanjutan dari perkara depan YAML yang anda perlu tulis pula).

Selain daripada kelemahan itu, semuanya baik dan berkilat. Apa pendapat anda?

Soalan Lazim (Soalan Lazim) Mengenai Menggodam Komponen Routing di Jekyll

Apakah kepentingan komponen penghalaan dalam Jekyll? Ia bertanggungjawab untuk memetakan setiap halaman ke URL tertentu, yang penting untuk navigasi tapak dan SEO. Dengan menggodam komponen penghalaan, anda boleh menyesuaikan struktur URL laman web anda sesuai dengan keperluan khusus anda, meningkatkan pengalaman pengguna dan penglihatan enjin carian. membolehkan anda menyesuaikan struktur URL anda melalui penggunaan permalinks. Anda boleh menentukan permalink tersuai dalam perkara depan pos anda, yang akan mengatasi struktur URL lalai. Ini membolehkan anda membuat URL lebih banyak deskriptif dan mesra pengguna, yang dapat meningkatkan pengalaman SEO dan pengguna laman web anda. , Penjana tapak statik, penjana tapak statik yang sesuai untuk tapak peribadi, projek, atau organisasi. Ia sangat fleksibel dan menyokong struktur URL, tema, plugin, dan banyak lagi. Selain itu, kerana ia menghasilkan tapak statik, ia sangat cepat dan selamat berbanding dengan platform CMS tradisional. platform penempatan pihak ketiga, termasuk halaman GitHub, Netlify, dan banyak lagi. Untuk menggunakan laman web anda, anda perlu membinanya secara tempatan, kemudian tolak fail statik yang dihasilkan ke platform pilihan anda. Setiap platform mempunyai proses penempatan tersendiri, jadi pastikan untuk menyemak dokumentasi mereka untuk arahan terperinci.

Apakah beberapa contoh laman web yang dibina dengan Jekyll? , mulai dari blog peribadi ke tapak organisasi besar. Beberapa contoh termasuk laman web Jekyll rasmi, halaman GitHub, dan banyak lagi. Anda boleh mencari laman web Jekyll di laman web rasmi Jekyll. laman web. Ia sangat serasi dengan Jekyll dan menawarkan proses penempatan yang mudah dan diselaraskan. Anda boleh menyambungkan repositori GitHub anda ke halaman Cloudflare, maka ia secara automatik akan membina dan menggunakan laman web anda setiap kali anda menolak ke repositori anda. Laman web Jekyll adalah sumber yang hebat untuk mempelajari lebih lanjut mengenai Jekyll. Ia menawarkan dokumentasi komprehensif, tutorial, dan pameran laman web Jekyll. Di samping itu, terdapat banyak sumber komuniti yang ada, termasuk forum, blog, dan repositori GitHub.

Bagaimana saya boleh menambah plugin ke laman Jekyll saya?

Jekyll menyokong pelbagai plugin yang boleh menambah ciri dan fungsi baru ke laman web anda. Untuk menambah plugin, anda perlu memasangnya, kemudian tambahkannya ke fail _config.yml laman web anda. Sesetengah plugin juga mungkin memerlukan konfigurasi tambahan, jadi pastikan untuk memeriksa dokumentasi plugin untuk arahan terperinci.

Bolehkah saya menggunakan Jekyll dengan bahasa pengaturcaraan lain? digunakan dengan bahasa pengaturcaraan lain melalui penggunaan plugin dan integrasi. Sebagai contoh, anda boleh menggunakan Jekyll dengan JavaScript untuk menambah ciri -ciri dinamik ke laman web anda, atau dengan preprocessors CSS seperti SASS untuk menyelaraskan proses gaya anda. > Jekyll menawarkan beberapa ciri yang dapat membantu mengoptimumkan laman web anda untuk SEO. Ini termasuk struktur URL tersuai, sokongan untuk tag meta, dan keupayaan untuk menghasilkan sitemap XML. Di samping itu, kerana Jekyll menjana tapak statik, ia sangat cepat, yang dapat meningkatkan kedudukan enjin carian tapak anda.

Atas ialah kandungan terperinci Menggodam komponen penghalaan di Jekyll. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!