LimeSurvey Manual
Menu
Navigation
Main page
Recent changes
Random page
Help
Search
Special pages
Printable version
Recent changes
Help
English
Log in
Actions
Translate
Language statistics
Message group statistics
Export
Special
Export translations
Settings
Group
Activating a survey
Adding answers or subquestions
Administering LimeSurvey
Alternatives to the LimeSurvey import function
Assessments
Backup entire database
Batch deletion
Category:Advanced Question Settings
Category:General Question Options
Category:Question Settings
Central Participant Database
Changing an active survey
Check data integrity
Check question logic
Check survey logic - Advanced
Closing a survey
ComfortUpdate
Copy question
Custom translation
Data encryption
Data entry
Data policy settings
DateFunctions
Default answers
Delete question
Delete survey
Display/Export survey
Edit question
Email bounce tracking system
Email templates
Export question
Export responses
Exporting results
Expression Manager
Expression Manager sample surveys
ExpressionScript - Presentation
ExpressionScript Engine - Quick start guide
ExpressionScript examples
ExpressionScript How-tos
ExpressionScript sample surveys
Extension compatibility
Failed email notifications
First login - your user preferences
General FAQ
General settings
Getting started
Global settings
Google API howto
Home page settings
How to design a good survey (guide)
Import responses
Importing a survey
Installation - LimeSurvey CE
Installation FAQ
Installation of the LimeSurvey XAMPP package
Installation security hints
Installation using a command line interface (CLI)
Installation Version 1.92 or older
Iterate survey
Label sets
LDAP settings
License
LimeSurvey Manual
LimeSurvey PRO vs LimeSurvey CE
LimeSurvey Users
LimeSurvey Video-Tutorial
LimeSurvey-compatible hosting companies
List question groups
List questions
Localization
Major version upgrade
Make your plugin compatible with LS4
Manage user groups
Manage users
Menu configuration
Menu entries configuration
Multilingual survey
New Template System in LS3.x
Not categorized and advanced features
Notifications & data
Optional settings
Overview
Panel integration
Participant settings
Plugin manager
Plugin menu
Plugins - advanced
Presentation
Preview function
Problems & solutions
Publication & access
QS:Allowed filetypes
QS:Alphasort
QS:Answer width
QS:Array filter
QS:Array filter exclude
QS:Array filter style
QS:Assessment value
QS:Autocheck exclusive option
QS:Category separator
QS:Chart type
QS:Choice column width
QS:Choice header
QS:Code filter
QS:Commented checkbox
QS:CSS Class
QS:Date max
QS:Date min
QS:Date time format
QS:Display chart
QS:Display columns
QS:Display map
QS:Display rows
QS:Display type
QS:Dropdown dates
QS:Dropdown dates year max
QS:Dropdown dates year min
QS:Dropdown prefix
QS:Dropdown prepostfix
QS:Dropdown separators
QS:Dropdown size
QS:Dualscale headerA
QS:Dualscale headerB
QS:Em validation q
QS:Em validation q tip
QS:Em validation sq
QS:Em validation sq tip
QS:Encryption
QS:Equals num value
QS:Equation
QS:Exclusive option
QS:Get order previous q
QS:Hidden
QS:Hide tip
QS:Input box size
QS:Input boxes
QS:Input max characters
QS:Label column width
QS:Location city
QS:Location country
QS:Location defaultcoordinates
QS:Location mapheight
QS:Location mapservice
QS:Location mapwidth
QS:Location mapzoom
QS:Location nodefaultfromip
QS:Location postal
QS:Location state
QS:Mandatory
QS:Max answers
QS:Max filesize
QS:Max num value
QS:Max num value n
QS:Max num value sgqa
QS:Max subquestions
QS:Maximum chars
QS:Maximum number of files
QS:Min answers
QS:Min num value
QS:Min num value n
QS:Minimum number of files
QS:Minute step interval
QS:Month display style
QS:Multiflexible checkbox
QS:Multiflexible max
QS:Multiflexible min
QS:Multiflexible step
QS:Num value int only
QS:Numbers only
QS:Other
QS:Other comment mandatory
QS:Other numbers only
QS:Other Position
QS:Other replace text
QS:Page break
QS:Prefix
QS:Preg validation
QS:Printable survey relevance help
QS:Public statistics
QS:Question theme
QS:Random group
QS:Random order
QS:Rank header
QS:Relevance
QS:Remove text or uncheck checkbox
QS:Repeat headers
QS:Reverse
QS:Samechoiceheight
QS:Samelistheight
QS:Scale export
QS:Show comment
QS:Show grand total
QS:Show title
QS:Show totals
QS:Showpopups
QS:Slider accuracy
QS:Slider default
QS:Slider handle shape
QS:Slider handle Unicode shape
QS:Slider initial value
QS:Slider layout
QS:Slider max
QS:Slider middlestart
QS:Slider min
QS:Slider orientation
QS:Slider rating
QS:Slider reset
QS:Slider reverse
QS:Slider separator
QS:Slider showminmax
QS:Subquestion width
QS:Suffix
QS:Text input width
QS:Theme editor - advanced options
QS:Time limit
QS:Time limit action
QS:Time limit countdown message
QS:Time limit disable next
QS:Time limit disable prev
QS:Time limit message
QS:Time limit message delay
QS:Time limit message style
QS:Time limit timer style
QS:Time limit warning
QS:Time limit warning display time
QS:Time limit warning message
QS:Time limit warning style
QS:Use dropdown
QS:Value range allows missing
Question groups - introduction
Question toolbar options
Question type - 5 point choice
Question type - Array
Question type - Array (10 point choice)
Question type - Array (5 point choice)
Question type - Array (Increase-Same-Decrease)
Question type - Array (Numbers)
Question type - Array (Texts)
Question type - Array (Yes-No-Uncertain)
Question type - Array by column
Question type - Array dual scale
Question type - Date
Question type - Equation
Question type - File upload
Question type - Gender
Question type - Huge free text
Question type - Language switch
Question type - List (Dropdown)
Question type - List (Radio)
Question type - List with comment
Question type - Long free text
Question type - Multiple choice
Question type - Multiple choice with comments
Question type - Multiple numerical input
Question type - Multiple short text
Question type - Numerical input
Question type - Ranking
Question type - Short free text
Question type - Text display
Question type - Yes-No
Question types
Questions - introduction
QueXML PDF Export
Quick start guide - LimeSurvey 2.50+
Quick start guide - LimeSurvey 3.0+
Quick-translation
Regenerate question codes
Reorder questions and question groups
Reset conditions
Resources
Responses & statistics
Responses (survey results)
Running a survey safely
Setting conditions
SGQA identifier
Statistics
Survey group permissions
Survey menu
Survey participants
Survey permissions
Survey quotas
Survey settings
Survey settings version 2
Survey structure
Survey toolbar options
Surveys - introduction
Surveys - management
Tab Separated Value survey structure
Template:Deprecated
Template:DeprecatedIn
Template:Example
Template:FeatureChange
Template:FeatureStarting
Template:Hint
Template:NewIn
Template:UpdatedIn
Testing a survey
Text elements
Theme editor
Theme options
Themes
Timing statistics
Tools
Transferring an installation
Translating LimeSurvey
Troubleshooting
TwoFactorAdminLogin
Upgrading from a previous version
URL fields
Using regular expressions
Version change log
Version guide
View saved but not submitted responses
Workarounds
Language
aa - Afar
ab - Abkhazian
abs - Ambonese Malay
ace - Achinese
acm - Iraqi Arabic
ady - Adyghe
ady-cyrl - Adyghe (Cyrillic script)
aeb - Tunisian Arabic
aeb-arab - Tunisian Arabic (Arabic script)
aeb-latn - Tunisian Arabic (Latin script)
af - Afrikaans
aln - Gheg Albanian
alt - Southern Altai
am - Amharic
ami - Amis
an - Aragonese
ang - Old English
ann - Obolo
anp - Angika
ar - Arabic
arc - Aramaic
arn - Mapuche
arq - Algerian Arabic
ary - Moroccan Arabic
arz - Egyptian Arabic
as - Assamese
ase - American Sign Language
ast - Asturian
atj - Atikamekw
av - Avaric
avk - Kotava
awa - Awadhi
ay - Aymara
az - Azerbaijani
azb - South Azerbaijani
ba - Bashkir
ban - Balinese
ban-bali - Balinese (Balinese script)
bar - Bavarian
bbc - Batak Toba
bbc-latn - Batak Toba (Latin script)
bcc - Southern Balochi
bci - Baoulé
bcl - Central Bikol
bdr - West Coast Bajau
be - Belarusian
be-tarask - Belarusian (Taraškievica orthography)
bew - Betawi
bg - Bulgarian
bgn - Western Balochi
bh - Bhojpuri
bho - Bhojpuri
bi - Bislama
bjn - Banjar
blk - Pa'O
bm - Bambara
bn - Bangla
bo - Tibetan
bpy - Bishnupriya
bqi - Bakhtiari
br - Breton
brh - Brahui
bs - Bosnian
btm - Batak Mandailing
bto - Iriga Bicolano
bug - Buginese
bxr - Russia Buriat
ca - Catalan
cbk-zam - Chavacano
cdo - Min Dong Chinese
ce - Chechen
ceb - Cebuano
ch - Chamorro
cho - Choctaw
chr - Cherokee
chy - Cheyenne
ckb - Central Kurdish
co - Corsican
cps - Capiznon
cpx - Pu-Xian Min
cpx-hans - Pu-Xian Min (Simplified Han script)
cpx-hant - Pu-Xian Min (Traditional Han script)
cpx-latn - Pu-Xian Min (Latin script)
cr - Cree
crh - Crimean Tatar
crh-cyrl - Crimean Tatar (Cyrillic script)
crh-latn - Crimean Tatar (Latin script)
crh-ro - Crimean Tatar (Romania)
cs - Czech
csb - Kashubian
cu - Church Slavic
cv - Chuvash
cy - Welsh
da - Danish
dag - Dagbani
de - German
de-at - Austrian German
de-ch - Swiss High German
de-formal - German (formal address)
dga - Dagaare
din - Dinka
diq - Zazaki
dsb - Lower Sorbian
dtp - Central Dusun
dty - Doteli
dv - Divehi
dz - Dzongkha
ee - Ewe
egl - Emilian
el - Greek
eml - Emiliano-Romagnolo
en - English
en-ca - Canadian English
en-gb - British English
eo - Esperanto
es - Spanish
es-419 - Latin American Spanish
es-formal - Spanish (formal address)
et - Estonian
eu - Basque
ext - Extremaduran
fa - Persian
fat - Fanti
ff - Fula
fi - Finnish
fit - Tornedalen Finnish
fj - Fijian
fo - Faroese
fon - Fon
fr - French
frc - Cajun French
frp - Arpitan
frr - Northern Frisian
fur - Friulian
fy - Western Frisian
ga - Irish
gaa - Ga
gag - Gagauz
gan - Gan Chinese
gan-hans - Gan (Simplified)
gan-hant - Gan (Traditional)
gcr - Guianan Creole
gd - Scottish Gaelic
gl - Galician
gld - Nanai
glk - Gilaki
gn - Guarani
gom - Goan Konkani
gom-deva - Goan Konkani (Devanagari script)
gom-latn - Goan Konkani (Latin script)
gor - Gorontalo
got - Gothic
gpe - Ghanaian Pidgin
grc - Ancient Greek
gsw - Alemannic
gu - Gujarati
guc - Wayuu
gur - Frafra
guw - Gun
gv - Manx
ha - Hausa
hak - Hakka Chinese
haw - Hawaiian
he - Hebrew
hi - Hindi
hif - Fiji Hindi
hif-latn - Fiji Hindi (Latin script)
hil - Hiligaynon
hno - Northern Hindko
ho - Hiri Motu
hr - Croatian
hrx - Hunsrik
hsb - Upper Sorbian
hsn - Xiang Chinese
ht - Haitian Creole
hu - Hungarian
hu-formal - Hungarian (formal address)
hy - Armenian
hyw - Western Armenian
hz - Herero
ia - Interlingua
id - Indonesian
ie - Interlingue
ig - Igbo
igl - Igala
ii - Sichuan Yi
ik - Inupiaq
ike-cans - Eastern Canadian (Aboriginal syllabics)
ike-latn - Eastern Canadian (Latin script)
ilo - Iloko
inh - Ingush
io - Ido
is - Icelandic
it - Italian
iu - Inuktitut
ja - Japanese
jam - Jamaican Creole English
jbo - Lojban
jut - Jutish
jv - Javanese
ka - Georgian
kaa - Kara-Kalpak
kab - Kabyle
kai - Karekare
kbd - Kabardian
kbd-cyrl - Kabardian (Cyrillic script)
kbp - Kabiye
kcg - Tyap
kea - Kabuverdianu
kg - Kongo
khw - Khowar
ki - Kikuyu
kiu - Kirmanjki
kj - Kuanyama
kjh - Khakas
kjp - Eastern Pwo
kk - Kazakh
kk-arab - Kazakh (Arabic script)
kk-cn - Kazakh (China)
kk-cyrl - Kazakh (Cyrillic script)
kk-kz - Kazakh (Kazakhstan)
kk-latn - Kazakh (Latin script)
kk-tr - Kazakh (Turkey)
kl - Kalaallisut
km - Khmer
kn - Kannada
ko - Korean
ko-kp - Korean (North Korea)
koi - Komi-Permyak
kr - Kanuri
krc - Karachay-Balkar
kri - Krio
krj - Kinaray-a
krl - Karelian
ks - Kashmiri
ks-arab - Kashmiri (Arabic script)
ks-deva - Kashmiri (Devanagari script)
ksh - Colognian
ksw - S'gaw Karen
ku - Kurdish
ku-arab - Kurdish (Arabic script)
ku-latn - Kurdish (Latin script)
kum - Kumyk
kus - Kʋsaal
kv - Komi
kw - Cornish
ky - Kyrgyz
la - Latin
lad - Ladino
lb - Luxembourgish
lbe - Lak
lez - Lezghian
lfn - Lingua Franca Nova
lg - Ganda
li - Limburgish
lij - Ligurian
liv - Livonian
lki - Laki
lld - Ladin
lmo - Lombard
ln - Lingala
lo - Lao
loz - Lozi
lrc - Northern Luri
lt - Lithuanian
ltg - Latgalian
lus - Mizo
luz - Southern Luri
lv - Latvian
lzh - Literary Chinese
lzz - Laz
mad - Madurese
mag - Magahi
mai - Maithili
map-bms - Basa Banyumasan
mdf - Moksha
mg - Malagasy
mh - Marshallese
mhr - Eastern Mari
mi - Māori
min - Minangkabau
mk - Macedonian
ml - Malayalam
mn - Mongolian
mnc - Manchu
mnc-latn - Manchu (Latin script)
mnc-mong - Manchu (Mongolian script)
mni - Manipuri
mnw - Mon
mo - Moldovan
mos - Mossi
mr - Marathi
mrh - Mara
mrj - Western Mari
ms - Malay
ms-arab - Malay (Jawi script)
mt - Maltese
mus - Muscogee
mwl - Mirandese
my - Burmese
myv - Erzya
mzn - Mazanderani
na - Nauru
nah - Nāhuatl
nan - Min Nan Chinese
nap - Neapolitan
nb - Norwegian Bokmål
nds - Low German
nds-nl - Low Saxon
ne - Nepali
new - Newari
ng - Ndonga
nia - Nias
niu - Niuean
nl - Dutch
nl-informal - Dutch (informal address)
nmz - Nawdm
nn - Norwegian Nynorsk
no - Norwegian
nod - Northern Thai
nog - Nogai
nov - Novial
nqo - N’Ko
nrm - Norman
nso - Northern Sotho
nv - Navajo
ny - Nyanja
nyn - Nyankole
nys - Nyungar
oc - Occitan
ojb - Northwestern Ojibwa
olo - Livvi-Karelian
om - Oromo
or - Odia
os - Ossetic
pa - Punjabi
pag - Pangasinan
pam - Pampanga
pap - Papiamento
pcd - Picard
pcm - Nigerian Pidgin
pdc - Pennsylvania German
pdt - Plautdietsch
pfl - Palatine German
pi - Pali
pih - Norfuk / Pitkern
pl - Polish
pms - Piedmontese
pnb - Western Punjabi
pnt - Pontic
prg - Prussian
ps - Pashto
pt - Portuguese
pt-br - Brazilian Portuguese
pwn - Paiwan
qu - Quechua
qug - Chimborazo Highland Quichua
rgn - Romagnol
rif - Riffian
rki - Arakanese
rm - Romansh
rmc - Carpathian Romani
rmy - Vlax Romani
rn - Rundi
ro - Romanian
roa-tara - Tarantino
rsk - Pannonian Rusyn
ru - Russian
rue - Rusyn
rup - Aromanian
ruq - Megleno-Romanian
ruq-cyrl - Megleno-Romanian (Cyrillic script)
ruq-latn - Megleno-Romanian (Latin script)
rw - Kinyarwanda
ryu - Okinawan
sa - Sanskrit
sah - Yakut
sat - Santali
sc - Sardinian
scn - Sicilian
sco - Scots
sd - Sindhi
sdc - Sassarese Sardinian
sdh - Southern Kurdish
se - Northern Sami
se-fi - Northern Sami (Finland)
se-no - Northern Sami (Norway)
se-se - Northern Sami (Sweden)
sei - Seri
ses - Koyraboro Senni
sg - Sango
sgs - Samogitian
sh - Serbo-Croatian
sh-cyrl - Serbo-Croatian (Cyrillic script)
sh-latn - Serbo-Croatian (Latin script)
shi - Tachelhit
shi-latn - Tachelhit (Latin script)
shi-tfng - Tachelhit (Tifinagh script)
shn - Shan
shy - Shawiya
shy-latn - Shawiya (Latin script)
si - Sinhala
simple - Simple English
sjd - Kildin Sami
sje - Pite Sami
sk - Slovak
skr - Saraiki
skr-arab - Saraiki (Arabic script)
sl - Slovenian
sli - Lower Silesian
sm - Samoan
sma - Southern Sami
smn - Inari Sami
sms - Skolt Sami
sn - Shona
so - Somali
sq - Albanian
sr - Serbian
sr-ec - Serbian (Cyrillic script)
sr-el - Serbian (Latin script)
srn - Sranan Tongo
sro - Campidanese Sardinian
ss - Swati
st - Southern Sotho
stq - Saterland Frisian
sty - Siberian Tatar
su - Sundanese
sv - Swedish
sw - Swahili
syl - Sylheti
szl - Silesian
szy - Sakizaya
ta - Tamil
tay - Tayal
tcy - Tulu
tdd - Tai Nuea
te - Telugu
tet - Tetum
tg - Tajik
tg-cyrl - Tajik (Cyrillic script)
tg-latn - Tajik (Latin script)
th - Thai
ti - Tigrinya
tk - Turkmen
tl - Tagalog
tly - Talysh
tly-cyrl - Talysh (Cyrillic script)
tn - Tswana
to - Tongan
tok - Toki Pona
tpi - Tok Pisin
tr - Turkish
tru - Turoyo
trv - Taroko
ts - Tsonga
tt - Tatar
tt-cyrl - Tatar (Cyrillic script)
tt-latn - Tatar (Latin script)
tum - Tumbuka
tw - Twi
ty - Tahitian
tyv - Tuvinian
tzm - Central Atlas Tamazight
udm - Udmurt
ug - Uyghur
ug-arab - Uyghur (Arabic script)
ug-latn - Uyghur (Latin script)
uk - Ukrainian
ur - Urdu
uz - Uzbek
uz-cyrl - Uzbek (Cyrillic script)
uz-latn - Uzbek (Latin script)
ve - Venda
vec - Venetian
vep - Veps
vi - Vietnamese
vls - West Flemish
vmf - Main-Franconian
vmw - Makhuwa
vo - Volapük
vot - Votic
vro - Võro
wa - Walloon
wal - Wolaytta
war - Waray
wls - Wallisian
wo - Wolof
wuu - Wu Chinese
wuu-hans - Wu Chinese (Simplified)
wuu-hant - Wu Chinese (Traditional)
xal - Kalmyk
xh - Xhosa
xmf - Mingrelian
xsy - Saisiyat
yi - Yiddish
yo - Yoruba
yrl - Nheengatu
yue - Cantonese
yue-hans - Cantonese (Simplified)
yue-hant - Cantonese (Traditional)
za - Zhuang
zea - Zeelandic
zgh - Standard Moroccan Tamazight
zh - Chinese
zh-cn - Chinese (China)
zh-hans - Simplified Chinese
zh-hant - Traditional Chinese
zh-hk - Chinese (Hong Kong)
zh-mo - Chinese (Macau)
zh-my - Chinese (Malaysia)
zh-sg - Chinese (Singapore)
zh-tw - Chinese (Taiwan)
zu - Zulu
Format
Export for off-line translation
Export in native format
Export in CSV format
Fetch
{{DISPLAYTITLE:Hệ thống mẫu mới trong LS3.x}}<languages /> __TOC__ =Giới thiệu= Xin lưu ý: trong các phiên bản trước của LimeSurvey, các tệp xác định giao diện của khảo sát, cách trình bày khảo sát về màu sắc, phông chữ, bố cục và (một số) hành vi, được gọi là "mẫu". Do những hiểu biết mới, giờ đây đây được gọi là "chủ đề", trong khi mẫu được dành riêng cho các khảo sát mẫu. Trên trang này bạn sẽ học cách: * Sử dụng hệ thống chủ đề mới của LimeSurvey 3.0. * Sử dụng tính kế thừa để quản lý chủ đề của riêng bạn. * Thêm ảnh vào chủ đề của bạn * Quản lý các tùy chọn chủ đề cho khảo sát và nhóm khảo sát của bạn <hr/> LimeSurvey 3 giới thiệu một hệ thống công cụ chủ đề hoàn toàn mới, dựa trên Twig 1.29, Bootstrap và cho phép kế thừa chủ đề và các tùy chọn chủ đề. Nó loại bỏ hoàn toàn hệ thống từ khóa thay thế cũ. Vì vậy, bây giờ, 100% HTML giao diện người dùng có thể được tùy chỉnh. Ví dụ: trong hệ thống chủ đề cũ, có từ khóa {ASSESSMENTS} được thay thế bằng HTML đánh giá tại thời điểm thực thi. Người thiết kế chủ đề không có cách nào để tùy chỉnh HTML này (ngoài việc sử dụng JavaScript). Bây giờ, có một tệp tên là đánh giá.twig chứa logic (được viết bằng Twig) để tạo HTML này. Trong các trang này, chúng tôi sẽ cung cấp cho bạn một số giải thích về cách sử dụng công cụ chủ đề mới này. <div class="simplebox">[[File:help.png]] Ở đây chúng tôi sẽ không nêu chi tiết cách thức hoạt động của Twig. Đó là một loại PHP rất đơn giản, cung cấp mức độ bảo mật cao nhờ hệ thống “sandbox” (chúng ta sẽ thấy điều đó chi tiết hơn trong phần về mã Theme Engine Core). Nếu bạn đã biết PHP thì sẽ cực kỳ dễ dàng để bạn thành thạo. Nếu bạn không biết PHP, nó vẫn khá dễ học. Vui lòng xem tài liệu Twig 1.X: https://twig.symfony.com/</div> =Chỉnh sửa bằng Giao diện quản trị= ==danh sách chủ đề== Trên bảng điều khiển quản trị hiện có một hộp để truy cập danh sách chủ đề: [[File:Template list.jpg|thumb|800px |center|baseline|border|''Danh sách chủ đề sau khi cài đặt RC3 mới'']] <br /> Danh sách được chia thành 5 cột: * bản xem trước của chủ đề: nó chỉ là một tệp hình ảnh có tên “preview.png” ở thư mục gốc của chủ đề * “tiêu đề” của chủ đề như được chỉ định trong tệp kê khai (config.xml trong thư mục gốc của chủ đề) * mô tả về chủ đề: một chuỗi được đặt trong tệp kê khai của nó * loại chủ đề: Chủ đề cốt lõi (được cung cấp cùng với LimeSurvey), Chủ đề người dùng (được thêm trong thư mục tải lên), chủ đề XML (không được tải trong cơ sở dữ liệu) * Mở rộng: nếu chủ đề mở rộng một chủ đề khác, tên của nó sẽ được chỉ định ở đây * Một số nút hành động: ** Cài đặt: it sẽ tải tệp kê khai của một chủ đề để thêm nó vào cơ sở dữ liệu và cung cấp nó để lựa chọn ở cấp khảo sát ** Gỡ cài đặt: nó sẽ xóa các mục cấu hình của một chủ đề trong cơ sở dữ liệu ** Trình chỉnh sửa chủ đề: nó sẽ chuyển hướng bạn đến trình chỉnh sửa chủ đề ** Tùy chọn chủ đề: nó sẽ dẫn bạn cấu hình chung của các tùy chọn chủ đề ==Trình chỉnh sửa chủ đề== <div class="simplebox"> [[File:help.png]] Tài liệu này giả sử bạn đã biết cách sử dụng Theme Editor trong phiên bản LS trước.</div> <br> Trình chỉnh sửa chủ đề đã được giữ nguyên nhất có thể so với bản gốc. Vì vậy, khi bạn mở Chủ đề cốt lõi, bạn không thể chỉnh sửa nó. Nhưng bây giờ, thay vì nút “sao chép”, bạn có “nút mở rộng”. <br> [[File:Extends default.png|center|baseline|border|''Bây giờ bạn '''mở rộng''' chủ đề'']] <span id="A_quick_overview_of_the_concept_of_theme_inheritance"></span> ====Tổng quan nhanh về khái niệm kế thừa chủ đề==== Trong LS3, một chủ đề bây giờ có thể kế thừa từ một chủ đề khác, nó có thể “mở rộng” một chủ đề khác. Điều này có nghĩa là thư mục chủ đề thực tế sẽ trống, nó sẽ chỉ chứa các tệp (chế độ xem, biểu định kiểu, tập lệnh, tài nguyên, v.v.) khác với thư mục gốc. Làm như vậy, bạn sẽ dễ dàng tạo một nhóm chủ đề cho những người dùng khác nhau của mình mà không cần phải duy trì nhiều chủ đề khác nhau. Ví dụ: bạn có thể có chủ đề tự tạo của riêng mình và sau đó là một phiên bản dành cho một công ty (với logo, phong cách của nó, có thể là một liên kết đến trang web của nó ở chân trang, v.v.), một phiên bản khác cho một công ty khác, v.v. bạn cập nhật CSS hoặc bố cục chung của chủ đề tùy chỉnh của mình, tất cả các chủ đề kế thừa từ đó sẽ được cập nhật tự động. Lưu ý rằng tính kế thừa là đệ quy: một chủ đề có thể mở rộng một chủ đề mở rộng một chủ đề khác, v.v. <div class="simplebox">[[File:help.png]] Điều đó cũng có nghĩa là nếu bạn mở rộng một trong những chủ đề cốt lõi của LimeSurvey, bạn vẫn sẽ được hưởng lợi từ các bản cập nhật của nó.</div> <span id="Novelties_in_the_user_interface"></span> ====Tính mới trong giao diện người dùng==== Để mở rộng chủ đề Đơn sắc của LimeSurvey, hãy chuyển đến danh sách Chủ đề, nhấp vào nút “Trình chỉnh sửa chủ đề” của chủ đề Đơn sắc. Sau đó, nhấp vào “mở rộng” và xác thực tên mới “extends_monochrome”. Nếu bây giờ bạn vào thư mục tải lên (với ứng dụng khách file/ftp của bạn), bạn sẽ thấy rằng một thư mục mới đã được tạo: '''upload/themes/extends_monochrome''' Nó chứa một tệp XML và các thư mục , nhưng hầu hết các thư mục đều trống. Nó không có chế độ xem, CSS hay JS. Tuy nhiên, bạn vẫn có thể chọn chủ đề này làm chủ đề bình thường từ cuộc khảo sát và nó sẽ trông giống hệt chủ đề đơn sắc. [[Tệp:Mở rộng đơn sắc trống.jpg|center|đường cơ sở|biên giới|''Cây chủ đề (thư mục và tệp) ngay sau khi được tạo. Nó gần như trống rỗng'']] <div class="simplebox">[[File:help.png]] Các tài nguyên (jpg, png, v.v.) từ chủ đề gốc được sao chép khi mở rộng chủ đề. Điều này là do nếu bạn sao chép tệp CSS từ chủ đề gốc cục bộ và nếu nó đề cập đến các tệp đó (như trong câu lệnh hình nền), thì nó sẽ cần tìm những ảnh đó trong đường dẫn chủ đề hiện tại.</div> Trình chỉnh sửa chủ đề cho chủ đềext_monochrome trông như thế này: [[File:Editingextingextends monochrome.jpg|center|baseline|border|'' Chỉnh sửa chủ đềext_monochrome'']] <br /><br /> Không có sự khác biệt lớn với trình chỉnh sửa chủ đề cũ. Hãy liệt kê những cái chính: <br /> * Từ khóa '''inherit''' trong danh sách file. Điều đó có nghĩa là tệp không có trong thư mục chủ đề và tệp từ chủ đề gốc sẽ được sử dụng. [[File:Inherited.jpg|center]] <br> * Trình chỉnh sửa chính ( [https://ace.c9.io ACE editor ] ) hiển thị nội dung của tệp đã chọn. Các tệp không chỉ chứa HTML, CSS hoặc JS mà còn chứa các câu lệnh Twig. Các câu lệnh Twig đó cho chúng ta khả năng đẩy một số logic vào các chế độ xem chủ đề vốn nằm sâu trong lõi trước đó và giờ đây có thể được tùy chỉnh. [[File:Twig code in editor.jpg|center|''Some cành mã dành cho Danh sách khảo sát'']] <br> * Đây là lý do tại sao hiện tại bạn có nhiều loại màn hình hơn trong bộ chọn thả xuống của menu trên cùng. Bạn sẽ nhận thấy các trang như 'Danh sách khảo sát', 'Tải', 'Lưu', 'Lỗi', 'Đăng ký', 'Đánh giá', 'In câu trả lời' không có sẵn trước đây hoặc bạn thực sự không thể được tùy chỉnh trước. [[File:Newscreens editables.jpg|195px|center|''Bây giờ, bạn có thể tùy chỉnh tất cả các màn hình'']] <br /> * Liên kết 'mẹo' ở cuối danh sách tệp cung cấp cho bạn cách Twig để thêm ảnh vào HTML của bạn [[File:Tip picture.png|605px|center]] <br /> * Nút 'lưu thay đổi' trở thành nút '''Sao chép vào chủ đề cục bộ và lưu thay đổi''' [[File:Copytolocal.png|360px|center]] <span id="Quick_example:_adding_a_picture"></span> ====Ví dụ nhanh: thêm ảnh ==== Nút ''Sao chép vào chủ đề cục bộ và lưu thay đổi''' sẽ thực hiện chính xác những gì nó nói: nếu bạn chỉnh sửa bất cứ thứ gì bên trong tệp và sau đó nhấp vào nút đó, nó sẽ sao chép tệp vào chủ đề bạn đang chỉnh sửa và lưu các thay đổi của bạn. <br> Ví dụ: nhấp vào tệp bố cục_global.twig, sau đó ngay trước nội dung khối ( {% block content %}) thêm văn bản “TEST” và nhấp vào nút. Bạn có thể thấy nhãn của tệp đã thay đổi từ “inherited” thành “local” và bây giờ nút này là một nút đơn giản '''lưu thay đổi'''. [[File:After Edition.png|center|''ngay sau khi nhấp vào nút'']] <br> Nếu bạn mở file explorer và vào thư mục upload/themes/extends_monochrome/views/, bạn sẽ thấy rằng nó chỉ chứa một tệp duy nhất, tệp bố cục_global.twig và có chuỗi “TEST” ở đó.!N ![[Tệp:Cây có bố cục toàn cầu mũi tên.png|center|''Bây giờ tệp đã có trong chủ đề của bạn'']] <br><br> Bây giờ thay vì thêm một văn bản ngẫu nhiên, chúng ta sẽ thêm một hình ảnh. Nếu bạn nhấp vào liên kết mẹo, nó sẽ cho bạn biết: <br> Để sử dụng ảnh trong tệp .twig: '''{{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass" }) }}''' <br> Nếu bạn đã đọc tài liệu về Twig (và lẽ ra bạn nên làm như vậy vào thời điểm này), bạn sẽ biết rằng '''{{ function( ) }}<nowiki /> ''' sẽ lặp lại kết quả của một chức năng trên màn hình. Ở đây, hàm là hình ảnh(). <div class="simplebox">[[File:help.png]] Nếu bạn tò mò muốn biết nó làm gì, bạn có thể tìm thấy nó trong mã ở đây (phiên bản RC3): [https://github.com/LimeSurvey/LimeSurvey/blob/f3737a75e428f604d68d2e5ba958f3eba3eba2e1 Hàm /application/core/LS_Twig_Extension.php#L219-L237 image() trong RC3] Nếu bạn không hiểu mã: đừng lo lắng, bạn không cần biết nó hoạt động như thế nào, nhưng tại sao phải sử dụng nó và cách sử dụng nó. </div> <br> Bạn nên sử dụng hàm image() vì hai lý do: * Hàm image lặp qua chủ đề để tìm hình ảnh. Nếu chủ đề bạn đang làm việc được mở rộng sang một chủ đề khác và nếu bạn sao chép tệp vào nơi bạn đã chèn ảnh cục bộ nhưng ảnh đó không được sao chép trong chủ đề cục bộ thì nó sẽ lặp qua cây kế thừa chủ đề để tìm vị trí bức ảnh đó là. * Nó sẽ sử dụng trình quản lý tài sản, vì vậy nó sẽ cải thiện hiệu suất chủ đề của bạn. Xem tài liệu Trình quản lý tài sản Yii để biết thêm thông tin về nó: http://www.yiiframework.com/wiki/148/under Hiểu-assets/ <div class="simplebox"> Vì vậy, để thêm ảnh vào chủ đề của bạn: * chỉ cần tải ảnh lên như bình thường bằng trình tải tệp lên ở bên phải rồi thêm ảnh vào nơi bạn muốn trong bất kỳ tệp ghép nào: '''{ { image('./files/myfile.png') }}''' * Nếu bạn muốn thêm văn bản thay thế cho ảnh của mình (dành cho trình đọc màn hình và xác thực HTML), hãy thêm: {{ image('./files/myfile.png'), ''' 'my alternative text' ' '' }} * Nếu bạn muốn thêm thuộc tính lớp và thêm id vào thuộc tính đó: {{ image('./files/myfile.png'), 'my alternative text', ''' {“class”: “a_nice_css_class ”, “id”: “any_id”} ''' }} </div> ====Một số nội dung trong danh sách VIỆC CẦN LÀM của chúng tôi==== * Cung cấp cho người dùng khả năng tải lên tệp xem trước tùy chỉnh từ chính trình chỉnh sửa * Thêm một nút để xóa tệp cục bộ và quay lại câu lệnh được kế thừa * Chỉ sao chép hình ảnh được sử dụng trong các tệp CSS (bằng cách liệt kê chúng trong tệp kê khai dưới dạng tệp cần sao chép) * Nhắc nhở chủ đề hiện tại mở rộng (nếu có) ==Tùy chọn chủ đề== Một điểm mới khác của LS3 là trang tùy chọn chủ đề. Như chúng ta sẽ thấy sau, người tạo chủ đề có thể tạo các tùy chọn của riêng họ và thậm chí cả trang tùy chọn quản trị viên của riêng họ. Ở đây, chúng ta sẽ xem nhanh cách hoạt động của trang tùy chọn của Chủ đề cốt lõi. Để truy cập các tùy chọn chủ đề ở cấp độ toàn cầu: hãy nhấp vào “tùy chọn chủ đề” trong danh sách chủ đề ===Tùy chọn nâng cao=== {{QS:Trình chỉnh sửa chủ đề - tùy chọn nâng cao}} <span id="Simple_options"></span> ===Tùy chọn đơn giản=== Trang tùy chọn Đơn giản xuất phát từ chính Mẫu. Nó được tạo thông qua một tệp cành và một số javascript bên trong thư mục /options của chủ đề: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Liên kết bị hỏng) <div class="simplebox"> [[File:help.png]] Trang này có thể khác hoàn toàn giữa các chủ đề và các nhà cung cấp chủ đề được khuyến khích tạo ra giao diện của riêng họ.</div> [[File:Options.png|thumb|750px|center]] <br><br> Trang tùy chọn đơn giản chỉ cần điền vào các thông tin đầu vào ở biểu mẫu nâng cao. Bạn có thể thấy nó bằng cách bật hoặc tắt một cài đặt trong trang đơn giản và xem cách sửa đổi dữ liệu đầu vào liên quan ở dạng nâng cao cho phù hợp. Ví dụ: trong các tùy chọn đơn giản của Mẫu mặc định, nếu bạn thay đổi chủ đề Bootswatch thành “Darkly” rồi nhấp vào tab dành cho các tùy chọn nâng cao (ngay cả khi không lưu), bạn sẽ thấy trường “Cssframework Css” đã thay đổi từ {"thay thế": [["css/bootstrap.css","css/flatly.css"]]}<br> đến<br> {"thay thế": [["css/bootstrap.css","css/darkly.css"]]} <br> Dưới đây là các tùy chọn đơn giản khác nhau cho các chủ đề cốt lõi: *'''Ajax mode:''' Trang tiếp theo nên được tải qua ajax (nhanh hơn) hay qua tải lại trang (tốt hơn cho mục đích gỡ lỗi)!N !*'''Hình nền:''' nếu được đặt thành Có, hình ảnh có tên sample.png sẽ được tải (sẽ được thay thế bằng bộ chọn tệp trong Master) *'''Box container:''' if được đặt thành Không, các câu hỏi sẽ không được chứa trong một hộp (vì vậy bạn có thể sử dụng các mảng lớn hơn chiều rộng màn hình) *'''Brandlogo:''' nếu được đặt thành không, tên của cuộc khảo sát sẽ là được hiển thị ở thanh trên cùng, nếu không, bạn có thể chọn một trong các ảnh bên trong thư mục tệp để sử dụng làm ảnh biểu tượng. *'''Animate body:''' nếu được đặt thành có, bạn có thể chọn một trong các ảnh động để áp dụng khi nội dung khảo sát được tải *'''Hoạt hình câu hỏi:''' tương tự với các câu hỏi *'''Hoạt hình cảnh báo:''' tương tự với các cảnh báo *'''Bootstrap theme:''' tại đây, bạn có thể chọn chủ đề Bootstrap để tải. Chúng đến từ Bootswatch https://bootswatch.com/3/ <br> Thư viện được sử dụng cho hoạt ảnh là animate.css: https://daneden.github.io/animate.css/ Tất nhiên, nhà cung cấp chủ đề có thể thêm thư viện hoạt ảnh của riêng mình hoặc không có thư viện hoạt ảnh nào cả. <div class="simplebox">[[File:help.png]] Các chủ đề đơn sắc sử dụng cùng một chủ đề màu bootstrap như giao diện người dùng quản trị. Họ không sử dụng hệ thống thay thế khung css mà chỉ cần thêm tệp CSS. Vì vậy, nó minh họa một cách khác để xử lý các chủ đề tùy chỉnh cho nhà cung cấp chủ đề.</div> <span id="Inheritance_system"></span> ===Hệ thống kế thừa=== Trong phần trước, chúng ta đã thấy rằng một chủ đề có thể mở rộng một chủ đề khác. Cấu hình chủ đề cũng có thể kế thừa từ cấu hình chủ đề khác. Điều đó có nghĩa là đối với một chủ đề nhất định, bạn có thể có cấu hình tại * cấp độ toàn cầu (cấp độ chúng tôi vừa thấy có thể truy cập được từ danh sách chủ đề) * ở cấp độ nhóm khảo sát * cấp độ cuối cùng ở cấp độ khảo sát. Mỗi tham số ở một cấp độ nhất định có thể kế thừa từ cấp trên: kế thừa nhóm khảo sát. Đầu tiên chúng ta hãy xem cấp độ nhóm khảo sát. <span id="At_survey_group_level"></span> ====Ở cấp độ nhóm khảo sát==== Thật vậy, một trong những điểm mới tuyệt vời khác của LS3 là hệ thống nhóm khảo sát. Bây giờ bạn có thể tạo các nhóm khác nhau để tổ chức các cuộc khảo sát của mình. Để truy cập nó, hãy chuyển đến danh sách khảo sát rồi nhấp vào tab nhóm khảo sát: [[File:Surveygroup.png|thumb|800px|center|''tab nhóm khảo sát'']] <br> Trong danh sách này, bạn có hai nút hành động. Nếu nhóm trống, bạn có thể xóa nó. Nếu không, bạn luôn có thể chỉnh sửa nó. Bằng cách nhấp vào nút chỉnh sửa, bạn sẽ đến trang cấu hình Nhóm khảo sát: [[File:Surveygroupedit.png|thumb|800px|center|''Chỉnh sửa nhóm khảo sát mặc định'']] <br> Tab thứ ba của trang này có tên là “Tùy chọn mẫu cho nhóm khảo sát này”. Nếu bạn nhấp vào nó, bạn sẽ thấy danh sách các chủ đề giống như trong danh sách chủ đề, ngoại trừ việc ở đây chỉ hiển thị nút tùy chọn (chỉ có thể truy cập trình chỉnh sửa chủ đề từ danh sách chính). <br> Bây giờ, nếu bạn nhấp vào tùy chọn cho Mẫu mặc định, bạn sẽ thấy điều này: [[File:Option group kế thừa.png|thumb|800px|center|''Tại Nhóm khảo sát, Tùy chọn mẫu được kế thừa theo mặc định'']] <br> * '''Kế thừa mọi thứ''' có nghĩa là tất cả cấu hình sẽ được kế thừa từ cấp cấu hình Toàn cầu. * Nếu bạn vào '''trang tùy chọn nâng cao''', bạn sẽ thấy tất cả các trường được đặt thành kế thừa. * Nếu bạn nhấp vào "không" cho "Kế thừa mọi thứ" trong các tùy chọn đơn giản, bạn sẽ lại thấy một trang rất giống với trang tùy chọn chung. Sự khác biệt duy nhất là đối với mỗi trường, bạn có thể đặt thành có, không hoặc kế thừa; và mỗi bộ chọn thả xuống có giá trị '' kế thừa ''. [[File:Inherit group.png|thumb|800px|center|''Mỗi cài đặt có thể có một giá trị kế thừa'']] <div class="simplebox">[[File:help.png]] Một nhóm khảo sát có thể là con của một nhóm khác. Trong trường hợp này, nó sẽ kế thừa từ cha mẹ của nó.</div> ====Ở cấp độ khảo sát==== Khi chỉnh sửa khảo sát, ở menu thanh bên trái, bạn sẽ thấy mục mới “Tùy chọn chủ đề”. Nó sẽ dẫn bạn đến trang tùy chọn của Chủ đề được chọn cho khảo sát hiện tại. Bạn sẽ tìm thấy hệ thống kế thừa giống như trong nhóm khảo sát, nhưng lần này, kế thừa có nghĩa là cài đặt sẽ được kế thừa từ Nhóm khảo sát của khảo sát. [[File:Options Survey.png|thumb|800px|center|''Tùy chọn chủ đề ở cấp độ khảo sát'']] ==Ví dụ về trường hợp sử dụng== Giả sử bạn đang sử dụng một chủ đề duy nhất cho các công ty khác nhau (A và B). Bạn đặt các tùy chọn yêu thích của mình ở cấp độ toàn cầu (ví dụ: bật ajax, tạo hoạt ảnh cho nội dung có trang trình bày, cảnh báo bằng xung). Sau đó, bạn tạo một nhóm khảo sát cho mỗi công ty: một nhóm khảo sát cho công ty A sẽ tổ chức tất cả các cuộc khảo sát cho công ty này và một nhóm khảo sát cho công ty B sẽ tổ chức tất cả các cuộc khảo sát cho công ty B. Ở cấp độ này, bạn sẽ đặt chỉ có biểu tượng và nền và bạn sẽ cho phép các tùy chọn khác kế thừa. Vì vậy, tất cả các cuộc khảo sát trong nhóm A sẽ sử dụng logo của công ty A và tất cả các cuộc khảo sát từ nhóm B sẽ sử dụng logo của công ty B. Đối với một trong các cuộc khảo sát của công ty A, bạn có thể sử dụng một nền tảng khác liên quan đến chủ đề của khảo sát: bạn chỉ cần thay đổi nền trong các tùy chọn ở cấp độ khảo sát. Nếu ai đó ở công ty B nói với bạn rằng cảnh báo xung quá mạnh và anh ta muốn thứ gì đó mượt mà hơn như mờ dần, bạn chỉ cần thay đổi hoạt ảnh cảnh báo ở cấp Nhóm khảo sát B và tất cả các cuộc khảo sát của nhóm này giờ đây sẽ sử dụng hoạt ảnh này. Nếu công ty A thay đổi logo, bạn có thể thay đổi logo ở cấp Nhóm khảo sát A và tất cả các khảo sát của nhóm này sẽ sử dụng logo mới. <br> <div class="simplebox"> Những ví dụ đó dựa trên các tùy chọn hiện tại của chủ đề cốt lõi. Nhưng tất nhiên, nếu bạn là nhà cung cấp chủ đề hoặc nếu bạn có thể viết kịch bản một chút bằng cành cây, bạn có thể thêm các tùy chọn của riêng mình. Ví dụ: bạn có thể thêm tùy chọn “chân trang thông tin”, nơi bạn có thể thêm dữ liệu như trang web công ty hoặc số điện thoại để được trợ giúp. Sau đó, nếu công ty A có các phòng ban khác nhau, với số điện thoại khác nhau, bạn chỉ cần tạo một nhóm con cho mỗi phòng ban trong Nhóm khảo sát A. Mỗi nhóm con sẽ có số điện thoại riêng trong các tùy chọn này.</div> <span id="FAQ_about_theme_customization"></span> = Câu hỏi thường gặp về tùy chỉnh chủ đề = Bạn sẽ tìm thấy ở đây một số câu trả lời cho các câu hỏi đã được hỏi trong diễn đàn và điều đó có thể giúp bạn tùy chỉnh chủ đề của mình. ==Tùy chỉnh CSS/JS: giải quyết với người quản lý tài sản ("tại sao những thay đổi của tôi không được áp dụng?") == <br /> Nếu bạn đang cố cập nhật CSS/JS của một chủ đề bằng cách chỉnh sửa trực tiếp mã bằng trình chỉnh sửa yêu thích của mình, bạn có thể ngạc nhiên khi những thay đổi của mình không được áp dụng. <br /> Kể từ phiên bản 2.50, LS sử dụng trình quản lý tài sản Yii: [http://www.yiiframework.com/wiki/148/under Hiểu-assets/ Yii Tài liệu về Tài sản] <br /> Nó di chuyển các tệp CSS/JS của một chủ đề sang thư mục con tmp/ với một chuỗi ngẫu nhiên (ví dụ: "tmp/1ef64ml/"). Vì vậy, nếu bạn thực hiện bất kỳ thay đổi nào đối với tệp css/js và thông báo cho người quản lý nội dung, các tệp sẽ được sao chép sang thư mục con mới có tên mới để bộ đệm của trình duyệt người dùng được cập nhật và họ thấy css/js mới . Nếu không, họ sẽ phải xóa bộ nhớ đệm của trình duyệt. <br /> Ở đây các liên kết CSS trong tiêu đề khi trình quản lý tài sản được bật: <br /> [[File:Assets on vanilla.jpg]] <br /> Như bạn có thể thấy, tất cả chúng đều đề cập đến các thư mục con tmp/. <br /> Ở đây các liên kết CSS trong tiêu đề khi trình quản lý nội dung tắt: <br /> [[File:Asset off.png]] <br /> Như bạn có thể thấy, chúng trỏ đến các tệp thực của chủ đề. <br /> <div class="simplebox">[[File:help.png]] Tất nhiên, nếu Trình quản lý tài sản không biết bạn đã thay đổi tệp thì tệp cũ từ thư mục tmp/cũ vẫn không thay đổi và những thay đổi của bạn sẽ không bao giờ được áp dụng..</div> Vì vậy, khi bạn chỉnh sửa CSS/JS của một chủ đề, bạn có nhiều khả năng khác nhau: *'''Bạn có thể sử dụng LS Theme Editor:''' nó xử lý công việc quản lý tài sản và bạn không cần phải làm vậy lo lắng về bất cứ điều gì *'''Bạn có thể bật chế độ gỡ lỗi:''' nó sẽ tắt trình quản lý nội dung, do đó, các tệp css/js thực sự trong chủ đề của bạn sẽ được gọi (nhưng sau đó, bạn phải làm mới bộ nhớ đệm của trình duyệt ở mỗi lần tải) * '''Bạn có thể làm mới bộ đệm nội dung''': từ Cài đặt chung -> Chung -> Xóa bộ đệm nội dung [[File:Clearassets-ls3 3.png]] <div class="simplebox">[[File:help.png]] '''Sử dụng trình chỉnh sửa chủ đề để chỉnh sửa CSS tùy chỉnh cho đến nay là giải pháp tốt nhất.'''</div> Sử dụng trình chỉnh sửa chủ đề sẽ giúp bạn hiểu cấu trúc của công cụ chủ đề mới. Ngoài ra, nếu việc tùy chỉnh của bạn có tính chất trái cây, hãy cẩn thận với đặc tính CSS: hầu hết các định nghĩa đều sử dụng bộ chọn ".fruity" (một trong các lớp của phần tử cơ thể) == Thêm phông chữ tùy chỉnh vào chủ đề của tôi == === Cách dễ dàng: sử dụng Google Font CDN === Bootswatch Survey Theme sử dụng Google Font CDN. Hãy cùng xem nó hoạt động như thế nào nhé: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css <syntaxhighlight lang="css"> @import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic"); </syntaxhighlight> Sau đó, phông chữ Lato được sử dụng thông qua các quy tắc CSS: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72 <syntaxhighlight lang="css"> cơ thể { ... Họ phông chữ: "Lato"; ... } </syntaxhighlight> Bạn có thể sử dụng bất kỳ phông chữ Google nào theo cách đó trong chủ đề tùy chỉnh của mình. Tất nhiên, bạn nên xóa bộ chọn phông chữ khỏi các tùy chọn của chủ đề. Xóa những dòng đó trong options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230 === Sử dụng phông chữ cục bộ === Tất nhiên, bạn cũng có thể tải xuống các tệp phông chữ và sử dụng chúng từ máy chủ cục bộ thay vì từ Google CDN (tốt hơn cho quyền riêng tư). Để có ví dụ về cách thực hiện, đây là phiên bản phông chữ noto địa phương của chúng tôi: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css <syntaxhighlight lang="css"> @font-face { họ phông chữ: 'Noto Sans'; cỡ chữ: 300; kiểu phông chữ: bình thường; src: url('./font-src/Noto/NotoSans-Regular.ttf'); } ... </syntaxhighlight> Bạn có thể sử dụng định nghĩa tương tự trong tệp css chủ đề của mình, sau đó bằng cách sao chép tệp NotoSans-Regular.ttf trong thư mục css/font-src/ chủ đề của bạn. Sau đó, áp dụng phông chữ đó cho nội dung của bạn (hoặc bất kỳ thành phần nào khác) như trên và xóa bộ chọn phông chữ tùy chọn mặc định. === Tạo bộ chọn phông chữ của riêng bạn trong các tùy chọn === Hiện tại, bạn không thể dễ dàng sử dụng bộ chọn phông chữ cốt lõi để thêm phông chữ của riêng mình vào các tùy chọn. Trước tiên, chúng tôi cần cung cấp khả năng cho người dùng cuối tải lên các gói tùy chỉnh (xem đoạn tiếp theo: Tìm hiểu về Fruity Font Selector ) <br> Đây là cách tiến hành: <br> *Thêm hai phông chữ (my_custom_font và my_custom_other_font) vào chủ đề của bạn, sử dụng CDN hoặc máy chủ cục bộ *Sau đó, trong tệp css của bạn, thêm hai lớp mới: <br> <syntaxhighlight lang="css"> .font-my_custom_font { họ phông chữ: 'my_custom_font '; } .font-my_custom_other_font { họ phông chữ: 'my_custom_other_font'; } </syntaxhighlight> *Trong tệp XML của chủ đề của bạn, hãy thêm tùy chọn phông chữ (mặc định sẽ là my_custom_font) : <syntaxhighlight lang="xml"> <options> .... <font>my_custom_font</font> </options> </syntaxhighlight> * trong option.twig, hãy thêm bộ chọn phông chữ để thêm các dòng đó (hiện chưa được kiểm tra, vì vậy hãy khiếu nại lên diễn đàn nếu nó không hoạt động): <syntaxhighlight lang="html"> <div class='row ls-space margin top-15 bottom-15 action_hide_on_inherit'> <hr/> </div> <div class='row action_hide_on_inherit'> <div class='col-sm-12'> <div class='panel panel-default'> <div class='panel-heading'> {{ "Phông chữ tùy chỉnh của tôi" | t }}</div> <div class='panel-body'> <div class='form-group row'> <label for='simple_edit_font' class='control-label'>{{ "Chọn phông chữ:" | t }}</label> <div class='col-sm-12'> <select class='form-control selector_option_value_field' id='simple_edit_font' name='font'> {% nếu templateConfiguration.sid không trống hoặc templateConfiguration.gsid không trống %} // Đây không phải là "chủ đề" thay vì "mẫu" sao? {% đặt fontOptions = fontOptions ~ '<option value = "inherit" > Thừa kế</option> ' %} {% endif %} <optgroup label="{{ "My Custom fonts" | t }}"> <option class="font-my_custom_font" value="custom_font" data-font-package="" > Phong tục</option> <option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package="" > Khác</option> </optgroup> </select> </div> </div> </div> </div> </div> </div> </syntaxhighlight> <br> Bây giờ người dùng của bạn sẽ có thể chọn giữa hai phông chữ đó. === Xem xét Bộ chọn phông chữ Fruity === Trong tương lai, chúng tôi sẽ cung cấp cho người dùng cuối khả năng tải lên các gói nội dung của riêng họ, bao gồm các gói phông chữ. Nó sẽ thực hiện rất dễ dàng mọi tùy chỉnh phông chữ. <br> Để hiểu Yii Gói: <br> http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail <br> <br> Các gói LimeSurvey được xác định trong các tệp khác nhau. Các gói phông chữ được xác định tại đây: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php <br> Ví dụ: gói phông chữ Noto được xác định tại đây: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53 <br> <syntaxhighlight lang="php"> 'font-noto' => array( 'devBaseUrl' => 'assets/fonts/', 'basePath' => 'fonts', 'css' => array( ' noto.css', ), ), </syntaxhighlight> <br> Tệp noto.css chứa ở đây: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css <br> Chú ý định nghĩa của lớp css ".font-noto" ở cuối nó: <syntaxhighlight lang="css"> @font-face { họ phông chữ: 'Noto Sans'; ... } ... .font-noto{ họ phông chữ: 'Noto Sans'; } </syntaxhighlight> <br> Sau đó, trong Chủ đề Vanilla, phông chữ noto được sử dụng bằng cách thêm gói noto và xác định tùy chọn phông chữ thành noto: <br> https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79 <syntaxhighlight lang="xml"> <packages> .... <add> phông chữ-noto</add> </packages> </syntaxhighlight > https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58 <br> <syntaxhighlight lang="xml"> <options> .... <font>không phải</font> </options> </syntaxhighlight> <br> Sau đó, phông chữ của lớp nội dung được xác định bằng giá trị này: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76 <syntaxhighlight lang="html"> <body class=" ... font-{{ aSurveyInfo.options.font }} ... " ... > </syntaxhighlight> Tất nhiên, tệp XML chỉ chứa các giá trị mặc định cho cấu hình chủ đề của bạn. Nhưng thực tế, những giá trị đó được xác định và đọc bên trong cơ sở dữ liệu (bảng "template_configuration" (Câu hỏi: "template_" của "theme_"?) dưới dạng chuỗi json. Tệp option.js chỉ sử dụng giá trị của bộ chọn phông chữ của tùy chọn đơn giản để thay đổi giá trị bên trong biểu mẫu tab nâng cao: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174 Vì vậy, khi chức năng "tải lên gói nội dung" khả dụng, bạn sẽ dễ dàng thêm tập lệnh quét tất cả các gói phông chữ hiện có để thêm chúng vào bộ chọn. == Thêm tùy chọn chủ đề để kiểm soát vị trí và hiển thị các thành phần khảo sát == Hướng dẫn này sẽ chỉ ra cách thêm tùy chọn vào chủ đề mở rộng để hiển thị các thành phần khảo sát ở nhiều vị trí khác nhau. Trong trường hợp này, chúng tôi sẽ tạo các tùy chọn chủ đề để hiển thị tiêu đề khảo sát ở hai vị trí khác nhau. <div class="simplebox"> [[File:help.png]] Để đơn giản, chúng tôi sẽ hướng dẫn dựa trên phần mở rộng của chủ đề "bootswatch" trong phiên bản LimeSurvey 3.4.3.</div> === Tạo một chủ đề tùy chỉnh === #Mở rộng chủ đề "bootswatch" như mô tả ở trên. #Sao chép <span style="color: #BA2121;">custom.css</span> sang chủ đề cục bộ như mô tả ở trên. ===Tạo tùy chọn chủ đề mới=== #Sao chép nội dung của <span style="color: #BA2121;">/themes/survey/bootswatch/options/</span> sang <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/options/</span> . #Open <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/ options/options.twig</span> trong trình chỉnh sửa và tìm "{# Bootstrap Bootswatch theme #}". Trực tiếp trước cha mẹ của nó<nowiki><div class='row'></nowiki> phần tử, thêm phần này:<syntaxhighlight lang="html"> {# Tên khảo sát tùy chỉnh trong thanh điều hướng #} <div class='row'> <div class='col-sm-12 col-md-6'> <div class='form-group row'> <label for='simple_edit_options_surveyname1' class='control-label'>Tên khảo sát trong thanh điều hướng</label> <div class='col-sm-12'> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> Vâng </label> <label class="btn btn-default"> <input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> Không </label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div> {# Tên khảo sát tùy chỉnh bên dưới thanh tiến trình #} <div class='row'> <div class='col-sm-12 col-md-6'> <div class='form-group row'> <label for='simple_edit_options_surveyname2' class='control-label'>Tên khảo sát bên dưới thanh tiến trình</label> <div class='col-sm-12'> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> Vâng </label> <label class="btn btn-default"> <input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> Không </label> </div> </div> </div> </div> </div> <div class='row'> <hr/> </div></syntaxhighlight> #Mở <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/config.xml</span> và thêm hai mục vào khối "options" để nó trông như thế này:<syntaxhighlight lang="xml"><options> <ajaxmode> TRÊN</ajaxmode> ... <surveyname1> TRÊN</surveyname1> <surveyname2> TRÊN</surveyname2> </options></syntaxhighlight> #Điều này sẽ cung cấp cho bạn hai tùy chọn mới trong màn hình Tùy chọn chủ đề như thế này:<br /> [[File:Tutorial_tp_1_1.png]] ===Chế độ xem đã sửa đổi cho Tiêu đề khảo sát trong thanh điều hướng=== #Tạo thư mục mới <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/views/subviews/header/</span> . #Copy <span style="color: #BA2121;">/themes/survey/vanilla/ lượt xem/subviews/header/nav_bar.twig</span> vào thư mục mới đó. #Mở <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/header/nav_bar.twig</span> và tìm "{# Logo option #}". Theo đó, hãy sửa đổi câu lệnh IF cho logo/tên khảo sát để nó trông như thế này:<syntaxhighlight lang="html"> {# Tùy chọn biểu trưng #} {% if( aSurveyInfo.options.brandlogo == "on") %} <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container" {{ aSurveyInfo.attr.navbarbrand }} > {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img- responsive"}) }} </div> {% endif %} {% if( aSurveyInfo.options.surveyname1 == "on") %} <div class="{{ aSurveyInfo.class.navbarbrand }}" {{ aSurveyInfo.attr.navbarbrand }} > {{ aSurveyInfo.name }} </div> {% endif %}</syntaxhighlight> #Thêm nội dung như thế này vào <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/css/custom.css</span> :<syntaxhighlight lang="css"> .navbar-thương hiệu { chiều cao dòng: 60px; cỡ chữ: 32px; }</syntaxhighlight> #Chuyển tùy chọn chủ đề "Tên khảo sát trong thanh điều hướng" thành "Có" #Bạn sẽ thấy điều này:<br /> [[File:Tutorial_tp_1_2.png]] ===Chế độ xem đã sửa đổi cho Tiêu đề khảo sát trong thanh tiến trình=== #Tạo thư mục mới <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews</span> . #Sao chép <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig</span> vào thư mục mới đó. #Open <span style="color: #BA2121;">/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container .twig</span> và thêm một<nowiki><h1></nowiki> phần tử cho tên khảo sát. Vì vậy, nó trông như thế này: <syntaxhighlight lang="html"><div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}> {# Tên khảo sát tùy chỉnh #} {% if( aSurveyInfo.options.surveyname2 == "on") %} <h1 class="custom-survey-name"> {{ aSurveyInfo.name }}</h1> {% endif %} {# Tên nhóm #} {{ include('./subviews/survey/group_subviews/group_name.twig') }} {# Mô tả nhóm #} {{ include('./subviews/survey/group_subviews/group_desc.twig') }} {# TRÌNH BÀY CÂU HỎI Đây là phần chính. Nó sẽ hiển thị từng câu hỏi cho nhóm này #} <!-- PRESENT THE QUESTIONS --> {% cho aQuestion trong aGroup.aQuestions %} {{ include('./subviews/survey/question_container.twig') }} {% endfor %} <!-- Hidden inputs --> {% if aGroup.show_last_group == true %} <input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' /> {% endif %} {% if aGroup.show_last_answer == true %} <input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' /> {% endif %} </div></syntaxhighlight> # Thêm nội dung như thế này vào <span style="color: #BA2121;">/upload/themes/survey/yourThemeName/css/custom.css</span> :<syntaxhighlight lang="css"> .navbar-thương hiệu { chiều cao dòng: 60ph1.custom-survey-name { lề: 0; căn chỉnh văn bản: giữa; }</syntaxhighlight> #Chuyển tùy chọn chủ đề "Tên khảo sát bên dưới thanh tiến trình" thành "Có" #Bạn sẽ thấy điều này:<br /> [[File:Tutorial_tp_1_3.png]] ===Tải xuống=== * Chủ đề mở rộng mẫu: [[Media:Test_survey_names.zip]] =Tạo chủ đề từ đầu= Sắp có tài liệu. Hiện tại chỉ đưa ra vài lời khuyên thôi. <span id="Theme_structure"></span> ==Cấu trúc chủ đề== === Tệp và thư mục === Khi bạn tạo Chủ đề từ đầu, bạn không cần phải tôn trọng cấu trúc tệp/thư mục/css/js từ Vanilla. Css/js bắt buộc được thêm vào theo lõi (bạn vẫn có thể xóa nó nếu cần) Các tệp duy nhất mà chủ đề của bạn phải có là các tệp bố cục: * '''layout_global.twig''' : hiển thị các trang để thực hiện khảo sát * '''layout_survey_list.twig''' : hiển thị danh sách khảo sát (nếu chủ đề này được đặt làm mặc định) * '' 'layout_errors.twig''' : được sử dụng để hiển thị các lỗi chặn hiển thị khảo sát. ( id khảo sát sai, nhóm trống trong nhóm xem trước, v.v.) * '''layout_user_forms.twig''': hiển thị các biểu mẫu người dùng như: token (người tham gia khảo sát) và đăng ký. * '' 'layout_print.twig''' : dùng để in bản khảo sát ra pdf * '''layout_printanswers.twig''': in câu trả lời Nội dung của các tệp đó, các tệp có chứa hay không, hoàn toàn tùy thuộc vào bạn. Tất cả các tệp và thư mục khác mà bạn tìm thấy trên Vanilla hoàn toàn là tùy chọn, vui lòng sắp xếp mã theo cách bạn muốn. <div class="simplebox">[[File:help.png]] Nếu bạn đọc mã kết xuất giao diện người dùng, bạn sẽ thấy những tên tệp đó xuất hiện trực tiếp trong đó. Đó là lý do tại sao chúng là bắt buộc. Ví dụ: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462 </div> <span id="Content"></span> === Nội dung === Trong bố cục_global.twig của Vanilla, bạn sẽ thấy chúng tôi sử dụng một biến có tên là "include_content" để quyết định nội dung sẽ hiển thị https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/ bố cục_global.twig#L114-L115 <syntaxhighlight lang="php"> {% set sViewContent = './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %} {% include './subviews/content/outerframe.twig' với {'include_content': sViewContent } %} </syntaxhighlight> aSurveyInfo.include_content cho bạn biết hành động nào hiện đang diễn ra: hiển thị câu hỏi? hiển thị kết quả gửi? hiển thị rõ ràng tất cả? v.v Như bạn có thể thấy, trong vanilla, chúng tôi tạo một tệp để đưa vào bằng hành động. Vì vậy, nếu bạn muốn biết danh sách các hành động, chỉ cần kiểm tra thư mục '''views/subviews/content''' của vanilla và xóa tiện ích mở rộng "cành cây" : https://github.com/LimeSurvey/LimeSurvey /tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content * '''clearall.twig''' * '''firstpage.twig''' * '''load.twig''' * '''mainrow.twig''' * '''main.twig''' * '''optin.twig''' * '''optout.twig''' * '''outerframe.twig'' ' * '''printanswers.twig''' * '''quotas.twig''' * '''register.twig''' * '''save.twig ''' * '''submit_preview.twig''' * '''submit.twig''' * '''userforms.twig''' Nếu bạn đã tạo chúng cho phiên bản 2.x của LimeSurvey, bạn sẽ nhận thấy rằng hầu hết chúng đều tương ứng với các tệp pstpl cũ cho Limesurvey 2.x. Một lần nữa, trong chủ đề của bạn, bạn không có nghĩa vụ phải tạo các tệp đó, với những tên đó, trong thư mục này. Ví dụ: bạn có thể chỉ cần thêm một công tắc khổng lồ trong bố cục_global.twig với HTML mong muốn cho mỗi hành động. <span id="The_manifest_config.xml"></span> === Tệp kê khai config.xml === Tệp kê khai của chủ đề chứa thông tin chính về chủ đề của bạn. Khi bạn cài đặt một chủ đề, nội dung của tệp kê khai sẽ được tải trong cơ sở dữ liệu ở hai bảng khác nhau: template và template_configuration. Vì vậy, mỗi khi bạn sửa đổi bảng kê khai của một chủ đề, bạn phải gỡ cài đặt và cài đặt lại chủ đề đó (hoặc chỉ cần đặt lại chủ đề đó). Vì quá trình này gây khó chịu khi phát triển chủ đề nên bạn có thể buộc sử dụng trực tiếp tệp XML thay vì các mục nhập DB. Để làm như vậy, trong config.php hãy bật chế độ gỡ lỗi và 'force_xmlsettings_for_survey_rendering' thành true. <span id="The_metadata_section"></span> ==== Phần siêu dữ liệu ==== Không có gì phức tạp: chỉ là thông tin chính về chủ đề của bạn. Nó sẽ được đẩy vào bảng templates_configuration <syntaxhighlight lang="xml"> <metadata> <name> the_name_of_your_theme</name> <title> Tiêu đề chủ đề của bạn</title> <creationDate> 16/10/2017</creationDate> <author> Tên của bạn</author> <authorEmail> your@email.org</authorEmail> <authorUrl> http://www.yourwebsite.org</authorUrl> <copyright> Bản quyền của bạn</copyright> <license> Giấy phép chủ đề của bạn</license> <version> phiên bản chủ đề của bạn</version> <apiVersion> 3</apiVersion> <description> Mô tả chủ đề của bạn</description> <extends> chủ đề gốc</extends> </metadata> </syntaxhighlight> Một số nhận xét: * '''name''': sẽ được sử dụng làm khóa trong db. Vì vậy, nó phải là duy nhất và không được có bất kỳ ký tự đặc biệt nào (không có khoảng trắng). Lưu ý rằng các trường hợp sẽ không được tính đến * '''Title''': sẽ được sử dụng để hiển thị tên chủ đề của bạn trong các danh sách khác nhau. Nó có thể có các ký tự đặc biệt * '''description''': sẽ được sử dụng trong danh sách chính của chủ đề khảo sát. Nó có thể chứa các ký tự đặc biệt và thậm chí cả mã HTML bằng cách sử dụng * '''extends''': tùy chọn, nó xác định các chủ đề gốc. Vì vậy, nếu bất kỳ tệp nào không có trong chủ đề này (twig/js/css/jpg, v.v.), nó sẽ tìm tệp đó trong chủ đề gốc <div class="simplebox">[[File:help.png]] Nếu bạn mở rộng một trong 3 chủ đề cốt lõi (Vanilla, Bootswatch, Fruity), bạn có thể thay đổi giá trị "extends" từ chủ đề gốc này sang chủ đề gốc khác. Tất nhiên, bạn sẽ phải đặt lại chủ đề.</div> <span id="The_files_section"></span> ==== Phần tập tin ==== Đây là một trong những điều quan trọng. Nó sẽ được đẩy vào bảng template_configuration, trong trường files_css, files_js, files_print_css dưới dạng mảng json. Ví dụ: phần tệp của Chủ đề Material Premium: <syntaxhighlight lang="xml"> <files> <css> <add> css/bootstrap-material-design.css</add> <add> css/ripples.min.css</add> <replace> css/ajaxify.css</replace> <replace> css/theme.css</replace> <replace> css/custom.css</replace> <remove> awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove> </css> <js> <replace> scripts/theme.js</replace> <replace> scripts/ajaxify.js</replace> <add> scripts/material.js</add> <add> scripts/ripples.min.js</add> <replace> scripts/custom.js</replace> </js> <print_css> <add> css/print_theme.css</add> </print_css> </files> </syntaxhighlight> Tất cả các tệp CSS/JS có trong phần này sẽ được tải khi bắt đầu khảo sát (ở chế độ ajax. Nếu chế độ ajax tắt thì tất nhiên tất cả các tệp sẽ được tải lại ở mỗi trang). Chúng sẽ được thêm vào Gói tài sản Yii dựa trên tên của chủ đề. Vì vậy, khi Trình quản lý nội dung được bật (chế độ gỡ lỗi bị tắt), các tệp đó sẽ được sao chép vào thư mục tmp cùng với phần còn lại của chủ đề (vì vậy bạn có thể sử dụng đường dẫn tương đối trong CSS và JS để tiếp cận các tệp hình ảnh). Giới thiệu về Trình quản lý tài sản trong Yii: https://www.yiiframework.com/wiki/148/under Hiểu-assets Giới thiệu về các gói trong Yii: http://www.yiiframework.com/doc/api/1.1 /CClientScript#packages-detail Họ sẽ sử dụng hệ thống kế thừa. Điều đó có nghĩa là nếu bạn thêm tệp CSS/JS vào một chủ đề nhưng nó không có trong chủ đề thì công cụ sẽ xem xét tất cả các chủ đề gốc của chủ đề này và sẽ sử dụng chủ đề đầu tiên mà nó tìm thấy. Vì vậy, nếu người dùng mở rộng chủ đề của bạn thông qua trình chỉnh sửa chủ đề, tất cả các tệp đó sẽ được kế thừa trong chủ đề của họ. Các từ khóa đề cập đến hệ thống kế thừa này. * '''add''' : nó sẽ thêm tệp vào chủ đề và vào tất cả chủ đề được kế thừa của nó * '''replace''': nó sẽ thay thế tệp của chủ đề mẹ của nó * '''remove''': nó sẽ xóa tệp khỏi gói '''bất kỳ''', kể cả gói lõi (kể từ 3.14) <div class="simplebox">[[File:help.png]] Hãy nhớ rằng bạn có thể thiết lập trong config.php 'force_xmlsettings_for_survey_rendering' để cấu hình được đọc từ XML thay vì DB (không cần thiết lập lại). Điều này sẽ giúp việc kiểm tra các sửa đổi của tệp XML trở nên dễ dàng hơn và sẽ tránh cho bạn phải gỡ cài đặt/cài đặt lại chủ đề ở mỗi lần sửa đổi XML</div> Một số nhận xét về những từ khóa đó: ===== Mẹo kế thừa ===== Như đã giải thích trước đó, từ khóa "add" có thể đề cập đến một tệp nằm trong một trong các chủ đề mẹ. Vì vậy, bạn có thể "thêm" một tệp trong phần này và vẫn không có tệp này trong chủ đề của mình mà ở một trong các chủ đề gốc của nó. Công cụ này sẽ xem xét tất cả các chủ đề gốc của nó và sẽ sử dụng chủ đề đầu tiên mà nó tìm thấy. Nếu nó không thể tìm thấy tệp và chế độ gỡ lỗi được bật trong cấu hình và chế độ gỡ lỗi giao diện người dùng js được bật trong cài đặt chung thì một thông báo trong bảng điều khiển sẽ cảnh báo bạn. Ví dụ: nếu chúng ta thêm vào my_theme:<add> css/không tồn tại.css</add> , trong bảng điều khiển chúng ta sẽ thấy: <syntaxhighlight lang=""> (¯`·._.·(¯`·._.· Lỗi cấu hình chủ đề ·._.·`¯)·._.·`¯) Không thể tìm thấy tệp 'css/unbeing.css' được xác định trong chủ đề 'my_theme' </syntaxhighlight> Nếu chế độ gỡ lỗi tắt thì sẽ không thấy lỗi nào cả. Động cơ sẽ bỏ qua các câu lệnh thêm sai. <span id="When_to_use_add,_when_to_use_replace,_when_can_I_just_leave_it_to_the_parent_theme?"></span> ===== Khi nào nên sử dụng add, khi nào nên sử dụng thay thế, khi nào tôi có thể để nó cho chủ đề gốc? ===== Đầu tiên: thêm và thay thế là những từ khóa giống nhau. Bạn có thể sử dụng cái này hay cái kia, động cơ sẽ làm như vậy. Chúng khác biệt đối với độc giả là con người, vì vậy họ hiểu ý định của bạn là gì. Bạn không thể thêm tệp có cùng tên với chủ đề gốc: nó sẽ luôn thay thế tệp đó. ví dụ: Nếu bạn có tệp có tên "my_mother_theme/foo.css" và bạn thêm tệp có tên "foo.cs" vào chủ đề con, thì chỉ "daughter_theme/foo.css" mới được thêm vào chủ đề. Nếu bạn muốn giữ lại "my_mother_theme/foo.css", chỉ cần chọn một tên khác cho "daughter_theme/foo.css", chẳng hạn như "daughter_theme/bar.css". Vì vậy từ khóa "thêm" có thể được sử dụng làm từ khóa "thay thế". Nếu bạn thắc mắc tại sao: điều này giúp việc tạo chủ đề kế thừa tự động dễ dàng hơn nhiều, việc sao chép phần tệp sẽ hoạt động ngay lập tức (không cần đổi tên "thêm" thành "thay thế" khi mở rộng một tệp). Để làm rõ điều này, hãy lấy ví dụ về Fruity. Đây là phần tệp css của nó: <syntaxhighlight lang="xml"> <css> <add> css/biến thể/sea_green.css</add> <replace> css/animate.css</replace> <replace> css/theme.css</replace> <replace> css/custom.css</replace> </css> </syntaxhighlight> Nếu bạn nhìn vào tệp custom.css ở dạng trái cây, nó hoàn toàn giống với tệp vani. Chúng ta có thể xóa tệp custom.css bên trong Fruity, tệp vanilla sẽ được tải. Chúng ta có thể xóa câu lệnh<replace> tùy chỉnh.css</replace> từ bảng kê khai Fruity, câu lệnh từ vanilla sẽ được sử dụng và vanilla custom.css sẽ được tải. Vậy tại sao chúng ta lại sử dụng câu lệnh<replace> tùy chỉnh.css</replace> bên trong bảng kê khai trái cây? Câu trả lời rất dễ: bởi vì chúng tôi muốn người dùng cuối có thể mở rộng chủ đề trái cây, sửa đổi tệp trong chủ đề cục bộ của mình và tải tệp đã sửa đổi này từ chủ đề kế thừa của anh ấy. Để hiểu, chỉ cần mở rộng kết quả và xem chủ đề mở rộng. Chủ đề mở rộng thậm chí không có tệp custom.css. Vì vậy, một trong những trái cây sẽ được sử dụng. Nhưng: nếu người dùng tạo tệp này trong chủ đề mở rộng (bằng cách nhấp vào "mở rộng" trong trình chỉnh sửa chủ đề), thì tệp này sẽ được tải từ chủ đề của họ. Vì vậy, nói chung: nếu bạn tạo một chủ đề từ đầu mà không mở rộng bất kỳ chủ đề nào, chỉ cần sử dụng câu lệnh add để thêm các tệp css/js của bạn. Thật dễ dàng. nếu bạn tạo một chủ đề mở rộng một chủ đề khác và bạn không muốn người dùng có thể mở rộng tệp css/js từ chủ đề mẹ: đừng sử dụng câu lệnh thêm trong bảng kê khai của bạn. Các tập tin sẽ vẫn được tải từ cấu hình chủ đề mẹ. nếu bạn tạo một chủ đề mở rộng một chủ đề khác và bạn muốn thay thế một tập tin từ chủ đề mẹ: hãy sử dụng từ khóa thay thế (từ khóa thêm sẽ có kết quả tương tự) nếu bạn tạo một chủ đề mở rộng một chủ đề khác, nếu bạn không thay thế một tệp nhất định từ css/js, nhưng bạn muốn người dùng có thể mở rộng tệp này: thì hãy sử dụng câu lệnh "thay thế" trong bảng kê khai của bạn cho tập tin này. Ngay cả khi bạn không thay thế tệp, bằng cách sử dụng từ khóa thay thế trong bảng kê khai: bạn cho phép người dùng làm điều đó nếu họ muốn làm điều đó. Chỉ có trường hợp cuối cùng này cần phải rèn luyện trí óc một chút mới hiểu được, các trường hợp khác đều tầm thường. <div class="simplebox">[[File:help.png]] Bạn cũng có thể đăng ký các tệp CSS và JS trực tiếp từ mã cành. Những tệp đó sẽ chỉ được tải khi tệp cành cây được yêu cầu. Nếu bạn muốn người dùng có thể kế thừa các tệp JS/Css đó từ trình chỉnh sửa chủ đề, hãy nhớ sử dụng các hàm {{registerTemplateCssFile('my_style.css')}} và {{registerTemplateScript('my_script.js')}} . Nếu bạn không sử dụng các chức năng đó, chủ đề của bạn có thể hoạt động nhưng tính kế thừa trên đó sẽ bị hỏng. Nó có cùng logic với hàm {{image('my_picture.jpg')}} </div> <span id="The_remove_keyword"></span> ===== Từ khóa xóa ===== Từ khóa xóa chỉ khả dụng kể từ 3.14. Với cái này, bạn có thể xóa bất kỳ css/tệp nào khỏi bất kỳ gói nào, ngay cả những gói cốt lõi. Nó được sử dụng trong Chủ đề Material Premium để xóa các tệp của Hộp kiểm Awseome Bootstrap: <syntaxhighlight lang="xml"> <remove> awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove> </syntaxhighlight> vì vậy bạn nên sử dụng cú pháp giống như tệp của gói (ví dụ: chỉ "awesome-bootstrap-checkbox.css" nếu không có đường dẫn thư mục sẽ không hoạt động). Bạn sẽ tìm thấy danh sách đầy đủ các gói cốt lõi và tệp của chúng trong /application/config/packages.php và config/third_party.php. Ví dụ: đối với awesome-bootstrap-checkbox.css: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56 <syntaxhighlight lang="php"> 'css'=> array( 'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css', ), </syntaxhighlight> Một cách khác để tìm tên chính xác để sử dụng trong thẻ xóa là bật trình quản lý nội dung (tắt chế độ gỡ lỗi hoặc đặt 'use_asset_manager'=>true trong cấu hình). Sau đó, đường dẫn sử dụng sẽ là đường dẫn ngay sau thư mục ngẫu nhiên trong thư mục tmp. Ví dụ: đối với awesome-bootstrap-checkbox.css: <syntaxhighlight lang="html"> <link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" /> </syntaxhighlight> Các tập tin bạn không nên xóa: '''jquery-3.1.1.min.js''' : cần thiết '''jquery-migrate-3.0.0.min.js''' : cần thiết '''survey.js''' : cần thiết '''moment-with-locales.min.js''' : cần thiết cho loại câu hỏi ngày (và một số câu hỏi khác tôi nghĩ) '''em_javascript.js''' : cần thiết cho tất cả javascript của ExpressionScript <span id="The_options_section"></span> ==== Phần tùy chọn ==== Phần này liên quan đến tùy chọn chủ đề của bạn. Nó sẽ được sử dụng để cung cấp các "tùy chọn" đã được phân loại của bảng template_configuration dưới dạng mảng json. <span id="Further_information"></span> === Thông tin thêm === * [[Chủ đề:Chức năng có sẵn]] <span id="Some_notes"></span> == Một số lưu ý == '''LƯU Ý''': nếu bạn chỉnh sửa tệp XML của một chủ đề, bạn phải gỡ cài đặt và cài đặt lại chủ đề đó để nó được tính đến. '''LƯU Ý''': để tránh điều đó, bạn có thể buộc sử dụng XML thay vì DB. Trong config.php, bật chế độ gỡ lỗi và bỏ ghi chú: 'force_xmlsettings_for_survey_rendering' => true, // Bỏ ghi chú nếu bạn muốn ép buộc sử dụng tệp XML thay vì DB (để dễ dàng phát triển chủ đề) Hãy cẩn thận: mọi thứ sẽ được tải từ XML (các tùy chọn được bao gồm, v.v.) '''LƯU Ý''': nếu bạn chỉnh sửa thủ công các tệp CSS/JS (không sử dụng Trình chỉnh sửa chủ đề) và nếu chế độ gỡ lỗi bị tắt, giờ đây bạn có thể buộc xóa nội dung. Trong "Cài đặt chung", "tab Chung", nhấp vào nút "Xóa bộ đệm nội dung". '''LƯU Ý''': nếu bạn xóa phần