Search page in blog

Hi!

First of all, as usual, my apologies if this has been covered before.
I did find some posts in here on search boxes, but nothing I could really use with my basic skills.

Is there a guide on how to implement a search feature in blogs in write.as, that does not use google services?
Something like this: https://search.cjeller.site/

Or, if no notes exist, is there a good, patient soul willing to help me implement this?

Thanks!

Hi @Melyanna!

I was able to remix the search app I use for my blog into something like this that uses your theme and searches your blog. What do you think? All you would need to do is pin a placeholder post (like https://blog.melyanna.net/search for example) and add the following JavaScript to the Custom JavaScript on your Customize page:

const search = document.querySelector('a[href*="https://blog.melyanna.net/search"]');
pinned.href = 'https://bejewled-stocking.glitch.me/';

Hope that helps! Would be glad to help further.

3 Likes

EDIT: well, actually, while it does look amazing, I gave this a try on my blog and I don’t see a search box in the search page.

What I did:

  1. copy-paste your code and put it in the custom js box of my blog.
  2. added a “Search” page and pinned it.
  3. hit save.

All I could see was the bunch of text I had in the search page (“you can search this blog for specific words”) and nothing else.

I don’t think I can make an empty page with just a title (in case the text in the body of the page is the issue).

It was nothing on your end @Melyanna. I goofed up with the JavaScript! Here is the edited code:

const search = document.querySelector('a[href*="https://blog.melyanna.net/search"]');
search.href = 'https://bejewled-stocking.glitch.me/';

I forgot to make it search.href and instead had it as pinned.href. So since no variable is declared in the JS as “pinned”, nothing happens.

Let me know if that works for you!

3 Likes

Thank you so much!
It works perfectly now. :slight_smile:

1 Like

No problem! I am glad it’s finally working for you. Let me know if you need any edits to it and I can gladly do so.

1 Like

cjeller1592, hi. I tried to do the same on my blog, inserting my blog title into the code. I added it to the Java script section under customization. Pinned a “search” post. But no luck.

This is what I pasted: const search = document.querySelector(‘a[href*=“https://writedirt.com/search”]’); search.href = ‘https://bejewled-stocking.glitch.me/’;

Am I even on the right track? Thank you.

Hi @writedirt ! The search app above (https://bejeweled-stocking.glitch.me/) is configured for @Melyanna 's blog, so it will not work for your blog.

In order to have a search app for your blog, the search app will have to be remixed on Glitch with your blog’s credentials. I am assuming you are using it on your Write Dirt blog, so I remixed the app for you here.

Note that it will not find pinned posts, so the only post you can search for currently is the Main Blog Page post. You can clean up your pinned posts and add other posts to further test the search app.

For the JavaScript, you will just change the href of the second line of code. It will look like this:

const search = document.querySelector('a[href*="https://writedirt.com/search"]');
search.href = 'https://goofy-kiwi.glitch.me/';

Once you clean up your pinned posts, I can help make the app reflect those changes (since the pinned posts are copied & posted into the app). Hope that helps and let me know if you need anything further along the way!

Hi CJ,

Could you help me for setting up a search page for my blog at www.anihil.com?

And can you tell me how to configure the glitch app for future modifications?

Thank you!

Hi @anihil! I was able to remix the search app for your blog here. As mentioned above, create a placeholder search post, pin it to the top, and then add the Custom JavaScript below which replaces the href of the placeholder search post with the search app url:

const search = document.querySelector('a[href*="https://anihil.com/search"]');
search.href = 'https://invented-string.glitch.me/';

It should work then. Let me know if that works! I am hoping to write up a definitive guide for remixing/configuring the search app so that if you want to modify it in the future, you can do so from your own Glitch account (note: it is written in Python using Flask and a custom Write.as API library).

Hope this helps and let me know if you have any other questions!

1 Like

I somehow cannot get it to work.

I created a Search page and pinned it to my blog and then pasted that url (which is the same as what you posted) and then updated the Customize Javascript box. Nothing happened.

Did you try accessing the search page from your custom domain? If you try to access the search post from https://write.as/anihil then the JavaScript will not run. It will only run on your custom domain (https://anihil.com). That was a problem I ran into before when trying to do the same thing.

Let me know if that helps!