In order to create a static page, you first create a post and then pin it to convert it to a static page. This is great for creating additional pages such as “About”, “Contact” etc…but what if I wanted the pin to be an external link, this method doesn’t work. For example, I’ve created a “LinkedIn” static page which I wish would automatically go to my LinkedIn page instead of opening the static page which has the link in it.
You can do it with Javascript. This one is for the link to get a random post on my site.
/* Javascript for Random post Glitch app */
var a = document.querySelector('a[href="https://journal.dinobansigan.com/random"]');
if (a) {
a.setAttribute('href', 'https://random-journal-post.glitch.me/get');
a.setAttribute('title', 'Get a random post');
}
var b = document.querySelector('a[href="/dino/random"]');
if (b) {
b.setAttribute('href', 'https://random-journal-post.glitch.me/get');
b.setAttribute('title', 'Get a random post');
}
1 Like
This might be a silly question, but where would the js script go since this is not a typical self-hosted site with access to linking js code etc…? Also the pinned post becomes a menu button, so how would it recognize the js code without having access to edit the html head tag?
On your blogs page there is a Customize option under your blog. When you click it, scroll down towards the bottom and you will see a “Custom JavaScript” area for JavaScript that can run on your blog (it only works for custom domains or blog.writeas.com domain). This is where you’ll put the code.
Would be glad to clarify further if needed!
1 Like
That worked beautifully. I made some adjustments to it for my needs:
var a = document.querySelector('a[href="MY_MENU_ITEM_URL"]');
if (a) {
a.setAttribute('href', 'MY_NEW_URL');
a.setAttribute('target', '_blank'); /*ADDED THIS FOR NEW TAB*/
}
cc: @cjeller1592
Thanks all!
2 Likes
@cjeller1592 et al: I’m in over me head, trying to have two pinned posts that live jump to the link within. The first is to the ebook creation, which I copied and pasted from you, cj. The second is that copied and my failed attempt to edit it, and it links to our discourse forum. What am I missing? Well, specifically regarding this question anyway. Grin.
const pinned = document.querySelector(‘a[href*=“https://catholichalos.org/ebook”]’);
pinned.href = ‘https://catholichalos.org/.epub’;
const pinned1 = document.querySelector(‘a[href*=“https://discourse.catholichalos.org”]’);
pinned.href = ‘https://discourse.catholichalos.org’;
Hi @DeaconPatrick! The problem is that the code is looking for a link that isn’t on your blog. What you need to do is replace the first reference of https://discourse.catholichalos.org with https://catholichalos.org/forum. That way the JavaScript will find that link on your blog and replace it. Here’s what should work for the link to your Discourse forum:
const pinned1 = document.querySelector('a[href*="https://catholichalos.org/forum"]');
pinned.href = 'https://discourse.catholichalos.org';
That should do the trick. Let me know if it works!
Thank you, @cjeller1592. Each line gives a different error. The first line:
The second line:
The link I want the pinned post to go to is: https://discourse.catholichalos.org/
Try the above code snippet again. There was a typo with single & double quotes that I just edited!
Second line gives an error: "Unclosed string. Missing semicolon.
Ah gotcha — third time’s the charm I think. Give the same code a go and let me know if there’s any error!
Hmmm. I’m botching something somewhere. No more error messages, but the pinned “Forum” at https://catholichalos.org/ still lands on a post with the link rather than being an active link itself. Ideas on what I’m missing?
There is something wrong with the characters in your custom javascript. Specifically, the double quotes on the URL the script is trying to find. Note the first one uses "", while the next one which doesn’t work, uses “”. I think if you change that to use the same double quotes as the first one, it will start working.
1 Like
I agree with @dino that this may be the root of the problem. Try to copy in the code below @DeaconPatrick and let us know whether that works or not. We’ll get this figured out!
const pinned1 = document.querySelector('a[href*="https://catholichalos.org/forum"]');
pinned.href = 'https://discourse.catholichalos.org';Thank you, @dino and @cjeller1592. Smart quotes replaced with “dumb” quotes, and it still does not work. In fact, I’m even more confused now, because the pinned ebook link now goes to the forum. I’m not sure when that happened, but it had been working until the last change or two.
I’m thinking I’ll delete both, and start fresh, only creating the forum pinned post as a direct link. If you were writing that code fresh, what would it be?
I want to link to: https://discourse.catholichalos.org/
from: a pinned post “Forum”
The genesis of the second line is: I copied the first line, which works and CJ gave me, and then added the “1” to “pinned” (possible error there?) and changed the links to the desired landing link.
I deleted the first line of code and the ebook post. Now the second line of code works. Which raises the question: can there be two live linked pinned posts? If so, how?
This is the script that I use on my site. You can try adding that for your ebook link. The first set of scripts is for viewing the site when you are not logged in. The second set is for viewing it when logged in to write.as, so you have to replace ‘YourAlias’ with the alias for your blog.
var a = document.querySelector('a[href="https://catholichalos.org/books"]');
if (a) {
a.setAttribute('href', 'https://catholichalos.org/.epub');
}
var b = document.querySelector('a[href="/YourAlias/books"]');
if (b) {
b.setAttribute('href', 'https://catholichalos.org/.epub');
}
This is a good point – the link / “href” part will vary if you have a custom domain set up. If that’s the case, you can also use a different CSS selector ($=) to simplify the code:
var a = document.querySelector('a[href$="/books"]');
if (a) {
a.setAttribute('href', 'https://catholichalos.org/.epub');
}
This tells the script to look for a link that ends with /books.
2 Likes