佈景主題編輯器

This page is a translated version of the page Theme editor and the translation is 100% complete.

簡介

問卷佈景主題決定參與者所看到的問卷外觀：頁面版面配置、顏色、字型、標誌，以及每個問題的樣式。佈景主題以 Twig 範本、CSS 和 JavaScript 建置，並使用 Bootstrap 5 作為 CSS 框架。

許多常見的變更完全不需要撰寫程式碼。標誌、顏色、字型及多項顯示設定都可以透過佈景主題選項來變更。若您需要進一步的調整，例如新增自己的 CSS 或 JavaScript、變更頁面的 HTML，或為佈景主題上傳圖片及其他檔案，請使用本頁所說明的佈景主題編輯器。

LimeSurvey 內建下列核心問卷佈景主題：

Fruity TwentyThree（fruity_twentythree）：預設佈景主題。
Bootstrap Vanilla（vanilla）：單純的基礎佈景主題，適合想要自行建置以 Bootstrap 為基礎之佈景主題的開發人員。
Fruity（fruity）和 Bootswatch（bootswatch）：兩者皆延伸自 Bootstrap Vanilla。

個別問題類型的外觀是由問題佈景主題控制，而非由問卷佈景主題控制。若要變更某個問題類型的 HTML，請建立問題佈景主題。

開始之前

若要使用佈景主題編輯器，您需要具備全域佈景主題權限（請參閱全域權限），或必須是超級管理員。延伸佈景主題需要 建立者 權限，儲存變更需要更新權限，刪除佈景主題或重設檔案則需要刪除權限。

注意 : 含有錯誤的佈景主題可能會導致所有使用它的問卷無法使用。在將佈景主題用於正式問卷之前，請先以問卷預覽測試您的變更。

核心佈景主題無法編輯：請延伸它們

核心佈景主題會隨 LimeSurvey 一併更新，因此您無法直接變更它們。若要自訂核心佈景主題，請將其延伸。延伸會建立一個新的使用者佈景主題，並繼承其父佈景主題的所有內容。您的佈景主題只包含您所變更的檔案，其餘一律取自父佈景主題。如此一來，當 LimeSurvey 更新父佈景主題時，您的佈景主題仍可獲得錯誤修正與改進。

若要延伸佈景主題，請擇一操作：

前往設定 > 佈景主題，開啟該佈景主題所在列末端的動作選單（⋯），然後按一下延伸，或是
在佈景主題編輯器中開啟該佈景主題，然後按一下工具列中的延伸。

請為新的佈景主題輸入名稱。佈景主題編輯器隨即會開啟您的新佈景主題。

佈景主題的儲存位置

核心佈景主題：位於 LimeSurvey 安裝目錄中的 themes/survey/。
使用者佈景主題（延伸、上傳或匯入的佈景主題）：upload/themes/survey/。

您也可以使用自己的編輯器，直接在伺服器上編輯使用者佈景主題的檔案。請確保之後網頁伺服器仍可讀取及寫入這些檔案，以便您繼續使用佈景主題編輯器。

佈景主題編輯器

若要開啟佈景主題編輯器，請前往設定 > 佈景主題，開啟該佈景主題所在列末端的動作選單（⋯），然後按一下佈景主題編輯器。

若您開啟的是核心佈景主題，系統會顯示提示，說明這是標準佈景主題，並提供延伸它的連結。您可以檢視其檔案和預覽，但無法儲存變更。

工具列

匯出：將佈景主題下載為 ZIP 檔案。
延伸：建立一個繼承此佈景主題的新佈景主題（請參閱上文）。
重新命名：重新命名佈景主題。僅適用於使用者佈景主題。
刪除：刪除佈景主題。您無法刪除被設為預設佈景主題的佈景主題。
佈景主題：將佈景主題編輯器切換到另一個佈景主題。
界面：選擇預覽中顯示哪個問卷頁面，以及列出哪些檔案供編輯。界面包括：問題、問卷清單、歡迎、已完成、評估、錯誤、全部清除、載入、儲存、註冊、列印答案選項、公開數據、PDF、超出的配額、導覽和參與者。

編輯檔案

右側的面板會列出所選界面使用的檔案：

檢測組件檔案：建置頁面的 Twig 範本。
JavaScript 檔
CSS 檔
其他文件：佈景主題的圖片、字型及任何其他檔案。

按一下檔案名稱即可在編輯器中開啟。標示為繼承的檔案來自父佈景主題。您仍然可以編輯繼承的檔案：編輯器下方的按鈕會顯示為複製到本機佈景主題並儲存變更，儲存時會將檔案連同您的變更複製到您的佈景主題中。此後系統會使用您的副本，而不是父佈景主題的檔案。

屬於您佈景主題的檔案會有重設按鈕。重設會刪除您的副本，因此會再次使用父佈景主題的檔案。

上傳檔案

請使用其他文件面板底部的上傳欄位，為您的佈景主題新增圖片、字型或其他檔案。上傳的檔案會儲存在佈景主題的 files/ 資料夾中。預設情況下，您可以上傳圖片（gif、ico、jpg、jpeg、png）以及下列檔案類型：css、js、map、json、eot、otf、ttf、woff、woff2、txt、md、xml、twig、lss、lsa、lsq 和 lsg。管理員可透過 config.php 中的 allowedthemeimageformats 和 allowedthemeuploads 設定來變更這些清單。

若要在 Twig 檔案中顯示已上傳的圖片，請使用 image() 函式：

{{ image('./files/myfile.png', 'Alternative text for the picture', {"class": "myclass"}) }}

在 CSS 檔案中，請使用相對於 css 資料夾的路徑來引用已上傳的檔案，例如 url('../files/background.jpg')。

預覽

編輯器下方的預覽會以範例內容顯示所選的畫面。使用手機、640x480、800x600、1024x768 和 全螢幕 按鈕,即可檢視頁面在不同螢幕尺寸下的外觀。

預覽使用的是範例資料,可能無法完全呈現與實際問卷相同的樣式。請務必同時在實際的問卷預覽中檢查您的變更。

匯入與匯出佈景主題

若要將佈景主題移至另一個 LimeSurvey 安裝環境,請在佈景主題編輯器工具列中點選匯出。這會將佈景主題下載為 ZIP 檔案。
若要從 ZIP 檔案安裝佈景主題,請前往設定 > 佈景主題,然後點選 上傳與安裝。

佈景主題的結構

佈景主題資料夾

佈景主題資料夾包含:

config.xml: 佈景主題的資訊清單:名稱、父佈景主題、CSS 與 JavaScript 檔案、佈景主題選項,以及在佈景主題編輯器中顯示的畫面。
views/:Twig 範本。layout_global.twig 是大多數問卷頁面的主要版面配置。其他版面配置用於特殊頁面,例如公開問卷清單使用 layout_survey_list.twig,錯誤頁面使用 layout_errors.twig。views/subviews/ 資料夾存放版面配置所包含的較小範本。
css/ 與 scripts/:佈景主題的 CSS 與 JavaScript 檔案。
files/:佈景主題使用的圖片和其他檔案。
options/:佈景主題選項的頁面。

Twig 範本

範本會透過 aSurveyInfo 變數接收問卷資料。若要查看其中包含的所有內容,請在 application/config/config.php 中開啟除錯模式,並將下列這一行加到 layout_global.twig 中 body 元素的結尾處:

{{ dump(aSurveyInfo) }}

關於可在範本中使用的函式,請參閱可用的 Twig 函式。基於安全考量,範本會在沙箱中執行,因此只能使用這些函式。

config.xml

<files> 區段列出在問卷頁面上載入的 CSS 與 JavaScript 檔案:

<add> 會新增一個檔案。如果父佈景主題已有同名檔案,您的檔案會取代它。
<remove> 會停止載入父佈景主題的某個檔案。

您不需要再次列出父佈景主題的檔案:它們仍會被載入。

LimeSurvey 會在安裝佈景主題時讀取 config.xml,並將設定儲存在資料庫中。變更已安裝佈景主題的 config.xml 後,請前往設定 > 佈景主題,開啟該佈景主題的動作選單 (⋯),然後點選重設以重新載入該檔案。

新增您自己的 CSS 和 JavaScript

每個核心佈景主題都有兩個檔案保留給您自己的程式碼:

css/custom.css:在所有其他 CSS 檔案之後載入,因此其規則會覆寫佈景主題的樣式。
scripts/custom.js:在佈景主題本身的 JavaScript 之後載入。

擴充佈景主題時,應修改的就是這些檔案。請將您的 CSS 加入 custom.css,而不要編輯佈景主題的主要 CSS 檔案,這樣您的佈景主題才能持續獲得父佈景主題的更新。

若要新增更多檔案,請先上傳,然後在佈景主題 config.xml 的 <files> 區段中列出。請使用父佈景主題中不存在的檔案名稱,否則您的檔案會取代父佈景主題的檔案:

<files>
    <css>
        <add>css/my-styles.css</add>
    </css>
    <js>
        <add>scripts/my-script.js</add>
    </js>
</files>

問卷頁面預設以 Ajax 載入,因此當參與者前往下一頁時,瀏覽器不會完整重新載入頁面。請讓您的 JavaScript 同時在第一次載入頁面和每次 Ajax 載入頁面時執行:

$(document).on('ready pjax:scriptcomplete', function () {
    // Your code here
});

使用 CSS 設定問題的樣式

本節中的所有範例都放在您佈景主題的 custom.css 檔案中。

頁面類別

<html> 和 <body> 元素帶有可用來設定整個頁面樣式的類別:

html: 語言編碼(例如 en)和文字方向(dir-ltr 或 dir-rtl)。
body: 佈景主題及每個父佈景主題的名稱(例如 fruity_twentythree)、字型(例如 font-ibm-sans)、語言(例如 lang-en),以及顯示標誌時的 brand-logo。

問題容器類別

每個問題都包在一個具有 question-container 類別的元素中。它同時帶有:

問題類型的類別(請參閱下表)。
mandatory:該問題為必填或軟性必填。
input-error:答案未通過驗證,或必填問題未作答。
missing:該問題仍有未回答的部分,而參與者已經離開該問題。
ls-hidden 和 ls-irrelevant:該問題因其條件而被隱藏。
ls-hidden-attribute:該問題因其「始終隱藏本題」設定而被隱藏。
在問題的 CSS 類別： 設定(位於顯示下)中輸入的任何類別。可用此設定為單一問題設定樣式。

例如,一個未作答的必填列表（單選）問題:

<div id="question123" class="row list-radio mandatory input-error question-container">
    ...
</div>

問題類型類別

問題類型	類別	類型代碼
5 點選擇	.choice-5-pt-radio	5
陣列	.array-flexible-row	F
陣列（5 點選擇）	.array-5-pt	A
陣列（10 點選擇）	.array-10-pt	B
陣列 (增加，不變，減少)	.array-increase-same-decrease	E
陣列（數字）	.array-multi-flexi	:
陣列 (文字)	.array-multi-flexi-text	;
陣列（是/不確定/否）	.array-yes-uncertain-no	C
欄位陣列	.array-flexible-column	H
陣列雙重尺度	.array-flexible-dual-scale	1
日期/時間	.date	D
公式	.equation	*
檔案上傳	.upload-files	\|
性別	.gender	G
大量的自由文本	.text-huge	U
語言轉換	.language	I
列表（下拉式）	.list-dropdown	!
列表（單選）	.list-radio	L
帶評論的列表	.list-with-comment	O
長篇的自由文本	.text-long	T
多項選擇	.multiple-opt	M
帶評論的複選題	.multiple-opt-comments	P
多個數字輸入	.numeric-multi	K
多重簡短文本	.multiple-short-txt	Q
數字輸入	.numeric	N
排序	.ranking	R
簡短的自由文本	.text-short	S
文字顯示	.boilerplate	X
是/否	.yes-no	Y

問題各部分的類別

在問題容器內,答案區域使用下列類別。其中有些取決於問題的顯示設定:例如,陣列（數字）在顯示核取方塊而非下拉式選單時,會使用不同的類別。

類別	用途	使用者（範例）
.ls-answers	包含所有答案選項的元素	所有問題類型
.answers-list	答案選項的清單或列	列表（單選）、多項選擇、排序、大多數陣列的列
.subquestion-list, .questions-list	子問題的清單或表格	陣列、多重簡短文本、多個數字輸入
.answer-item	一個答案選項或輸入項	幾乎所有問題類型
.noanswer-item	「不適用」選項	陣列、5 點選擇、帶評論的列表
.question-item	同時也是答案的子問題	多項選擇、多重簡短文本、多個數字輸入
.radio-list	單選按鈕的清單或列	列表（單選）、5 點選擇、帶評論的列表、單選陣列的列
.radio-array	單選按鈕的表格	陣列、陣列（5 點選擇）、陣列（10 點選擇）、陣列 (增加，不變，減少)、陣列（是/不確定/否）
.radio-item	一個單選按鈕及其標籤	列表（單選）、5 點選擇、帶評論的列表、單選陣列
.checkbox-list	核取方塊的清單	多項選擇、帶評論的複選題
.checkbox-array	核取方塊的表格	使用複選版面的陣列（數字）
.checkbox-item	一個核取方塊及其標籤	多項選擇、帶評論的複選題、使用複選版面的陣列（數字）
.checkbox-text-item	附有文字欄位的核取方塊	帶評論的複選題
.comment-item	核取方塊旁的評論欄位	帶評論的複選題
.text-list	文字輸入的清單	多重簡短文本、多個數字輸入
.text-item	一個文字輸入	簡短、長篇及大量的自由文本、多重簡短文本、陣列 (文字)
.number-list, .numeric-item	數字輸入	多個數字輸入、數字輸入
.number-array	數字輸入的表格	陣列（數字）、陣列 (文字)
.text-array	文字輸入的表格	陣列 (文字)、陣列（數字）
.dropdown-array, .dropdown-list, .dropdown-item	含下拉式選單的表格、列和儲存格	陣列（數字）、使用下拉式選單的陣列雙重尺度
.date-item	日期輸入	日期/時間
.upload-item	檔案上傳區域	檔案上傳
.answertext	陣列列中的子問題文字	陣列
.col-answers	子問題文字所在的欄	陣列
.ls-heading	含有答案選項的標題列	陣列
.ls-odd, .ls-even	交替的列	陣列
.ls-label-xs-visibility	僅在小螢幕和螢幕閱讀器中可見的標籤	陣列的儲存格
.ls-input-group-extra	輸入項的前綴或後綴	簡短的自由文本、數字輸入、多重簡短文本、多個數字輸入
.ls-js-hidden	JavaScript 啟用時隱藏	陣列雙重尺度、列表（單選）
.ls-no-js-hidden	JavaScript 未啟用時隱藏	排序
.ls-js-hidden-sr	JavaScript 啟用時隱藏，但螢幕閱讀器仍會讀取	排序

在列表（單選）中，「不適用」選項的類別為 no-anwser-item（拼寫如此），而不是 noanswer-item。

例如，以下是列表（單選）問題答案的 HTML：

<ul class="ls-answers answers-list radio-list list-unstyled" role="radiogroup">
    <li id="javatbdQ123_S456" class="answer-item radio-item">
        <input type="radio" value="A" name="Q123" id="answerQ123A">
        <label for="answerQ123A" class="control-label radio-label">Option A</label>
    </li>
    ...
</ul>

驗證與提示類別

驗證提示（例如「單選」或「請輸入介於 1 到 10 之間的數字」）一律具有 ls-em-tip 類別。參與者作答時，若符合提示規則，LimeSurvey 會新增 ls-em-success；若不符合，則新增 ls-em-error，如此您就能為這兩種狀態設定不同的樣式。透過問題的隱藏提示設定而隱藏的提示會取得 hide-tip 類別。

每個提示還有一個對應其類型的類別：

類別	提示
.em_default	問題類型的預設提示（例如「單選」）
.em_num_answers	答案數量的最小值或最大值
.em_value_range	最小值或最大值
.em_sum_range	數值總和的最小值或最大值
.em_sum_equals	數值加總必須等於指定的總數
.em_value_integer	僅允許整數
.em_numbers_only	僅允許數字
.em_other_numbers_only	「其它」欄位僅允許數字
.em_other_comment_mandatory	已選取「其它」選項，但其文字欄位為空白
.em_regex_validation	答案必須符合驗證模式
.em_q_fn_validation	問題驗證方程式
.em_sq_fn_validation	子問題驗證方程式

由右至左（RTL）的語言

對於由右至左的語言，<html> 元素會具有 dir-rtl 類別，且核心佈景主題會載入其主要 CSS 檔案的 RTL 版本。對於僅適用於由右至左語言的規則，請在 CSS 中使用 .dir-rtl。

秘訣與技巧

這些做法適用於從核心佈景主題延伸而來的佈景主題的 custom.css（或標明的 Twig 檔案）。在範例中，請將 #c0392b 替換為您自己的顏色。

變更單選按鈕和核取方塊的顏色

若要使用 Fruity TwentyThree 內建的顏色，請在佈景主題選項中選擇一個Theme color。您也可以在佈景主題選項中選擇不同的打勾圖示。

若要使用其他顏色，請將 CSS 新增至 custom.css。核心佈景主題會自行繪製單選按鈕和核取方塊，而不是使用瀏覽器的預設樣式，因此變更顏色就是要變更這些繪製出來的元素。

Fruity TwentyThree：

.radio-item input[type=radio]:checked + label::before,
.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: #c0392b;
}
.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    color: #c0392b;
}
/* The text of the selected answer */
.radio-item input[type=radio]:checked + label,
.checkbox-item input[type=checkbox]:checked + label {
    color: #c0392b;
}

Bootstrap Vanilla、Fruity 和 Bootswatch：

.radio-item input[type=radio]:checked + label::after {
    background-color: #c0392b;
}
.checkbox-item input[type=checkbox]:checked + label::after {
    background-color: #c0392b;
    border-color: #c0392b;
    color: #ffffff;
}

請讓顏色與背景之間保持足夠的對比，讓視力不佳的參與者仍能看出已選取哪些答案。

放大單選按鈕和核取方塊

較大的單選按鈕和核取方塊在手機和平板電腦上更容易點選。這適用於所有核心佈景主題：

.radio-item label::before,
.radio-item label::after,
.checkbox-item label::before,
.checkbox-item label::after {
    scale: 1.3;
}

在 Fruity TwentyThree 中，還要在單選按鈕與答案文字之間新增一些間距：

.radio-item label {
    padding-left: 14px;
}

數值最高約 1.4 時，無需其他變更即可正常運作。數值更大時，控制項在小螢幕上會開始與答案文字及陣列列的邊緣重疊，因此您還需要在它們周圍新增更多間距。

變更進度條的顏色

.progress-bar {
    background-color: #c0392b;
}

僅以單一語言顯示內容

<body> 元素具有一個包含目前語言的類別，例如 lang-en 或 lang-fr。您可以利用它依語言顯示不同的內容，例如頁尾的說明文字。請將各語言的文字新增至佈景主題的 Twig 檔案，例如 subviews/footer/footer.twig：

<div class="help-fr" lang="fr">Pour de l'aide, appelez le 000000</div>
<div class="help-en" lang="en">For help, please call 000000</div>

然後在 custom.css 中隱藏其他語言的文字：

body:not(.lang-fr) .help-fr,
body:not(.lang-en) .help-en {
    display: none;
}

為每份問卷使用不同的標誌

您不需要為每個標誌建立獨立的佈景主題。佈景主題選項可以針對單一問卷設定：開啟問卷，在問卷設定選單中按一下佈景主題選項,然後選擇不同的標誌檔案。請參閱 Theme options/zh-hant。

顯示自訂 favicon

favicon 是顯示在瀏覽器分頁和書籤中的小圖示。核心佈景主題會顯示佈景主題的 files/favicon.ico 檔案。若要使用您自己的圖示，請將其命名為 favicon.ico，並在延伸佈景主題的其他文件面板中上傳。它會取代父佈景主題的圖示。

在 Fruity TwentyThree 中將標誌置中

在佈景主題選項中開啟標誌,然後將以下內容新增到 custom.css:

#survey-nav .container-fluid {
    position: relative;
}
#survey-nav .logo-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

在公開問卷清單中新增您自己的標誌

公開問卷清單預設會顯示 LimeSurvey 標誌。若要顯示您自己的標誌:

擴充 Fruity TwentyThree,並在佈景主題編輯器中開啟您的佈景主題。
在其他文件面板中上傳您的標誌。
選擇問卷清單畫面,並開啟 layout_survey_list.twig。
找到包含 {{ include('./ls_logo_svg.twig') }} 的 <div>。請將整個 <div>(包括 include 那一行)替換為這些步驟下方所示的程式碼。
點擊複製到本機佈景主題並儲存變更。
前往設定 > 全域設定 > 一般,並將您的佈景主題選為公開問卷清單與錯誤頁面的佈景主題。

請使用您上傳的檔案名稱,並以貴組織的名稱作為替代文字:

{{ image('./files/mylogo.png', 'Name of your organisation', {"class": "img-fluid mx-auto d-block"}) }}

在陣列雙重尺度中新增分隔線

若要在「陣列雙重尺度」問題的兩個尺度之間繪製一條垂直線:

.array-flexible-dual-scale .header_separator,
.array-flexible-dual-scale .dual_scale_separator {
    border-right: 1px solid #00a8e1;
}

問題中的 JavaScript

若要在問卷的所有頁面上執行 JavaScript,請將其放入您佈景主題的 custom.js 中(請參閱上方)。

您也可以在單一問題或群組的文字中新增指令碼。除非您的使用者已關閉 XSS 篩選,否則 LimeSurvey 會從這些文字中移除指令碼。此篩選永遠不會套用於超級管理員。對於其他使用者,必須在設定 > 全域設定 > 安全設定中關閉使用 XSS 過濾 HTML。僅在您信任所有可編輯問卷的人員時才這樣做。如需詳細資訊與範例,請參閱Workarounds: Manipulating a survey at runtime using Javascript。

主要章節

佈景主題編輯器

From LimeSurvey Manual

目次

簡介

開始之前

核心佈景主題無法編輯：請延伸它們

佈景主題的儲存位置

佈景主題編輯器

工具列

編輯檔案

上傳檔案

預覽

匯入與匯出佈景主題

佈景主題的結構

佈景主題資料夾

Twig 範本

config.xml

新增您自己的 CSS 和 JavaScript

使用 CSS 設定問題的樣式

頁面類別

問題容器類別

問題類型類別

問題各部分的類別

驗證與提示類別

由右至左（RTL）的語言

秘訣與技巧

變更單選按鈕和核取方塊的顏色

放大單選按鈕和核取方塊

變更進度條的顏色

僅以單一語言顯示內容

為每份問卷使用不同的標誌

顯示自訂 favicon

在 Fruity TwentyThree 中將標誌置中

在公開問卷清單中新增您自己的標誌

在陣列雙重尺度中新增分隔線

問題中的 JavaScript