S(GH)PA: GitHub Sayfaları İçin Tek Sayfalık Uygulama Hack

Bir süredir, bir GitHub Pages web sitesinin yollarını tek sayfalık bir uygulama (SPA) olarak işlemek için index.html'ye yönlendirme yeteneği istiyordum. Projede her değişiklik yaptığınızda aynı dosyayı tüm rotalarınıza kopyalamak istemediğiniz sürece, bu tür uygulamalar tüm isteklerin tek bir HTML dosyasına yönlendirilmesini gerektirdiğinden, bu bir tablo riskidir. Şu anda GitHub Pages bir rota işleme çözümü sunmuyor; Sayfalar sisteminin, temel proje içeriğini sunmak için düz, basit bir mekanizma olması amaçlanmıştır.

Bilmiyorsanız, GitHub proje web siteniz için bir parça özelleştirme sağlar: 404.html dosyası ekleme ve bunu özel hata sayfanız olarak sunma yeteneği. Sadece index.html dosyamı çoğaltarak ve kopyayı 404.html olarak yeniden adlandırarak bir SPA hackinde ilk kez bıçakladım. Birçok kişinin GitHub Pages ile aynı sorunu yaşadığı ve genel fikri beğendiği ortaya çıktı. Ancak, Twitter'daki bazı kişilerin doğru bir şekilde dile getirdiği sorun, 404.html sayfasının hala 404 durum koduyla sunulmasıydı; bu, arama motoru tarayıcıları için iyi değil. Eldiven indirilmişti ve cevap vermeye karar verdim - ve şiddetle cevap verdim!

Bir Kez Daha, Duyguyla

Üzerinde uyuduktan sonra kendi kendime düşündüm, “Ben, kirli hack bölgesinin derinliklerindeyiz, o halde neden bu hacki daha da kirli yapmıyorum?!” Bu amaçla, aynı işlevselliği ve basitliği sağlarken web sitenizin tarayıcı suyunu da koruyan daha da iyi bir hack geliştirdim - ve artık index.html dosyanızı kopyalayıp 404.html olarak yeniden adlandırmak için zaman harcamanıza bile gerek yok. ! Aşağıdaki çözüm, tüm modern masaüstü ve mobil tarayıcılarda (Edge, Chrome, Firefox, Safari) ve Internet Explorer 10+'da çalışmalıdır.

Şablon ve Demo : Açıklamayı atlamak ve malları almak istiyorsanız, işte bir şablon deposu ve onu çalışırken görmek için bir test URL'si.

Bu çok Meta

Yaptığım ilk şey, tarayıcının index.html sayfasına yönlendirmesini sağlamak için diğer seçenekleri araştırmak oldu. Bu kısım oldukça basitti. Temel olarak üç seçeneğiniz vardır: bir sunucu yapılandırması, bir JavaScript location manipülasyonu veya bir refresh meta etiketi. İlki, açıkçası GitHub sayfaları için uygun değil. Ve JavaScript temelde yenileme ile aynıdır, ancak tarayıcı indeksleme için tartışmasız daha kötüdür. Bu bize meta etiketi bırakır. Yenileme değeri 0 olan bir meta etiket, bu kullanım durumu için iyi sonuç veren arama motorları tarafından 301 yönlendirmesi olarak değerlendiriliyor gibi görünüyor.

İçinde boş bir HTML belgesi bulunan bir gh-pages deposuna bir 404.html dosyası ekleyerek başlamanız gerekecek. Bu belgenin toplamı 512 bayttan fazla olmalıdır (aşağıda açıklanmıştır). Ardından, 404.html sayfanızın head öğesine aşağıdaki işaretlemeyi yerleştirin:

 <script> sessionStorage.redirect = location.href; </script> <meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'">

Bu kod, denenen giriş URL'sini standart sessionStorage nesnesindeki bir değişkene ayarlar ve bir meta yenileme etiketi kullanarak hemen projenizin index.html sayfasına yönlendirir. Bir Github Organizasyon sitesi yapıyorsanız, içerik özniteliği replacer metnine bir depo adı koymayın, şunu yapın: content=“0;URL='/'”

Rota İşleme Özelleştirme

Daha ayrıntılı rota yönetimi istiyorsanız, yukarıda gösterilen script etiketine bazı ek JavaScript mantığı eklemeniz yeterlidir. Birkaç şeyi değiştirebilirsiniz: index.html sayfasına ilettiğiniz href bileşimi; 404 sayfasında hangi sayfaların kalması gerektiği (meta etiketin dinamik olarak kaldırılması yoluyla); ve gelen rotaya göre hangi içeriğin gösterileceğini dikte etmek için yerine koymak istediğiniz diğer herhangi bir mantık.

512 Sihirli Bayt

Bu, web geliştirmede karşılaştığım en tuhaf tuhaflıklardan biri. 404.html sayfanızın toplam boyutunun 512 bayttan büyük olduğundan emin olmalısınız, çünkü değilse, Internet Explorer bunu dikkate almaz ve bunun yerine genel bir tarayıcı 404 sayfası gösterir. Sonunda bunu anladığımda, geçen zamanla başa çıkmak için bir bira açmam gerekti.

Hadi Tarih Yazalım

Kullanıcının başlangıçta gezindiği URL'yi yakalamak ve geri yüklemek için, sayfanın mevcut durumu üzerinde başka herhangi bir JavaScript işlem yapmadan önce index.html sayfanızın head aşağıdaki script etiketini eklemeniz gerekir:

 <script> (function(){ var redirect = sessionStorage.redirect; delete sessionStorage.redirect; if (redirect && redirect != location.href) { history.replaceState(null, null, redirect); } })(); </script>

Bu JavaScript parçası, 404.html sayfasında sessionStorage önbelleğe aldığımız URL'yi alır ve mevcut history girdisini bununla değiştirir. Buradan işleri nasıl halledeceğiniz size kalmış, ama ben olsam popstate ve hashchange kullanırdım.

Pekala millet, bu kadar. Şimdi GitHub Sayfalarında bazı tek sayfalık uygulamalar yazarak bunu kutlayın!

Bu makale, Microsoft Edge tarayıcı dahil olmak üzere pratik JavaScript öğrenimi, açık kaynak projeleri ve birlikte çalışabilirlik en iyi uygulamaları hakkında Microsoft teknoloji müjdecileri ve mühendislerinin hazırladığı bir web geliştirme serisinin parçasıdır.

Dev.microsoftedge.com'da F12 geliştirici araçları da dahil olmak üzere ücretsiz araçlarla tarayıcılarda ve cihazlarda (Windows 10 için varsayılan tarayıcı olan Microsoft Edge dahil) test yapmanızı öneririz: Hata ayıklamanıza, test etmenize ve test etmenize yardımcı olacak yedi farklı, tam olarak belgelenmiş araç. web sayfalarınızı hızlandırın. Ayrıca Microsoft geliştiricileri ve uzmanlarından haberdar olmak için Edge blogunu ziyaret edin.

SmashingMag'de Daha Fazla Okuma :

• Geliştirmeden Dağıtıma Basit Bir İş Akışı
• Uygulamalar İçin Foundation'da Eksiksiz Bir Web Uygulaması Oluşturma
• Jekyll ve GitHub Sayfalarıyla Bir Blog Oluşturun