# Listly 術語表

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

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

<figure><img src="/files/c0fd1cab3464d503e9c509403d042d532c0bb99c" 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="/files/0ab8e15bf63b32e8fee586825dd32ce56dd9ec0c" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

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

### ② 捲動

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

<figure><img src="/files/6b5485774dadcf984a959b3bcb79bee7beb8027e" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

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

### ③ 懸停、滑鼠移入

{% columns %}
{% column %}

<figure><img src="/files/fb8afa0988cc458f65984dafff489c1ead8ff6d6" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

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

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

### ① 無限捲動

{% columns %}
{% column %}

<figure><img src="/files/64e916d66e71f34e469d8d8ee29826507245470e" 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="/files/15ccc4df13c8fbfcb8e9fc9a7b006fcdefa751fe" 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="/files/44baa58ffa6fd0d82a842f71216fd14640a7bb5a" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/d3410f62e0e856454b49041b8fad4407e9aa2806" 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="/files/3c6516b21c9f90edc05929f897fdb6fa250215f6" 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="/files/a709a2d53b833d88b0e74ad7dfe5fdac16016a12" alt=""><figcaption></figcaption></figure>

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

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

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

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

### ③ 分頁（Tab）

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

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

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

## 6. 嵌套頁面

<figure><img src="/files/d4303d76077dc04ee1b05df76efab44cfeadf8a1" alt=""><figcaption></figcaption></figure>

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

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

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

### ② 模態視窗（Modal）

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.listly.io/docs/zh-hant/about/listly-shu-yu-biao.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.