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

Танилцуулга

Анхаарна уу: LimeSurvey-ийн өмнөх хувилбаруудад судалгаа хэрхэн харагдах, өнгө, фонт, байршил болон (зарим) үйлдлийн хувьд хэрхэн харуулахыг тодорхойлдог файлуудыг "загвар" гэж нэрлэдэг байсан. Шинэ ойлголтын дагуу одоо үүнийг "сэдэв" гэж нэрлэх бөгөөд загвар гэдэг нэр томьёог жишээ судалгаануудад зориулан үлдээсэн.

Энэ хуудаснаас та дараахыг сурах болно:

LimeSurvey 3.0-ийн сэдвийн шинэ системийг ашиглах.
Өөрийн сэдвүүдийг удирдахын тулд өв залгамжлалыг ашиглах.
Сэдэвдээ зураг нэмэх
Судалгаа болон судалгааны бүлгүүддээ зориулсан сэдвийн сонголтуудыг удирдах

LimeSurvey 3 нь Twig 1.29, Bootstrap дээр суурилсан, сэдвийн өв залгамжлал болон сэдвийн сонголтуудыг дэмждэг сэдвийн цоо шинэ системийг нэвтрүүлж байна. Энэ нь хуучин орлуулах түлхүүр үгсийн системийг бүрэн устгасан. Тиймээс одоо frontend HTML-ийн 100%-ийг өөрчлөх боломжтой. Жишээлбэл, хуучин сэдвийн системд {ASSESSMENTS} гэсэн түлхүүр үг байсан бөгөөд үүнийг ажиллах үед үнэлгээний HTML-ээр орлуулдаг байв. Сэдэв зохион бүтээгч энэ HTML-ийг (JavaScript ашиглахаас бусад тохиолдолд) өөрчлөх боломжгүй байсан. Одоо энэ HTML-ийг үүсгэх логикийг (Twig-ээр бичсэн) агуулсан assessments.twig нэртэй файл байна. Эдгээр хуудсуудад бид сэдвийн шинэ системийг хэрхэн ашиглах талаар тайлбарлах болно.

Бид энд Twig хэрхэн ажилладгийг нарийвчлан тайлбарлахгүй. Энэ нь “sandbox” системийн ачаар өндөр түвшний аюулгүй байдлыг хангадаг, маш хялбаршуулсан PHP төстэй хэл юм (үүнийг Сэдвийн системийн цөмийн кодын хэсэгт илүү дэлгэрэнгүй авч үзнэ). Хэрэв та PHP-г мэддэг бол эзэмшихэд маш амархан. PHP-г мэдэхгүй ч гэсэн сурахад хялбар байх ёстой. Twig 1.X баримт бичигтэй танилцана уу: https://twig.symfony.com/

Админы интерфэйсээр засварлах

сэдвийн жагсаалт

Админы хянах самбар дээр одоо сэдвийн жагсаалт руу орох хайрцаг байна:

Жагсаалт 5 баганад хуваагдсан:

сэдвийн урьдчилан харах зураг: энэ нь сэдвийн үндсэн хавтсанд байрлах “preview.png” нэртэй зургийн файл юм
манифест (сэдвийн үндсэн хавтсан дахь config.xml) дотор заасан сэдвийн “гарчиг”
сэдвийн тодорхойлолт: манифест дотор тохируулсан тэмдэгт мөр
сэдвийн төрөл: Гол сэдэв (LimeSurvey-тэй хамт ирдэг), Хэрэглэгчийн сэдэв (upload хавтсанд нэмсэн), XML сэдэв (өгөгдлийн санд ачаалагдаагүй)
Өргөтгөх: хэрэв сэдэв өөр сэдвийг өргөтгөсөн бол түүний нэр энд харагдана
Зарим үйлдлийн товчнууд:
- Суулгах: сэдвийн манифестийг ачаалж, өгөгдлийн санд нэмээд судалгааны түвшинд сонгох боломжтой болгоно
- Суулгацыг устгах: өгөгдлийн сан дахь сэдвийн тохиргооны бичилтүүдийг устгана
- Сэдвийн редактор: таныг сэдвийн редактор руу шилжүүлнэ
- Сэдвийн сонголт: таныг сэдвийн сонголтуудын глобал тохиргоо руу хөтөлнө

Сэдвийн редактор

Энэ баримт бичиг нь та LS-ийн өмнөх хувилбар дахь Сэдвийн редакторыг хэрхэн ашиглахыг мэддэг гэж үзсэн болно.

Сэдвийн редакторыг анхных нь аль болох ойр байлгасан. Тиймээс Гол сэдвийг нээхэд та үүнийг засах боломжгүй. Гэхдээ одоо “хуулах” товчийн оронд “Өргөтгөх” товч байна.

Одоо та сэдвийг өргөтгөх боломжтой — *Одоо та сэдвийг **өргөтгөх** боломжтой*

Сэдвийн өв залгамжлалын ойлголтын товч тойм

LS3-д сэдэв одоо өөр сэдвээс өв залгамжилж, өөр сэдвийг “өргөтгөх” боломжтой. Энэ нь сэдвийн хавтас бараг хоосон байх бөгөөд зөвхөн анхных нь файлуудаас ялгаатай файлуудыг (харагдацууд, стилийн хуудсууд, скриптүүд, нөөцүүд гэх мэт) агуулна гэсэн үг. Ингэснээр олон өөр сэдвийг хадгалах шаардлагагүйгээр өөр өөр хэрэглэгчиддээ зориулсан олон сэдвийг амархан үүсгэх боломжтой. Жишээлбэл: та өөрийн гараар хийсэн сэдвийг, дараа нь нэг компанид зориулсан (лого, стиль, хөл хэсэгт вэбсайт руу очих холбоос гэх мэт) хувилбарыг, өөр компанид зориулсан өөр хувилбарыг гэх мэтчилэн үүсгэж болно. Хэрэв та өөрийн сэдвийн CSS эсвэл ерөнхий байршлыг шинэчилбэл, түүнээс өв залгамжилсан бүх сэдэв автоматаар шинэчлэгдэнэ. Өв залгамжлал рекурсив болохыг анхаараарай: сэдэв нь өөр сэдвийг өргөтгөсөн сэдвийг өргөтгөж болно гэх мэт.

Мөн энэ нь LimeSurvey-ийн гол сэдвүүдийн аль нэгийг өргөтгөвөл түүний шинэчлэлтүүдээс үргэлж ашиг хүртэнэ гэсэн үг.

Хэрэглэгчийн интерфэйсийн шинэчлэлүүд

LimeSurvey-ийн Monochrome сэдвийг өргөтгөхийн тулд Сэдвийн жагсаалт руу орж, Monochrome сэдвийн “Сэдвийн редактор” товчийг дарна уу. Дараа нь “Өргөтгөх” дээр дарж, шинэ нэр “extends_monochrome”-ыг баталгаажуулна уу.

Одоо та upload хавтас руу (файл/ftp клиентээрээ) орвол шинэ хавтас үүссэнийг харна: upload/themes/extends_monochrome Энэ нь нэг XML файл болон хавтсуудыг агуулсан боловч ихэнх хавтас хоосон байна. Үүнд харагдац ч, CSS ч, JS ч байхгүй. Гэхдээ та энэ сэдвийг судалгаанаас жирийн сэдэв шиг сонгож болох бөгөөд энэ нь monochrome сэдэвтэй яг адилхан харагдана.

*Сэдвийн бүтэц (хавтас ба файлууд) үүсгэсний дараахан. Бараг хоосон байна*

Сэдвийг өргөтгөх үед анхны сэдвийн нөөцүүд (jpg, png гэх мэт) хуулагдана. Учир нь анхны сэдвээс CSS файлыг локал руу хуулсан бөгөөд тэр нь эдгээр файлуудыг (жишээ нь background-image мэдэгдэлд) ашигласан бол тэдгээр зургийг одоогийн сэдвийн замаас олох шаардлагатай болдог.

extends_monochrome сэдвийн сэдвийн редактор иймэрхүү харагдана:

*extends_monochrome сэдвийг засварлаж байна*

Хуучин сэдвийн редактороос томоохон ялгаа байхгүй. Гол ялгааг жагсаая:

Файлын жагсаалт дахь inherited түлхүүр үг. Энэ нь файл сэдвийн хавтсанд байхгүй бөгөөд анхны сэдвийн файлыг ашиглана гэсэн үг.

Үндсэн редактор ( ACE редактор ) сонгосон файлын агуулгыг харуулна. Файлууд зөвхөн HTML, CSS эсвэл JS биш, мөн Twig мэдэгдлүүдийг агуулна. Эдгээр Twig мэдэгдлүүд нь өмнө нь цөмийн гүнд байрлаж байсан, одоо өөрчлөх боломжтой болсон зарим логикийг сэдвийн харагдацууд руу оруулах боломжийг бидэнд олгодог.

*Судалгааны жагсаалтад зориулсан зарим twig код*

Тийм учраас одоо дээд цэсний унждаг сонгогчид илүү олон дэлгэцийн төрөл байна. Та өмнө нь байгаагүй, эсвэл үнэндээ өөрчлөх боломжгүй байсан ‘Судалгааны жагсаалт’, ‘Ачаалах’, ‘Хадгалах’, ‘Алдаа’, ‘Бүртгэл’, ‘Үнэлгээ’, ‘Хариултыг хэвлэх’ зэрэг хуудсуудыг анзаарах болно.

*Одоо та бүх дэлгэцийг өөрчлөх боломжтой*

Файлын жагсаалтын доод хэсэгт байгаа ‘tip’ холбоос нь HTML-дээ зураг нэмэх Twig аргыг танд харуулна

‘өөрчлөснийг хадгал’ товч нь Тухайн хэсгийн сэдэв рүү хуулж, өөрчлөлтийг хадгалах товч болж өөрчлөгдөнө

Хурдан жишээ: зураг нэмэх

Тухайн хэсгийн сэдэв рүү хуулж, өөрчлөлтийг хадгалах товч нь нэрэндээ дүйцүүлэн яг үүнийг хийнэ: хэрэв та файл дотор ямар нэг зүйл засаад энэ товчийг дарвал файлыг таны засварлаж буй сэдэв рүү хуулж, өөрчлөлтүүдийг хадгална.
Жишээлбэл: layout_global.twig файл дээр дараад, content блокийн ( {% block content %}) яг өмнө “TEST” текст нэмээд товчийг дарна уу. Файлын шошго “inherited”-ээс “local” болж өөрчлөгдөж, одоо товч нь энгийн өөрчлөснийг хадгал товч болсныг харж болно.

Хэрэв та файлын менежер нээж upload/themes/extends_monochrome/views/ хавтас руу орвол зөвхөн layout_global.twig файл нэг л байгаа бөгөөд түүнд “TEST” тэмдэгт мөр байгааг харна.

Одоо санамсаргүй текст нэмэхийн оронд бид зураг нэмнэ. Хэрэв та tip холбоос дээр дарвал дараах зүйлийг хэлнэ:
.twig файл дахь зургийг ашиглах: {{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}
Хэрэв та Twig баримт бичгийг уншсан бол (энэ үед уншсан байх ёстой), {{ function( ) }} нь функцийн үр дүнг дэлгэцэнд гаргадгийг мэдэж байгаа. Энд функц нь image( ) юм.

Хэрэв энэ юу хийдгийг сонирхож байвал кодыг эндээс олж болно (RC3 хувилбар): RC3 дахь image() функц

Хэрэв кодыг ойлгохгүй байвал санаа зовох хэрэггүй, та үүнийг хэрхэн ажилладгийг биш, яагаад болон хэрхэн ашиглахыг мэдэхэд л хангалттай.

Та image() функцийг хоёр шалтгаанаар ашиглах ёстой:

image функц нь зургийг олохын тулд сэдвээр гүйлт хийдэг. Хэрэв таны ажиллаж буй сэдэв өөр сэдвийг өргөтгөсөн бөгөөд та зургийг оруулсан файлыг локал руу хуулсан ч тэр зураг локал сэдэв рүү хуулагдаагүй бол зураг хаана байгааг олохын тулд сэдвийн өв залгамжлалын модоор гүйнэ.
Энэ нь asset manager-ийг ашиглах тул таны сэдвийн гүйцэтгэлийг сайжруулна. Дэлгэрэнгүй мэдээллийг Yii Asset Manager баримт бичгээс үзнэ үү: http://www.yiiframework.com/wiki/148/understanding-assets/

Тиймээс сэдэвтээ зураг нэмэхийн тулд:

баруун талд байгаа файл байршуулагчаар ердийн аргаар байршуулаад, дараа нь дурын twig файл дотор хүссэн газраа нэмнэ:

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

Хэрэв та зурагтаа (дэлгэц уншигч болон HTML баталгаажуулалтад зориулан) өөр текст нэмэхийг хүсвэл дараахыг нэмнэ:

Хэрэв та class шинж чанар болон id нэмэхийг хүсвэл:

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

Бидний хийх ажлын жагсаалтад байгаа зарим зүйл

Хэрэглэгчдэд редактороос өөрийн урьдчилан харах файлыг байршуулах боломж олгох
Локал файлыг устгаад өв залгамжилсан мэдэгдэл рүү буцах товч нэмэх
CSS файлуудад ашигласан зургийг л хуулах (манифест дотор хуулах файлаар жагсаах замаар)
Одоогийн сэдэв аль сэдвийг өргөтгөснийг (хэрэв байгаа бол) сануулах

Сэдвийн сонголтууд

LS3-ийн өөр нэг шинэлэг зүйл бол сэдвийн сонголтын хуудас юм. Дараа нь харах болно, сэдэв бүтээгчид өөрсдийн сонголтуудыг, тэр ч байтугай өөрсдийн админы сонголтын хуудсыг үүсгэж болно. Энд бид Гол сэдвүүдийн сонголтын хуудас хэрхэн ажилладгийг товч харна. Сэдвийн сонголтуудад глобал түвшинд хандахын тулд сэдвийн жагсаалтаас “Сэдвийн сонголтууд” дээр дарна уу

Нарийвчилсан сонголтууд

Сэдвийн сонголтууд табыг нээхэд та Энгийн сонголтууд эсвэл Нарийвчилсан сонголтууд-ыг засах боломжтой. “Нарийвчилсан сонголтууд” нь мэдээллийн сангаас сэдвийн үндсэн тохиргооны талбаруудад хандах боломжийг олгодог энгийн маягт юм. Энэ хэрхэн ажилладгийг ойлгохын тулд XML файл болон сэдвийг эхнээс нь үүсгэх талаар мөн уншиж танилцах хэрэгтэй. Иймээс энэ нь нэлээд төвөгтэй бөгөөд ахисан түвшний хэрэглэгчдэд зориулагдсан.

Хэрэв та нарийвчилсан тохиргоог засахыг хүсвэл Нарийвчилсан сонголтууд таб дээр дарна уу

CSS-г ирүүлэх: Загварт нэмэх CSS файлууд;
Файлууд JS: Загварт нэмэх JS файлууд;
Файлуудыг хэвлэх CSS: Загварыг хэвлэх үед ачаалах CSS файлууд;
Сонголтууд: Энэ талбар нь загварын харагдацад дамжуулах сонголтууд (болон тэдгээрийн утга)-ыг агуулна;
CssFramework Name: Ачаалах CSS framework-ийн нэр. Одоогоор зөвхөн Bootstrap эсвэл хоосон байж болно;
Cssframework Css: Энэ талбарт үндсэн bootstrap.css-ийг өөрийн тусгай хувилбараар солих боломжтой;
Cssframework Js: Үндсэн boostrap.js талбарыг эндээс өөрийн тусгай хувилбараар солих боломжтой;
Ачаалах багцууд: Энэ тохиргооноос LimeSurvey-ийн үндсэн asset багцуудыг ачаалах боломжтой.

Дээд хэсэгт файл байршуулах талбар байгааг та анзаарах бөгөөд үүгээр сэдвийн файлын санд файл байршуулах боломжтой. Эдгээр параметрүүдийг ашиглан сэдвийн бүхэл бүтэн харагдацыг өөрчилж болно.

Анхааруулга! : Юу хийж байгаагаа мэдэхгүй бол утгуудыг бүү өөрчил!

Энгийн сонголтууд

Энгийн сонголтын хуудас нь загвараас өөрөөс нь ирдэг. Энэ нь twig файл болон сэдвийн /options хавтас доторх зарим javascript-ээр хийгдсэн: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Ажиллахгүй холбоос)

Энэ хуудас сэдвээс сэдэвт бүрэн өөр байж болох бөгөөд сэдэв нийлүүлэгчдийг өөрсдийн look & feel-ийг бүтээхийг хүчтэй дэмждэг.

Энгийн сонголтын хуудас нь нарийвчилсан хэлбэрийн оролтуудыг зүгээр л бөглөдөг. Та үүнийг энгийн хуудсанд тохиргоог асааж унтраагаад, нарийвчилсан хэлбэр дэх холбогдох оролт хэрхэн өөрчлөгдөхийг харж болно. Жишээлбэл, Default Template-ийн энгийн сонголтуудад Bootswatch сэдвийг “Darkly” болгож өөрчлөөд, дараа нь нарийвчилсан сонголтуудын таб дээр дарвал (хадгалаагүй байсан ч) “Cssframework Css” талбар дараахаас өөрчлөгдсөнийг харна:

{"replace": [["css/bootstrap.css","css/flatly.css"]]}
гэснийг
{"replace": [["css/bootstrap.css","css/darkly.css"]]}
гэж өөрчилсөн байна. Гол сэдвүүдийн энгийн сонголтууд дараах байдалтай байна:

Ajax горим: Дараагийн хуудсыг ajax-аар (илүү хурдан) уу, эсвэл хуудсыг дахин ачаалж (дибаг хийхэд илүү тохиромжтой) нээх үү
Арын дэвсгэр зураг: Тийм гэж тохируулсан бол pattern.png нэртэй зураг ачаалагдана (Master хувилбарт файл сонгогчоор солигдоно)
Хайрцаг сав: Үгүй гэж тохируулсан бол асуултууд хайрцагт багтахгүй (ингэснээр дэлгэцийн өргөнөөс том хүснэгт ашиглах боломжтой)
Брэнд лого: Үгүй гэж тохируулсан бол судалгааны нэр дээд мөрөнд харагдана, үгүй бол файлын сан доторх зургуудын аль нэгийг лого болгон сонгож болно.
Биеийг хөдөлгөөнт дүрс болгох: Тийм гэж тохируулсан бол судалгааны үндсэн хэсэг ачаалагдах үед ашиглах хөдөлгөөнт дүрсийг сонгож болно
Асуултыг хөдөлгөөнт дүрс болгох: асуултуудад мөн адил
Сэрэмжлүүлгийг хөдөлгөөнт дүрс болгох: сэрэмжлүүлгүүдэд мөн адил
Bootstrap сэдэв: энд ачаалах Bootstrap сэдвийг сонгож болно. Эдгээр нь Bootswatch-аас авсан болно https://bootswatch.com/3/

Хөдөлгөөнт дүрсэд ашигладаг сан нь animate.css юм: https://daneden.github.io/animate.css/ Мэдээж сэдэв нийлүүлэгч өөрийн хөдөлгөөнт дүрсийн санг нэмэх эсвэл огт хөдөлгөөнт дүрс ашиглахгүй байж болно.

Monochrome сэдвүүд нь удирдлагын интерфейстэй ижил bootstrap өнгөний сэдвийг ашигладаг. Тэд css framework солих системийг ашиглахгүй, зүгээр л CSS файл нэмдэг. Иймд энэ нь сэдэв нийлүүлэгчдэд өөрийн сэдвийг боловсруулах өөр нэг аргыг харуулж байна.

Өв залгамжлалын систем

Өмнөх хэсэгт сэдэв нь өөр сэдвийг өргөтгөж болдгийг харлаа. Сэдвийн тохиргоо мөн өөр сэдвийн тохиргооноос өв залгамжилж болно. Өөрөөр хэлбэл, тухайн сэдэвт дараах түвшинд тохиргоо байж болно:

ерөнхий түвшин (сая үзсэн, сэдвийн жагсаалтаас хандах боломжтой)
судалгааны бүлгийн түвшин
эцсийн нэг нь судалгааны түвшин.

Тодорхой түвшний параметр бүр дээд түвшнээсээ өв залгамжилж болно: судалгааны бүлгийн өв залгамжлал. Эхлээд судалгааны бүлгийн түвшинг харцгаая.

Судалгааны бүлгийн түвшинд

LS3-ын бас нэг том шинэлэг зүйл бол судалгааны бүлгийн систем юм. Одоо та судалгаагаа цэгцлэхийн тулд өөр өөр бүлэг үүсгэж болно. Үүнд хандахын тулд судалгааны жагсаалт руу орж, судалгааны бүлгийн табыг дарна уу:

Энэ жагсаалтад хоёр үйлдлийн товч байна. Бүлэг хоосон бол та түүнийг устгаж болно. Үгүй бол үргэлж засах боломжтой. Засах товчийг дарснаар судалгааны бүлгийн тохиргооны хуудас руу орно:

Энэ хуудасны гурав дахь таб нь “Энэ судалгааны бүлгийн загварын сонголтууд” гэж нэрлэгддэг. Үүнийг дарвал сэдвийн жагсаалттай ижил сэдвүүдийн жагсаалтыг харна, гэхдээ энд зөвхөн сонголтын товч харагдана (сэдэв засварлагчид зөвхөн үндсэн жагсаалтаас хандана).
Одоо Үндсэн загварын сонголтыг дарвал дараахыг харна:

Бүх зүйлийг өв залгамжлах гэдэг нь бүх тохиргоог ерөнхий тохиргооны түвшнээс өв залгамжилна гэсэн үг.
Хэрэв та Нарийвчилсан сонголтууд хуудас руу орвол бүх талбар өв залгамжлахаар тохируулагдсан байгааг харна.
Хэрэв та Энгийн сонголтууд дээр "Бүх зүйлийг өв залгамжлах"-ыг "Үгүй" болговол ерөнхий сонголтын хуудастай маш төстэй хуудсыг дахин харна. Цорын ганц ялгаа нь талбар бүрийг тийм, үгүй эсвэл өв залгамжлах гэж тохируулж болох бөгөөд сонгогч жагсаалт бүр өв залгамжлах' утгатай байдаг.

Судалгааны бүлэг нь өөр бүлгийн дэд бүлэг байж болно. Энэ тохиолдолд эцэг бүлгээсээ өв залгамжилна.

Судалгааны түвшинд

Судалгааг засаж байхдаа зүүн талын цэсэнд “Сэдвийн сонголтууд” гэсэн шинэ зүйлийг харна. Энэ нь тухайн судалгаанд сонгосон сэдвийн сонголтын хуудас руу аваачна. Судалгааны бүлэгтэй ижил өв залгамжлалын системийг харна, гэхдээ энэ удаад өв залгамжлах гэдэг нь тохиргоо нь судалгааны харьяалагдах судалгааны бүлгээс өв залгамжлагдана гэсэн үг.

Хэрэглээний жишээ

Та өөр өөр компаниудад (A ба B) нэг сэдвийг ашиглаж байна гэж бодъё. Та дуртай сонголтуудаа ерөнхий түвшинд тохируулна (жишээ нь: ajax асаалттай, биеийг хөдөлгөөнт дүрсээр гулсуулж оруулах, сэрэмжлүүлгийг лугшуулах). Дараа нь компани бүрт судалгааны бүлэг үүсгэнэ: A компанийн бүх судалгааг агуулах A компанийн судалгааны бүлэг, B компанийн бүх судалгааг агуулах B компанийн судалгааны бүлэг. Энэ түвшинд та зөвхөн лого болон арын дэвсгэрийг тохируулж, бусад сонголтыг өв залгамжлахаар үлдээнэ. Ингэснээр A бүлгийн бүх судалгаа A компанийн логог, B бүлгийн бүх судалгаа B компанийн логог ашиглана. A компанийн нэг судалгаанд судалгааны сэдэвтэй холбоотой өөр арын дэвсгэр ашиглаж болно: судалгааны түвшний сонголтуудад арын дэвсгэрийг өөрчлөхөд хангалттай. Хэрэв B компанийн хэн нэгэн лугшдаг сэрэмжлүүлэг хэтэрхий сүртэй байна, аажим гарч ирэх шиг илүү зөөлөн зүйл дээр гэвэл, та B судалгааны бүлгийн түвшинд сэрэмжлүүлгийн хөдөлгөөнт дүрсийг өөрчилнө, тэгвэл энэ бүлгийн бүх судалгаа одоо тэр хөдөлгөөнт дүрсийг ашиглана. Хэрэв A компани логогоо өөрчилбөл A судалгааны бүлгийн түвшинд өөрчилж болох бөгөөд энэ бүлгийн бүх судалгаа шинэ логог ашиглана.

Эдгээр жишээ нь гол сэдвийн одоогийн сонголтууд дээр суурилсан. Гэхдээ мэдээж, хэрэв та сэдэв нийлүүлэгч бол эсвэл twig-ээр бага зэрэг скрипт бичиж чадах бол өөрийн сонголтуудыг нэмж болно. Жишээ нь, компанийн вэбсайт эсвэл тусламжийн утасны дугаар зэрэг мэдээллийг нэмж болох “мэдээллийн хөл” сонголтыг нэмж болно. Дараа нь A компани өөр өөр утасны дугаартай хэд хэдэн хэлтэстэй бол A судалгааны бүлэгт хэлтэс бүрт нэг дэд бүлэг үүсгэхэд хангалттай. Дэд бүлэг бүр эдгээр сонголтуудад өөрийн утасны дугаартай байна.

Сэдвийг өөрчлөх тухай түгээмэл асуулт хариулт

Энд форумд асуугдсан, таны сэдвийг өөрчлөхөд тусалж болох зарим асуултын хариултыг олно.

CSS/JS өөрчлөх: asset manager-тэй харьцах ("миний өөрчлөлтүүд яагаад хэрэгжихгүй байна вэ?")

Хэрэв та сэдвийн CSS/JS-ийг дуртай редактораараа кодыг шууд засаж шинэчлэх гэж байгаа бол өөрчлөлтүүд хэрэгжихгүй байгаад гайхаж магадгүй.

2.50-аас хойш LS нь Yii asset manager-ийг ашигладаг: Asset-ийн тухай Yii баримт бичиг

Энэ нь сэдвийн CSS/JS файлуудыг санамсаргүй тэмдэгт мөртэй (жишээ нь: "tmp/1ef64ml/") tmp/ дэд сан руу зөөдөг. Тиймээс та css/js файлд өөрчлөлт хийж, asset manager-т мэдэгдвэл файлууд шинэ нэртэй шинэ дэд сан руу хуулагддаг бөгөөд ингэснээр хэрэглэгчийн хөтчийн кэш шинэчлэгдэж, тэд шинэ css/js-ийг харна. Үгүй бол тэд хөтчийн кэшээ цэвэрлэх шаардлагатай болно.

Asset manager асаалттай үед толгой хэсэгт байх CSS холбоосууд энд байна:

Таны харж байгаагаар бүгд tmp/ дэд хавтсуудыг заасан байна.

Asset manager унтраалттай үед толгой хэсэгт байх CSS холбоосууд энд байна:

Таны харж байгаагаар тэд сэдвийн жинхэнэ файлуудыг заасан байна.

Мэдээж, хэрэв Asset Manager таныг файлыг өөрчилснийг мэдэхгүй бол хуучин tmp/ сан дахь хуучин файл өөрчлөгдөхгүй хэвээр үлдэж, таны өөрчлөлтүүд хэзээ ч хэрэгжихгүй..

Иймд сэдвийн CSS/JS-ийг засахдаа танд хэд хэдэн боломж байна:

LS Сэдвийн редакторыг ашиглаж болно: энэ нь asset manager-тэй өөрөө харьцдаг тул та юуны ч талаар санаа зовох шаардлагагүй
Дибаг горимыг асааж болно: энэ нь asset manager-ийг унтраах тул сэдвийн жинхэнэ css/js файлууд дуудагдана (гэхдээ ингэвэл ачаалал бүрт хөтчийн кэшээ шинэчлэх хэрэгтэй болно)
Assets кэшийг шинэчилж болно: Олон улсын тохиргоонууд -> Ерөнхий -> Assets кэшийг цэвэрлэх хэсгээс

Өөрийн CSS-ийг засахдаа сэдвийн редакторыг ашиглах нь хамгийн сайн шийдэл мөн.

Сэдвийн редакторыг ашиглах нь шинэ сэдвийн хөдөлгүүрийн архитектурыг ойлгоход тань тусална. Мөн fruity-г өөрчилж байгаа бол CSS-ийн онцлогт анхаараарай: ихэнх тодорхойлолт ".fruity" сонгогчийг (body элементийн классуудын нэг) ашигладаг.

Сэдэвтээ өөрийн фонт нэмэх

Хялбар арга: Google Font CDN ашиглах

Bootswatch судалгааны сэдэв Google Font CDN-ийг ашигладаг. Энэ хэрхэн ажилладгийг харцгаая: 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");

Дараа нь Lato фонтыг CSS дүрмээр ашигладаг: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72

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

Та өөрийн сэдэвт ямар ч google фонтыг ингэж ашиглаж болно. Мэдээж сэдвийнхээ сонголтуудаас фонт сонгогчийг устгах хэрэгтэй. options.twig доторх дараах мөрүүдийг устгана уу: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

Локал фонт ашиглах

Мэдээж, та фонтын файлуудыг татаж аваад Google CDN-ийн оронд локал серверээс ашиглаж болно (нууцлалын үүднээс илүү дээр). Үүнийг хэрхэн хийхийн жишээ болгон noto фонтын локал хувилбарыг энд өгөв: 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');
}
...

Та сэдвийнхээ css файлд үүнтэй маш төстэй тодорхойлолтыг ашиглаад, NotoSans-Regular.ttf файлыг сэдвийнхээ css/font-src/ хавтсанд хуулж болно.

Дараа нь дээрхтэй адил тэр фонтыг body (эсвэл өөр элемент) дээрээ ашиглаж, анхдагч сонголтын фонт сонгогчийг устгана уу.

Сонголтуудад өөрийн фонт сонгогчийг үүсгэх

Одоогоор үндсэн фонт сонгогчийг ашиглан сонголтуудад өөрийн фонтыг хялбархан нэмэх боломжгүй. Эхлээд эцсийн хэрэглэгчид өөрийн багцуудыг байршуулах боломжийг олгох шаардлагатай (дараагийн догол мөрийг үзнэ үү: Fruity фонт сонгогчийн тухай)
Дараах байдлаар хийнэ:

Сэдвдээ CDN эсвэл локал сервер ашиглан хоёр фонт (my_custom_font болон my_custom_other_font) нэмнэ
Дараа нь css файлдаа хоёр шинэ класс нэмнэ:

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

Сэдвийнхээ XML файлд фонтын сонголт нэмнэ (өгөгдмөл нь my_custom_font байна) :

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

option.twig файлд фонт сонгогчоо дараах мөрүүдийг нэмж оруулна (одоогоор шалгаагүй тул ажиллахгүй бол форумд мэдэгдээрэй):

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

Одоо таны хэрэглэгчид эдгээр хоёр фонтын аль нэгийг сонгох боломжтой болсон байх ёстой.

Fruity фонт сонгогчийн тухай

Ирээдүйд бид эцсийн хэрэглэгчдэд өөрийн asset багцуудыг, түүний дотор фонтын багцуудыг байршуулах боломжийг олгоно. Энэ нь фонтыг өөрчлөхийг маш хялбар болгоно.
Yii багцуудыг ойлгохын тулд:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

LimeSurvey-ийн багцууд өөр өөр файлд тодорхойлогдсон байдаг. Фонтын багцууд энд тодорхойлогдсон: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Жишээлбэл, Noto фонтын багц энд тодорхойлогдсон: 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',
        ),
    ),

Түүнд агуулагдах noto.css файл энд байна: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Файлын төгсгөлд ".font-noto" css классын тодорхойлолт байгааг анхаарна уу:

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

Дараа нь Vanilla сэдэвт noto багцыг нэмж, фонтын сонголтыг noto гэж тодорхойлснаар 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>

Дараа нь body классын фонтыг энэ утгыг ашиглан тодорхойлдог: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76

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

Мэдээж XML файл нь таны сэдвийн тохиргооны зөвхөн өгөгдмөл утгуудыг агуулдаг. Харин бодит утгууд нь мэдээллийн сан доторх "template_configuration" хүснэгтэд (Асуулт: "template_" үү, "theme_" үү?) json мөр хэлбэрээр тодорхойлогдож, уншигддаг. option.js файл нь энгийн сонголтын фонт сонгогчийн утгыг ашиглан нарийвчилсан табын маягт доторх утгыг өөрчилдөг: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

Тиймээс "asset багц байршуулах" боломж бэлэн болоход бүх одоо байгаа фонтын багцуудыг шалгаж, сонгогч руу нэмдэг скрипт нэмэх нь хялбар болно.

Судалгааны элементүүдийн байрлал, харагдах байдлыг удирдах сэдвийн сонголтуудыг нэмэх

Энэ заавар нь өргөтгөсөн сэдэвт судалгааны элементүүдийг янз бүрийн байрлалд харуулах сонголтуудыг хэрхэн нэмэхийг үзүүлнэ. Энэ тохиолдолд бид судалгааны нэрийг хоёр өөр байрлалд харуулах сэдвийн сонголтуудыг үүсгэнэ.

Хялбар болгохын тулд зааврыг LimeSurvey 3.4.3 хувилбар дахь "bootswatch" сэдвийн өргөтгөл дээр үндэслэнэ.

Өөрийн сэдвийг үүсгэх

Дээр тайлбарласны дагуу "bootswatch" сэдвийг өргөтгөнө.
Дээр тайлбарласны дагуу custom.css файлыг локал сэдэв рүү хуулна.

Сэдвийн шинэ сонголтуудыг үүсгэх

/themes/survey/bootswatch/options/ сангийн агуулгыг /upload/themes/survey/yourThemeName/options/ руу хуулна.

/upload/themes/survey/yourThemeName/options/options.twig файлыг засварлагчаар нээгээд "{# Bootstrap Bootswatch theme #}" гэсэн хэсгийг олно. Үүний эх <div class='row'> элементийн яг өмнө дараахыг нэмнэ:

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

/upload/themes/survey/yourThemeName/config.xml файлыг нээгээд "options" блокт хоёр зүйл нэмж, доорх байдлаар харагдуулна:

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

Ингэснээр Сэдвийн сонголтууд дэлгэц дээр дараах хоёр шинэ сонголт гарч ирэх ёстой:

Навигацийн мөр дэх судалгааны гарчгийн засварласан харагдац

Шинэ хавтас үүсгэнэ: /upload/themes/survey/yourThemeName/views/subviews/header/.
/themes/survey/vanilla/views/subviews/header/nav_bar.twig файлыг тэр шинэ хавтас руу хуулна.

/themes/survey/vanilla/views/subviews/header/nav_bar.twig файлыг нээгээд "{# Logo option #}" гэснийг хайна. Түүний доор лого/судалгааны нэрт зориулсан IF илэрхийллийг дараах байдлаар өөрчилнө:

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

/upload/themes/survey/yourThemeName/css/custom.css файлд дараах төстэй кодыг нэмнэ:
```
.navbar-brand {
    line-height: 60px;
    font-size: 32px;
}
```
"Survey name in navbar" сэдвийн тохиргоог "Yes" болгож асаана.
Та дараах зургийг харах ёстой:

Явцын зурвасын доорх судалгааны гарчгийн засварласан харагдац

Шинэ хавтас үүсгэнэ: /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews.
/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig файлыг тэр шинэ хавтас руу хуулна.

/themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig файлыг нээгээд судалгааны нэрт зориулж <h1> элемент нэмнэ. Ингэснээр дараах байдалтай болно:

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

/upload/themes/survey/yourThemeName/css/custom.css файлд дараах төстэй кодыг нэмнэ:

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

"Survey name below progress bar" сэдвийн тохиргоог "Yes" болгож асаана.
Та дараах зургийг харах ёстой:

Татаж авах

Өргөтгөсөн сэдвийн жишээ: Media:Test_survey_names.zip

Сэдвийг эхнээс нь үүсгэх

Бичиг баримт удахгүй нэмэгдэнэ.

Одоохондоо цөөн хэдэн зөвлөгөө өгье.

Сэдвийн бүтэц

Файл ба хавтсууд

Сэдвийг эхнээс нь үүсгэхдээ Vanilla сэдвийн файл/хавтасны бүтэц, css/js-ийг дагах шаардлагагүй. Заавал байх css/js-ийг цөм (core) нэмдэг (шаардлagatай бол тэдгээрийг устгаж болно)

Таны сэдэвт заавал байх ёстой цорын ганц файлууд нь layout файлууд юм:

layout_global.twig : судалгаа бөглөх хуудсуудыг харуулна
layout_survey_list.twig : судалгааны жагсаалтыг харуулна (энэ сэдвийг үндсэн сэдвээр тохируулсан бол)
layout_errors.twig : судалгаа харуулахыг зогсоох алдааг харуулахад ашиглагдана (буруу судалгааны ID, бүлгийг урьдчилан харахад хоосон бүлэг гэх мэт).
layout_user_forms.twig: токен (судалгааны оролцогч), бүртгүүлэх зэрэг хэрэглэгчийн маягтуудыг харуулна.
layout_print.twig : судалгааг pdf болгон хэвлэхэд ашиглагдана
layout_printanswers.twig: хариултуудыг хэвлэнэ

Эдгээр файлын агуулга болон тэдгээрт юу оруулах, оруулахгүй байх нь бүхэлдээ таны өөрийн шийдэл юм. Vanilla сэдэв дэх бусад бүх файл, хавтас нь заавал биш бөгөөд кодоо хүссэнээрээ зохион байгуулж болно.

Frontend-ийг дүрслэх кодыг уншвал эдгээр файлын нэр кодод шууд бичигдсэн байгааг харах болно. Тийм учраас тэдгээр нь заавал байх ёстой.

Жишээ нь: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462

Агуулга

Vanilla сэдвийн layout_global.twig файлд юуг харуулахаа шийдэхийн тулд "include_content" хэмээх хувьсагчийг ашигладгийг харж болно 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 нь одоо ямар үйлдэл явагдаж байгааг заана: асуултуудыг харуулж байна уу? илгээсний үр дүнг харуулж байна уу? бүгдийг цэвэрлэх хэсгийг харуулж байна уу? гэх мэт. Vanilla сэдэвт үйлдэл бүрт нэг файл оруулахаар хийсэн байдаг. Тиймээс үйлдлүүдийн жагсаалтыг мэдэхийг хүсвэл vanilla-ийн views/subviews/content хавтсыг харж, "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

Хэрэв та LimeSurvey-н 2.x хувилбарт зориулж сэдэв үүсгэж байсан бол эдгээрийн ихэнх нь limesurvey 2.x-ийн хуучин pstpl файлуудтай тохирдгийг анзаарах болно. Дахин хэлэхэд, сэдэвтээ эдгээр файлыг яг эдгээр нэрээр, энэ хавтсанд үүсгэх үүрэг танд байхгүй. Жишээлбэл, layout_global.twig файлд үйлдэл бүрт шаардлагатай HTML-ийг агуулсан нэг том switch нэмж болно.

config.xml манифест

Сэдвийн манифест нь таны сэдвийн талаарх үндсэн мэдээллийг агуулна. Сэдвийг суулгахад манифестийн агуулга өгөгдлийн санд template болон template_configuration гэсэн хоёр өөр хүснэгтэд ачаалагдана. Тиймээс сэдвийн манифестийг өөрчилсөн болгондоо сэдвийг устгаад дахин суулгах (эсвэл зүгээр л дахин тохируулах) шаардлагатай. Сэдэв боловсруулах явцад энэ нь төвөгтэй тул өгөгдлийн сангийн бичлэгийн оронд XML файлыг шууд ашиглахыг албадаж болно. Үүний тулд config.php файлд debug горимыг асаагаад 'force_xmlsettings_for_survey_rendering'-ийг true болгоно.

Metadata хэсэг

Төвөгтэй зүйл байхгүй: зөвхөн таны сэдвийн үндсэн мэдээлэл. Энэ нь 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>

Цөөн тайлбар:

name: өгөгдлийн санд түлхүүр болгон ашиглагдана. Тиймээс давтагдашгүй байх ёстой бөгөөд тусгай тэмдэгт (хоосон зай ч гэсэн) агуулах ёсгүй. Том, жижиг үсгийн ялгааг тооцохгүй гэдгийг анхаарна уу
Title: таны сэдвийн нэрийг янз бүрийн жагсаалтад харуулахад ашиглагдана. Тусгай тэмдэгт агуулж болно
description: судалгааны сэдвүүдийн үндсэн жагсаалтад ашиглагдана. Тусгай тэмдэгт, тэр байтугай HTML код агуулж болно, үүнд ашиглах нь:
extends: заавал биш, эцэг сэдвүүдийг тодорхойлно. Хэрэв ямар нэг файл (twig/js/css/jpg гэх мэт) энэ сэдэвт байхгүй бол эцэг сэдвээс хайна

Хэрэв та цөмийн 3 сэдвийн (Vanilla, Bootswatch, Fruity) аль нэгийг өргөтгөсөн бол "extends" утгыг нэг эцэг сэдвээс нөгөөд нь өөрчилж болно. Мэдээжийн хэрэг, сэдвийг дахин тохируулах шаардлагатай болно.

Files хэсэг

Энэ нь чухал хэсэг юм. Энэ нь template_configuration хүснэгтийн files_css, files_js, files_print_css талбаруудад json массив байдлаар хадгалагдана.

Жишээ нь: Material Premium Theme сэдвийн files хэсэг:

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

Энэ хэсэгт байгаа бүх CSS/JS файл судалгаа эхлэх үед ачаалагдана (ajax горимд. Ajax горим унтарсан бол мэдээжийн хэрэг бүх файл хуудас бүрт дахин ачаалагдана).

Тэдгээр нь сэдвийн нэр дээр суурилсан Yii Asset Packet-д нэмэгдэнэ. Тиймээс Asset Manager асаалттай үед (debug горим унтарсан үед) эдгээр файлууд сэдвийн бусад хэсгийн хамт tmp хавтас руу хуулагдана (ингэснээр CSS болон JS дотор харьцангуй замыг ашиглан зургийн файлуудад хандаж болно). Yii дэх Asset manager-ийн тухай: https://www.yiiframework.com/wiki/148/understanding-assets Yii дэх packages-ийн тухай: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

Тэдгээр нь удамшлын системийг ашиглана. Өөрөөр хэлбэл, хэрэв та сэдэвт CSS/JS файл нэмсэн ч тэр нь сэдэвт байхгүй бол систем энэ сэдвийн бүх эх сэдвүүдээс хайж, эхэнд олсон файлыг ашиглана. Тиймээс хэрэглэгч таны сэдвийг сэдвийн редактороор өргөтгөвөл эдгээр бүх файл түүний сэдэвт удамшина. Түлхүүр үгс энэ удамшлын системтэй холбоотой.

add : файлыг сэдэвт болон түүнээс удамшсан бүх сэдэвт нэмнэ
replace: эх сэдвийн файлыг орлуулна
remove: файлыг ямар ч багцаас, тэр байтугай цөмийн багцаас хасна (3.14-өөс хойш)

config.php файлд 'force_xmlsettings_for_survey_rendering'-ийг тохируулснаар тохиргоог өгөгдлийн сангийн оронд XML-ээс уншуулж болохыг санаарай (дахин тохируулах шаардлагагүй). Энэ нь XML файлуудын өөрчлөлтийг турших ажлыг хөнгөвчилж, XML-ийг өөрчлөх болгонд сэдвийг устгаад дахин суулгах шаардлагагүй болгоно.

Эдгээр түлхүүр үгсийн талаарх цөөн тайлбар:

Өв залгамжлалын зөвлөмж

Өмнө тайлбарласнаар "add" түлхүүр үг нь эх сэдвүүдийн аль нэгэнд байгаа файлыг заах боломжтой. Тиймээс та энэ хэсэгт файлыг "add" хийж болох бөгөөд тухайн файл таны сэдэвт биш, харин эх сэдвүүдийн аль нэгэнд байж болно. Систем бүх эх сэдвүүдийг шалгаж, хамгийн түрүүнд олсон файлыг ашиглана. Хэрэв файл олдохгүй, config дотор debug горим асаалттай, мөн глобал тохиргоонд js frontend debug горим асаалттай бол консол дээр анхааруулах мессеж гарна. Жишээ нь: my_theme сэдэвт <add>css/unexisting.css</add> гэж нэмбэл консол дээр дараахыг харна:

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

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

Хэрэв debug горим унтраалттай бол ямар ч алдаа харагдахгүй. Систем буруу add заавруудыг зүгээр л үл тоомсорлоно.

add-г хэзээ, replace-ийг хэзээ ашиглах вэ, хэзээ эх сэдэвт нь үлдээж болох вэ?

Нэгдүгээрт: add болон replace нь яг адил түлхүүр үг юм. Аль нэгийг нь ашиглаж болох бөгөөд систем адилхан ажиллана. Тэдгээр нь таны зорилгыг уншигч ойлгохын тулд тусдаа нэртэй байдаг.

Та эх сэдэвтэй ижил нэртэй файлыг нэмж болохгүй: энэ нь үргэлж эх сэдвийнхийг орлуулна. Жишээ нь: хэрэв танд "my_mother_theme/foo.css" файл байгаа бөгөөд охин сэдэвт "foo.cs" нэртэй файл нэмбэл зөвхөн "daughter_theme/foo.css" сэдэвт нэмэгдэнэ. Хэрэв "my_mother_theme/foo.css"-г хадгалахыг хүсвэл "daughter_theme/foo.css"-д өөр нэр, жишээ нь "daughter_theme/bar.css" гэж сонго. Тиймээс "add" түлхүүр үгийг "replace" түлхүүр үгийн оронд ашиглаж болно.

Яагаад гэж гайхаж байвал: энэ нь өв залгамжилсан сэдвийг автоматаар үүсгэхийг илүү хялбар болгодог. Файлын хэсгийг хуулахад нэмэлт засвар хийлгүйгээр ажиллана (файлыг өргөтгөхдөө "add"-г "replace" болгож нэрийг нь солих шаардлагагүй).

Тодорхой болгохын тулд Fruity-г жишээ болгон авч үзье. Энд түүний css файлын хэсэг байна:

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

Fruity доторх custom.css файлыг харвал vanilla-гийнхтай яг адил байна. Бид fruity доторх custom.css файлыг устгаж болох бөгөөд тэгвэл vanilla-гийнх ачаалагдана. Мөн Fruity манифестээс <replace>custom.css</replace> заавруудыг устгаж болох бөгөөд тэгвэл vanilla-гийн заавар ашиглагдаж, vanilla-гийн custom.css ачаалагдана.

Тэгвэл яагаад бид fruity манифест дотор <replace>custom.css</replace> зааврыг ашигладаг вэ? Хариулт энгийн: эцсийн хэрэглэгч fruity сэдвийг өргөтгөж, өөрийн локал сэдэвт файлыг өөрчилж, тэр өөрчилсөн файлыг өөрийн өв залгамжилсан сэдвээсээ ачаалах боломжтой байлгахыг бид хүсдэг. Ойлгохын тулд fruity-г өргөтгөөд өргөтгөсөн сэдвийг үзээрэй. Өргөтгөсөн сэдэвт custom.css файл байхгүй ч байж болно. Тэгэхээр fruity-гийнх ашиглагдана. Харин хэрэглэгч энэ файлыг өргөтгөсөн сэдэвт үүсгэвэл (сэдвийн редакторт "extend" дээр дарж), тэр файл түүний сэдвээс ачаалагдана.

Тиймээс ерөнхийдөө: хэрэв та ямар ч сэдвийг өргөтгөхгүйгээр сэдвийг эхнээс нь үүсгэж байгаа бол css/js файлуудаа нэмэхдээ add зааврыг ашигла. Маш энгийн. хэрэв та өөр сэдвийг өргөтгөсөн сэдэв үүсгэж байгаа бөгөөд хэрэглэгчид эх сэдвийн css/js файлыг өргөтгөхийг хүсэхгүй байгаа бол манифестдээ add зааврыг бүү ашигла. Файлууд эх сэдвийн тохиргооноос ачаалагдсаар байна. хэрэв та өөр сэдвийг өргөтгөсөн сэдэв үүсгэж байгаа бөгөөд эх сэдвийн файлыг орлуулахыг хүсвэл replace түлхүүр үгийг ашигла (add түлхүүр үг ижил үр дүнтэй). хэрэв та өөр сэдвийг өргөтгөсөн сэдэв үүсгэж байгаа бөгөөд css/js-ийн тухайн файлыг орлуулахгүй ч хэрэглэгчид тэр файлыг өргөтгөх боломжтой байлгахыг хүсвэл манифестдээ тухайн файлд "replace" зааврыг ашигла. Файлыг орлуулахгүй ч манифестэд replace түлхүүр үгийг ашигласнаар хэрэглэгч хүсвэл тэгэх боломжийг олгодог.

Зөвхөн энэ сүүлийн тохиолдлыг ойлгоход бага зэрэг бодох шаардлагатай, бусад бүх тохиолдол энгийн.

Та CSS болон JS файлуудыг twig кодоос шууд бүртгэж болно. Эдгээр файлууд зөвхөн twig файл дуудагдах үед ачаалагдана. Хэрэглэгчид эдгээр JS/Css файлуудыг сэдвийн редактороос өв залгамжлах боломжтой байлгахыг хүсвэл Template:RegisterTemplateCssFile('my style.css') болон Template:RegisterTemplateScript('my script.js') функцүүдийг ашиглахаа мартуузай. Эдгээр функцийг ашиглахгүй бол таны сэдэв ажиллаж магадгүй ч түүний өв залгамжлал эвдэрнэ. Энэ нь Template:Image('my picture.jpg') функцтэй ижил логик юм

remove түлхүүр үг

remove түлхүүр үг нь зөвхөн 3.14-өөс хойш боломжтой. Үүгээр та аливаа багцаас, тэр ч байтугай үндсэн (core) багцуудаас ч css/файлыг устгах боломжтой. Үүнийг Material Premium Theme-д Awseome Bootstrap Checkbox-ийн файлуудыг устгахад ашигладаг:

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

тиймээс та багцын файлтай яг ижил синтаксийг ашиглах хэрэгтэй (жишээ нь: "awesome-bootstrap-checkbox.css"-г хавтасны замгүйгээр ганцаар нь бичвэл ажиллахгүй). Үндсэн багцууд болон тэдгээрийн файлуудын бүрэн жагсаалтыг /application/config/packages.php болон config/third_party.php дотроос олно. Жишээ нь 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',
        ),

remove tag-д ашиглах яг тохирох нэрийг олох өөр нэг арга бол asset manager-г асаах явдал юм (debug горимыг унтрааж эсвэл config-д 'use_asset_manager'=>true гэж тохируулна). Дараа нь ашиглах зам нь tmp директор доторх санамсаргүй нэртэй директорын дараа шууд орших зам байна. Жишээ нь awesome-bootstrap-checkbox.css-ийн хувьд:

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

Устгаж болохгүй файлууд:

jquery-3.1.1.min.js : шаардлагатай

jquery-migrate-3.0.0.min.js : шаардлагатай

survey.js : шаардлагатай

moment-with-locales.min.js : огнооны асуултын төрөлд (мөн бусад зарим тохиолдолд гэж бодож байна) шаардлагатай

em_javascript.js : ExpressionScript-ийн бүх javascript-д шаардлагатай

Сонголтууд хэсэг

Энэ хэсэг нь таны сэдвийн сонголтуудтай холбоотой. Үүнийг template_configuration хүснэгтийн "options" талбарыг json массив хэлбэрээр дүүргэхэд ашиглана.

Нэмэлт мэдээлэл

Theme:Available function

Зарим тэмдэглэл

ТЭМДЭГЛЭЛ: хэрэв та сэдвийн XML файлыг засвал өөрчлөлтийг тооцуулахын тулд сэдвийг устгаад (uninstall) дахин суулгах (install) ёстой.

АНХААРУУЛГА: үүнээс зайлсхийхийн тулд өгөгдлийн сангийн оронд XML-г ашиглахыг албадаж болно. config.php файлд debug горимыг асааж, дараахь мөрийн тайлбарыг арилгана уу:

'force_xmlsettings_for_survey_rendering' => true, // Өгөгдлийн сангийн оронд XML файлыг ашиглахыг албадах бол тайлбарыг арилгана уу (сэдвийг хөгжүүлэхэд хялбар болгох үүднээс)

Болгоомжтой байгаарай: бүх зүйл (сонголтууд гэх мэт) XML-ээс ачаалагдана.

АНХААРУУЛГА: хэрэв та CSS/JS файлуудыг Сэдвийн редактор ашиглахгүйгээр гараар засварлаж, debug горим унтраалттай бол одоо asset-ийг албадан цэвэрлэх боломжтой. "Олон улсын тохиргоонууд" хэсгийн "General" табаас "Clear assets cache" товчийг дарна уу.

АНХААРУУЛГА: хэрэв та дараах хэсгийг устгавал

Үндсэн бүлгүүд

LS3.x дахь сэдвийн шинэ систем

From LimeSurvey Manual