旧站页面先跳转至过渡页再定向至新站对应页面的实现需求

Alright, let's figure out how to set up that seamless redirect from your old site (www.old.com) to the new one with a countdown transition page. I'll walk you through the most reliable server-side approaches first, plus a fallback client-side option, and show you how to map those old paths to the new ones correctly.

First, let's clarify the step-by-step flow we need:

1. A user visits any page on www.old.com (e.g., www.old.com/about/)
2. The request is intercepted and redirected to a dedicated transition page, with the original request path passed as a parameter
3. The transition page shows a countdown, then automatically redirects to the corresponding page on www.new.com (e.g., www.new.com/about-us/)

Server-side redirects are the best choice because they're fast, work even if the user has JavaScript disabled, and avoid loading unnecessary old site content. We'll cover configurations for Nginx and Apache, the two most common web servers.

Nginx Setup #

Add this to your Nginx server block for www.old.com:

server {
    listen 80;
    server_name www.old.com;

    # Redirect all requests to the transition page, passing the original path as a parameter
    location / {
        return 302 /transition.html?old_path=$request_uri;
    }

    # Serve the transition page directly (prevent loop redirects)
    location = /transition.html {
        root /path/to/your/html/files; # Update this to the folder where transition.html lives
        # Disable caching for the transition page so browsers always get the latest version
        add_header Cache-Control "no-cache, no-store, must-revalidate";
    }
}

Apache Setup (Using .htaccess) #

If you're using Apache, create or update the .htaccess file in your old site's root directory:

# Enable rewrite engine
RewriteEngine On

# Redirect all requests (except the transition page itself) to transition.html with the original path
RewriteCond %{REQUEST_URI} !^/transition\.html$
RewriteRule ^(.*)$ /transition.html?old_path=/$1 [R=302,L]

# Disable caching for the transition page
<Files "transition.html">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
</Files>

Transition Page (transition.html) #

Create this HTML file and place it in your old site's web root. It handles the countdown and maps old paths to new ones:

<!DOCTYPE html>
<html>
<head>
    <title>Redirecting to Our New Website</title>
    <style>
        body { text-align: center; padding: 60px; font-family: 'Arial', sans-serif; max-width: 800px; margin: 0 auto; }
        h1 { color: #2c3e50; }
        #counter { font-size: 2.5em; color: #e74c3c; font-weight: bold; }
        #direct-link { color: #3498db; text-decoration: none; font-size: 1.1em; }
        #direct-link:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <h1>We've Moved to a New Website!</h1>
    <p>You'll be automatically redirected in <span id="counter">5</span> seconds.</p>
    <p>If you aren't redirected, click <a id="direct-link" href="">here</a> to go to the new site.</p>

    <script>
        // Grab the original path from the URL parameters
        const urlParams = new URLSearchParams(window.location.search);
        const oldPath = urlParams.get('old_path') || '/';

        // Define your path mapping rules here (old path → new path)
        const pathMappings = {
            '/about/': '/about-us/',
            '/contact/': '/get-in-touch/',
            '/blog/': '/news/',
            // Add as many mappings as you need
            '*': oldPath // Fallback: use the old path if no match is found
        };

        // Determine the correct new path
        let targetPath = pathMappings['*'];
        for (const [old, newPath] of Object.entries(pathMappings)) {
            if (old !== '*' && oldPath.startsWith(old)) {
                targetPath = newPath;
                break;
            }
        }

        const newSiteUrl = `https://www.new.com${targetPath}`;

        // Update the direct link
        document.getElementById('direct-link').href = newSiteUrl;

        // Countdown redirect logic
        const counterElement = document.querySelector("#counter");
        let countdown = parseInt(counterElement.textContent, 10);
        
        const countdownInterval = setInterval(() => {
            countdown -= 1;
            counterElement.textContent = countdown;
            
            if (countdown <= 0) {
                clearInterval(countdownInterval);
                window.location.href = newSiteUrl;
            }
        }, 1000);
    </script>
</body>
</html>

If you can't modify server configurations (e.g., your old site is hosted on a platform with limited access), you can add a script to every page on www.old.com to redirect to the transition page. Note: This won't work if the user has JavaScript disabled, so it's only a fallback.

Add this script to the <head> section of all old site pages:

<script>
    // Redirect immediately to the transition page with the current path
    const currentPath = window.location.pathname;
    window.location.href = `https://www.old.com/transition.html?old_path=${currentPath}`;
</script>

Use the same transition.html file from the server-side option—it will handle the path mapping and countdown.

• Maintain Path Mappings: Make sure to update the pathMappings object in the transition page with all your important old-to-new path pairs. For large sites, you can use regular expressions to handle pattern-based mappings (e.g., /blog/post-(\d+)/ → /news/article-$1/).
• Choose the Right Redirect Code: We used 302 (temporary redirect) for testing. Once you're sure the old site won't come back, switch to 301 (permanent redirect) to help search engines update their indexes.
• Accessibility: Always include a direct link to the new page—don't rely solely on the countdown. This helps users who don't want to wait or have issues with JavaScript.
• Avoid Caching: The Cache-Control headers ensure browsers don't cache the transition page, so users always get the latest path mapping logic.

内容的提问来源于stack exchange，提问作者Mike Hudson