しかし、1つの問題がありました。たとえば、美しいURL、たとえばhttp://play.csssecrets.io/pie-animatedが必要でした 。これはdabblet.comのデモにリダイレクトされます。 普通の人なら誰でも弾丸を噛んで、これに何らかの種類のサーバー言語を使用するでしょう。 しかし、私は非常に正常ではありません:)
GitHubはすでにGitHubページに独自の書き換えURLを使用していることが
404.html
ます
404.html
をリポジトリに追加すると、存在しないURLがリダイレクトされます。 ちょっと待ってください。美しいURLが機能するように、サーバー上で行っているのと同じことではないでしょうか。
404.html
JavaScriptを使用して、サーバー上で行うこととまったく同じことを行うことができます。
だから、私は作成しました:
- すべてのデモIDと対応するダブレットURLを含むJSONファイル 、
- 404.html 、リダイレクトまたはエラーを表示
- URL、JSONファイルを読み取り、ダブレットにリダイレクトするVanilla JSスクリプト 。
ここで、実際には、殻のないJS:
(function(){ document.body.className = 'redirecting'; var slug = location.pathname.slice(1); xhr({ src: 'secrets.json', onsuccess: function () { var slugs = JSON.parse(this.responseText); var hash = slugs[slug]; if (hash) { // Redirect var url = hash.indexOf('http') == 0? hash : 'http://dabblet.com/gist/' + hash; $('section.redirecting > p').innerHTML = 'Redirecting to <a href="' + url + '">' + url + '</a>…'; location.href = url; } else { document.body.className = 'error not-found'; } }, onerror: function () { document.body.className = 'error json'; } }); })();
以上です! 同じ手法を使用して、GitHub Pagesの他のHTMLページにリダイレクトしたり、1ページのサイトの人道的なURLを使用したりすることができます。 これはハッキングですか? もちろん。 しかし、いつそれが私たちを止めましたか? :)