jeffreytse / jekyll-spaceship

🚀 A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, mermaid, emoji, video, audio, youtube, vimeo, dailymotion, soundcloud, spotify, etc.
MIT License
606 stars 63 forks source link

After <head> tag contents moved under the <body> tag , some legacy functions are not working. #46

Closed honggaruy closed 3 years ago

honggaruy commented 3 years ago

Before I apply jekyll-spaceship , I got the following structure of my web page

<!DOCTYPE html>
<html>
   <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
         <title> ... </title>
         .......
         <link rel= "icon" type="image/png" sizes="32x32" href="/resources/icon/favicon-32x32.png">
         ......
         <script type="text/javascript" async="" src="https://cse.google.com/cse.js?cx=....."></script>
         ...... 
         <some chrome extension style tags>
    <head>

   < body> 
       <header> ... </header>
       <div id="home-search">
           <script  for google custom search >
           < googles custom search results are displayed here. >
       </div>
       <footer> ...</footer>
       .....
   </body>

After I apply jekyll-spacship, the structure of my web page changed like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitionall//EN .....>
<head> 
       <some chrome extension style tags>
</head>
<html>  
   < body> 
       <div>
           <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title> ... </title>
             .......
            <link rel= "icon" type="image/png" sizes="32x32" href="/resources/icon/favicon-32x32.png">
             ......
            <script type="text/javascript" async="" src="https://cse.google.com/cse.js?cx=....."></script>
             ......         
            <header> ... </header>
            <div id="home-search">
                    <script  for google custom search >
                    < google custom search result is empty>
            </div>
             <footer> ...</footer>
              .....
      </div>
   </body>

My original <head> tag has favicon and google custom search functions and worked well without jekyll-spaceship Afte I install jekyll-spaceship , the position of favicon and google custom search have been moved under the <body> tag and they do not work anymore.

Do you have any solution for this ?

jeffreytse commented 3 years ago

Hi @honggaruy

Could you update your plugin to the latest version and try again? I think this issue has been fixed on the commit 39cfb51.

Thanks and regards

honggaruy commented 3 years ago

Hi , I want to share the result.

After I applied the latest version , almost 90% page structure came back.

The favicon appears again. But, the google custom search is still not working.

Here, you can find the difference between with and without jekyll spaceship.

Compare the result between Revisions

Revision 1 has no jekyll-spaceship and it works well with the google custom search result. Revision 2 applied jekyll-spaceship and it does not show any search result.

I think the major difference between them is 76 or 78 line.

(working good) <gcse:search linkTarget="_parent" queryParameterName="searchString"></gcse:search>
(not working) <search linktarget="_parent" queryparametername="searchString"></search>

When the google custom search is working, the gcse:search tag contents are changed to the search result. But , in the not working situation, the search tag part remain as it was.

Let me know why the gcse part is removed with jekyll-spaceship.

jeffreytse commented 3 years ago

Hi @honggaruy

Could you use the class style as <div class="gcse-search"> by the gcse doc, currently the nokogiri gem doesn't support the namespace-based tag, so it will output a wrong tag for the namespace-based tag.

Thanks and regards

honggaruy commented 3 years ago

Your solution works well !! 👍 According to gcse doc , data- prefix was needed for all attributes additionally.

<div class="gcse-search data-linkTarget="_parent" data-queryParameterName="searchString"></div>