搜狐快站移动建站适配教程快适配教学适配

搜狐快站移动建站适配教程快适配教学适配

发布时间：2014-12-01 09:01:20编辑：admin阅读（1918 ）

 OK 

先说下搜狐适配官方教程

并展示几个本人制作的案例教程、

快适配是一款将PC网页快速转化为快站页面的插件。快适配支持批量转化页面，自定义转化规则等功能。

1. 新建站点



按照提示填写站点名称和域名

如果您想让手机访问PC站点时自动跳转到适配后的页面，请按照第二步的提示安装代码。否则直接跳到下一步。

2. 新建适配模板，模板表示一组页面结构相同的地址集合，例如一个栏目下的所有文章页



模板信息包括该模板包含的地址规则（用正则表达式表示），和一个示例网页的地址（地址为相对地址），示例网页用来预览适配效果



3. 编写数据采集规则，数据采集规则表示PC网页内容的选取规则。操作流程为，拖拽快站组件，单击组件内容选项卡右上角编辑数据采集规则。

4.0编写数据采集规则

采集规则说明：

在代码编写框内编写函数主体代码。并可以使用函数中定义的参数：

 

componentData: 当前组件的结构数据

api : 可以使用的api辅助库

html : 页面抓取的代码

$html : 抓取的代码转换后的jQuery 对象在代码编写框内编写函数主体代码。并可以使用函数中定义的参数：

componentData: 当前组件的结构数据

api : 可以使用的api辅助库

html : 页面抓取的代码

$html : 抓取的代码转换后的jQuery 对象

 

您可以使用jQuery 的对象查询方法获取页面数据，例如: $html.find(“a”) 获取页面所有链接对象。

 具体的查询规则参考jQuery 帮助文档。

 另外一种查询规则是使用正则表达式基于文本的查询，例如 /([^<].*?)<\/a>/ig.exec(html) 查询页面 标签内的数据. 更详细的正则编写，请参考Javascript 语言规范。 

 Api 中的辅助函数： 

     shipeiUrl(string url) -> string 将一个Url转换为适配站点内的链接地址 

     shipeiPic(string url) -> string 将一个图片转为适配后图片（适配图片将进行最宽640剪裁，并且存储于快适配的云存储中）*该方法待上线。 

     $ (string text) -> jquery 对象: 将一段文本转换为jquery对象

4. 保存，保存后可在适配URL查询中，查询适配后的页面地址

大家只要对正则的表达式 以及JQ的选择器了解的话，这个应该不会是什么难度。

在控制台可以找到 console.log(componentData); 输出的组件的数据结构

当你访问网站的时候在页面去选择元素。

这个就是选中图片的 selector

用刚才找到的selector 取image 的 src 基本就是抓取的思路

特别需要注意的地方：

你data 里要保持和 componentData 一样的结构只能修改结构里的数据。不能修改结构每一个组件都需要一个数据结构，然后和固定的模板。才能出来最后的页面

好了不废话简单贴几个代码

 <div class="logo"><img src="/images/logo.png" /></div>

这是原始网站的logo

jq选择的情况下为：

//点击上方预览按钮，可以查看该组件的数据结构

console.log(componentData);

 //定义返回数据的变量 

var data = {

  image :$html.find('.logo').attr("src");

}

 //此处编写代码为data赋值;

//image:$html.find('.logo').find("img").src();

 //返回适配后数据逻辑,返回数据格式需要和componentData保持一致

OK下一步 导航

原始网站代码



快站适配的适配代码如下

JavaScript Code复制内容到剪贴板
1. console.log(componentData);  
2.   
3.  //定义返回数据的变量   
4.   
5.  var data = componentData;    
6.   
7.  //此处编写代码为data赋值;  
8.   
9. data.items = [];  
10.   
11. console.log($html.find('.navbj>.nav.center > A'));  
12.   
13. $html.find('.navbj>.nav.center > A').each(function(){  
14.   
15.   var $this =api.$(this);   
16.   
17.   data.items.push({  
18.   
19.      
20.   
21.     link: api.shipeiUrl( $this.attr("href")),  
22.   
23.     link_res_type:0,  
24.   
25.     title:$this.text()  
26.   
27.   })   
28.   
29. })  

 

这个是抓取新闻的或者是标题的适配代码
JavaScript Code复制内容到剪贴板
1. //定义返回数据的变量   
2.  var data = componentData;    
3.  //此处编写代码为data赋值;  
4.    
5. var item = $html.find('.cut0.Area>.cc>#top > .con.clear:eq(0) a:eq(0)');  
6. data.text=item.text();  
7.    
8. data.link_res_type=1;  
9.    
10. data.link =api.shipeiUrl( item.attr("href"))  

关键字词：搜狐快站,搜狐快站适配教程,快适配教学,