diff options
author | vimux <vimux@protonmail.com> | 2022-08-29 18:05:17 +0300 |
---|---|---|
committer | vimux <vimux@protonmail.com> | 2022-08-29 18:07:27 +0300 |
commit | fff3eb523d9c6ccb01cef61f0fc556a2c5a5a919 (patch) | |
tree | 968abb774d57f463d80ee113efbb745406540b43 | |
parent | 73e745cf9826b623a6de13ffb9700232f7242638 (diff) |
Update documentation: add Google PSE brief guide
-rw-r--r-- | exampleSite/content/docs/customization.md | 13 | ||||
-rw-r--r-- | exampleSite/content/docs/faq.md | 46 |
2 files changed, 58 insertions, 1 deletions
diff --git a/exampleSite/content/docs/customization.md b/exampleSite/content/docs/customization.md index d28a980..4f706de 100644 --- a/exampleSite/content/docs/customization.md +++ b/exampleSite/content/docs/customization.md @@ -223,6 +223,19 @@ To use a different search engine, first of all, check that the search widget is input.pre = "site:" ``` +**Google PSE**: + +```toml +[Params.widgets.search] + url = "/search/" + input.name = false + input.pre = "" +``` + +Note that Google PSE requires additional steps to work correctly. +See [Creating a Programmable Search Engine](https://developers.google.com/custom-search/docs/tutorial/creatingcse) and +especially our [FAQ]({{< relref "/docs/faq.md" >}} "Mainroad FAQ") for more instructions. + ### Menus **Mainroad** supports multiple menus. The `main` menu is fully responsive and displayed right under the site header. The diff --git a/exampleSite/content/docs/faq.md b/exampleSite/content/docs/faq.md index d733478..6fa84cf 100644 --- a/exampleSite/content/docs/faq.md +++ b/exampleSite/content/docs/faq.md @@ -65,7 +65,7 @@ contributing rules**. All other issues will be closed and marked as invalid. ## Technical questions -**I want to get the `favicon.ico` and `apple-touch-icon.png` to match my `hightlightColor`. What should I do?** +### I want to get the `favicon.ico` and `apple-touch-icon.png` to match my `hightlightColor`. What should I do? There is no way to do this on the fly with Hugo, but you can use the one-liners below with some preparations: @@ -85,4 +85,48 @@ a=#E22D30;a=\\x${a:5:2}\\x${a:3:2}\\x${a:1:2};for i in 98 274 578;do printf $a|d a=#E22D30;a=$(echo 504C54452A2A2A${a:1:6}|sed -e 's/../\\x&/g');printf $a|gzip|tail -c8|od -tx4 -N4 -An|xargs|sed -e 's/../\\x&/g'|printf $a$(cat -)|dd of=static/apple-touch-icon.png bs=1 seek=37 conv=notrunc ``` +### I want to use Google Programmable Search Engine as a site search engine. Is it possible? + +**Yes, it is possible to use [Google PSE (CSE)](https://developers.google.com/custom-search/docs/overview) as a site +search engine.** + +1. Create a new search engine with [Google PSE](https://programmablesearchengine.google.com/about/). Google account +required. + +1. Add a new layout. + + Create file `./layouts/search/index.html` with the following content: + + ``` + {{ define "main" }} + <script async src="https://cse.google.com/cse.js?cx=YOUR_PSE_ENGINE_ID"></script> + <div class="gcse-search"></div> + {{ end }} + ``` + + Don't forget to paste your Google PSE ID. + +1. Add search page by creating file `./content/search.md` with the following content: + + ``` + --- + title: Search + authorbox: false + sidebar: false + pager: false + --- + ``` + +1. Optional. If you use the search widget, don't forget to change the search box parameters: + + ```toml + [Params.widgets.search] + url = "/search/" + input.name = false + input.pre = "" + ``` + +Google PSE (CSE) should work when it's done. Look and feel will be far from perfect, but you have to solve this problem +with [Google PSE Control Panel](https://programmablesearchengine.google.com/controlpanel/all) and additional CSS. + [Edit this page on GitHub](https://github.com/vimux/mainroad/blob/master/exampleSite/content/docs/faq.md) |