google cse with mono theme

[bluenor]

Hi, first of all let me congratulate you on this tool which is great. However, I have a problem and I am sure I am missing something.
I am trying to create a search page on the site I am creating using it as a mono theme and I have tried two ways:

By directly pasting the script code in html mode into the editod from google cse.

But sfotunately, although this solution functionally works, in the sense that it returns the search parameters, it appears to me graphically completely different from what I expected. In fact, it appears to me like this:

When I from an empty html page without css, I see it correctly like this:

So I tried a different approach and tried the Google Custom Search Plugin addon taking the guide in the link as a reference:
https://getpublii.com/docs/google-custom-search.html

Again, even though I have changed the parameters in the config.json of the theme as indicated and even though I have entered the code snippets, in the html section of the page editor, it looks like this:

And as if the program ignores that these are snippets. Surely I'm doing something wrong, missed something or didn't understand the guide properly. I am putting the snippets in the html section of the editor after obviously following all the points in the guide.

Would anyone feel like telling me where I am going wrong? Thank you.

[candidexmedia]

And as if the program ignores that these are snippets. Surely I'm doing something wrong, missed something or didn't understand the guide properly. I am putting the snippets in the html section of the editor after obviously following all the points in the guide.

The {{{@customSearchInput}}} and {{{@customSearchContent}}} are Handlebars tags/expressions, not HTML tags. As such, they can only be used in .hbs files files in your site folder, and added using a text editor. It's not intended to be used inside of the Publii GUI post editor.

You'll want to add that Handlebars code in a .hbs file as indicated in the docs you linked to (search.hbs, etc). You could also try creating a new post template in your site folder (using a text editor) with the search results handlebars code, then create a post/page using that template in the Publii GUI.

[michaelfluegge]

"search.hbs - A dedicated search results page template. This template is necessary for themes that intend to offer enhanced search capabilities or integrate with specific search plugins, such as a Google Search plugin. "
https://getpublii.com/dev/theme-structure/

Try a google search: "publii" "search.hbs"

[bluenor]

Thank you very much for your answers, and I hope you will forgive me if I ask questions that seem obvious but I am new to Publii.
So if I understand correctly, inside the folder:
./resources/app.asar.unpacked/default-files/default-themes/simple/
There is the unpacked theme currently in use which is mono. Here is a file called search.hbs which has the following content:

{{> head}}
{{> navbar}}
<main class="page page--search">
   <div class="content search-page">
      <div class="hero {{#checkIfNone featuredImage.url}}hero--noimage{{/checkIfNone}}">
         <header class="hero__content {{#checkIf @config.custom.alignHero '==' "center" }}hero__content--centered{{/checkIf}}">
            <div class="wrapper">
               <h1>
                  {{ translate 'search.title' }}
               </h1>
            </div>
         </header>
      </div>
      <div class="entry-wrapper content__entry">
         {{{@customSearchContent}}}
      </div>
   </div>
</main>
{{> footer}}

This file already contains customSearchContent but does not contain customSearchInput. Should I add it somewhere? Then how can I make it visible on a page I call Search on Publii?

[michaelfluegge]

I would go for it and look, what happen.

[candidexmedia]

No need to apologize @bluenor : This is what the forum is for. 🙂 We were all once in your shoes.

So if I understand correctly, inside the folder:
./resources/app.asar.unpacked/default-files/default-theme

You'll want to edit the site theme folder, as mentioned in the docs. On Windows, this looks something like:

C:\Users\username\Documents\Publii\sites\my-site\input\themes\theme-name

Create a theme override to be safe.

This file already contains customSearchContent but does not contain customSearchInput. Should I add it somewhere? Then how can I make it visible on a page I call Search on Publii?

I'm running an older version of a Publii theme on one of my sites, but I had some luck accessing the singular search page by adding
/search at the end of my site's live URL (I'm using the Google search plugin with the Mercury theme).

Here's what my search.hbs file looks like:

{{> head}}
   {{> navbar}}
	<main class="page page--search">
		<div class="hero wrapper">
			<h1>
				{{ translate 'search.search' }}
			</h1>                
		</div>		
		<div class="wrapper">
			{{{@customSearchContent}}}
		</div>
	</main>
{{> footer}}

And the live Search page looks like this: