实装示例
搜索框示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mf-x page</title>
<!-- ↓CSS -->
<link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-sbox.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">
<style type="text/css">
html, body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<!-- ↓ 把自定义元素放在此树形结构下 -->
<div class="mf_finder_container">
<!-- ↓自定义元素版搜索框 -->
<mf-search-box
submit-text=""
ajax-url="//mfx-sample.marsflag.com/x_search.x"
serp-url="minimum.html#/"
doctype-hidden
options-hidden
></mf-search-box>
</div>
<!-- ↓用于MF搜索框的js -->
<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-sbox.js" charset="UTF-8"></script>
</body>
</html>搜索结果页面的示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mf-x minimum</title>
<!-- ↓CSS -->
<link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">
<style type="text/css">
html, body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<!-- ↓ 把自定义元素放进这个树形结构 -->
<div class="mf_finder_container">
<!-- ↓自定义元素版搜索框 -->
<mf-search-box
submit-text=""
ajax-url="//mfx-sample.marsflag.com/x_search.x"
doctype-csv="html,pdf"
></mf-search-box>
<!-- ↓自定义元素版推荐网页(zubaken) -->
<mf-zubaken></mf-zubaken>
<!-- ↓系统元素 -->
<mf-search-results></mf-search-results>
</div>
<!-- ↓搜索结果画面用js -->
<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script>
</body>
</html>如何做
基本规则
- 根据目的使用script标签加载下面的js。
- 在
.mf_finder_container下为MarsFinder设置一个自定义元素。 - 设置适当的CSS。
如何安装搜索框
<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-sbox.js" charset="UTF-8"></script>把这段代码放在body最底部。
自定义元素版搜索框 <mf-search-box></mf-search-box>
把它设置在.mf_finder_container下。 如果要安装在网站上的搜索框中常见的共享头部文件中有困难，那么可以在共用头部文件中添加.mf_finder_header，再在其下面设置.mf_finder_container。
如何制作搜索结果页面
把如下代码放在body最底部。 <script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script>
自定义元素版搜索框<mf-search-box></mf-search-box>
标签需放在.mf_finder_container中。
自定义元素版搜索结果<mf-search-results></mf-search-results>
标签需放在.mf_finder_container中。
自定义元素版推荐网页<mf-zubaken></mf-zubaken>
标签需放在.mf_finder_container中。
默认CSS
对于搜索框
搜索框，同时窗口也显示搜索结果
用于响应式设计
在加载完上述CSS之后，加载下面CSS - //c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp-resp.css
语言支持
切换语言代码，可以通过比自定义元素更高的元素(也可以在body标签设置)或自定义元素本身，通过更改lang属性来实现。
显示字词等的切换是由上面提到的默认CSS完成的。 您也可以通过在页面中额外添加CSS来进行自定义。
目前它支持以下语言。
| 语言 | 语言代码 |
|---|---|
| 英文 | en 或 en-US 或不设置 |
| 日语 | ja 或 ja-JP |
| 中文 (简体) | zh 或 zh-CN |
| 中文 (繁体) | zh-tw |
| 韩国语 | kr |
| 西班牙语 | es |
| 葡萄牙语 | pt 或 pt-BR |
| 阿拉伯语 | ar |
| 泰国语 | th |
| 意大利语 | it |
| 印度尼西亚语 | id |
| 荷兰语 | nl |
| 希腊语 | el |
| 德语 | de |
| 土耳其语 | tr |
| 法语 | fr |
| 越南语 | vi |
| 波兰语 | pl |
| 拉脱维亚语 | lv |
| 立陶宛语 | lt |
| 俄语 | ru |
| 波斯语 | fa |
操作要求
应用版本
搜索框转换到常规搜索结果画面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mf-x page_classic</title>
<!-- ↓CSS -->
<link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-sbox.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">
<style type="text/css">
html, body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<!-- ↓ 把自定义元素放入下面树形结构中—>-->
<div class="mf_finder_container">
<!-- ↓自定义元素版搜索框 -->
<mf-search-box
submit-text=""
ajax-url="//mfx-sample.marsflag.com/x_search.x"
doctype-hidden
options-hidden
use-std-serp
></mf-search-box>
</div>
<!-- ↓MF搜索框用js -->
<script type="text/javascript" src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-sbox.js" charset="UTF-8"></script>
</body>
</html>搜索结果页面使用query string传递参数而不使用hash
如果是想替换Google Custom Search的搜索结果页面，则将搜索框保持原样即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mf-x minimum_nohash</title>
<!-- ↓CSS -->
<link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">
<style type="text/css">
html, body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<!-- ↓ 把自定义元素版搜索框放入下面树形结构 -->
<div class="mf_finder_container">
<!-- ↓custom-element search box -->
<mf-search-box
submit-text=""
ajax-url="//mfx-sample.marsflag.com/x_search.x"
doctype-csv="html,pdf"
></mf-search-box>
<!-- ↓自定义元素版推荐网页 -->
<mf-zubaken></mf-zubaken>
<!-- ↓系统元素 -->
<mf-search-results></mf-search-results>
</div>
<!-- ↓描述了使用query string传递参数，而不是使用hash -->
<script type="text/javascript">
!function(){
var G = GALFSRAM = window.GALFSRAM || {}
G.mfx = G.mfx || {}
G.mfx.router_mode = 'history'
}();
</script>
<!-- ↓MF搜索结果用js -->
<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script>
</body>
</html>在搜索框，用iframe以浮层形式显示搜索结果
其他功能
辅助搜索功能
层级筛选
- 渲染部分 (只在页面宽度大于等于1024像素时显示)
关键词排名
- 渲染部分 (只在页面宽度大于等于1024像素时显示)
相关关键词
封装切换
- 渲染部分 (仅在页面宽度小于1024像素时显示)
层级筛选切换
- 渲染部分 (仅在页面宽度小于1024像素时显示)
关键词排名切换
- 渲染部分 (仅在页面宽度小于1024像素时显示)
相关关键词切换
- 渲染部分 (仅在页面宽度小于1024像素时显示)