[英]Use an external CSS stylesheet to customise the appearance of the Google CSE
我使用 Google 网站站长工具为我的网站创建了一个搜索引擎。 现在我想自定义 CSE 给出的结果格式。 Google 允许我下载整个 CSS 文件,但是当我将它附加到 head 部分中的 PHP 文档时,没有任何反应 – 自定义样式不起作用。
当我将 Google 的样式放在 body 标签中时,一切正常,但问题是这种方式不符合万维网联盟的规则,而且如果我插入这样的代码,我的代码会变得非常“脏”和不整洁我页面正文中的一长段 CSS 代码。
如何让我的外部样式表改变搜索引擎的默认外观?
只需在加载 Google 自定义搜索时提供附加参数“ nocss: true ”,以防止 Google 加载任何 css 进行搜索,这样您就可以自己定义所有 gcse- 、 gs-等 css 类而不受干扰。
nocss:一个布尔值,它告诉 API 是否加载通常与其控件关联的任何样式表。 如果您不打算使用默认 CSS,则可以通过将其设置为 true 来减少加载时间。 默认设置为假。
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%;
}
结果(自定义样式):
您是否能够确定外部 CSS 样式表是否可用于自定义 Google 搜索框?
这就是我今天所做的,它在 W3C 验证器中进行了验证:
查看此链接:带有 Google 自定义搜索和外部样式表的主页。
如果您查看源代码,您可以看到我从他们的“获取代码”页面上的链接下载了 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 脚本的人可以告诉我更好的方法(仅仅因为它有效并不意味着它是最好的方法)请告诉我。
我想对 Gniewomir 和 Kris 表示感谢。
我正在使用 V1 代码在我的 wordpress 博客上安装两页布局的 google 自定义搜索。 对于搜索框,我将<div id="cse-search-form">Loading</div>
粘贴到文本小部件中,并将脚本的其余部分粘贴到标题中。
我改变了这部分
google.load('search', '1', {language: 'en', style: google.loader.themes.GREENSKY});
到
google.load('search', '1', {language: 'en', nocss:true, style:"http://www.domain-name/wp-content/themes/theme-name/css/gcse.css"});
同时,我下载了 GREENSKY.css 并将其保存为“gcse.css”并上传到我的服务器。
通过 GTMETRIX 运行它,关于 HTTP 重定向的警告消失了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.