# Listly 術語表

{% hint style="success" %}
一般在網頁瀏覽器中探索資料時，會遇到各種元素。**確認存取所需資料需要經過哪些元素**，並用於尋找相應的範本 :)
{% endhint %}

## 1. 網頁瀏覽器與網站構成

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/6IqcYSXsHY7C3yRW1GdB/1%20%EC%9B%B9%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%20%EA%B5%AC%EC%84%B1(%EC%88%98%EC%A0%952).jpg" alt=""><figcaption></figcaption></figure>

### ① 網址列

網址列是顯示目前位置 URL（網址）的輸入欄。通常位於視窗上方，大部分網頁在切換頁面時 URL 會改變。

### ② 擴充功能（Extensions）

Chrome、Edge、Whale 等網頁瀏覽器可以安裝新增功能的擴充功能。\*\*Listly 也是一個具有從網頁瀏覽器顯示的網頁中提取資料功能的擴充功能。\*\*新增到瀏覽器的擴充功能需要使用者另行安裝，已安裝的擴充功能會以圖示形式位於右上角。

### ③ 頁首（Header）

指頁面頂部的區域。主要以 logo 為中心，選單（導覽）和搜尋框等位於此處。

### ④ 區塊（Section）

指網頁文件的內容區域。網頁中的大部分資料都屬於這個區域。

### ⑤ 側邊欄（Aside）

在網頁文件的左側、右側或底部顯示的側邊區域，aside 區域不是必要的組成要素。用於放置廣告或一般連結集合等不影響文件主要內容的內容。

### ⑥ 內嵌框架（iframe）

在網頁文件中載入並顯示其他外部文件的方式。肉眼無法直接辨識，但點擊 Listly 圖示進行資料提取時會以黑色顯示以便識別。需要**另外的提取過程**。

{% hint style="info" %}
相關文章：[iframe 提取方法](https://help.listly.io/docs/ko/getting-started/listly-basics/iframe)
{% endhint %}

### ⑦ 頁尾（Footer）

顯示版權聲明、網站使用政策、網站地圖、聯絡資訊等的位置，位於網頁文件底部。即使切換網頁，顯示的資訊也不會改變，某些情況下可能不顯示頁尾。

## 2. 滑鼠操作

### ① 點擊

{% columns %}
{% column width="50%" %}

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/HrwgjxUPwwr2lPqj5Tgy/2%20%EB%A7%88%EC%9A%B0%EC%8A%A4%EB%8F%99%EC%9E%91(%ED%81%B4%EB%A6%AD).jpg" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column width="50%" %}
按下按鈕以選擇畫面上某個物件的操作。按左鍵稱為點擊，按右鍵稱為右鍵點擊。透過點擊存取一般資訊，透過右鍵點擊查看特定按鈕的原始碼等不可見屬性。
{% endcolumn %}
{% endcolumns %}

### ② 捲動

{% columns %}
{% column valign="middle" %}

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/WnrmkTWDE6bixBSpGMJ2/%EB%A7%88%EC%9A%B0%EC%8A%A4%20%EC%8A%A4%ED%81%AC%EB%A1%A4_%EB%A6%AC%EC%82%AC%EC%9D%B4%EC%A7%95.gif" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}
指上下滾動滑鼠滾輪的操作。本文件中僅提及向下捲動（Scroll-down）。
{% endcolumn %}
{% endcolumns %}

### ③ 懸停、滑鼠移入

{% columns %}
{% column %}

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/tYUyJyEjwO4vCYg2lTGI/%EB%A1%A4%EC%98%A4%EB%B2%84_%EB%AA%A8%EC%85%98_%EB%A6%AC%EC%82%AC%EC%9D%B4%EC%A7%95.gif" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}
將滑鼠指標放在物件上時，顯示的圖片發生變化或出現新文字資訊的效果。無需點擊即可運作。
{% endcolumn %}
{% endcolumns %}

## 3. 資訊載入（Load）方式

### ① 無限捲動

{% columns %}
{% column %}

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/TFMeXiI5abYIAMVXXsOP/Auto_scroll.gif" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}
到達準備的資訊末端時載入下一條資訊的載入方式。如果無論怎麼向下捲動都看不到移至下一頁的按鈕或頁碼，說明該網站採用無限捲動方式載入資訊。

⚠️ 在這樣的網頁上不捲動直接進行提取，由於未載入資訊，因此無法提取足夠的資料。可以透過 Listly 資料面板的「Setting」中的自動捲動設定更方便地提取資料。
{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
相關文章：[自動捲動](https://app.gitbook.com/o/Uu6AM3fgpZza0EpsJM4N/s/iKxoYELFf9WS8XCvYe6S/getting-started/undefined-2/undefined-4)
{% endhint %}

### ② 顯示更多按鈕

{% columns %}
{% column %}

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/I5LsVjzt8Ys3RMYGFjoB/%EC%9E%90%EB%8F%99%ED%81%B4%EB%A6%AD_%EB%A6%AC%EC%82%AC%EC%9D%B4%EC%A7%95.gif" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}
「顯示更多按鈕」是透過點擊底部按鈕載入額外資訊的方式。在此類頁面提取資料時，可以在 Listly 資料面板的「Setting」的自動點擊設定中輸入顯示更多按鈕具有的唯一屬性值，自動載入資料。
{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
相關文章：[自動點擊](https://app.gitbook.com/o/Uu6AM3fgpZza0EpsJM4N/s/iKxoYELFf9WS8XCvYe6S/getting-started/undefined-2/undefined-6)
{% endhint %}

### ③ 分頁（Pagination）

「分頁」是載入新項目最常用的方法。資訊清單底部有數字表示的頁面按鈕，透過點擊數字或箭頭按鈕移至下一頁。

{% columns %}
{% column %}

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/7sgTHnsKTxR6IFjhA7q2/%ED%8E%98%EC%9D%B4%EC%A7%80%EB%84%A4%EC%9D%B4%EC%85%98_A.gif" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/RbwHGFoX4C1OHcQjUbjI/Pagination_dynamic_position.gif" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

分頁主要分為兩種類型。

* A. 固定型（Static Type）：數字清單位置固定的形式，可以按提供的數字群組為單位移動頁面。
* B. 移動型（Dynamic Type）：目前頁面始終位於數字清單中央的形式。每次移動頁面時，數字清單會向旁邊移動一格。

根據上述兩種分頁方式，每個網頁連續提取所需使用的動作範本不同，請檢查正在探索的網頁的分頁方式 🙂

{% hint style="info" %}
相關文章：[分頁](https://help.listly.io/docs/ko/getting-started/databoard-features/settings-pagination-templates)
{% endhint %}

## 4. UI 元件

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/MnygnBlHt2Z7MG4eRRmh/4%20UI%20%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8.jpg" alt=""><figcaption></figcaption></figure>

### ① 按鈕（Button）

點擊以執行操作的最常見元素。設計非常多樣。

### ② 開關（Toggle）/切換（Switches）

用於開啟或關閉某些設定，或在兩個選項中僅選擇一個時使用，如 On/Off。

### ③ 單選按鈕（Radio Button）

多個元素中只能選擇一個項目的按鈕。

### ④ 核取方塊（Checkbox）

可以同時選擇多個項目的元素。

### ⑤ 步進器、微調器（Stepper, Spinner）

代表性的數字輸入 UI 元素。特點是可以透過上下（或左右）按鈕變更數值，也有直接輸入數字的形式。

### ⑥ 下拉選單（Dropdown）

購物網站顯示選項時最常採用的方式。點擊框的箭頭按鈕後，會顯示隱藏的其他項目，選擇項目或點擊下拉清單外部時關閉項目。

### ⑦ 連結（Link）

點擊後移至目前頁面的其他部分或完全不同頁面的文字、圖片、圖示等。大多數連結在文件中帶有底線或以與其餘部分不同的顏色顯示。

### ⑧ 行事曆（Calendar）/日期選擇器（Date Pickers）

選擇日期或日期範圍的 UI 元素。

## 5. 選單

選單是按類別分類內容的最典型方式，根據網頁內的位置或呈現方式對名稱進行分類。

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/OmQpi4HolxaiNrQgRSay/5%20%EB%A9%94%EB%89%B4%EC%A2%85%EB%A5%98.jpg" alt=""><figcaption></figcaption></figure>

### ① 全域導覽列（GNB, Global Navigation Bar）

指網頁上顯示的超連結集合區域。簡單來說，就是網站上始終顯示的選單，也稱為「頂部選單」、「主選單」。主要固定位於網站頂部或左側。

### ② 區域導覽列（LNB, Local Navigation Bar）

也稱為子選單，主要位於網站左側。位置固定提供，但項目根據進入的選單而不同。

### ③ 分頁（Tab）

使用者點擊後在下方或旁邊區域開啟相關內容頁面的按鈕。通常看起來像文件檔案夾的分頁，多個分頁排成一行。

### ④ 快顯功能表/右鍵選單（Context menu）

以彈出形式提供與使用者目前選擇項目相關的選單。在點擊或右鍵點擊特定元素時呼叫。

## 6. 嵌套頁面

<figure><img src="https://content.gitbook.com/content/QSPSOmaFPAz7khj6t7Ds/blobs/CuxTteK83GpdDQt2N3oX/%ED%8C%9D%EC%97%85%EA%B3%BC%EB%AA%A8%EB%8B%AC_%EB%A6%AC%EC%82%AC%EC%9D%B4%EC%A7%95.gif" alt=""><figcaption></figcaption></figure>

### ① 彈出視窗（Popup）/對話方塊（Dialog Box）

指暫時停止使用者進程而出現的視窗。以在目前開啟的瀏覽器頁面上再開啟另一個瀏覽器頁面的方式，通常為介紹公告、促銷、指南等而出現。經常與使用者的意圖或目的無關地出現。

可以透過瀏覽器選項強制不開啟彈出視窗。

### ② 模態視窗（Modal）

模態視窗是在現有瀏覽器頁面上覆蓋一個層而非新視窗。無需在模態視窗中點擊關閉按鈕，移動頁面或點擊周圍區域即可消失。通常由使用者的特定操作而出現。