I'm using Blogger, and after 20 years and 10K posts, I have exported all posts and migrated all content to a new CMS and a new domain. By using jQuery in the Blogger HTML template, I have set up links in all Blogger posts to the same post at the new domain, i.e. with an HTML link "Click to go to the new site".
And that works for many of the Blogger > New site post links, because the post name part of the slug is the same after the migration, i.e., old: https://example.blogspot.com/a-post.html
and new: https://mynewdomain.com/a-post.html
so displaying a redirect is easy. I use jQuery in Blogger HTML template to replace example.blogspot.com
with mynewdomain.com
to form a redirect link.
But due to the method of importing Blogger content into the new CMS, I have hundreds of posts where the destination URL is different, e.g. https://example.blogspot.com/another-post.html
needs to link to https://mynewdomain.com/another-post-2.html
I thought of a way to create new links at Blogger with jQuery: use a two value "A:B" structure lookup table to store the new and old URLs and to loop through and show a link to the post at the new domain, like this:
var lookupTable = [
"https://example.blogspot.com/a-post.html:https://mynewdomain.com/a-post-2.html",
"https://example.blogspot.com/another-post.html:https://mynewdomain.com/another-post-2.html",
// etc.....
];
But how do I loop through and conditionally call the mynewdomain URLs in the lookup table? An if-else loop? A for-each loop?
This is my pseudo code:
When jQuery is On Document ready, get the window URL of the single post, ThePostURL.
Loop through the lookupTable and determine if the ThePostURL is in the first position in any row of the table.
If ThePostURL does not exist, exit and simply show a link with the domain changed.
If the ThePostURL does exist in the table, use jQuery to get the second URL and create an HTML link.
The DS of your lookup-table shouldn't be an array
, it should be an object
(key value pair) ideally.
Try this.(Added comments for readbility)
// key value pair containing the old and the new uri
const lookupTable = {
"https://example.blogspot.com/a-post.html": "https://mynewdomain.com/a-post-2.html",
"https://example.blogspot.com/another-post.html": "https://mynewdomain.com/another-post-2.html",
};
// the function that returns the url to redirect to
const getRedirectUrl = () => {
// try get the url from the lookup table using the key
let newUrl = lookupTable[window.location.href];
if (!newUrl) {
// if not found, use the path of the current url and append it to the new domain name
newUrl = "https://mynewdomain.com" + window.location.pathname;
}
// returns the redirect url
return newUrl;
};
// "DOM ContentLoaded(Ready)" event in JavaScript
document.addEventListener("DOMContentLoaded", (event) => {
const url = getRedirectUrl();
// Example: navigates you to the new url
window.location.href = url;
// TODO: pass that to a function that creates a hyperlink
// createHyperlink(url);
});
Update: Pseudo code to create a hyperlink
const createHyperlink = (url) => {
const hyperlink = document.createElement("a");
hyperlink.href = url;
hyperlink.textContent = "Domain Changed. Click here!";
// removes the html present in the body and inserts the hyperlink
document.body.innerHTML = hyperlink.outerHTML;
// optional styling, to align the link to the page center
document.body.setAttribute(
"style",
"display: flex; justify-content: center; align-items: center; height: 90vh;"
);
};