Google 自定义搜索 (CSEv2) 对样式的帮助？

Question

我在设置Google Custom Search 框的样式（不是结果）方面需要帮助

旧样式使用form 标签，您可以在其中轻松设置搜索框的外观和风格。

<form action="/search" id="searchbox_abc:123" class="search">
    <input type="hidden" name="cx" value="abc:12">
    <input type="hidden" name="cof" value="FORID:XX">
    <input type="text" name="q" size="16" class="smalltext">                    
    <input type="submit" name="sa" value="SEARCH" class="smalltext">
</form>

使用新的 CSEv2 代码，它包含在脚本标签中：

<script>
  (function() {
    var cx = 'abc:123';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>

并且您必须将以下标签放在您希望显示搜索框的位置。

<gcse:search></gcse:search>

我需要有关如何将新的 CSE 设置为看起来像以前的样式的帮助。 （字体大小、按钮和输入字段大小..等，样式与之前完全相同..应用类/设置字体..等）

谢谢！

Answer 1

您不需要做所有这些，只需将其添加到谷歌搜索的末尾<script>标签就像这样：

<script>
    (function() {
        var cx = '017524632059031635296:oiqsdcln6tk';
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
    })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

确保在结束脚本标记的底部添加<gcse:searchresults-only ></gcse:searchresults-only> 并添加您自己的表单例如：

<form action="" method="GET">
  <input class="input" name="q" placeholder="Search...">
</form>

然后样式它就像您为任何常规 HTML 标记设置样式一样，您就可以开始了！它的工作方式与过去完全一样。 PS。如果您不想将用户带到其他地方查看示例 search.html，只需添加此 <form action="search.html" method="GET"> 插入此 <form action="" method="GET">

希望对您有所帮助！ -Arqetech

Answer 2

1. 使用内置于 Google Chrome 或 Firefox 浏览器中的 DOM 检查工具。 （右键单击一个元素并选择“检查”。）这将允许您确定元素 ID/类及其当前样式。

2. 编写覆盖这些样式的 CSS 规则，如下所示：

   input.gsc-input {}
   input.gsc-search-button {}
   form.gsc-search-box {}
   div.gsc-control-cse {}
   

Answer 3

在CSE page，

1. 选择您要设置样式的搜索引擎。
2. 点击Look and feel
3. 点击Customize标签

这有用于主题化您希望设置样式的任何 CSE 组件的选项。

更新

如果您需要比控制面板中提供的选项更多的选项，则必须使用the API，使用它的示例在页面底部。

您会特别对Custom Search Element Control API 感兴趣，您可以在其中指定哪个 HTML 标记、元素的 id，然后您可以使用它。

Sample Demo：

<div id="test"></div>
<style type="text/css">
    #test input {
      font-size: 32px;
      color: red;
    }
</style>

<script>
var myCallback = function() {
  if (document.readyState == 'complete') {
    google.search.cse.element.render({
          div: "test",
          tag: 'search'
   });
  } else {
    google.setOnLoadCallback(function() {
        google.search.cse.element.render({
              div: "test",
              tag: 'search'
            });
    }, true);
  }
};

window.__gcse = {parsetags: 'explicit', callback: myCallback};
(function() {
  var cx = '008717607452966325908:cegvvfhkhvk'; // Insert your own Custom Search engine ID here
  var gcse = document.createElement('script'); gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
      '//www.google.com/cse/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>

Answer 4

清除水印：

.gsc-clear-button{
 display:none !important;
}
.cse input.gsc-input,input.gsc-input{
background-image:none !important;
height:30px !important;
}

Answer 5

我得到这个工作的方式.. 1.在google脚本中设置async为false（gcse.async = false）； 2.在下面添加css。这可能取决于加载 css 的顺序！

.gsc-control-cse{ 填充：0！重要； }

Answer 6

您需要将搜索框的文件和结果分开。

对于主文件：

<form action="/search.html" method="get"><!--Change /search.html to your 
results file-->
    <input type="text" name="search" placeholder="Search..">
    <input type="submit" name="q" value="Submit">
</form>
<style>
    input[type=text] {
        width: 150px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-position: 10px 10px; 
        background-repeat: no-repeat;
        padding: 10px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }

    input[type=text]:focus {
        width: 300px;
    }

    input[type=submit] {
        width: 100px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background-color: white;
        background-position: 10px 10px; 
        background-repeat: no-repeat;
        padding: 10px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }
</style>

对于结果文件（默认：search.html）：

<script>
    (function() {
        var cx = 'abc:123';
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
    })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

如果它不起作用，可能是因为您的网站不在 Google 搜索引擎上，或者可能是代码错误？如果不行请回复。