Sistem Templat Baharu dalam LS3.x
From LimeSurvey Manual
Pengenalan
Sila ambil perhatian: dalam versi LimeSurvey terdahulu, fail yang menentukan rupa tinjauan, iaitu cara tinjauan dipaparkan dari segi warna, fon, susun atur dan (sebahagian) tingkah laku, dipanggil "templat". Berdasarkan pemahaman baharu, ia kini dipanggil "tema", manakala templat dikhaskan untuk tinjauan contoh.
Pada halaman ini, anda akan belajar cara untuk:
- Menggunakan sistem tema baharu LimeSurvey 3.0.
- Menggunakan pewarisan untuk mengurus tema anda sendiri.
- Menambah gambar pada tema anda
- Mengurus pilihan tema untuk tinjauan dan kumpulan tinjauan anda
LimeSurvey 3 memperkenalkan sistem enjin tema yang benar-benar baharu, berasaskan Twig 1.29 dan Bootstrap, serta membenarkan pewarisan tema dan pilihan tema. Ia menghapuskan sepenuhnya sistem kata kunci penggantian yang lama. Maka kini, 100% HTML bahagian hadapan boleh disesuaikan. Sebagai contoh, dalam sistem tema yang lama, terdapat kata kunci {ASSESSMENTS} yang digantikan dengan HTML penilaian semasa pelaksanaan. Pereka tema tidak mempunyai cara untuk menyesuaikan HTML ini (selain menggunakan JavaScript). Kini, terdapat fail bernama assessments.twig yang mengandungi logik (ditulis dalam Twig) untuk menjana HTML ini. Dalam halaman-halaman ini, kami akan memberikan sedikit penerangan tentang cara menggunakan enjin tema baharu ini.
Kami tidak akan memperincikan di sini cara Twig berfungsi. Ia ialah sejenis PHP yang sangat dipermudahkan yang menawarkan tahap keselamatan tinggi berkat sistem "sandbox" (kita akan melihatnya dengan lebih terperinci dalam bahagian tentang kod Teras Enjin Tema). Jika anda sudah tahu PHP, anda akan menguasainya dengan sangat mudah. Jika anda tidak tahu PHP, ia masih agak mudah dipelajari. Sila lihat dokumentasi Twig 1.X:
https://twig.symfony.com/ Mengedit Menggunakan Antara Muka Pentadbir
Senarai tema
Pada papan pemuka pentadbir, kini terdapat kotak untuk mengakses senarai tema:
Senarai ini dibahagikan kepada 5 lajur:
- pratonton tema: ia hanyalah fail gambar bernama "preview.png" pada akar tema
- "tajuk" tema seperti yang dinyatakan dalam manifest (config.xml pada akar tema)
- keterangan tema: rentetan yang ditetapkan dalam manifestnya
- jenis tema: Tema teras (disediakan bersama LimeSurvey), Tema pengguna (ditambah dalam direktori upload), tema XML (tidak dimuatkan dalam pangkalan data)
- Panjangkan: jika tema memanjangkan tema lain, namanya akan ditunjukkan di sini
- Beberapa butang tindakan:
- Pasang: ia akan memuatkan manifest tema untuk menambahnya ke pangkalan data dan menjadikannya tersedia untuk dipilih pada peringkat tinjauan
- Nyahpasang: ia akan menghapus entri konfigurasi tema dalam pangkalan data
- Penyunting tema: ia akan membawa anda ke penyunting tema
- Pilihan tema: ia akan membawa anda ke konfigurasi global pilihan tema
Penyunting Tema
Dokumentasi ini menganggap anda sudah tahu cara menggunakan Penyunting Tema dalam versi LS sebelumnya.
Penyunting Tema dikekalkan sedekat mungkin dengan yang asal. Maka, apabila anda membuka Tema Teras, anda tidak boleh mengeditnya. Tetapi kini, sebagai ganti butang "salin", anda mempunyai "butang panjangkan".
Gambaran keseluruhan ringkas konsep pewarisan tema
Dalam LS3, sesuatu tema kini boleh mewarisi daripada tema lain, iaitu ia boleh "memanjangkan" tema lain. Ini bermakna direktori tema akan hampir kosong, hanya mengandungi fail (paparan, helaian gaya, skrip, sumber dan sebagainya) yang berbeza daripada yang asal. Dengan cara ini, anda akan mudah mencipta sekumpulan tema untuk pengguna anda yang berbeza tanpa perlu menyelenggara banyak tema yang berlainan. Sebagai contoh: anda boleh mempunyai tema buatan sendiri, kemudian satu versi untuk sebuah syarikat (dengan logonya, gayanya, mungkin pautan ke laman webnya pada pengaki dan sebagainya), versi lain untuk syarikat lain dan seterusnya. Jika anda kemudian mengemas kini CSS atau susun atur global tema tersuai anda, semua tema yang mewarisi daripadanya akan dikemas kini secara automatik. Perhatikan bahawa pewarisan bersifat rekursif: sesuatu tema boleh memanjangkan tema yang memanjangkan tema lain dan seterusnya.
Ini juga bermakna jika anda memanjangkan salah satu tema teras LimeSurvey, anda masih akan mendapat manfaat daripada kemas kininya.
Perkara baharu pada antara muka pengguna
Untuk memanjangkan tema Monochrome LimeSurvey, pergi ke senarai tema, klik butang "Penyunting tema" pada tema Monochrome. Kemudian, klik "panjangkan" dan sahkan nama baharu "extends_monochrome".
Jika anda kini pergi ke direktori upload (dengan klien fail/ftp anda), anda akan melihat bahawa satu direktori baharu telah dicipta: upload/themes/extends_monochrome Ia mengandungi fail XML dan direktori, tetapi kebanyakan direktori kosong. Ia tidak mempunyai paparan, CSS mahupun JS. Namun, anda masih boleh memilih tema ini seperti tema biasa daripada sesuatu tinjauan dan ia akan kelihatan sama persis dengan tema monochrome.
Sumber (jpg, png dan sebagainya) daripada tema asal disalin apabila memanjangkan tema. Ini kerana jika anda menyalin fail CSS daripada tema asal secara setempat, dan jika ia merujuk fail-fail tersebut (seperti dalam pernyataan background-image), ia perlu menemui gambar-gambar itu dalam laluan tema semasa. Penyunting tema untuk tema extends_monochrome kelihatan seperti ini:
Tiada perbezaan besar dengan penyunting tema yang lama. Mari kita senaraikan perbezaan utamanya:
- Kata kunci inherited pada senarai fail. Ia bermaksud fail tersebut tiada dalam direktori tema dan fail daripada tema asal akan digunakan.
- Penyunting utama ( Penyunting ACE ) menunjukkan kandungan fail yang dipilih. Fail-fail ini bukan sahaja mengandungi HTML, CSS atau JS, malah pernyataan Twig. Pernyataan Twig ini memberi kita kemungkinan untuk meletakkan sebahagian logik pada paparan tema yang sebelum ini terletak jauh di dalam teras, dan kini boleh disesuaikan.
- Inilah sebabnya anda kini mempunyai lebih banyak jenis skrin yang tersedia dalam pemilih juntai bawah pada menu atas. Anda akan perasan halaman seperti 'Senarai tinjauan', 'Load', 'Save', 'Error', 'Registration', 'Assessments', 'Cetak jawapan' yang tidak tersedia sebelum ini, atau yang sebelum ini tidak benar-benar boleh disesuaikan.
- Pautan 'tip' di bahagian bawah senarai fail memberi anda cara Twig untuk menambah gambar dalam HTML anda
- Butang 'simpan perubahan' menjadi butang Salin ke tema setempat dan simpan perubahan
Contoh pantas: menambah gambar
Butang Salin ke tema setempat dan simpan perubahan akan melakukan tepat seperti yang dinyatakan: jika anda mengedit apa-apa dalam fail kemudian mengklik butang tersebut, ia akan menyalin fail itu ke tema yang sedang anda edit, dan menyimpan perubahan anda.
Sebagai contoh: klik fail layout_global.twig, kemudian sebelum blok content ( {% block content %}) tambah teks "TEST" dan klik butang tersebut. Anda dapat melihat label fail berubah daripada "inherited" kepada "local" dan kini butangnya ialah butang biasa simpan perubahan.
Jika anda membuka penjelajah fail dan pergi ke direktori upload/themes/extends_monochrome/views/, anda akan melihat ia hanya mengandungi satu fail, iaitu fail layout_global.twig dan rentetan "TEST" ada di dalamnya.
Sekarang, sebagai ganti menambah teks rawak, kita akan menambah gambar. Jika anda mengklik pautan tip, ia akan memberitahu anda:
Untuk menggunakan gambar dalam fail .twig:
{{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
Jika anda telah membaca dokumentasi Twig (dan anda sepatutnya sudah berbuat demikian pada ketika ini), anda tahu bahawa {{ function( ) }} akan mengeluarkan hasil sesuatu fungsi pada skrin. Di sini, fungsinya ialah image( ).
Jika anda ingin tahu apa yang dilakukannya, anda boleh menemuinya dalam kod di sini (versi RC3): fungsi image() dalam RC3
Jika anda tidak memahami kod tersebut: jangan risau, anda tidak perlu tahu cara ia berfungsi, tetapi mengapa dan bagaimana menggunakannya.
Anda patut menggunakan fungsi image() atas dua sebab:
- Fungsi image menyusuri tema untuk mencari gambar. Jika tema yang anda usahakan memanjangkan tema lain, dan jika anda menyalin fail ke tempat anda memasukkan gambar secara setempat, tetapi gambar itu tidak disalin ke tema setempat, ia akan menyusuri pepohon pewarisan tema untuk mencari lokasi gambar tersebut.
- Ia akan menggunakan pengurus aset, jadi ia akan meningkatkan prestasi tema anda. Lihat dokumentasi Yii Asset Manager untuk maklumat lanjut: http://www.yiiframework.com/wiki/148/understanding-assets/
Jadi, untuk menambah gambar pada tema anda:
- muat naik sahaja seperti biasa dengan pemuat naik fail di sebelah kanan, kemudian tambahkannya ke tempat yang anda mahu dalam mana-mana fail twig:
{{ image('./files/myfile.png') }}
- Jika anda ingin menambah teks alternatif untuk gambar anda (untuk pembaca skrin dan pengesahan HTML), tambah:
{{ image('./files/myfile.png'), ‘my alternative text’ }}
- Jika anda ingin menambah atribut class dan menambah id padanya:
{{ image('./files/myfile.png'), ‘my alternative text’, {“class”: “a_nice_css_class”, “id”: “any_id”} }}
Beberapa perkara dalam senarai TO-DO kami
- Memberi pengguna kemungkinan untuk memuat naik fail pratonton tersuai daripada penyunting itu sendiri
- Menambah butang untuk menghapus fail setempat dan kembali kepada pernyataan yang diwarisi
- Hanya menyalin gambar yang digunakan dalam fail CSS (dengan menyenaraikannya dalam manifest sebagai fail untuk disalin)
- Mengingatkan tema mana yang dipanjangkan oleh tema semasa (jika ada)
Pilihan tema
Satu lagi perkara baharu dalam LS3 ialah halaman pilihan tema. Seperti yang akan kita lihat nanti, pencipta tema boleh mencipta pilihan mereka sendiri malah halaman pilihan pentadbir mereka sendiri. Di sini, kita akan melihat sepintas lalu cara halaman pilihan Tema Teras berfungsi. Untuk mengakses pilihan tema pada peringkat global: klik "pilihan tema" dalam senarai tema
Pilihan lanjutan
Apabila anda membuka tab Pilihan tema, anda boleh memilih untuk mengedit sama ada Pilihan mudah atau Pilihan lanjutan. “Pilihan lanjutan” hanyalah borang ringkas yang memberi anda akses kepada medan konfigurasi utama tema daripada pangkalan data. Untuk memahami cara ia berfungsi, anda juga perlu membaca tentang fail XML dan penciptaan tema dari awal. Oleh itu, ia agak kompleks dan dibuat untuk pengguna lanjutan.
Walau bagaimanapun, jika anda ingin mengedit tetapan lanjutan, klik pada tab Pilihan lanjutan
- Fail CSS: Fail CSS yang perlu ditambah ke dalam templat;
- Fail JS: Fail JS yang perlu ditambah ke dalam templat;
- Fail Cetak CSS: Fail CSS yang dimuatkan semasa mencetak templat;
- Pilihan: Medan ini mengandungi pilihan (dan nilainya) yang perlu dihuraikan ke paparan templat;
- CssFramework Name: Nama rangka kerja CSS yang akan dimuatkan. Buat masa ini, hanya Bootstrap atau tiada;
- Cssframework Css: Anda boleh menggantikan bootstrap.css teras dalam medan ini dengan versi tersuai yang berbeza;
- Cssframework Js: Medan boostrap.js teras boleh digantikan di sini dengan versi tersuai yang berbeza;
- Pakej untuk dimuatkan: Anda boleh memuatkan beberapa pakej aset teras daripada LimeSurvey melalui tetapan ini.
Anda akan perasan terdapat input muat naik di bahagian atas, yang membolehkan anda memuat naik fail ke dalam direktori fail tema. Parameter ini boleh digunakan untuk mengubah keseluruhan penampilan tema.
Amaran! : Jangan ubah nilai melainkan anda tahu apa yang anda lakukan!
Pilihan mudah
Halaman pilihan mudah datang daripada Templat itu sendiri. Ia dibuat melalui fail twig dan sedikit javascript dalam direktori /options tema: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Pautan rosak)
Halaman ini boleh sama sekali berbeza antara satu tema dengan tema yang lain, dan penyedia tema amat digalakkan untuk mencipta rupa & rasa mereka sendiri. 
Halaman pilihan mudah hanya mengisi input borang lanjutan. Anda boleh melihatnya dengan menghidupkan atau mematikan tetapan pada halaman mudah, dan melihat bagaimana input berkaitan dalam borang lanjutan diubah mengikutnya. Sebagai contoh, dalam pilihan mudah Templat Lalai, jika anda menukar tema Bootswatch kepada "Darkly" dan kemudian mengklik tab pilihan lanjutan (walaupun tanpa menyimpan), anda akan melihat medan "Cssframework Css" berubah daripada
{"replace": [["css/bootstrap.css","css/flatly.css"]]}
kepada
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
Berikut ialah pelbagai pilihan mudah untuk tema teras:
- Ajax mode: Adakah halaman seterusnya dimuatkan melalui ajax (lebih pantas) atau melalui muat semula halaman (lebih baik untuk tujuan penyahpepijatan)
- Imej latar belakang: jika ditetapkan kepada Ya, imej yang dipanggil pattern.png akan dimuatkan (akan digantikan dengan pemilih fail dalam Master)
- Box container: jika ditetapkan kepada Tidak, soalan tidak akan diletakkan dalam kotak (supaya anda boleh menggunakan tatasusunan besar yang melebihi lebar skrin)
- Brandlogo: jika ditetapkan kepada tidak, nama tinjauan akan dipaparkan pada bar atas; jika tidak, anda boleh memilih salah satu imej dalam direktori fail untuk digunakan sebagai imej logo.
- Animasikan badan: jika ditetapkan kepada ya, anda boleh memilih salah satu animasi untuk digunakan apabila badan tinjauan dimuatkan
- Animasikan soalan: sama seperti soalan
- Animate alerts: sama seperti makluman
- Bootstrap theme: di sini, anda boleh memilih tema Bootstrap untuk dimuatkan. Tema ini datang daripada Bootswatch https://bootswatch.com/3/
Pustaka yang digunakan untuk animasi ialah animate.css: https://daneden.github.io/animate.css/
Tentu sahaja, penyedia tema boleh menambah pustaka animasinya sendiri atau tidak menggunakan sebarang pustaka animasi.
Tema monochrome menggunakan tema warna bootstrap yang sama seperti antara muka pengguna pentadbir. Tema ini tidak menggunakan sistem penggantian rangka kerja css, sebaliknya hanya menambah fail CSS. Jadi, ini menggambarkan cara lain untuk mengendalikan tema tersuai bagi penyedia tema.
Sistem pewarisan
Dalam bahagian sebelumnya, kita telah melihat bahawa sesuatu tema boleh memperluas tema lain. Konfigurasi tema juga boleh mewarisi daripada konfigurasi tema lain. Ini bermakna bagi sesuatu tema, anda boleh mempunyai konfigurasi pada
- peringkat global (yang baru kita lihat, boleh diakses daripada senarai tema)
- pada peringkat kumpulan tinjauan
- dan yang terakhir pada peringkat tinjauan.
Setiap parameter pada sesuatu peringkat boleh mewarisi daripada peringkat di atasnya: pewarisan kumpulan tinjauan. Pertama, mari kita lihat peringkat kumpulan tinjauan.
Pada peringkat kumpulan tinjauan
Sesungguhnya, salah satu lagi kebaharuan hebat LS3 ialah sistem kumpulan tinjauan. Anda kini boleh mencipta kumpulan berbeza untuk menyusun tinjauan anda. Untuk mengaksesnya, pergi ke senarai tinjauan dan klik tab kumpulan tinjauan:
Dalam senarai ini, anda mempunyai dua butang tindakan. Jika kumpulan itu kosong, anda boleh menghapusnya. Jika tidak, anda sentiasa boleh mengeditnya. Dengan mengklik butang edit, anda akan sampai ke halaman konfigurasi Kumpulan tinjauan:
Tab ketiga halaman ini dipanggil “Pilihan templat untuk kumpulan tinjauan ini”. Jika anda mengkliknya, anda akan melihat senarai tema yang sama seperti dalam senarai tema, kecuali di sini hanya butang pilihan yang kelihatan (penyunting tema hanya boleh dicapai daripada senarai utama).
Sekarang, jika anda mengklik pilihan untuk Templat Lalai, anda akan melihat ini:
- Mewarisi semuanya bermakna semua konfigurasi akan diwarisi daripada peringkat konfigurasi Global.
- Jika anda pergi ke halaman pilihan lanjutan, anda akan melihat bahawa semua medan ditetapkan untuk mewarisi.
- Jika anda mengklik "Tidak" untuk "Mewarisi semuanya" dalam pilihan mudah, anda akan sekali lagi melihat halaman yang sangat serupa dengan halaman pilihan global. Satu-satunya perbezaan ialah bagi setiap medan, anda boleh menetapkannya kepada ya, tidak, atau mewarisi; dan setiap pemilih juntai bawah mempunyai nilai mewarisi'.
Sesebuah kumpulan tinjauan boleh menjadi anak kepada kumpulan lain. Dalam kes ini, ia akan mewarisi daripada induknya.Pada peringkat tinjauan
Semasa mengedit tinjauan, dalam menu bar kiri, anda akan melihat entri baharu “Pilihan tema”. Ia akan membawa anda ke halaman pilihan bagi Tema yang dipilih untuk tinjauan semasa. Anda akan menemui sistem pewarisan yang sama seperti dalam kumpulan tinjauan, tetapi kali ini, mewarisi bermakna tetapan akan diwarisi daripada Kumpulan tinjauan bagi tinjauan tersebut.
Contoh kes penggunaan
Katakan anda menggunakan satu tema untuk syarikat yang berbeza (A dan B). Anda menetapkan pilihan kegemaran anda pada peringkat global (cth.: ajax hidup, animasikan badan dengan slide in, makluman dengan pulse). Kemudian anda mencipta kumpulan tinjauan untuk setiap syarikat: kumpulan tinjauan untuk syarikat A yang akan menempatkan semua tinjauan syarikat ini, dan satu kumpulan tinjauan untuk syarikat B yang akan menempatkan semua tinjauan syarikat B. Pada peringkat ini, anda hanya akan menetapkan logo dan latar belakang, dan membiarkan pilihan lain mewarisi. Jadi, semua tinjauan dalam kumpulan A akan menggunakan logo syarikat A, dan semua tinjauan daripada kumpulan B menggunakan logo syarikat B. Bagi salah satu tinjauan syarikat A, anda boleh menggunakan latar belakang berbeza yang berkaitan dengan topik tinjauan: anda hanya menukar latar belakang dalam pilihan pada peringkat tinjauan. Jika seseorang di syarikat B memberitahu anda bahawa makluman berdenyut terlalu agresif dan dia lebih suka sesuatu yang lebih lembut seperti fade in, anda hanya menukar animasi makluman pada peringkat Kumpulan tinjauan B dan semua tinjauan dalam kumpulan ini kini akan menggunakan animasi tersebut. Jika syarikat A menukar logonya, anda boleh menukarnya pada peringkat Kumpulan tinjauan A, dan semua tinjauan dalam kumpulan ini akan menggunakan logo baharu.
Soalan lazim tentang penyesuaian tema
Di sini anda akan menemui beberapa jawapan kepada soalan yang pernah ditanya di forum dan yang boleh membantu anda menyesuaikan tema anda.
Menyesuaikan CSS/JS: berurusan dengan pengurus aset ("mengapa perubahan saya tidak digunakan?")
Jika anda cuba mengemas kini CSS/JS sesuatu tema dengan mengedit kod secara terus menggunakan editor kegemaran anda, anda mungkin hairan kerana perubahan anda tidak digunakan.
Sejak 2.50, LS menggunakan pengurus aset Yii:
Dokumentasi Yii tentang Aset
Ia memindahkan fail CSS/JS sesuatu tema ke subdirektori tmp/ dengan rentetan rawak (cth.: "tmp/1ef64ml/"). Jadi jika anda membuat sebarang perubahan pada fail css/js, dan memberitahu pengurus aset, fail tersebut disalin ke subdirektori baharu dengan nama baharu supaya cache pelayar pengguna dikemas kini dan mereka melihat css/js yang baharu. Jika tidak, mereka perlu mengosongkan cache pelayar mereka.
Berikut ialah pautan CSS dalam pengepala apabila pengurus aset dihidupkan:
Seperti yang anda lihat, kesemuanya merujuk kepada subfolder tmp/.
Berikut ialah pautan CSS dalam pengepala apabila pengurus aset dimatikan:
Seperti yang anda lihat, ia menuju ke fail sebenar tema.
Tentu sahaja, jika Pengurus Aset tidak tahu anda telah mengubah fail itu, fail lama daripada direktori tmp/ yang lama kekal tidak berubah, dan perubahan anda tidak akan sekali-kali digunakan..Jadi, semasa anda mengedit CSS/JS sesuatu tema, anda mempunyai pelbagai kemungkinan:
- Anda boleh menggunakan Penyunting tema LS: ia mengendalikan pengurus aset dan anda tidak perlu risau tentang apa-apa
- Anda boleh menghidupkan mod nyahpepijat: ia akan mematikan pengurus aset, jadi fail css/js sebenar tema anda dipanggil (tetapi kemudian, anda perlu menyegarkan cache pelayar pada setiap muatan)
- Anda boleh menyegarkan cache aset: daripada Tetapan global -> Umum -> Kosongkan cache aset
Menggunakan penyunting tema untuk mengedit CSS tersuai adalah penyelesaian terbaik setakat ini.
Menggunakan penyunting tema akan membantu anda memahami seni bina enjin tema baharu.
Selain itu, jika anda menyesuaikan fruity, berhati-hati dengan kekhususan CSS: kebanyakan definisi menggunakan pemilih ".fruity" (salah satu kelas elemen body)
Menambah fon tersuai pada tema saya
Cara mudah: menggunakan Google Font CDN
Tema Tinjauan Bootswatch menggunakan Google Font CDN. Mari kita lihat bagaimana ia berfungsi: 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");
Kemudian fon Lato digunakan melalui peraturan CSS: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72
body {
...
font-family: "Lato";
...
}
Anda boleh menggunakan mana-mana fon google dengan cara itu dalam tema tersuai anda. Tentu sahaja, anda harus mengalih keluar pemilih fon daripada pilihan tema anda. Hapuskan baris-baris ini dalam options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230
Menggunakan fon tempatan
Tentu sahaja, anda juga boleh memuat turun fail fon dan menggunakannya daripada pelayan tempatan dan bukannya daripada Google CDN (lebih baik untuk privasi). Untuk contoh cara melakukannya, berikut ialah versi tempatan fon noto kami: 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');
}
...
Anda boleh menggunakan definisi yang sangat serupa dalam fail css tema anda, kemudian salin fail NotoSans-Regular.ttf ke folder css/font-src/ tema anda.
Kemudian, gunakan fon itu pada body anda (atau mana-mana elemen lain) seperti di atas, dan alih keluar pemilih fon pilihan lalai.
Mencipta pemilih fon anda sendiri dalam pilihan
Buat masa ini, anda tidak boleh menggunakan pemilih fon teras dengan mudah untuk menambah fon anda sendiri dalam pilihan. Kita perlu terlebih dahulu membolehkan pengguna akhir memuat naik pakej tersuai (lihat perenggan seterusnya: A look into the Fruity Font Selector)
Beginilah cara untuk meneruskannya:
- Tambah dua fon (my_custom_font dan my_custom_other_font) ke dalam tema anda, menggunakan CDN atau pelayan setempat
- Kemudian, dalam fail css anda, tambah dua kelas baharu:
.font-my_custom_font {
font-family: 'my_custom_font ';
}
.font-my_custom_other_font {
font-family: 'my_custom_other_font';
}
- Dalam fail XML tema anda, tambah pilihan fon (yang lalai ialah my_custom_font) :
<options>
....
<font>my_custom_font</font>
</options>
- dalam option.twig, tambah pemilih fon anda dengan menambah baris berikut (belum diuji setakat ini, jadi sila maklumkan di forum jika ia tidak berfungsi):
<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>
Sekarang pengguna anda sepatutnya boleh memilih antara kedua-dua fon tersebut.
A look into the Fruity Font Selector
Pada masa hadapan, kami akan membolehkan pengguna akhir memuat naik pakej aset mereka sendiri, termasuk pakej fon. Ini akan menjadikan sebarang penyesuaian fon sangat mudah.
Untuk memahami Yii Packages:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
Pakej LimeSurvey ditakrifkan dalam beberapa fail yang berbeza. Pakej fon ditakrifkan di sini:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Contohnya, pakej fon Noto ditakrifkan di sini:
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',
),
),
Fail noto.css yang terkandung di dalamnya terdapat di sini:
https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Perhatikan takrifan kelas css ".font-noto" pada penghujungnya:
@font-face {
font-family: 'Noto Sans';
...
}
...
.font-noto{
font-family: 'Noto Sans';
}
Kemudian, dalam Tema Vanilla, fon noto digunakan dengan menambah pakej noto dan menetapkan pilihan fon kepada noto:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79
<packages>
....
<add>font-noto</add>
</packages>
<options>
....
<font>noto</font>
</options>
Kemudian, kelas fon pada body ditakrifkan menggunakan nilai ini:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76
<body class=" ... font-{{ aSurveyInfo.options.font }} ... " ... >
Sudah tentu, fail XML hanya mengandungi nilai lalai untuk konfigurasi tema anda. Namun sebenarnya, nilai tersebut ditakrifkan dan dibaca dalam pangkalan data (jadual "template_configuration" (Question: "template_" of "theme_"?) sebagai rentetan json. Fail option.js hanya menggunakan nilai pemilih fon bagi pilihan mudah untuk menukar nilai dalam borang tab lanjutan: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174
Jadi apabila fungsi "upload asset package" tersedia, akan mudah untuk menambah skrip yang mengimbas semua pakej fon sedia ada untuk menambahkannya dalam pemilih.
Menambah pilihan tema untuk mengawal kedudukan dan paparan elemen tinjauan
Tutorial ini akan menunjukkan cara menambah pilihan pada tema lanjutan untuk memaparkan elemen tinjauan di pelbagai lokasi. Dalam kes ini, kita akan mencipta pilihan tema untuk menunjukkan tajuk tinjauan di dua lokasi yang berbeza.
Demi kemudahan, kita akan mendasarkan tutorial ini pada lanjutan tema "bootswatch" dalam LimeSurvey versi 3.4.3.Cipta tema tersuai
- Lanjutkan tema "bootswatch" seperti yang diterangkan di atas.
- Salin custom.css ke tema setempat seperti yang diterangkan di atas.
Cipta pilihan tema baharu
- Salin kandungan /themes/survey/bootswatch/options/ ke /upload/themes/survey/yourThemeName/options/.
- Buka /upload/themes/survey/yourThemeName/options/options.twig dalam editor dan cari "{# Bootstrap Bootswatch theme #}". Tepat sebelum elemen induknya <div class='row'>, tambah yang berikut:
{# 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> - Buka /upload/themes/survey/yourThemeName/config.xml dan tambah dua item pada blok "options" supaya kelihatan seperti ini:
<options> <ajaxmode>on</ajaxmode> ... <surveyname1>on</surveyname1> <surveyname2>on</surveyname2> </options>
- Ini akan memberikan anda dua pilihan baharu dalam skrin Pilihan tema seperti ini:
- Cipta direktori baharu /upload/themes/survey/yourThemeName/views/subviews/header/.
- Salin /themes/survey/vanilla/views/subviews/header/nav_bar.twig ke direktori baharu itu.
- Buka /themes/survey/vanilla/views/subviews/header/nav_bar.twig dan cari "{# Logo option #}". Di bawahnya, ubah suai pernyataan IF untuk logo/nama tinjauan, supaya kelihatan seperti ini:
{# 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 %} - Tambahkan sesuatu seperti ini ke /upload/themes/survey/yourThemeName/css/custom.css:
.navbar-brand { line-height: 60px; font-size: 32px; }
- Togol pilihan tema "Nama tinjauan dalam navbar" kepada "Ya"
- Anda akan melihat ini:
Paparan diubah suai untuk Tajuk tinjauan di bawah bar kemajuan
- Cipta direktori baharu /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews.
- Salin /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig ke direktori baharu itu.
- Buka /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig dan tambahkan elemen <h1> untuk nama tinjauan. Supaya kelihatan seperti ini:
<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>
- Tambahkan sesuatu seperti ini ke /upload/themes/survey/yourThemeName/css/custom.css:
.navbar-brand { line-height: 60ph1.custom-survey-name { margin: 0; text-align: center; }
- Togol pilihan tema "Nama tinjauan di bawah bar kemajuan" kepada "Ya"
- Anda akan melihat ini:
Muat turun
- Contoh tema yang dilanjutkan: Test_survey_names.zip
Mencipta tema dari awal
Dokumentasi akan disediakan tidak lama lagi.
Buat masa ini, hanya beberapa petua diberikan.
Struktur tema
Fail dan direktori
Apabila anda mencipta Tema dari awal, anda tidak perlu mematuhi struktur fail/direktori/css/js daripada Vanilla. CSS/JS wajib ditambahkan oleh teras (anda masih boleh mengalih keluarnya jika perlu)
Fail-fail yang mesti ada pada tema anda ialah fail susun atur:
- layout_global.twig : memaparkan halaman untuk menjawab tinjauan
- layout_survey_list.twig : memaparkan senarai tinjauan (jika tema ini ditetapkan sebagai lalai)
- layout_errors.twig : digunakan untuk memaparkan ralat yang menghalang pemaparan tinjauan. (ID tinjauan salah, kumpulan kosong dalam pratonton kumpulan, dll.)
- layout_user_forms.twig: memaparkan borang pengguna seperti: token (peserta tinjauan), dan pendaftaran.
- layout_print.twig : digunakan untuk mencetak tinjauan ke PDF
- layout_printanswers.twig: mencetak jawapan
Kandungan fail-fail tersebut, dan fail yang disertakan atau tidak, sepenuhnya terpulang kepada anda. Semua fail dan direktori lain yang terdapat pada Vanilla adalah pilihan semata-mata; anda bebas menyusun kod anda mengikut cara yang anda mahu.
Jika anda membaca kod pemaparan frontend, anda akan melihat bahawa nama fail tersebut terdapat secara langsung di dalamnya. Itulah sebabnya fail-fail itu wajib.
Kandungan
Dalam layout_global.twig Vanilla, anda akan melihat kami menggunakan pemboleh ubah bernama "include_content" untuk menentukan apa yang dipaparkan 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 } %}
aSurveyInfo.include_content memberitahu anda tindakan yang sedang berlaku: memaparkan soalan? memaparkan keputusan penghantaran? memaparkan kosongkan semua? dll. Seperti yang anda lihat, dalam vanilla, kami mencipta satu fail untuk disertakan bagi setiap tindakan. Jadi jika anda ingin mengetahui senarai tindakan, semak sahaja direktori vanilla views/subviews/content, dan alih keluar sambungan "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
Jika anda pernah mencipta tema untuk LimeSurvey versi 2.x, anda akan perasan bahawa kebanyakannya sepadan dengan fail pstpl lama untuk LimeSurvey 2.x. Sekali lagi, anda tidak diwajibkan mencipta fail-fail tersebut, dengan nama tersebut, dalam direktori ini. Sebagai contoh, anda boleh menambah satu switch besar dalam layout_global.twig dengan HTML yang diingini untuk setiap tindakan.
Manifes config.xml
Manifes tema mengandungi maklumat utama tentang tema anda. Apabila anda memasang tema, kandungan manifes akan dimuatkan ke dalam pangkalan data, dalam dua jadual berbeza: template dan template_configuration. Jadi setiap kali anda mengubah suai manifes sesuatu tema, anda mesti menyahpasang dan memasangnya semula (atau hanya menetapkannya semula). Oleh sebab proses ini menjengkelkan semasa membangunkan tema, anda boleh memaksa penggunaan terus fail XML berbanding entri pangkalan data. Untuk berbuat demikian, dalam config.php hidupkan mod nyahpepijat dan tetapkan 'force_xmlsettings_for_survey_rendering' kepada true.
Bahagian metadata
Tiada yang rumit: hanya maklumat utama tentang tema anda. Ia akan dimasukkan ke dalam jadual 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>
Beberapa catatan:
- name: akan digunakan sebagai kunci dalam pangkalan data. Jadi ia mesti unik, dan tidak boleh mengandungi aksara khas (tiada ruang). Perhatikan bahawa huruf besar/kecil tidak akan diambil kira
- Title: akan digunakan untuk memaparkan nama tema anda dalam pelbagai senarai. Ia boleh mengandungi aksara khas
- description: akan digunakan dalam senarai utama tema tinjauan. Ia boleh mengandungi aksara khas, malah kod HTML dengan menggunakan
- extends: pilihan, ia mentakrifkan tema induk. Jadi jika sebarang fail tiada dalam tema ini (twig/js/css/jpg, dll.) ia akan mencarinya dalam tema induk
Jika anda melanjutkan salah satu daripada 3 tema teras (Vanilla, Bootswatch, Fruity), anda boleh menukar nilai "extends" daripada satu tema induk kepada yang lain. Sudah tentu, anda perlu menetapkan semula tema tersebut.
Bahagian fail
Bahagian ini penting. Ia akan dimasukkan ke dalam jadual template_configuration, dalam medan files_css, files_js, files_print_css sebagai tatasusunan json.
Contohnya: bahagian fail bagi Tema Material Premium:
<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>
Semua fail CSS/JS yang terdapat dalam bahagian ini akan dimuatkan semasa tinjauan dimulakan (dalam mod ajax. Jika mod ajax dimatikan, sudah tentu semua fail dimuatkan semula pada setiap halaman).
Fail-fail ini akan ditambahkan ke dalam Yii Asset Packet berdasarkan nama tema. Jadi apabila Asset Manager dihidupkan (mod nyahpepijat dimatikan), fail-fail tersebut akan disalin ke direktori tmp bersama-sama bahagian tema yang lain (supaya anda boleh menggunakan laluan relatif dalam CSS dan JS untuk mencapai fail imej).
Tentang Asset manager dalam Yii: https://www.yiiframework.com/wiki/148/understanding-assets
Tentang pakej dalam Yii: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
Fail-fail ini akan menggunakan sistem pewarisan. Ini bermakna jika anda menambah fail CSS/JS pada sesuatu tema, tetapi fail itu tiada dalam tema tersebut, enjin akan mencarinya dalam semua tema induk tema ini dan menggunakan yang pertama ditemui. Jadi jika pengguna melanjutkan tema anda melalui penyunting tema, semua fail tersebut akan diwarisi dalam temanya. Kata kunci merujuk kepada sistem pewarisan ini.
- add : ia akan menambah fail ke dalam tema, dan ke semua tema yang mewarisinya
- replace: ia akan menggantikan fail tema induknya
- remove: ia akan mengalih keluar fail daripada mana-mana pakej, malah pakej teras (sejak 3.14)
Ingat bahawa anda boleh menetapkan 'force_xmlsettings_for_survey_rendering' dalam config.php supaya konfigurasi dibaca daripada XML dan bukannya pangkalan data (tidak perlu tetapan semula). Ini akan memudahkan pengujian pengubahsuaian fail XML, dan mengelakkan anda daripada menyahpasang/memasang semula tema pada setiap pengubahsuaian XML
Beberapa catatan tentang kata kunci tersebut:
Petua pewarisan
Seperti yang dijelaskan sebelum ini, kata kunci "add" boleh merujuk kepada fail yang terdapat dalam salah satu tema induk. Jadi anda boleh "add" sebuah fail dalam bahagian ini tanpa fail tersebut berada dalam tema anda, tetapi dalam salah satu tema induknya. Enjin akan mencari dalam semua tema induknya dan menggunakan fail pertama yang ditemui. Jika fail tidak ditemui, mod nyahpepijat dihidupkan dalam config, dan mod nyahpepijat frontend JS dihidupkan dalam tetapan global, satu mesej dalam konsol akan memberi amaran kepada anda. Cth: jika kita tambah dalam my_theme: <add>css/unexisting.css</add>, dalam konsol kita akan melihat:
(¯`·._.·(¯`·._.· Theme Configuration Error ·._.·´¯)·._.·´¯)
Can't find file 'css/unexisting.css' defined in theme 'my_theme'Jika mod nyahpepijat dimatikan, tiada ralat akan dipaparkan sama sekali. Enjin hanya akan mengabaikan pernyataan add yang salah.
Bilakah menggunakan add, bilakah menggunakan replace, dan bilakah saya boleh membiarkannya kepada tema induk?
Pertama: add dan replace ialah kata kunci yang sama. Anda boleh menggunakan salah satu, enjin akan melakukan perkara yang sama. Kedua-duanya dibezakan untuk pembaca manusia supaya mereka memahami niat anda.
Anda tidak boleh menambah fail dengan nama yang sama seperti tema induk: ia akan sentiasa menggantikannya. Cth: jika anda mempunyai fail bernama "my_mother_theme/foo.css" dan anda menambah fail bernama "foo.cs" dalam tema anak, hanya "daughter_theme/foo.css" akan ditambah pada tema. Jika anda ingin mengekalkan "my_mother_theme/foo.css", pilih sahaja nama lain untuk "daughter_theme/foo.css", seperti "daughter_theme/bar.css". Jadi kata kunci "add" boleh digunakan sebagai kata kunci "replace".
Jika anda tertanya-tanya mengapa: ini memudahkan penjanaan automatik tema yang mewarisi, kerana menyalin bahagian fail terus berfungsi (tidak perlu menukar "add" kepada "replace" apabila memanjangkan fail).
Untuk menjelaskannya, mari kita ambil contoh Fruity. Berikut ialah bahagian fail CSS-nya:
<css>
<add>css/variations/sea_green.css</add>
<replace>css/animate.css</replace>
<replace>css/theme.css</replace>
<replace>css/custom.css</replace>
</css>
Jika anda melihat fail custom.css dalam fruity, ia betul-betul sama dengan fail vanilla. Kita boleh menghapus fail custom.css dalam fruity, dan fail vanilla akan dimuatkan. Kita juga boleh mengalih keluar pernyataan <replace>custom.css</replace> daripada manifes Fruity, pernyataan daripada vanilla akan digunakan, dan custom.css vanilla akan dimuatkan.
Jadi mengapa kita menggunakan pernyataan <replace>custom.css</replace> dalam manifes fruity? Jawapannya mudah: kerana kita mahu pengguna akhir dapat memanjangkan tema fruity, mengubah fail dalam tema tempatannya, dan memuatkan fail yang telah diubah suai itu daripada tema warisannya. Untuk memahaminya, panjangkan sahaja fruity dan lihat tema yang dipanjangkan itu. Tema yang dipanjangkan itu tidak mempunyai fail custom.css pun. Jadi fail daripada fruity akan digunakan. Tetapi: jika pengguna mencipta fail ini dalam tema yang dipanjangkan (dengan mengklik "extend" dalam penyunting tema), maka fail ini akan dimuatkan daripada temanya.
Jadi secara umum:
jika anda mencipta tema dari awal tanpa memanjangkan sebarang tema, gunakan sahaja pernyataan add untuk menambah fail css/js anda. Mudah sahaja.
jika anda mencipta tema yang memanjangkan tema lain, dan anda tidak mahu pengguna dapat memanjangkan fail css/js daripada tema induk: jangan gunakan pernyataan add dalam manifes anda. Fail tersebut masih akan dimuatkan daripada konfigurasi tema induk.
jika anda mencipta tema yang memanjangkan tema lain, dan anda mahu menggantikan fail daripada tema induk: gunakan kata kunci replace (kata kunci add akan memberikan hasil yang sama)
jika anda mencipta tema yang memanjangkan tema lain, anda tidak menggantikan sesuatu fail css/js, tetapi anda mahu pengguna dapat memanjangkan fail ini: maka gunakan pernyataan "replace" dalam manifes anda untuk fail ini. Walaupun anda tidak menggantikan fail tersebut, dengan menggunakan kata kunci replace dalam manifes: anda membenarkan pengguna berbuat demikian jika dia mahu.
Hanya kes yang terakhir ini memerlukan sedikit usaha mental untuk difahami, semua kes lain adalah mudah.
Anda juga boleh mendaftarkan fail CSS dan JS terus daripada kod twig. Fail tersebut hanya akan dimuatkan apabila fail twig diminta. Jika anda mahu pengguna dapat mewarisi fail JS/CSS tersebut daripada penyunting tema, ingat untuk menggunakan fungsi Template:RegisterTemplateCssFile('my style.css') dan Template:RegisterTemplateScript('my script.js'). Jika anda tidak menggunakan fungsi tersebut, tema anda mungkin berfungsi, tetapi pewarisan padanya akan rosak. Logiknya sama seperti fungsi Template:Image('my picture.jpg')
&action=edit&redlink=1){kind=link}
Kata kunci remove
Kata kunci remove hanya tersedia sejak 3.14. Dengannya, anda boleh mengalih keluar sebarang fail css/js daripada sebarang pakej, malah pakej teras. Ia digunakan dalam Material Premium Theme untuk mengalih keluar fail Awseome Bootstrap Checkbox:
<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
jadi anda harus menggunakan sintaks yang betul-betul sama dengan fail pakej tersebut (cth: "awesome-bootstrap-checkbox.css" sahaja tanpa laluan folder tidak akan berfungsi). Anda akan menemui senarai lengkap pakej teras dan failnya dalam /application/config/packages.php dan config/third_party.php. Contohnya, untuk 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',
),
Cara lain untuk mencari nama tepat yang perlu digunakan dalam tag remove ialah dengan menghidupkan pengurus aset (dengan mematikan mod nyahpepijat atau menetapkan 'use_asset_manager'=>true dalam config). Kemudian, laluan yang perlu digunakan ialah laluan tepat selepas direktori rawak dalam direktori tmp. Contohnya, untuk awesome-bootstrap-checkbox.css:
<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />
Fail yang tidak boleh anda alih keluar:
jquery-3.1.1.min.js : diperlukan
jquery-migrate-3.0.0.min.js : diperlukan
survey.js : diperlukan
moment-with-locales.min.js : diperlukan untuk jenis soalan tarikh (dan beberapa yang lain, saya rasa)
em_javascript.js : diperlukan untuk semua JavaScript ExpressionScript
Bahagian pilihan
Bahagian ini berkaitan dengan pilihan tema anda. Ia akan digunakan untuk mengisi medan "options" dalam jadual template_configuration sebagai tatasusunan JSON.
Maklumat lanjut
Beberapa nota
NOTA: jika anda mengedit fail XML sesuatu tema, anda mesti menyahpasang dan memasang semula tema tersebut supaya ia diambil kira.
NOTA: untuk mengelakkannya, anda boleh memaksa penggunaan XML dan bukannya pangkalan data. Dalam config.php, hidupkan mod nyahpepijat dan nyahkomen:
'force_xmlsettings_for_survey_rendering' => true, // Uncomment if you want to force the use of the XML file rather than DB (for easy theme development)
Berhati-hati: segala-galanya akan dimuatkan daripada XML (termasuk pilihan, dll.)
NOTA: jika anda mengedit fail CSS/JS secara manual (tanpa menggunakan Penyunting tema) dan mod nyahpepijat dimatikan, anda kini boleh memaksa aset dibersihkan. Dalam "Tetapan global", tab "General", klik butang "Clear assets cache".
NOTA: jika anda mengalih keluar bahagian