目前本站的主题使用之前就介绍过的Liebling,之所以选择Liebling是因为在GithubLiebling的教学是最为详细的,而且依照这些教学我就能很轻易的加入我所想要的功能例如:搜索以及暗色主题。

但是我发现似乎Ghost搜索对中文的支援并不是很完全,再来就是我的网站使用的是简体中文,如果读者使用繁体中文在站内搜索的话,可能就搜索不到文章,当年的我也碰到浏览繁体网站,也是有搜索不到相关内容的问题。

因为如此我对于这件事还是比较执着的,为此我决定在Liebling作者的建议下,我们只需到修改 Search.hbsGoogle Programmable Search 加入,这样读者就能不论是以任何字体都能搜索到网站中的内容了!

在此之前可别忘了在Site Header开启搜索🔍功能,至于如何加入可以参考How to enable search

<script>
  const ghostSearchApiKey = 'YOUR_CONTENT_API_KEY_GOES_HERE'
</script>
How to enable search

我们第一步就是要到Google Programmable Search建立客制搜索项目:

这里由上到下为大家讲解步骤,只要到 新搜索引擎New search engine 中填入网站网址Sites to search (网址允许用户添加多个网址)接着在 语言Language 下拉选单中选择 All langguages 如此不管读者使用什么语言搜索都能搜索到想要的关键字的相关文章,然后将这新建立 搜索引擎命名Name of the search engine ,最后点击最下方的 创建Create 即可。

创建完毕后,就能看到以下画面,获取代码Get code 将会是加入网站的代码就行了,也可以到Public URL测试是否能确实的搜索到你想要的网站内容,另外我们也可以到控制面板Control Panel 进行更进一步的修改。

从Programmable Search获得的代码大概是长这样子:

 <script async src="你的代码"></script>
	<div class="gcse-search"></div>

因为本站使用的是Liebling主题,Liebling作者的建议是在 Search.hbs 加入Programmable Search代码:

<div class="m-search js-search" role="dialog" aria-modal="true" aria-label="Search">
  <button class="m-icon-button outlined as-close-search js-close-search" aria-label="Close search">
    <span class="icon-close" aria-hidden="true"></span>
  </button>
  <div class="m-search__content">
    <script async src="你的代码"></script>
      <div class="gcse-search">
      </div>
  </div>
</div>

更改完毕后,记得 重启ghost才能套用设定。

ghost restart

控制面板Control Panel

控制面板Control Panel 除了客制搜索栏的面板之外,又或是加入广告,或是将推荐链接置顶。

移动平台mobile devices

点击🔍就能呼叫Google Search Bar,做的很不错。看似一切都往好的方向发展,但万万没想到的是 Google Search Bar 在移动平台上无法显示,更具Google的说法,如果搜索栏Search Bar 同时呈现在移动平台上最好是使用紧凑布局compact layout

Note:      Search element, when paired with a compact layout, works well on mobile devices. - https://developers.google.com/custom-search/docs/ui

#gsc.tab=0

当你发现每当点击搜索后,url后都会出现 #gsc.tab=0 ,如果想url看起来简洁,我们可以到 Programmable Search > Search features > Websearch Settings > Results Browsing History给关掉即可;或是参考这篇

但是更换主题了 - DAWN

因为将主题更换为更加简洁的DAWN,暂时还没找到任何方法将Google Search整合到搜索代码中,所以如果看到🔍其实只能使用英文搜索,正因如此,换了个折中的方法,就是直接使用公开网域Public URL ,也就是说我只要在导览菜单menu 中加入就能转跳到Google搜索

另外我所注意到的问题是,在暗色背景下使用下方的搜索栏将会看不到以输入的搜索栏的文字。

2021/06/19 更新 - 我发现一直以来无法在手机上看到搜索栏的问题终于解决了,就是在Clouldflare 中将minify设定中将 JavaScript 选项取消即可。

总结

就像《心情写照 2021 二月篇》写到:

目前正在着手在网站加入Google Search,减少主机的负担 …… - 心情写照 2021 二月篇

在网站加入Google Search的目的,除了上文提到的搜索在中文搜索没这么理想外,还有为了减少主机的负担。另外特别感谢Liebliang作者以及Google Search Engine论坛帮助下才能顺利将Google Search加入本站。

如果是其他Ghost主题,可以参考这篇里详细的讲解如何在 index.hbs 加入Google搜索栏。

参考:

Ghost 免费主题
Ghost 免费主题推荐 。经过一段时间的试用,Ghost博客平台的轻快,真的让人向往,但是理想总是丰满,现实却很骨干,已经解决安装的问题,原先计划的下一步是将网站搬到 Ghost 平台。Ghost 目前还没WordPress 这般的全能,但是也让作者能专注在写作上,既然 Ghost 的坑 [/tag/ghost-cms/]开始了就试用 Ghost上的优质免费主题心得。 如何安装 Ghost 主题?首先把下载好的【主题.zip】,upload 便可。 Ghost 免费主题Casper [https://github.com/TryGhost/Casper]Casper 是 Gh…