我已经使用Google网站站长工具为我的网站创建了搜索引擎。现在,我想自定义CSE给出的结果格式。 Google为我提供了整个下载CSS文件的方法,但是当我将其附加到头部的PHP文档中时,什么也没发生–自定义样式无效。
[当我将Google的样式放在body标签中时,一切正常,但是问题在于这种方式不符合万维网联盟的规则,如果我将代码弄得很脏又不整洁,在页面的主体中插入这么长的CSS代码块。
如何使我的外部样式表更改搜索引擎的默认外观?
您是否能够确定外部CSS样式表是否可用于“自定义Google搜索”框?
这是我今天所做的,它在W3C验证程序中进行验证:
查看此链接:a homepage with Google Custom Search and external stylesheet.
[如果您查看源代码,则可以看到我是从Google自定义搜索的“源CSS”从其“获取代码”页面上的链接下载的。然后,将其上传到我网站的服务器(将CSS更改为自己喜欢的方式)。
然后,我从“获取代码”页面获取了代码的脚本部分,并将其粘贴到主页的HTML中,然后我更改了短语:
google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});
对此:
google.load('search', '1', {language : 'en', style : src="http://hoodexc.com/css/google-search.css"});
[如果知道Java脚本的任何人都可以告诉我一种更好的方法(仅因为此方法有效并不意味着这是最好的方法),请告诉我。
仅在加载Google自定义搜索时提供附加参数“ nocss:true”,以防止Google加载任何要搜索的CSS,因此您可以定义所有gcse-,gs-等。css类自己没有干扰。
nocss:布尔值,告诉API是否加载任何样式表通常与其控件关联。如果您不打算使用默认CSS,则可以通过将其设置为true来减少加载时间。的默认设置为false。
https://developers.google.com/loader/#DetailedDocumentation
代码:
google.load('search', '1', {
callback: OnGoogleSearchLoad,
language : 'en',
nocss: true,
style : src="http://example.com/assets/css/gcse.css"
});
结果(无CSS,网站默认规则除外):
<<GCS的示例CSS文件:
.gsc-tabsAreaInvisible,
.gsc-resultsHeader,
.gsc-branding,
.gcsc-branding,
.gsc-url-top,
.gs-watermark,
.gsc-thumbnail-inside,
.gsc-url-bottom {
display: none;
}
.gsc-result {
padding: 20px 0;
border-bottom: 1px solid #E1E1E1;
}
.gs-image-box {
width: 140px;
height: 80px;
overflow: hidden;
}
img.gs-image {
min-height: 80px;
}
td.gsc-table-cell-thumbnail {
vertical-align: top;
padding: 0;
width: 140px;
display: block!important;
}
td.gsc-table-cell-snippet-close {
vertical-align: top;
padding: 0;
padding-left: 20px;
}
.gsc-wrapper {
font-size: 16px;
line-height: 20px;
}
.gsc-control-cse a {
color: #202020;
font-family: HelveticaNeueLTPro-Cn, Helvetica, Arial, sans-serif;
}
.gs-snippet {
color: #777;
margin-top: 10px;
}
b {
font-weight: normal;
}
.gsc-cursor {
width: 100%;
height: 20px;
text-align: center;
}
.gsc-cursor-page {
display: inline-block;
width: 20px;
height: 20px;
cursor: pointer;
text-align: center;
margin: 20px 0;
}
form.gsc-search-box {
background: #d9dadd;
border: 20px solid #d9dadd;
width: 100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
table.gsc-search-box {
width: 100%;
}
td.gsc-search-button {
vertical-align: middle;
padding-left: 20px;
}
td.gsc-input {
vertical-align: top;
width: 100%;
}
input.gsc-input {
margin:0;
width: 99%;
}
结果(使用自定义样式):