~xdavidwu/xdavidwu.link

079909bc6f057df02ef69d45278052d7189989b7 — user414 6 years ago 4c6d5d3
Implement feature #1652 google custom search support.  (#1667)

Implement feature #1652 google custom search support. For now we only support the look and feel "results only" and the engine must be set to use that layout. Add a google section to the search providers and search_form and search layout.

Close #1652
M _config.yml => _config.yml +4 -2
@@ 60,13 60,15 @@ atom_feed:
  path                   : # blank (default) uses feed.xml
search                   : # true, false (default)
search_full_content      : # true, false (default)
search_provider          : # lunr (default), algolia
search_provider          : # lunr (default), algolia, google
algolia:
  application_id         : # YOUR_APPLICATION_ID
  index_name             : # YOUR_INDEX_NAME
  search_only_api_key    : # YOUR_SEARCH_ONLY_API_KEY
  powered_by             : # true (default), false

google:
  search_engine_id       : # YOUR_SEARCH_ENGINE_ID
  instant_search         : # false (default), true
# SEO Related
google_site_verification :
bing_site_verification   :

M _includes/scripts.html => _includes/scripts.html +3 -1
@@ 17,10 17,12 @@
  {%- case search_provider -%}
    {%- when "lunr" -%}
      {% include search/lunr-search-scripts.html %}
    {%- when "google" -%}
      {% include search/google-search-scripts.html %}
    {%- when "algolia" -%}
      {% include search/algolia-search-scripts.html %}
  {%- endcase -%}
{% endif %}

{% include analytics.html %}
{% include /comments-providers/scripts.html %}
{% include /comments-providers/scripts.html %}
\ No newline at end of file

A _includes/search/google-search-scripts.html => _includes/search/google-search-scripts.html +31 -0
@@ 0,0 1,31 @@
<script>
    (function () {
        var cx = '{{ site.google.search_engine_id }}';
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
    })();

    function googleCustomSearchExecute() {
        var input = document.getElementById('cse-search-input-box-id');
        var element = google.search.cse.element.getElement('searchresults-only0');
        if (input.value == '') {
            element.clearAllResults();
        } else {
            element.execute(input.value);
        }
        return false;
    }

    {% if site.google.instant_search %}
    $(document).ready(function () {
        $('input#cse-search-input-box-id').on('keyup', function () {
            googleCustomSearchExecute();
        }
        );
    });
    {% endif %}
</script>

M _includes/search/search_form.html => _includes/search/search_form.html +7 -0
@@ 4,6 4,13 @@
  {%- when "lunr" -%}
    <input type="text" id="search" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
    <div id="results" class="results"></div>
  {%- when "google" -%}
    <form onsubmit="return executeQuery();" id="cse-search-box-form-id">
    <input type="text" id="cse-search-input-box-id" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
    </form>
    <div id="results" class="results">
        <gcse:searchresults-only></gcse:searchresults-only>    
    </div>
  {%- when "algolia" -%}
    <div class="search-searchbar"></div>
    <div class="search-hits"></div>

M _layouts/search.html => _layouts/search.html +7 -0
@@ 27,6 27,13 @@ layout: default
      {%- when "lunr" -%}
        <input type="text" id="search" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
        <div id="results" class="results"></div>
      {%- when "google" -%}
        <form onsubmit="return executeQuery();" id="cse-search-box-form-id">
        <input type="text" id="cse-search-input-box-id" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
        </form>
        <div id="results" class="results">
            <gcse:searchresults-only></gcse:searchresults-only>    
        </div>
      {%- when "algolia" -%}
        <div class="search-searchbar"></div>
        <div class="search-hits"></div>