搜狐快站移動建站適配教程快適配教學適配

發(fā)布時間：2014-12-01 09:01:20編輯：admin閱讀（1918 ）

 OK 

先說下搜狐適配官方教程

并展示幾個本人制作的案例教程、

快適配是一款將PC網(wǎng)頁快速轉化為快站頁面的插件?？爝m配支持批量轉化頁面，自定義轉化規(guī)則等功能。

1. 新建站點



按照提示填寫站點名稱和域名

如果您想讓手機訪問PC站點時自動跳轉到適配后的頁面，請按照第二步的提示安裝代碼。否則直接跳到下一步。

2. 新建適配模板，模板表示一組頁面結構相同的地址集合，例如一個欄目下的所有文章頁



模板信息包括該模板包含的地址規(guī)則（用正則表達式表示），和一個示例網(wǎng)頁的地址（地址為相對地址），示例網(wǎng)頁用來預覽適配效果



3. 編寫數(shù)據(jù)采集規(guī)則，數(shù)據(jù)采集規(guī)則表示PC網(wǎng)頁內容的選取規(guī)則。操作流程為，拖拽快站組件，單擊組件內容選項卡右上角編輯數(shù)據(jù)采集規(guī)則。

4.0編寫數(shù)據(jù)采集規(guī)則

采集規(guī)則說明：

在代碼編寫框內編寫函數(shù)主體代碼。并可以使用函數(shù)中定義的參數(shù)：

 

componentData: 當前組件的結構數(shù)據(jù)

api : 可以使用的api輔助庫

html : 頁面抓取的代碼

$html : 抓取的代碼轉換后的jQuery 對象在代碼編寫框內編寫函數(shù)主體代碼。并可以使用函數(shù)中定義的參數(shù)：

componentData: 當前組件的結構數(shù)據(jù)

api : 可以使用的api輔助庫

html : 頁面抓取的代碼

$html : 抓取的代碼轉換后的jQuery 對象

 

您可以使用jQuery 的對象查詢方法獲取頁面數(shù)據(jù)，例如: $html.find(“a”) 獲取頁面所有鏈接對象。

 具體的查詢規(guī)則參考jQuery 幫助文檔。

 另外一種查詢規(guī)則是使用正則表達式基于文本的查詢，例如 /([^<].*?)<\/a>/ig.exec(html) 查詢頁面 標簽內的數(shù)據(jù). 更詳細的正則編寫，請參考Javascript 語言規(guī)范。 

 Api 中的輔助函數(shù)： 

     shipeiUrl(string url) -> string 將一個Url轉換為適配站點內的鏈接地址 

     shipeiPic(string url) -> string 將一個圖片轉為適配后圖片（適配圖片將進行最寬640剪裁，并且存儲于快適配的云存儲中）*該方法待上線。 

     $ (string text) -> jquery 對象: 將一段文本轉換為jquery對象

4. 保存，保存后可在適配URL查詢中，查詢適配后的頁面地址

大家只要對正則的表達式 以及JQ的選擇器了解的話，這個應該不會是什么難度。

在控制臺可以找到 console.log(componentData); 輸出的組件的數(shù)據(jù)結構

當你訪問網(wǎng)站的時候在頁面去選擇元素。

這個就是選中圖片的 selector

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

特別需要注意的地方：

你data 里要保持和 componentData 一樣的結構只能修改結構里的數(shù)據(jù)。不能修改結構每一個組件都需要一個數(shù)據(jù)結構，然后和固定的模板。才能出來最后的頁面

好了不廢話簡單貼幾個代碼

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

這是原始網(wǎng)站的logo

jq選擇的情況下為：

//點擊上方預覽按鈕，可以查看該組件的數(shù)據(jù)結構

console.log(componentData);

 //定義返回數(shù)據(jù)的變量 

var data = {

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

}

 //此處編寫代碼為data賦值;

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

 //返回適配后數(shù)據(jù)邏輯,返回數(shù)據(jù)格式需要和componentData保持一致

OK下一步 導航

原始網(wǎng)站代碼



快站適配的適配代碼如下

JavaScript Code復制內容到剪貼板
1. console.log(componentData);  
2.   
3.  //定義返回數(shù)據(jù)的變量   
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. //定義返回數(shù)據(jù)的變量   
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"))