How should I customize the blog search result.

Highlighted
New Contributor

Hi, I've created a search result page (https://blog.aurorasolar.com/search?term=construction&type=SITE_PAGE&type=BLOG_POST&type=LISTING_PAG...) and I want to show the author's name and avatar along with the result.

 

How should I achieve this effect?

Reply
0 Upvotes
5 Replies 5
HubSpot Moderator

Hi @zwang,

 

Something like this I think may be possible, but there's a few steps to it. I think currently you're just using the default Site Search Results module? If you want to customize the search results, you'll want to clone that module.

 

And if you look at how it's built, there's basically some HTML in the form of a <template> . There's JS that runs which makes a request to the CMS Site Search API documented here: https://developers.hubspot.com/docs/methods/content/search-for-content. The default HTML has elements like a.hs-search-results__title and p.hs-search-results__description . When the JS runs, there's a function addResult() which fills these elements by using the JSON from the Site Search API. If you adjust the addResult() function, you can fill in the author names using the property authorFullName, which is returned in the response from the Site Search API. I think the author avatar doesn't come through in this API. But you may be able to create something custom in combination with HubL's blog_authors() function: https://designers.hubspot.com/en/docs/hubl/hubl-supported-functions#blog-authors.

 

I hope this helps.

 

Leland Scanlan

HubSpot Developer Support
Reply
0 Upvotes
New Contributor

Hi @lscanlan , thanks for the reply! It's very helpful. But could you help me find the js file that links to the html file? I have trouble finding it.

Reply
0 Upvotes
HubSpot Moderator

Hey @zwang,

 

Sorry, I should have been clearer about how that works. So I was referring to the JS field of the Site Search Results module itself. If you right click the module from your template, you'll see an option to "Edit module source code". This should look like a custom module, except that you can't edit the default module. So you'd need to clone it, and then use the clone on your template. Within the module you'll see three fields: HTML + HubL, CSS, and JS. You'll find it in the JS field. It will look something like this:

 

siteSearchResultsModule.png

 

 

Let me know if this helps? Or if you're looking for something else I'm happy to dig in more.

 

Leland Scanlan

HubSpot Developer Support
Reply
0 Upvotes
New Contributor

Thanks @lscanlan , this is very helpful. One more question, can you suggest under which folder in google chrome devtool can I find the JS source code for the search result module? I think it will help a lot for me to understand how the code works by setting some breakpoint.

Reply
0 Upvotes
New Contributor

Hi @lscanlan , I read through the api document and I think I should use Blog API and Authors API to retrieve more info about the serch result.

 

The search result retures the blog ID which I can use to query for more information about certain blog and it's useful. However, when it comes to author, I don't think there is a way to get the author ID from search result (even the Blog API doesn't contain author ID https://developers.hubspot.com/docs/methods/blogv2/get_blogs_blog_id

 

I did found out that I can use author search API to search for an author by his/her name but it returns an array of authors which I'm afraid might not be the data that I want.

 

Could you suggest how should I get the author ID given a blog ID? Also, the API will need a OAuth Access Token or API Key. Could you also point out where can I get one?

 

Thanks!

Reply
0 Upvotes