This page is a translated version of the page New Template System in LS3.x and the translation is 100% complete.

Panimula

Tandaan: sa mga nakaraang bersyon ng LimeSurvey, ang mga file na tumutukoy kung paano mukhang ang survey, kung paano ito ipinapakita pagdating sa kulay, font, layout at (ilang) gawi, ay tinatawag na "template". Dahil sa mga bagong natuklasan, tinatawag na itong "tema", habang ang template ay nakalaan na para sa mga halimbawang survey.

Sa pahinang ito, matututuhan mo kung paano:

Gamitin ang bagong sistema ng tema ng LimeSurvey 3.0.
Gamitin ang inheritance upang pamahalaan ang sarili mong mga tema.
Magdagdag ng larawan sa iyong tema
Pamahalaan ang mga opsyon sa tema para sa iyong mga survey at mga pangkat ng survey

Ipinakikilala ng LimeSurvey 3 ang isang ganap na bagong sistema ng theme engine, batay sa Twig 1.29 at Bootstrap, na nagpapahintulot ng inheritance ng tema at mga opsyon sa tema. Ganap nitong inaalis ang lumang sistema ng replacement keyword. Kaya ngayon, 100% ng frontend HTML ay maaaring i-customize. Halimbawa, sa lumang sistema ng tema, mayroong keyword na {ASSESSMENTS} na pinapalitan ng HTML ng pagtatasa sa oras ng pagpapatakbo. Walang paraan ang designer ng tema para i-customize ang HTML na ito (maliban sa paggamit ng JavaScript). Ngayon, mayroong file na tinatawag na assessments.twig na naglalaman ng lohika (nakasulat sa Twig) para buuin ang HTML na ito. Sa mga pahinang ito, bibigyan ka namin ng ilang paliwanag kung paano gamitin ang bagong theme engine na ito.

Hindi namin idedetalye rito kung paano gumagana ang Twig. Isa itong napakasimpleng bersyon ng PHP na nag-aalok ng mataas na antas ng seguridad salamat sa sistemang “sandbox” (makikita natin iyon nang mas detalyado sa bahagi tungkol sa Core code ng Theme Engine). Kung marunong ka na ng PHP, magiging napakadali para sa iyo na pag-aralan ito. Kung hindi ka pa marunong ng PHP, madali pa rin itong matutunan. Pakitingnan ang dokumentasyon ng Twig 1.X: https://twig.symfony.com/

Pag-edit Gamit ang Admin Interface

Listahan ng tema

Sa admin dashboard, mayroon na ngayong kahon para ma-access ang listahan ng tema:

Ang listahan ay nahahati sa 5 column:

isang preview ng tema: isa lamang itong picture file na tinatawag na “preview.png” sa root ng tema
ang “pamagat” ng tema ayon sa nakasaad sa manifest (config.xml sa root ng tema)
ang paglalarawan ng tema: isang string na itinakda sa manifest nito
ang uri ng tema: Pangunahing tema (kasama sa LimeSurvey), Tema ng user (idinagdag sa upload directory), XML na tema (hindi nakaload sa database)
I-extend: kung ine-extend ng tema ang ibang tema, ang pangalan nito ay ipapakita rito
Ilang action button:
- I-install: ilo-load nito ang manifest ng isang tema para idagdag ito sa database at gawin itong available para piliin sa antas ng survey
- I-uninstall: buburahin nito ang mga configuration entry ng isang tema sa database
- Editor ng tema: ire-redirect ka nito sa editor ng tema
- Mga opsyon sa tema: dadalhin ka nito sa global na configuration ng mga opsyon sa tema

Editor ng Tema

Ipinapalagay ng dokumentasyong ito na alam mo na kung paano gamitin ang Editor ng tema sa nakaraang bersyon ng LS.

Ang Editor ng tema ay pinanatiling kasing-pareho hangga't maaari sa orihinal. Kaya, kapag nagbukas ka ng Pangunahing tema, hindi mo ito maaaring i-edit. Pero ngayon, sa halip na isang button na “kopyahin”, mayroon ka nang button na “I-extend”.

Ngayon ay ie-extend mo na ang tema — *Ngayon ay **ie-extend** mo na ang tema*

Isang mabilis na pangkalahatang-ideya ng konsepto ng inheritance ng tema

Sa LS3, ang isang tema ay maaari nang mag-inherit mula sa ibang tema, maaari nitong “i-extend” ang ibang tema. Ibig sabihin, halos walang laman ang directory ng tema, at naglalaman lamang ito ng mga file (view, style sheet, script, resource atbp.) na naiiba sa mga orihinal. Sa ganitong paraan, magiging madali para sa iyo na gumawa ng maraming tema para sa iba't ibang user mo nang hindi kinakailangang magpanatili ng maraming magkakaibang tema. Halimbawa: maaari kang magkaroon ng sarili mong gawang-bahay na tema, at pagkatapos ay isang bersyon para sa isang kumpanya (na may logo nito, estilo nito, marahil isang link sa website nito sa footer atbp.), isa pang bersyon para sa ibang kumpanya atbp. Kung i-update mo ang CSS o ang global na layout ng iyong custom na tema, awtomatikong maa-update ang lahat ng temang nag-inherit mula rito. Tandaan na recursive ang inheritance: ang isang tema ay maaaring mag-extend ng temang nag-e-extend ng iba pa atbp.

Ibig sabihin din nito na kung mag-extend ka ng isa sa mga pangunahing tema ng LimeSurvey, makikinabang ka pa rin sa mga update nito.

Mga bagong tampok sa user interface

Para i-extend ang temang Monochrome ng LimeSurvey, pumunta sa listahan ng tema, i-click ang button na “Editor ng tema” ng temang Monochrome. Pagkatapos, i-click ang “I-extend” at i-validate ang bagong pangalan na “extends_monochrome”.

Kung pupunta ka ngayon sa upload directory (gamit ang iyong file/ftp client), makikita mong may bagong directory na nalikha: upload/themes/extends_monochrome May laman itong isang XML file at mga directory, pero karamihan sa mga directory ay walang laman. Wala itong view, CSS, o JS. Pero maaari mo pa ring piliin ang temang ito bilang normal na tema mula sa isang survey at magmumukha itong eksaktong katulad ng temang monochrome.

*Ang tree ng tema (directory at mga file) pagkatapos lamang itong malikha. Halos walang laman ito*

Kinokopya ang mga resource (jpg, png atbp.) mula sa orihinal na tema kapag nag-extend ng tema. Ito ay dahil kung kokopyahin mo nang lokal ang isang CSS file mula sa orihinal na tema, at kung tumutukoy ito sa mga file na iyon (tulad ng sa background-image statement), kailangan nitong hanapin ang mga larawang iyon sa path ng kasalukuyang tema.

Ganito ang hitsura ng editor ng tema para sa temang extends_monochrome:

Walang malaking pagkakaiba sa lumang editor ng tema. Ilista natin ang mga pangunahin:

Ang keyword na inherited sa listahan ng file. Ibig sabihin nito ay wala ang file sa directory ng tema at gagamitin ang file mula sa orihinal na tema.

Ipinapakita ng pangunahing editor ( ACE editor ) ang nilalaman ng napiling file. Hindi lamang HTML, CSS o JS ang laman ng mga file, kundi pati mga Twig statement. Binibigyan tayo ng mga Twig statement na ito ng posibilidad na maglagay ng ilang lohika sa mga view ng tema na dati ay nasa kailaliman ng core, at ngayon ay maaari nang i-customize.

*Ilang twig code, para sa Listahan ng survey*

Ito ang dahilan kung bakit mas marami nang uri ng screen ang available sa drop-down na selector ng top menu. Mapapansin mo ang mga pahinang tulad ng ‘Listahan ng survey’, ‘I-load’, ‘I-save’, ‘Error’, ‘Pagpaparehistro’, ‘Mga pagtatasa’, ‘I-print ang mga sagot’ na hindi available noon, o hindi talaga ma-customize noon.

*Ngayon, maaari mo nang i-customize ang lahat ng screen*

Ang link na ‘tip’ sa ibaba ng listahan ng file ay nagbibigay sa iyo ng paraan ng Twig para magdagdag ng larawan sa iyong HTML

Ang button na ‘I-save ang mga pagbabago’ ay nagiging button na Kopyahin sa lokal na tema at i-save ang mga pagbabago

Mabilis na halimbawa: pagdaragdag ng larawan

Gagawin ng button na Kopyahin sa lokal na tema at i-save ang mga pagbabago ang mismong sinasabi nito: kung mag-edit ka ng anuman sa loob ng file at pagkatapos ay i-click ang button na iyon, kokopyahin nito ang file sa temang ine-edit mo, at ise-save ang iyong mga pagbabago.
Halimbawa: i-click ang file na layout_global.twig, pagkatapos bago lamang ang block content ( {% block content %}) idagdag ang teksto na “TEST” at i-click ang button. Makikita mong ang label ng file ay nagbago mula “inherited” tungo sa “local” at ngayon ang button ay isa nang simpleng button na I-save ang mga pagbabago.

Kung magbubukas ka ng file explorer at pupunta sa directory na upload/themes/extends_monochrome/views/, makikita mong isang file lamang ang laman nito, ang file na layout_global.twig, at nandoon ang string na “TEST”.

Ngayon, sa halip na magdagdag ng random na teksto, magdaragdag tayo ng larawan. Kung i-click mo ang tip link, sasabihin nito sa iyo:
Para gumamit ng larawan sa .twig file: {{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
Kung nabasa mo na ang dokumentasyon ng Twig (at dapat ay nabasa mo na ito sa puntong ito), alam mong ang {{ function( ) }} ay magpapakita sa screen ng resulta ng isang function. Dito, ang function ay image( ).

Kung curious ka kung ano ang ginagawa nito, makikita mo ito sa code dito (bersyon ng RC3): image() function sa RC3

Kung hindi mo naiintindihan ang code: huwag mag-alala, hindi mo kailangang malaman kung paano ito gumagana, kundi kung bakit ito gagamitin at paano ito gagamitin.

Dapat mong gamitin ang function na image() dahil sa dalawang dahilan:

Hinahanap ng function na image sa buong tema ang larawan. Kung ang temang ginagawa mo ay nag-e-extend ng ibang tema, at kung kokopyahin mo ang file sa kung saan mo nilagay ang larawan nang lokal, pero hindi nakopya ang larawang iyon sa lokal na tema, hahanapin nito sa inheritance tree ng tema kung nasaan ang larawang iyon.
Gagamitin nito ang asset manager, kaya mapapabuti nito ang performance ng iyong tema. Tingnan ang dokumentasyon ng Yii Asset Manager para sa karagdagang impormasyon tungkol dito: http://www.yiiframework.com/wiki/148/understanding-assets/

Kaya, para magdagdag ng larawan sa iyong tema:

i-upload lamang ito gaya ng dati gamit ang file uploader sa kanan at pagkatapos ay idagdag ito kung saan mo gusto sa anumang twig file:

{{ image('./files/myfile.png') }}

Kung gusto mong magdagdag ng alternatibong teksto para sa iyong larawan (para sa mga screen reader at HTML validation), idagdag ang:

Kung gusto mong magdagdag ng class attribute at magdagdag dito ng id:

{{ image('./files/myfile.png'), ‘my alternative text’, {“class”: “a_nice_css_class”, “id”: “any_id”} }}

Ilang bagay sa aming TO-DO list

Bigyan ang mga user ng posibilidad na mag-upload ng custom na preview file mula mismo sa editor
Magdagdag ng button para tanggalin ang lokal na file at bumalik sa inherited na statement
Kopyahin lamang ang larawang ginagamit sa mga CSS file (sa pamamagitan ng paglilista sa mga ito sa manifest bilang file na kokopyahin)
Ipaalala kung aling tema ang ine-extend ng kasalukuyan (kung mayroon)

Mga opsyon sa tema

Isa pang bagong tampok ng LS3 ang pahina ng mga opsyon sa tema. Gaya ng makikita natin sa susunod, maaaring gumawa ang mga tagalikha ng tema ng sarili nilang mga opsyon at maging ng sarili nilang admin option page. Dito, mabilis nating makikita kung paano gumagana ang option page ng mga Pangunahing tema. Para ma-access ang mga opsyon sa tema sa global na antas: i-click ang “Mga opsyon sa tema” sa listahan ng tema

Mga advanced na opsyon

Kapag binuksan mo ang tab na Mga opsyon sa tema, maaari mong piliing i-edit ang alinman sa Mga simpleng opsyon o ang Mga advanced na opsyon. Ang “Mga advanced na opsyon” ay isang hilaw na form na nagbibigay sa iyo ng access sa mga pangunahing field ng configuration ng tema mula sa database. Upang maunawaan kung paano ito gumagana, dapat mo ring basahin ang tungkol sa XML file at sa paggawa ng tema mula sa simula. Kaya medyo kumplikado ito at ginawa para sa mga advanced na user.

Gayunpaman, kung nais mong mag-edit ng mga advanced na setting, i-click ang tab na Mga advanced na opsyon

CSS ng mga file: Ang mga CSS file na dapat idagdag sa template;
JS ng mga file: Ang mga JS file na dapat idagdag sa template;
Print CSS ng mga file: Ang mga CSS file na ilo-load kapag piniprint ang isang template;
Mga Opsyon: Kasama sa field na ito ang mga opsyon (at ang halaga ng mga ito) na dapat i-parse sa view ng template;
Pangalan ng CssFramework: Ang pangalan ng CSS framework na ilo-load. Sa ngayon, Bootstrap lamang o wala;
Css ng Cssframework: Maaari mong palitan sa field na ito ang core na bootstrap.css ng ibang custom na bersyon nito;
Js ng Cssframework: Ang field na core boostrap.js ay maaaring palitan mula rito ng ibang custom na bersyon nito;
Mga package na ilo-load: Mula sa setting na ito, maaari kang mag-load ng ilang core asset package mula sa LimeSurvey.

Mapapansin mo ang isang upload input sa itaas, na nagbibigay-daan sa iyong mag-upload ng file sa direktoryo ng mga file ng tema. Ang mga parameter na ito ay maaaring gamitin upang baguhin ang buong hitsura ng tema.

Babala! : Huwag galawin ang mga halaga maliban kung alam mo ang iyong ginagawa!

Mga simpleng opsyon

Ang pahina ng Mga simpleng opsyon ay nagmumula sa mismong Template. Ginawa ito gamit ang isang twig file at ilang javascript sa loob ng /options directory ng tema: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Sirang link)

Ang pahinang ito ay maaaring ganap na magkaiba mula sa isang tema patungo sa isa pa, at mahigpit na hinihikayat ang mga provider ng tema na gumawa ng sarili nilang look & feel.

Simpleng pinupunan ng pahina ng mga simpleng opsyon ang mga input ng advanced na form. Makikita mo ito sa pamamagitan ng pag-on o pag-off ng isang setting sa simpleng pahina, at pagmasdan kung paano nagbabago ang kaugnay na input sa advanced na form. Halimbawa, sa mga simpleng opsyon ng Default Template, kung papalitan mo ang Bootswatch theme sa “Darkly” at pagkatapos ay i-click ang tab para sa mga advanced na opsyon (kahit hindi pa nase-save), makikita mong ang field na “Cssframework Css” ay nagbago mula sa

{"replace": [["css/bootstrap.css","css/flatly.css"]]}
sa
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
Narito ang iba't ibang simpleng opsyon para sa mga Pangunahing tema:

Ajax mode: Dapat bang i-load ang susunod na pahina sa pamamagitan ng ajax (mas mabilis) o sa pamamagitan ng pag-reload ng pahina (mas mainam para sa debugging)
Larawan sa background: kung nakatakda sa Oo, ilo-load ang larawang pattern.png (papalitan ng file selector sa Master)
Box container: kung nakatakda sa Hindi, hindi ilalagay ang mga tanong sa loob ng isang box (kaya maaari kang gumamit ng malalaking array na mas malapad kaysa sa screen)
Brandlogo: kung nakatakda sa hindi, ipapakita ang pangalan ng survey sa top bar; kung hindi, maaari kang pumili ng isa sa mga larawan sa loob ng file directory na gagamitin bilang logo.
I-animate ang body: kung nakatakda sa oo, maaari kang pumili ng isa sa mga animation na ilalapat kapag na-load ang body ng survey
I-animate ang tanong: ganoon din para sa mga tanong
I-animate ang mga alerto: ganoon din para sa mga alerto
Bootstrap theme: dito, maaari kang pumili ng Bootstrap theme na ilo-load. Galing ang mga ito sa Bootswatch https://bootswatch.com/3/

Ang library na ginagamit para sa mga animation ay animate.css: https://daneden.github.io/animate.css/ Siyempre, maaaring magdagdag ang isang theme provider ng sarili niyang animation library o walang animation library.

Ginagamit ng mga monochrome na tema ang parehong bootstrap color theme ng admin user interface. Hindi nila ginagamit ang css framework replacement system, kundi nagdaragdag lang ng CSS file. Kaya, ipinapakita nito ang isa pang paraan ng pagharap sa mga custom na tema para sa mga theme provider.

Sistema ng inheritance

Sa nakaraang bahagi, nakita natin na maaaring i-extend ng isang tema ang ibang tema. Maaari ring mag-inherit ang configuration ng isang tema mula sa configuration ng ibang tema. Ibig sabihin, para sa isang partikular na tema, maaari kang magkaroon ng configuration sa

pangkalahatang antas (ang kakakita lang natin na maa-access mula sa listahan ng tema)
antas ng pangkat ng survey
at ang huli, antas ng survey.

Ang bawat parameter sa isang antas ay maaaring mag-inherit mula sa mas mataas na antas: ang inheritance ng pangkat ng survey. Una, tingnan natin ang antas ng pangkat ng survey.

Sa antas ng pangkat ng survey

Isa nga sa iba pang magagandang bagong tampok ng LS3 ang sistema ng pangkat ng survey. Maaari ka na ngayong gumawa ng iba't ibang pangkat para ayusin ang iyong mga survey. Para ma-access ito, pumunta sa listahan ng survey at i-click ang tab na Mga pangkat ng survey:

Sa listahang ito, mayroon kang dalawang action button. Kung walang laman ang pangkat, maaari mo itong tanggalin. Kung hindi, maaari mo itong laging i-edit. Sa pag-click sa edit button, mapupunta ka sa pahina ng configuration ng Pangkat ng survey:

Ang ikatlong tab ng pahinang ito ay tinatawag na “Mga opsyon ng template para sa pangkat ng survey na ito”. Kapag na-click mo ito, makikita mo ang parehong listahan ng mga tema tulad ng sa listahan ng tema, maliban na dito ay ang option button lang ang nakikita (ang editor ng tema ay maaabot lang mula sa pangunahing listahan).
Ngayon, kapag nag-click ka sa opsyon para sa Default Template, makikita mo ito:

Ang I-inherit lahat ay nangangahulugang lahat ng configuration ay mai-inherit mula sa antas ng Pangkalahatang configuration.
Kung pupunta ka sa pahina ng mga advanced na opsyon, makikita mong lahat ng field ay nakatakdang mag-inherit.
Kung mag-click ka sa "Hindi" para sa "I-inherit lahat" sa mga simpleng opsyon, makikita mo muli ang pahinang halos katulad ng pahina ng pangkalahatang opsyon. Ang pagkakaiba lang ay para sa bawat field, maaari mo itong itakda sa oo, hindi, o i-inherit; at ang bawat dropdown selector ay may halagang i-inherit'.

Ang isang pangkat ng survey ay maaaring maging anak ng ibang pangkat. Sa ganitong kaso, mag-i-inherit ito mula sa magulang nito.

Sa antas ng survey

Kapag nag-e-edit ng survey, sa menu sa kaliwang bar, makikita mo ang bagong entry na “Mga opsyon sa tema”. Dadalhin ka nito sa pahina ng opsyon ng Tema na napili para sa kasalukuyang survey. Makikita mo ang parehong sistema ng inheritance tulad ng sa pangkat ng survey, ngunit sa pagkakataong ito, ang ibig sabihin ng inherit ay mai-inherit ang setting mula sa Pangkat ng survey ng survey.

Halimbawa ng use case

Sabihin nating gumagamit ka ng iisang tema para sa iba't ibang kumpanya (A at B). Itinakda mo ang mga paborito mong opsyon sa pangkalahatang antas (hal.: ajax on, animate body na may slide in, mga alerto na may pulse). Pagkatapos ay gagawa ka ng pangkat ng survey para sa bawat kumpanya: isang pangkat ng survey para sa kumpanya A na maglalaman ng lahat ng survey ng kumpanyang ito, at isa para sa kumpanya B na maglalaman ng lahat ng survey ng kumpanya B. Sa antas na ito, ang logo at ang background lang ang itatakda mo, at hahayaan mong mag-inherit ang iba pang opsyon. Kaya, lahat ng survey sa pangkat A ay gagamit ng logo ng kumpanya A, at lahat ng survey sa pangkat B ay gagamit ng logo ng kumpanya B. Para sa isa sa mga survey ng kumpanya A, maaari kang gumamit ng ibang background na akma sa paksa ng survey: papalitan mo lang ang background sa mga opsyon sa antas ng survey. Kung may magsabi sa iyo sa kumpanya B na masyadong agresibo ang pulsing na alerto at mas gusto niya ang mas banayad tulad ng fade in, papalitan mo lang ang animation ng alerto sa antas ng Pangkat ng survey B at lahat ng survey ng pangkat na ito ay gagamit na ng animation na iyon. Kung papalitan ng kumpanya A ang logo nito, maaari mo itong palitan sa antas ng Pangkat ng survey A, at lahat ng survey ng pangkat na ito ay gagamit ng bagong logo.

Ang mga halimbawang ito ay batay sa kasalukuyang mga opsyon ng pangunahing tema. Pero siyempre, kung ikaw ay isang theme provider, o kung marunong kang mag-script nang kaunti gamit ang twig, maaari kang magdagdag ng sarili mong mga opsyon. Halimbawa, maaari kang magdagdag ng opsyong “info footer” kung saan maaari kang maglagay ng data tulad ng website ng kumpanya o numero ng telepono para sa tulong. Pagkatapos, kung may iba't ibang departamento ang kumpanya A na may magkakaibang numero ng telepono, maaari kang gumawa ng isang sub-group para sa bawat departamento sa Pangkat ng survey A. Ang bawat subgroup ay magkakaroon ng sarili nitong numero ng telepono sa mga opsyong ito.

FAQ tungkol sa pag-customize ng tema

Makikita mo rito ang ilang sagot sa mga tanong na ibinato sa forum at na maaaring makatulong sa iyo sa pag-customize ng iyong tema.

Pag-customize ng CSS/JS: pakikitungo sa asset manager ("bakit hindi nailalapat ang mga pagbabago ko?")

Kung sinusubukan mong i-update ang CSS/JS ng isang tema sa pamamagitan ng direktang pag-edit ng code gamit ang paborito mong editor, maaaring magulat ka na hindi nailalapat ang iyong mga pagbabago.

Mula noong 2.50, gumagamit ang LS ng Yii asset manager: Dokumentasyon ng Yii tungkol sa Assets

Inililipat nito ang mga CSS/JS file ng isang tema sa isang sub-directory ng tmp/ na may random na string (hal.: "tmp/1ef64ml/"). Kaya kung gagawa ka ng anumang pagbabago sa isang css/js file, at ipapaalam mo ito sa asset manager, kokopyahin ang mga file sa isang bagong sub-directory na may bagong pangalan para ma-update ang cache ng browser ng user at makita nila ang bagong css/js. Kung hindi, kakailanganin nilang linisin ang cache ng kanilang browser.

Narito ang mga CSS link sa header kapag naka-on ang asset manager:

Tulad ng makikita mo, lahat ng mga ito ay tumutukoy sa mga subfolder ng tmp/.

Narito ang mga CSS link sa header kapag naka-off ang asset manager:

Tulad ng makikita mo, tumuturo ang mga ito sa mga totoong file ng tema.

Siyempre, kung hindi alam ng Asset Manager na binago mo ang file, mananatiling hindi nagbabago ang lumang file mula sa lumang tmp/directory, at hindi kailanman malalapat ang iyong mga pagbabago..

Kaya, kapag nag-e-edit ka ng CSS/JS ng isang tema, mayroon kang iba't ibang posibilidad:

Maaari mong gamitin ang LS Editor ng tema: ito ang bahala sa asset manager at wala kang dapat ipag-alala
Maaari mong i-on ang debug mode: io-off nito ang asset manager, kaya tatawagin ang mga totoong css/js file ng iyong mga tema (ngunit kailangan mong i-refresh ang cache ng browser sa bawat load)
Maaari mong i-refresh ang assets cache: mula sa Mga pangkalahatang setting -> General -> Clear asset cache

Ang paggamit ng editor ng tema para i-edit ang custom CSS ang pinakamahusay na solusyon sa ngayon.

Makakatulong sa iyo ang paggamit ng editor ng tema na maunawaan ang arkitektura ng bagong theme engine. Alalahanin din, kung kino-customize mo ang fruity, mag-ingat sa CSS specificity: karamihan sa mga definition ay gumagamit ng selector na ".fruity" (isa sa mga class ng body element)

Pagdaragdag ng mga custom na font sa aking tema

Ang madaling paraan: paggamit ng Google Font CDN

Gumagamit ang Bootswatch Survey Theme ng Google Font CDN. Tingnan natin kung paano ito gumagana: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/css/variations/flatly.min.css

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");

Pagkatapos, ginagamit ang Lato font sa pamamagitan ng mga CSS rule: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72

body {
  ...
 font-family: "Lato";
 ...
}

Maaari kang gumamit ng anumang google font sa ganitong paraan sa iyong custom na tema. Siyempre, dapat mong alisin ang font selector mula sa mga opsyon ng iyong tema. Tanggalin ang mga linyang iyon sa options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

Paggamit ng lokal na font

Siyempre, maaari mo ring i-download ang mga font file at gamitin ang mga ito mula sa lokal na server sa halip na mula sa Google CDN (mas mainam para sa privacy). Para magkaroon ng halimbawa kung paano ito gawin, narito ang aming lokal na bersyon ng noto font: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css

@font-face {
  font-family: 'Noto Sans';
  font-weight: 300;
  font-style: normal;
  src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...

Maaari kang gumamit ng halos katulad na definition sa css file ng iyong tema, at pagkatapos ay kopyahin ang file na NotoSans-Regular.ttf sa folder na css/font-src/ ng iyong tema.

Pagkatapos, ilapat ang font na iyon sa iyong body (o anumang ibang element) tulad ng nasa itaas, at alisin ang default na option font selector.

Paggawa ng sarili mong font selector sa mga opsyon

Sa ngayon, hindi mo basta magagamit ang core font selector para magdagdag ng sarili mong font sa mga opsyon. Kailangan muna nating bigyan ang end user ng posibilidad na mag-upload ng mga custom package (tingnan ang susunod na talata: A look into the Fruity Font Selector)
Narito kung paano magpatuloy:

Magdagdag ng dalawang font (my_custom_font at my_custom_other_font) sa iyong tema, gamit ang CDN o local server
Pagkatapos, sa iyong css file, magdagdag ng dalawang bagong class:

.font-my_custom_font {
 font-family: 'my_custom_font ';
}
.font-my_custom_other_font {
 font-family: 'my_custom_other_font';
}

Sa XML file ng iyong tema, magdagdag ng font option (ang default ay my_custom_font) :

    <options>
        ....
        <font>my_custom_font</font>
    </options>

sa option.twig, idagdag ang iyong font picker sa pamamagitan ng pagdaragdag ng mga linyang ito (hindi pa nasusubukan, kaya magreklamo ka sa forum kung hindi gumana):

            
            <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'>{{ "My custom fonts" | t }}</div>
                        <div class='panel-body'>
                            <div class='form-group row'>
                                <label for='simple_edit_font' class='control-label'>{{ "Select font:" | t }}</label>
                                <div class='col-sm-12'>
                                    <select class='form-control selector_option_value_field' id='simple_edit_font' name='font'>
                                    {% if templateConfiguration.sid is not empty or templateConfiguration.gsid is not empty %} //Shouldn't this be "theme" in stead of "template"?
                                        {% set fontOptions = fontOptions ~ '<option value = "inherit" > Inherit</option>' %}
                                    {% endif %}
                                   <optgroup  label="{{ "My Custom fonts" | t }}">
                                   <option class="font-my_custom_font"     value="custom_font"   data-font-package=""  >Custom</option>
                                  <option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package=""  >Other</option>
                                  </optgroup>
                                   
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Ngayon, dapat ay makapili na ang iyong mga user sa pagitan ng dalawang font na ito.

A look into the Fruity Font Selector

Sa hinaharap, bibigyan namin ang final user ng posibilidad na mag-upload ng sarili nilang asset package, kasama ang mga font package. Gagawin nitong napakadali ang anumang pag-customize ng mga font.
Para maunawaan ang Yii Packages:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

Ang mga package ng LimeSurvey ay tinukoy sa iba't ibang file. Ang mga font package ay tinukoy dito: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Halimbawa, ang Noto font package ay tinukoy dito: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php#L47-L53

    'font-noto' => array(
        'devBaseUrl' => 'assets/fonts/',
        'basePath' => 'fonts',
        'css' => array(
            'noto.css',
        ),
    ),

Ang noto.css file na nilalaman nito ay narito: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Pansinin ang depinisyon ng css class na ".font-noto" sa dulo nito:

@font-face {
  font-family: 'Noto Sans';
  ...
}
...
.font-noto{
    font-family: 'Noto Sans';
}

Pagkatapos, sa Vanilla Theme, ginagamit ang noto font sa pamamagitan ng pagdaragdag ng noto package at pagtatakda ng font option sa noto:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79

        <packages>
             ....
            <add>font-noto</add>
        </packages>

https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L58

    <options>
        ....
        <font>noto</font>
    </options>

Pagkatapos, ang font ng body class ay tinutukoy gamit ang value na ito: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76

<body class=" ...  font-{{  aSurveyInfo.options.font }} ... " ... >

Siyempre, ang XML file ay naglalaman lamang ng mga default na value para sa configuration ng iyong tema. Ngunit ang mga value na iyon ay talagang tinutukoy at binabasa sa loob ng database (table "template_configuration" (Question: "template_" of "theme_"?) bilang mga json string. Ginagamit lamang ng option.js file ang value ng font selector ng simple option para baguhin ang value sa loob ng advanced tab form: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

Kaya kapag available na ang functionality na "upload asset package", magiging madali ang pagdaragdag ng script na sumusuri sa lahat ng umiiral na font package para idagdag ang mga ito sa selector.

Pagdaragdag ng mga opsyon sa tema para kontrolin ang posisyon at display ng mga elemento ng survey

Ipapakita ng tutorial na ito kung paano magdagdag ng mga opsyon sa isang extended na tema para ipakita ang mga elemento ng survey sa iba't ibang lokasyon. Sa kasong ito, gagawa tayo ng mga opsyon sa tema para ipakita ang pamagat ng survey sa dalawang magkaibang lokasyon.

Para mapadali, ibabatay namin ang tutorial sa isang extension ng temang "bootswatch" sa LimeSurvey version 3.4.3.

Gumawa ng custom na tema

I-extend ang temang "bootswatch" ayon sa inilarawan sa itaas.
Kopyahin ang custom.css sa local na tema ayon sa inilarawan sa itaas.

Gumawa ng mga bagong opsyon sa tema

Kopyahin ang mga nilalaman ng /themes/survey/bootswatch/options/ sa /upload/themes/survey/yourThemeName/options/.

Buksan ang /upload/themes/survey/yourThemeName/options/options.twig sa isang editor at hanapin ang "{# Bootstrap Bootswatch theme #}". Direkta bago ang parent nitong <div class='row'> element, idagdag ito:

		{# Custom survey name in navbar #}
		<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'>Survey name in navbar</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'/>
								Yes
							</label>
							<label class="btn btn-default">
								<input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
								No
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div>

		{# Custom survey name below progress bar #}
		<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'>Survey name below progress bar</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'/>
								Yes
							</label>
							<label class="btn btn-default">
								<input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
								No
							</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='row'>
			<hr/>
		</div>

Buksan ang /upload/themes/survey/yourThemeName/config.xml at magdagdag ng dalawang item sa "options" block para magmukha itong ganito:

    <options>
        <ajaxmode>on</ajaxmode>
        ...
        <surveyname1>on</surveyname1>
        <surveyname2>on</surveyname2>
    </options>

Dapat nitong bigyan ka ng dalawang bagong opsyon sa screen ng Mga opsyon sa tema na ganito ang hitsura:

Binagong view para sa Pamagat ng survey sa navbar

Gumawa ng bagong direktoryo /upload/themes/survey/yourThemeName/views/subviews/header/.
Kopyahin ang /themes/survey/vanilla/views/subviews/header/nav_bar.twig sa bagong direktoryong iyon.

Buksan ang /themes/survey/vanilla/views/subviews/header/nav_bar.twig at hanapin ang "{# Logo option #}". Sa ilalim nito, baguhin ang IF statement para sa logo/pangalan ng survey, upang magmukha itong ganito:

		{# Logo option #}
        {% 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 %}

Magdagdag ng katulad nito sa /upload/themes/survey/yourThemeName/css/custom.css:
```
.navbar-brand {
    line-height: 60px;
    font-size: 32px;
}
```
I-toggle ang theme option na "Survey name in navbar" sa "Oo"
Dapat makita mo ito:

Binagong view para sa Pamagat ng survey sa ilalim ng progress bar

Gumawa ng bagong direktoryo /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews.
Kopyahin ang /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig sa bagong direktoryong iyon.

Buksan ang /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig at magdagdag ng <h1> element para sa pangalan ng survey. Magmumukha itong ganito:

<div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}>
 
    {# Custom survey name #}
    {% if( aSurveyInfo.options.surveyname2 == "on") %}
    	<h1 class="custom-survey-name">{{ aSurveyInfo.name }}</h1>
    {% endif %}
 
    {# Group Name #}
    {{ include('./subviews/survey/group_subviews/group_name.twig') }}
 
    {# Group Description #}
    {{ include('./subviews/survey/group_subviews/group_desc.twig') }}
 
    {#
        PRESENT THE QUESTIONS
 
        This is the main part. It will render each question for this group
     #}
 
    <!-- PRESENT THE QUESTIONS -->
    {% for  aQuestion in 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>

Magdagdag ng katulad nito sa /upload/themes/survey/yourThemeName/css/custom.css:

.navbar-brand {
    line-height: 60ph1.custom-survey-name {
	margin: 0;
	text-align: center;
}

I-toggle ang theme option na "Survey name below progress bar" sa "Oo"
Dapat makita mo ito:

Mga download

Sample na na-extend na tema: Test_survey_names.zip

Paggawa ng tema mula sa simula

Parating na ang dokumentasyon.

Sa ngayon, magbibigay lang kami ng ilang tip.

Istruktura ng tema

Mga file at direktoryo

Kapag gumawa ka ng tema mula sa simula, hindi mo kailangang sundin ang istruktura ng file/direktoryo/css/js ng Vanilla. Ang mandatoryong css/js ay idinaragdag ng core (maaari mo pa rin itong alisin kung kinakailangan)

Ang tanging mga file na dapat mayroon ang iyong tema ay ang mga layout file:

layout_global.twig : nagre-render ng mga pahina para sa pagsagot sa survey
layout_survey_list.twig : nagre-render ng listahan ng survey (kung itinakda ang temang ito bilang default)
layout_errors.twig : ginagamit para i-render ang mga error na humaharang sa pag-render ng survey. (maling ID ng survey, walang laman na pangkat sa preview ng pangkat, atbp.)
layout_user_forms.twig: nagre-render ng mga user form gaya ng: token (kalahok sa survey), at register.
layout_print.twig : ginagamit para i-print ang survey sa pdf
layout_printanswers.twig: nagpi-print ng mga sagot

Ikaw ang bahalang magpasya sa nilalaman ng mga file na iyon at kung anong mga file ang isasama nila o hindi. Ang lahat ng iba pang file at direktoryo na makikita mo sa Vanilla ay opsyonal lamang; malaya mong ayusin ang iyong code sa paraang gusto mo.

Kung babasahin mo ang frontend rendering code, makikita mong direktang lumalabas doon ang mga pangalan ng file na ito. Kaya mandatoryo ang mga ito.

Hal.: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462

Nilalaman

Sa layout_global.twig ng Vanilla, makikita mong gumagamit kami ng variable na tinatawag na "include_content" para magpasya kung ano ang ipapakita https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/layout_global.twig#L114-L115

                    {% set sViewContent =  './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
                    {% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %}

Sinasabi sa iyo ng aSurveyInfo.include_content kung anong aksyon ang kasalukuyang nagaganap: pagpapakita ng mga tanong? pagpapakita ng resulta ng pagsusumite? pagpapakita ng clear all? atbp. Gaya ng makikita mo, sa vanilla, gumagawa kami ng isang file na isasama para sa bawat aksyon. Kaya kung gusto mong malaman ang listahan ng mga aksyon, tingnan lang ang direktoryo ng vanilla na views/subviews/content, at alisin ang extension na "twig" : 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

Kung nakagawa ka na ng tema para sa mga bersyon 2.x ng LimeSurvey, mapapansin mong karamihan sa mga ito ay tumutugma sa mga lumang pstpl file ng limesurvey 2.x. Muli, wala kang obligasyon na gawin ang mga file na iyon sa iyong tema, gamit ang mga pangalang iyon, sa direktoryong ito. Maaari mo, halimbawa, magdagdag na lang ng isang malaking switch sa layout_global.twig na may nais na HTML para sa bawat aksyon.

Ang manifest na config.xml

Ang manifest ng tema ay naglalaman ng pangunahing impormasyon tungkol sa iyong tema. Kapag nag-install ka ng tema, ang nilalaman ng manifest ay ilo-load sa database, sa dalawang magkaibang table: template at template_configuration. Kaya sa tuwing babaguhin mo ang manifest ng isang tema, kailangan mo itong i-uninstall at i-install muli (o i-reset lang). Dahil nakakaabala ang prosesong ito habang gumagawa ng tema, maaari mong piliting gamitin nang direkta ang XML file sa halip na ang mga entry sa DB. Para magawa ito, sa config.php, i-on ang debug mode at itakda ang 'force_xmlsettings_for_survey_rendering' sa true.

Ang seksyong metadata

Walang kumplikado: ang pangunahing impormasyon lang tungkol sa iyong tema. Ilalagay ito sa table na templates_configuration

    <metadata>
        <name>the_name_of_your_theme</name>
        <title>The Title of your theme</title>
        <creationDate>16/10/2017</creationDate>
        <author>Your Name</author>
        <authorEmail>your@email.org</authorEmail>
        <authorUrl>http://www.yourwebsite.org</authorUrl>
        <copyright>Your Copyright </copyright>
        <license>Licence of your theme</license>
        <version>version of your theme</version>
        <apiVersion>3</apiVersion>
        <description>Description of your theme</description>
        <extends>parent_theme</extends>
    </metadata>

Ilang puna:

name: gagamitin bilang key sa db. Kaya dapat itong natatangi, at hindi dapat maglaman ng anumang special character (walang espasyo). Tandaan na hindi isinasaalang-alang ang malalaki at maliliit na titik
Title: gagamitin para ipakita ang pangalan ng iyong tema sa iba't ibang listahan. Maaari itong maglaman ng mga special character
description: gagamitin sa pangunahing listahan ng tema ng survey. Maaari itong maglaman ng mga special character, at maging HTML code sa pamamagitan ng paggamit ng
extends: opsyonal, tinutukoy nito ang mga parent theme. Kaya kung may anumang file na wala sa temang ito (twig/js/css/jpg, atbp.) hahanapin ito sa parent theme

Kung nag-extend ka ng isa sa 3 core theme (Vanilla, Bootswatch, Fruity), maaari mong palitan ang halaga ng "extends" mula sa isang parent theme patungo sa isa pa. Siyempre, kailangan mong i-reset ang tema.

Ang seksyong files

Mahalaga ang isang ito. Ilalagay ito sa table na template_configuration, sa field na files_css, files_js, files_print_css bilang mga json array.

Hal.: ang seksyong files ng Material Premium Theme:

    <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>

Ang lahat ng CSS/JS file na nasa seksyong ito ay ilo-load sa pagsisimula ng survey (sa ajax mode. Kung naka-off ang ajax mode, siyempre ay nire-reload ang lahat ng file sa bawat pahina).

Idadagdag ang mga ito sa isang Yii Asset Packet batay sa pangalan ng tema. Kaya kapag naka-on ang Asset Manager (kapag naka-off ang debug mode), ang mga file na ito ay kokopyahin sa tmp directory kasama ang natitirang bahagi ng tema (para magamit mo ang relative path sa CSS at JS para maabot ang mga image file). Tungkol sa Asset manager sa Yii: https://www.yiiframework.com/wiki/148/understanding-assets Tungkol sa mga package sa Yii: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

Gagamitin nila ang sistema ng inheritance. Ibig sabihin, kung magdagdag ka ng CSS/JS file sa isang tema, ngunit wala ito sa temang iyon, hahanapin ng engine ang lahat ng mother theme ng temang ito at gagamitin ang unang makikita nito. Kaya kung i-extend ng isang user ang iyong tema sa pamamagitan ng editor ng tema, lahat ng file na ito ay mamanahin sa kanyang tema. Ang mga keyword ay tumutukoy sa sistema ng inheritance na ito.

add : idaragdag nito ang file sa tema, at sa lahat ng tema na nagmamana nito
replace: papalitan nito ang file ng mother theme nito
remove: aalisin nito ang file mula sa anumang package, kahit ang core package (mula sa 3.14)

Tandaan na maaari mong itakda sa config.php ang 'force_xmlsettings_for_survey_rendering' para mabasa ang configuration mula sa XML sa halip na sa DB (hindi na kailangan ng reset). Mas mapapadali nito ang pag-test ng mga pagbabago sa mga XML file, at hindi mo na kailangang i-uninstall/i-install muli ang tema sa bawat pagbabago ng XML

Ilang puna tungkol sa mga keyword na iyon:

Mga tip sa inheritance

Tulad ng nabanggit kanina, maaaring tumukoy ang keyword na "add" sa isang file na nasa isa sa mga mother theme. Kaya maaari kang mag-"add" ng file sa seksyong ito kahit wala ang file na iyon sa iyong tema kundi nasa isa sa mga parent theme nito. Hahanapin ng engine ang lahat ng parent theme at gagamitin ang unang makikita nito. Kung hindi nito mahanap ang file, at naka-on ang debug mode sa config, at naka-on ang js frontend debug mode sa global setting, may lalabas na babala sa console. Hal.: kung magdaragdag tayo sa isang my_theme ng: <add>css/unexisting.css</add>, makikita natin sa console ang:

 (¯`·._.·(¯`·._.· Theme Configuration Error  ·._.·´¯)·._.·´¯) 

Can't find file 'css/unexisting.css' defined in theme 'my_theme'

Kung naka-off ang debug mode, walang anumang error na makikita. Babalewalain lang ng engine ang mga maling add statement.

Kailan gagamitin ang add, kailan gagamitin ang replace, at kailan ito puwedeng iwan na lang sa parent theme?

Una: ang add at replace ay iisang keyword. Maaari mong gamitin ang alinman sa dalawa, pareho lang ang gagawin ng engine. Magkaiba lang ang mga ito para sa mga taong nagbabasa, upang maunawaan nila ang iyong layunin.

Hindi ka maaaring magdagdag ng file na kapareho ng pangalan sa mother theme: palagi nitong papalitan ang file na iyon. Hal.: kung mayroon kang file na "my_mother_theme/foo.css" at nagdagdag ka ng file na "foo.css" sa daughter theme, tanging ang "daughter_theme/foo.css" lang ang idaragdag sa tema. Kung gusto mong panatilihin ang "my_mother_theme/foo.css", pumili lang ng ibang pangalan para sa "daughter_theme/foo.css", gaya ng "daughter_theme/bar.css". Kaya ang keyword na "add" ay maaaring gamitin bilang keyword na "replace".

Kung nagtataka ka kung bakit: mas napapadali nito ang awtomatikong paggawa ng inherited na tema; gumagana agad ang pagkopya ng seksyon ng mga file (hindi na kailangang palitan ang "add" ng "replace" kapag nag-extend ng isang file).

Para maging malinaw, kunin natin ang halimbawa ng Fruity. Narito ang seksyon nito ng mga css file:

        <css>
            <add>css/variations/sea_green.css</add>
            <replace>css/animate.css</replace>
            <replace>css/theme.css</replace>
            <replace>css/custom.css</replace>
        </css>

Kung titingnan mo ang file na custom.css sa fruity, eksaktong kapareho ito ng sa vanilla. Maaari nating tanggalin ang file na custom.css sa loob ng fruity, at ang sa vanilla ang ilo-load. Maaari rin nating alisin ang statement na <replace>custom.css</replace> mula sa manifest ng Fruity, at gagamitin ang statement mula sa vanilla, at ilo-load ang custom.css ng vanilla.

Kaya bakit natin ginagamit ang statement na <replace>custom.css</replace> sa loob ng manifest ng fruity? Simple lang ang sagot: dahil gusto nating ma-extend ng end user ang temang fruity, mabago ang file sa kanyang local na tema, at ma-load ang binagong file mula sa kanyang inherited na tema. Para maunawaan, i-extend lang ang fruity at tingnan ang extended na tema. Wala ni file na custom.css ang extended na tema, kaya gagamitin ang sa fruity. Ngunit: kung gagawa ang user ng file na ito sa extended na tema (sa pag-click ng "extend" sa editor ng tema), ang file na ito ay ilo-load mula sa kanyang tema.

Kaya sa pangkalahatan: kung gumagawa ka ng tema mula sa simula na hindi nag-e-extend ng anumang tema, gamitin lang ang add statement para idagdag ang iyong mga css/js file. Napakadali. kung gumagawa ka ng temang nag-e-extend ng ibang tema, at ayaw mong ma-extend ng mga user ang css/js file mula sa mother theme: huwag gamitin ang add statement sa iyong manifest. Ilo-load pa rin ang mga file mula sa configuration ng mother theme. kung gumagawa ka ng temang nag-e-extend ng ibang tema, at gusto mong palitan ang isang file mula sa mother theme: gamitin ang keyword na replace (pareho ang magiging resulta ng keyword na add). kung gumagawa ka ng temang nag-e-extend ng ibang tema, at hindi mo pinapalitan ang isang partikular na css/js file, ngunit gusto mong ma-extend ng mga user ang file na ito: gamitin ang statement na "replace" sa iyong manifest para sa file na ito. Kahit hindi mo palitan ang file, sa paggamit ng keyword na replace sa manifest ay pinapayagan mo ang user na gawin ito kung nais niya.

Ang huling kasong ito lang ang nangangailangan ng kaunting pag-iisip para maunawaan; simple lang ang lahat ng iba pang kaso.

Maaari ka ring mag-register ng mga CSS at JS file direkta mula sa twig code. Ilo-load lang ang mga file na iyon kapag hiningi ang twig file. Kung gusto mong ma-inherit ng mga user ang mga JS/CSS file na iyon mula sa editor ng tema, tandaang gamitin ang mga function na Template:RegisterTemplateCssFile('my style.css') at Template:RegisterTemplateScript('my script.js'). Kung hindi mo gagamitin ang mga function na iyon, maaaring gumana ang iyong tema, ngunit masisira ang inheritance nito. Pareho ito ng lohika ng function na Template:Image('my picture.jpg')

Ang keyword na remove

Available lang ang keyword na remove mula sa 3.14. Sa pamamagitan nito, maaari kang mag-alis ng anumang css/file mula sa anumang package, maging ang mga core package. Ginagamit ito sa Material Premium Theme para alisin ang mga file ng Awesome Bootstrap Checkbox:

<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>

kaya dapat mong gamitin ang eksaktong kaparehong syntax ng file ng package (hal.: hindi gagana ang "awesome-bootstrap-checkbox.css" nang mag-isa na walang folder path nito). Makikita mo ang kumpletong listahan ng mga core package at ng kanilang mga file sa /application/config/packages.php at config/third_party.php. Halimbawa, para sa awesome-bootstrap-checkbox.css: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56

        'css'=> array(
            'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
        ),

Isa pang paraan para malaman ang eksaktong pangalang gagamitin sa remove tag ay i-on ang asset manager (sa pag-off ng debug mode o pagtatakda ng 'use_asset_manager'=>true sa config). Pagkatapos, ang path na gagamitin ay ang nasa kasunod mismo ng random na directory sa tmp directory. Halimbawa, para sa awesome-bootstrap-checkbox.css:

<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />

Mga file na hindi dapat alisin:

jquery-3.1.1.min.js : kailangan

jquery-migrate-3.0.0.min.js : kailangan

survey.js : kailangan

moment-with-locales.min.js : kailangan para sa uri ng tanong na date (at sa ilan pang iba, sa palagay ko)

em_javascript.js : kailangan para sa lahat ng ExpressionScript javascript

Ang seksyon ng mga opsyon

Ang seksyong ito ay may kaugnayan sa mga opsyon ng iyong tema. Gagamitin ito para punan ang field na "options" ng table na template_configuration bilang isang json array.

Karagdagang impormasyon

Theme:Available function

Ilang tala

TANDAAN: kung ie-edit mo ang XML file ng isang tema, dapat mong i-uninstall at i-install muli ang tema para ito ay maisaalang-alang.

PAALALA: para maiwasan iyon, maaari mong piliting gamitin ang XML sa halip na ang DB. Sa config.php, i-on ang debug mode at alisin ang comment sa:

'force_xmlsettings_for_survey_rendering' => true, // Alisin ang comment kung nais mong piliting gamitin ang XML file sa halip na ang DB (para sa madaling pagbuo ng tema)

Mag-ingat: lahat ay ilo-load mula sa XML (kasama ang mga option, atbp.)

PAALALA: kung mano-mano mong i-eedit ang mga CSS/JS file (nang hindi ginagamit ang Editor ng tema), at kung naka-off ang debug mode, maaari mo na ngayong piliting i-flush ang asset. Sa "Mga pangkalahatang setting", tab na "General", i-click ang button na "Clear assets cache".

PAALALA: kung aalisin mo ang seksyon

Mga pangunahing kabanata

Bagong Sistema ng Template sa LS3.x

From LimeSurvey Manual