這是簡易數據分析系列的第 13 篇文章。
在前面的課程里，我們抓取的數據都是在同一個層級下的內容，探討的問題主要是如何應對市面上的各種分頁類型，但對於詳情頁內容數據如何抓取，卻一直沒有介紹。
比如說我們想抓取 b 站的動畫區 TOP 排行榜的數據：
https://www.bilibili.com/ranking/all/1/0/3
按之前的抓取邏輯，我們是把這個榜單上和作品有關的數據抓取一遍，比如說下圖里的排名、作品名字、播放量、彈幕數和作者名。
經常逛 B 站的小伙伴也知道，UP 主經常暗示觀看視頻小伙伴三連操作（點贊+投幣+收藏），由此可見，這 3 個數據對視頻的排名有一定的影響力，所以這些數據對我們來說也有一定的參考價值。
但遺憾的是，在這個排名列表里，並沒有相關數據。這幾個數據在視頻詳情頁里，需要我們點擊鏈接進去才能看到：
今天的教程內容，就是教你如何利用 Web Scraper，在抓取一級頁面（列表頁）的同時，抓取二級頁面（詳情頁）的內容。
1.創建 SiteMap
首先我們找到要抓取的數據的位置，關鍵路徑我都在下圖的紅框里標出來了，大家可以對照一下：
然后創建一個相關的 SiteMap，這里我取了個 bilibili_rank 的名字：
2.創建容器的 selector
設置之前我們先觀察一下，發現這個網頁的排行榜數據是 100 條數據一次性加載完的，沒有分頁的必要，所以這里的 Type 類型選為 Element 就行。
其他的參數都比較簡單，就不細說了（不太懂的可以看我之前的基礎教程）這里截個圖大家可以做個參考：
3.創建列表頁子選擇器
這次子選擇器要抓取的內容如下，也都比較簡單，截個圖大家可以參考一下：
- 排名（num）
- 作品標題（title）
- 播放量（play_amount）
- 彈幕量（danmu_count）
- 作者：（author）
如果做到這一步，其實已經可以抓到所有已知的列表數據了，但本文的重點是：如何抓取二級頁面（詳情頁）的三連數據？
跟着做了這么多爬蟲，可能你已經發現了，Web Scraper 本質是模擬人類的操作以達到抓取數據的目的。
那么我們正常查看二級頁面（詳情頁）是怎么操作的呢？其實就是點擊標題鏈接跳轉：
Web Scraper 為我們提供了點擊鏈接跳轉的功能，那就是 Type 為 Link 的選擇器。
感覺有些抽象？我們對照例子來理解一下。
首先在這個案例里，我們獲取了標題的文字，這時的選擇器類型為 Text：
當我們要抓取鏈接時，就要再創建一個選擇器，選的元素是一樣的，但是 Type 類型為 Link：
創建成功后，我們點擊這個 Link 類型的選擇器，進入他的內部，再創建相關的選擇器，下面我錄了個動圖，注意看我鼠標強調的導航路由部分，可以很清晰的看出這幾個選擇器的層級關系：
4.創建詳情頁子選擇器
當你點擊鏈接后就會發現，瀏覽器會在一個新的 Tab 頁打開詳情頁，但是 Web Scraper 的選擇窗口開在列表頁，無法跨頁面選擇想要的數據。
處理這個問題也很簡單，你可以復制詳情頁的鏈接，拷貝到列表頁所在的 Tab 頁里，然后回車重新加載，這樣就可以在當前頁面選擇了。
我們在類型為 Link 的選擇器內部多創建幾個選擇器，這里我選擇了點贊數、硬幣數、收藏數和分享數 4 個數據，這個操作也很簡單，這里我就不詳細說了。
所有選擇器的結構圖如下：
我們可以看到 video_detail_link 這個節點包含 4 個二級頁面（詳情頁）的數據，到此為止，我們的子選擇器已經全部建立好了。
5.抓取數據
終於到了激動人心的環節了，我們要開始抓取數據了。但是抓取前我們要把等待時間調整得大一些，默認時間是 2000 ms，我這里改成了 5000 ms。
為什么這么做？看了下圖你就明白了：
首先，每次打開二級頁面，都是一個全新的頁面，這時候瀏覽器加載網頁需要花費時間；
其次，我們可以觀察一下要抓取的點贊量等數據，頁面剛剛加載的時候，它的值是 「--」，等待一會兒后才會變成數字。
所以，我們直接等待 5000 ms，等頁面和數據加載完成后，再統一抓取。
配置好參數后，我們就可以正式抓取並下載了。下圖是我抓取數據的一部分，特此證明此方法有用：
6.總結
這次的教程可能有些難度，我把我的 SiteMap 分享出來，制作的時候如果遇到難題，可以參考一下我的配置，SiteMap 導入的功能我在第 6 篇教程里詳細說明了，大家可以配合食用：
{"_id":"bilibili_rank","startUrl":["https://www.bilibili.com/ranking/all/1/0/3"],"selectors":[{"id":"container","type":"SelectorElement","parentSelectors":["_root"],"selector":"li.rank-item","multiple":true,"delay":0},{"id":"title","type":"SelectorText","parentSelectors":["container"],"selector":"a.title","multiple":false,"regex":"","delay":0},{"id":"author","type":"SelectorText","parentSelectors":["container"],"selector":"a span","multiple":false,"regex":"","delay":0},{"id":"play_amount","type":"SelectorText","parentSelectors":["container"],"selector":".detail > span:nth-of-type(1)","multiple":false,"regex":"","delay":0},{"id":"danmu_amount","type":"SelectorText","parentSelectors":["container"],"selector":"span:nth-of-type(2)","multiple":false,"regex":"","delay":0},{"id":"video_detail_link","type":"SelectorLink","parentSelectors":["container"],"selector":"a.title","multiple":false,"delay":0},{"id":"coin","type":"SelectorText","parentSelectors":["video_detail_link"],"selector":"span.coin","multiple":false,"regex":"","delay":0},{"id":"collect","type":"SelectorText","parentSelectors":["video_detail_link"],"selector":"span.collect","multiple":false,"regex":"","delay":0},{"id":"share","type":"SelectorText","parentSelectors":["video_detail_link"],"selector":"span.share","multiple":false,"regex":"[0-9]+","delay":0},{"id":"num","type":"SelectorText","parentSelectors":["container"],"selector":"div.num","multiple":false,"regex":"","delay":0},{"id":"like","type":"SelectorText","parentSelectors":["video_detail_link"],"selector":".ops span.like","multiple":false,"regex":"","delay":0}]}
當你掌握了二級頁面的抓取方式后，三級頁面、四級頁面也不在話下。因為套路都是一樣的：都是在 Link 選擇器指向的下一個頁面抓取數據，因為原理是一樣的，我就不演示了。
7.推薦閱讀
簡易數據分析 06 | 如何導入別人已經寫好的 Web Scraper 爬蟲
簡易數據分析 05 | Web Scraper 翻頁——控制鏈接批量抓取數據
簡易數據分析 08 | Web Scraper 翻頁——點擊「更多按鈕」翻頁
簡易數據分析 10 | Web Scraper 翻頁——抓取「滾動加載」類型網頁
簡易數據分析 12 | Web Scraper 翻頁——抓取分頁器翻頁的網頁
8.聯系我
因為文章發在各大平台上，賬號較多不能及時回復評論和私信，有問題可關注公眾號 ——「鹵蛋實驗室」，（或 wx 搜索 egglabs）關注上車防失聯。
