Netlify具有重寫這一強大功能,使我可以創建許多重複的頁面。但是有一個陷阱。
Netlify具有這項出色的功能,通過將其添加到_redirects
文件放在項目的公共根目錄中(public/_redirects
例如在雨果)。
我用它為我的某些網站提供動力。
如果我有一堆頁面在下面content/original
,方法如下:
/copy/* /original/:splat 200I can call the URL
/copy
and when I access https://mysite.com/copy
I have the content stored inside https://mysite.com/original
, and the URL does not change. It’s not a redirect (despite the _redirects
file name), it’s a rewrite because I used the 200
code at the end. Had I used 301, that would have been a 301 redirect.
Anyway, the problem I stumbled upon is this: there’s no way to automatically add the trailing slash at the end, so if you access /copy
and /copy/
, and you use relative URLs for images and links, without trailing slash URLs will lead to 404 and images will be broken.
I looked for a solution in my static site generator, to see if it could replicate redirects in another way, but in the end my solution was client side.
And very simple.
I added this JavaScript snippet at the bottom of my pages:
<script>
(function() {
if (!location.href.endsWith('/')) {
window.location = location.href + '/'
}
}())
</script>
And the page now if there’s no trailing slash will immediately reload with the slash appended at the end.
The process is so quick it’s almost invisible to the user.
More services tutorials:
- How to start with Firebase Hosting
- A tutorial to host your Static Site on Netlify
- Code Linters and Formatters for Web Developers
- Auto trigger deploys on Netlify
- Glitch, a great Platform for Developers
- Airtable API for Developers
- How to authenticate to any Google API
- Zeit Now Tutorial
- Netlify Lambda Functions Tutorial
- How to use Firebase Firestore as your database
- How I fixed the trailing slash in Netlify rewrites
- How to access query parameters in Netlify functions
- How to use environment variables in Netlify functions
- How to use npm packages in Netlify Functions
- How to create your first VPS on DigitalOcean