Actions

Редактор на теми

From LimeSurvey Manual

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

Въведение

LimeSurvey има усъвършенствана система за тема и стил, предоставяща на разработчиците ефективен начин за персонализиране на външния вид на проучването. От LS3 терминът "шаблони" е заменен с термина "теми". Темите позволяват контрол върху стила на страниците на анкетата. Администраторът на проучването може да избере тема по подразбиране, която ще се използва за всяко проучване, за да го персонализира допълнително. Темите идват с опции, които предоставят на администратор без умения за кодиране лесен начин за добавяне на лого към началната страница, промяна на цветовете на фона, избор на шрифт и т.н.


LimeSurvey идва с 3 теми. Тези първоначални теми се дефинират от директории, намиращи се в директорията "themes/survey/" на инсталацията на LimeSurvey. Всяка тема има своя собствена директория. В основната директория на дадена тема ще намерите конфигурационен файл в XML и множество директории, съдържащи изгледите теми (.twig), каскадни стилови таблици (.css), 'скриптове, изображения ('.jpg или .png) и може би други.


От LimeSurvey 2.50 двигателят на темата използва Bootstrap 3 като CSS рамка. Тъй като Bootstrap 3 е стандартна рамка, разработчиците ще намерят много документация, уроци и форумни теми за него в интернет.


От LimeSurvey 3 насам, механизмът за теми използва Twig, така че разработчиците на теми могат да променят логиката на изобразяването на проучването по безопасен и лесен начин. Twig замени старата система от заместващи ключови думи, която беше използвана в предишните версии. Логиката, използвана за генериране на HTML на ключовите думи, вече е достъпна в изгледите на темата.


Фрагмент от Vanilla Theme:

!Н! <div class="{{ aSurveyInfo.class.answercontainer }} col-xs-12" {{ aSurveyInfo.attr.answercontainer }}> !Н! {# ЗАБЕЛЕЖКА: Ако искате да персонализирате изобразяването на въпроса, използвайте тема за въпрос #}
 {{ aQuestion.answer | суров }}
</div> !Н!

Темите, бидейки HTML и Twig код, са склонни да определят позиционирането и вида на текста, който да се показва, и подобни структурни характеристики на страницата. Те често препращат или включват други файлове. Повечето от тях препращат към общ файл с каскадни стилови таблици (CSS), който определя стила на шрифта, цвета, размера, фона и подобни параметри, общи за всички страници в проучването. Стиловите таблици препращат към HTML class параметри, които са свързани с различните типове обекти в HTML кода. Това позволява на листа със стилове да дефинира как да показва всеки от многото типове текст или други обекти, които могат да се появят на множество места. Има уникални класове за всеки тип въпрос в LimeSurvey и по този начин предоставя подробен контрол върху външния вид на всеки. Файлове с изображения, като лога или специални конструктори на ленти за напредък, също могат да бъдат посочени във файла на темата. И накрая, специални ключови думи във фигурни скоби се заменят с текст, дефиниран в анкетата за всеки кореспондент за превод на език (например „Заглавие на анкетата“ или „Текст на въпроса“ за всеки дефиниран език).

Ако създадете нова персонализирана тема, моля, помислете дали да я допринесете обратно към общността на LimeSurvey и да я направите достъпна за други. С ваша помощ можем да разширим нашето хранилище от теми, анкети и други добавки, за да направим LimeSurvey още по-добър! Вижте нашето хранилище за шаблони на LimeSurvey, където можете да споделите вашите шаблони.

Създаване на нова тема

За да можете да създадете нова тема (или да редактирате съществуваща тема), имате нужда от Template Editing user permission в LimeSurvey, както и разрешение за манипулиране на файловете в основната операционна система, хостваща вашата инсталация на LimeSurvey.

Предупреждение: Ако промените теми, можете също така да засегнете всички съществуващи анкети от вашата инсталация на LimeSurvey. Темите са разширена функция, която изисква опит и HTML познания.

Предпочитаният начин за създаване на нова тема е чрез Редактора на теми (вижте по-долу), който се намира под Конфигурация в горната лента с инструменти. Някои потребители предпочитат да работят директно с файлове с теми, така че да могат да използват любимия си текстов редактор вместо уеб интерфейса. В този случай все още използвайте редактора на теми, за да създадете първо новата си тема. Това ще създаде нова основна тема с всички необходими файлове в директорията LimeSurvey_web_root/upload/themes/survey/your_new_template. Оттам можете да използвате вашия текстов редактор, за да коригирате ръчно файловете на шаблона.

Забележка за разрешенията: на unix/linux системи, тези файлове с теми ще бъдат собственост на групата и потребителя, където работи уеб сървърът (може да е "www" за някои системи). Така че, уверете се, че имате подходящите разрешения за редактиране на тези файлове. Когато ги запазите, уверете се, че няма да променят собствеността си! По този начин все още можете да използвате интерфейса за редактиране на уеб теми, ако е необходимо.


Редица „обществени“ елементи на LimeSurvey могат да бъдат коригирани чрез поредица от теми. Следващият раздел предоставя много кратко обяснение на тези шаблони.

Template:Забележка

Редакторът на теми на LimeSurvey

Редактор на теми: Конфигурация > Теми> Редактор на теми

Редакторът на теми е достъпен само за потребители с разрешение за шаблони и за суперадминистратори. 


  Внимание : Тема, която не е конструирана правилно, може да доведе до неработоспособност на анкета (която използва съответния шаблон).



Редакторът на теми LimeSurvey ви позволява да редактирате съдържанието на вашите теми онлайн. За да стартирате редактора на теми: щракнете върху Теми в менюто Конфигурация и след това щракнете върху бутона Редактор на теми' до темата, която искате да редактирате или разширите.


Файл:Меню за теми.png Бутонът за достъп до редактора на теми за тема Bootswatch


Страницата за редактор на шаблони ви позволява да изберете шаблона, който искате да редактирате/прегледате.



Налични са следните опции:


  • 'Създаване': Позволява ви да създадете нов шаблон. За да не започвате от нулата, шаблонът 'по подразбиране' се копира.
  • Import: Позволява ви да импортирате шаблон от ZIP файл.
  • Export : Позволява ви да експортирате текущия шаблон в ZIP файл.
  • Копиране: Позволява ви да направите нов шаблон чрез копиране на текущия.
  • Преименуване: Позволява ви да промените името на шаблона. Обикновено се използва след копиране или импортиране на шаблон.
  • Шаблон: падащ списък, който показва всички налични шаблони, които се намират във вашата инсталация на LimeSurvey.
  • 'Екран': падащ списък, който ви позволява да изберете коя конкретна страница с анкета от този шаблон искате да видите.
  • Връщане към административния панел'.

Импортиране/Експортиране/Копиране на шаблон

Когато експортирате шаблон, ще бъде създаден ZIP-файлов архив с всички ваши шаблонни файлове (.pstpl файлове, изображения, css файлове, ...). Можете да импортирате експортирания zip файл в друга инсталация на LimeSurvey, като използвате функцията за импортиране, или можете ръчно да копирате архива в друга инсталация на LimeSurvey и да го извлечете в съответния template директория там.

Най-добре е обаче да използвате функциите за импортиране/експортиране/копиране на шаблони на LimeSurvey в редактора на шаблони.

Структура на страницата / Използване на шаблона

  • Страницата за добре дошли: startpage.pstpl, welcome.pstpl, privacy.pstpl, navigator.pstpl, endpage.pstpl
  • „Страниците с въпроси:'' startpage.pstpl, survey.pstpl, startgroup.pstpl, groupdescription.pstpl, question.pstpl, endgroup.pstpl, endpage.pstpl
  • 'Последната страница:' начална страница .pstpl, оценка.pstpl, завършен.pstpl, крайна страница.pstpl

Файлове с шаблони

Следните шаблонни файлове се използват за създаване на вашата обществена анкета и трябва да съществуват във всяка нова шаблонна папка, която създавате:

  • startpage.pstpl: Създава началото на всяка html страница. Започва от "<head> " и не трябва да съдържа "<html> ". Това „самото начало" на стандартна html страница е написано от скриптовете. Моля, уверете се, че вашите файлове startpage.pstpl съдържат<body> етикет. Въпреки че много браузъри не изискват стриктно спазване на W3 HTML стандартите, скриптът LimeSurvey трябва да намери таг, за да изпълни определени елементи на javascript. Не е обичайно да видите много „ключови думи“, използвани във файла startpage.pstpl. Все пак може да пожелаете да поставите {SURVEYNAME} в заглавието. Файлът startpage.pstpl може да съдържа код, който завършва в съответния файл endpage.pstpl. Например, можете да започнете таблица в този файл и да затворите таблицата във файла endpage.pstpl. Файловете startpage.pstpl и endpage.pstpl обхващат всяка възможна страница, използвана от LimeSurvey.
  • survey.pstpl:'' Този шаблон е вторият използван на повечето страници и предоставя място за поставяне на името на проучването и описание. Този шаблон няма съответен шаблон за „затваряне“ и впоследствие трябва да затворите всички тагове, отворени в този файл с шаблон (т.е.: не оставяйте таблица отворена тук, защото няма къде другаде да я затворите).
  • ' welcome.pstpl: Този шаблон се използва само в началния екран (който също е на главната страница за анкети „всичко в едно“). Можете да използвате това, за да отпечатате приветствения текст и друга информация, която трябва да бъде предоставена във въведението. Подобно на файла 'survey.pstpl', няма съответен шаблон за 'затваряне', така че всички тагове, отворени в този файл с шаблон, също трябва да бъдат затворени.
  • startgroup.pstpl: Този шаблон може да предостави „обобщение“ за въпроси в група. Той има съответстващ шаблон „endgroup.pstpl“, който може да се използва за затваряне на всички отворени тагове в този файл, така че можете да отворите таблица в него.
  • 'groupdescription.pstpl:' Този шаблонен файл е използвани за показване на описание на група. Моля, обърнете внимание, че в настройките на проучването (достъп до „Настройки за презентация и навигация“, като щракнете върху раздела „Представяне“) можете да зададете дали описанието на групата да се показва или не. Ако не, тогава този файл изобщо не е включен.
  • question.pstpl: Този файл съдържа секциите с въпроси, отговори и помощен текст на вашата анкета. В анкетите „група по група“ и „всичко в едно“ този шаблон се повтаря многократно с всеки въпрос. Няма съответстващ затварящ файл за това и всички тагове трябва да бъдат затворени.
  • question_start.pstpl:' Този файл съдържа отделните елементи, открити в началото на въпрос. Той е включен в 'question.pstpl' чрез ключовата дума {QUESTION}. Целта му е да позволи на дизайнерите на шаблони повече контрол върху оформлението на въпроса. Този шаблон е извън нормалната система за шаблони и е заменен (от LimeSurvey 1.87). Всички ключови думи от този шаблон вече са достъпни директно в question.pstpl.
  • completed.pstpl: Тази страница се показва като последна страница, когато отговорите на анкетата са запазени и анкетата приключи. Може да се използва за показване на „препращаща връзка“, както е зададено в настройката на анкетата.
  • endgroup.pstpl:' Този файл затваря групата и може да се използва за затваряне на всички тагове, отворени в файл startgroup.pstpl
  • navigator.pstpl: Този файл съдържа бутоните, които навигират в анкетата, "следваща", "предишна", "последна", "изпращане", "запазване досега" и връзката „изчистване на всички“. Използва се във всички страници с изключение на завършената страница.
  • printanswers.pstpl: Този файл има HTML обвивката, необходима за печатната версия на анкетата.
  • print_group.pstpl : Този файл е същият като startgroup.pstpl и endgroup.pstpl, но за печатната версия на анкетата.
  • print_question.pstpl: Този файл е същият като question.pstpl , но за печатната версия на анкетата.
  • print_survey.pstpl: Този файл е същият като survey.pstpl, но за печатната версия на анкетата.

CSS и Javascript

Два файла, които винаги се използват в шаблон, са template.css (за CSS) и template.js (за Javascript).

  • {TEMPLATECSS}:'' Добавете редове за css по подразбиране, template.css, и template-rtl.css за rtl език.
  • {TEMPLATEJS}: Добавете редове за javascript файлове по подразбиране, template.js и всички js файлове, необходими за LimeSurvey.

Използване на Bootstrap

LimeSurvey има вграден Bootstrap 3, така че можете да стилизирате всичките си шаблони с добре документираните класове на Bootstrap. За повече информация, моля, вижте Bootstrap документация.

Плъгинът Awesome-Bootstrap-Checkbox също е включен. С него можете да използвате типичните цветови класове на Bootstrap (информация, предупреждение, опасност и т.н.) също с наставката "-checkbox" или "-radio", въпреки че стилизирате квадратчета за отметка и радиостанции, както предпочитате.

Замяна на CSS или Javascript по подразбиране

Някои въпроси използват конкретни файлове за Javascript или CSS. Ако трябва да замените функция, използвайте каскадна система. За функцията на javascript последната прочетена функция е използваната функция.

Други шаблонни файлове

privacy.pstpl, invitationemail.pstpl, reminderemail.pstpl и confirmationemail.pstpl вече не се използват от LimeSurvey и настройките по подразбиране са вместо това задайте в приложимите езикови файлове. Имейл съобщенията вече могат да се редактират на база анкета по анкета.

Стандартни страници

Има десет стандартни страници, които участникът в проучването може да види в хода на вземане или достъп до приложението LimeSurvey. Всеки е изграден от редица общи Template файлове от Template, посочени в настройките на анкетата. Таблицата по-долу показва кои шаблонни файлове се използват при конструирането на всяка от тези страници.

Страници с анкети/
Шаблонни файлове
Анкета
Списък
Добре дошли Въпрос Завършен Изчистване на всички Регистрация Зареждане Запазване Печат
Отговори
Печат
Анкета
SurveyList Файл:check.gif
Добре дошли Файл:check.gif
Поверителност Файл:check.gif
Навигатор Файл:check.gif Файл:check.gif
Проучване Файл:check.gif Файл:check.gif
Начална група Файл:check.gif
Описание на групата Файл:check.gif
Въпрос * Файл:check.gif
EndGroup Файл:check.gif
Оценка Файл:check.gif
Завършен Файл:check.gif
ClearAll Файл:check.gif
Регистрирайте се Файл:check.gif
Зареждане Файл:check.gif
Запазване Файл:check.gif
PrintAnswers Файл:check.gif
Отпечатайте анкета Файл:check.gif
Група за печат Файл:check.gif
Печат на въпрос Файл:check.gif
Начална страница
Крайна страница
Template.css
Файл:check.gif Файл:check.gif Файл:check.gif Файл:check.gif Файл:check.gif Файл:check.gif Файл:check.gif Файл:check.gif Файл:check.gif

* ЗАБЕЛЕЖКА: Във версия 1.90+ това замества question.pstpl И question_start.pstpl. Ако използвате стар персонализиран шаблон, трябва да добавите следния ред в началото на question.pstpl:

<div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}">

След това добавете съответния затварящ таг в края на question.pstpl:

</div>

* ЗАБЕЛЕЖКА: Във версия 1.91 и по-стари js файловете на LimeSurvey не са включени в шаблона. Във версия 2 трябва да използвате {TEMPLATEJS} в един от вашите шаблонни файлове, за да добавите връзката към js файла. Можете да го добавите в startpage.pstpl или в endpage.pstpl. Можете да премахнете реда {TEMPLATEURL}/template.js и трябва да замените с {TEMPLATEJS}, за да актуализирате личен шаблон.

Секцията за управление на файловете

В прозореца „контрол на файлове“ отляво можете да щракнете върху един от файловете на шаблона, който се използва за компилиране на страницата. Можете да видите „Екранната част“, JavaScript и CSS файловете. След това HTML кодът за този файл ще се появи в прозореца „Редактиране сега“ в центъра. Ако шаблонът може да се редактира (определен от разрешенията за директория), можете да направите промени и да ги запазите.


Прозорецът "Други файлове" показва списък с всички други файлове от директорията на шаблона. Можете да използвате дясната страна, за да качите и изберете файлове с изображения (ваши снимки, лога,...) или други файлове, необходими за създаване на вашия шаблон'.


Вместо да използвате връзка за всяка картина, използвайте низа на полето {TEMPLATEURL}. И така, вместо:

img src='/limesurvey/templates/yourtemplate/files/mypicture.jpg'

Можете да използвате (New in 2.50 ):

 img src='{TEMPLATEURL}files/mypicture.jpg'

Във версии на LimeSurvey преди 2.50 използвайте:

 img src='{TEMPLATEURL}mypicture.jpg'

„Извадка“ от шаблонната страница, която редактирате, ще бъде видима в долната част на екрана. Няма начин да изтриете шаблон от редактора на шаблони. Това трябва да стане чрез достъп до основната директория и ръчно изтриване на файловете от там. Също така имате възможност да изберете различни резолюции на екрана, за да оцените по-добре усещането и външния вид на шаблона.

Забележка: Изпратените шаблони не могат да се редактират с помощта на редактора на шаблони. Ако искате да ги промените, първо създайте копие и го редактирайте.

Местоположение на файловете на шаблона

LimeSurvey съхранява всеки от „стандартните“ шаблони в собствена отделна поддиректория в директорията „/templates“, която се съхранява в публичната директория с другите публични файлове на LimeSurvey. Персонализираните потребителски шаблони се съхраняват в директорията /upload/templates.

Трябва да има ВИНАГИ директория "по подразбиране" в директорията с шаблони. Този шаблон се използва по подразбиране и като резервен вариант, ако папка с шаблони не съществува или не може да бъде намерена. Той идва инсталиран по подразбиране.

Можете да използвате всякакви файлове с изображения, които качите в областта за управление на шаблона с помощта на този синтаксис:

{TEMPLATEURL}име на файл.xyz

Въпроси за стилизиране с CSS

Оформянето на въпроси в CSS стана много по-лесно. Всеки тип въпрос вече има уникален клас. Задължителните въпроси имат допълнителен задължителен клас. Например за незадължителен въпрос:

<div id="question5" class="gender">
...
</div>

и ако въпросът е задължителен:

<div id="question5" class="gender mandatory">
...
</div>

и ако въпросът е задължителен, но потребителят не е отговорил или ако има валидиране на въпрос:

<div id="question5" class="gender mandatory input-error">
...
</div>

и ако към въпроса е приложено валидиране, но потребителят не е отговорил правилно:

<div id="question6" class="text-short input-error">
...
</div>

Глобални класове за въпросната част

Тези класове се използват за всеки тип въпрос. Някои видове въпроси използват само един или два класа, докато други могат да използват много повече.

Глобални класове
Име на клас Част Тип въпрос Примери Забележка
.въпрос Template:OstarelIn Блок с всички въпроси Всички въпроси от тип

,

    ,
    .ls-отговори (New in 3.0 ) Блок с всички въпроси Всички въпроси тип
    ,
      ,
      .списък с подвъпроси Списък на подвъпрос Въпрос с множество възможности за избор, въпрос тип масив
        ,
        Използва се и .questions-list
        .списък с отговори Списък с отговори Въпрос с един избор, тип въпрос с масив, въпрос с много въвеждане на текст
          ,
          .отговор-елемент Частта с отговорите: един отговор Въпрос с един избор, тип въпрос с масив, въпрос с много въвеждане на текст
        • ,
        • .noanswer-item Частта за отговор без отговор Въпрос с един избор, въпрос тип масив
        • ,
        • Без отговор също е отговор, тогава имайте двоен клас noanswer-item и answer-item
          .въпрос-елемент Въпросната част: един въпрос Въпрос с много текстове, въпрос тип масив
        • ,
        • Някои отговори също са въпроси. Тогава имаме много class="question-item answer-item"
          .списък с бутони Списък с бутон Да, не и въпрос за пола
          .button-item Частта за отговор с бутон Да, не и въпрос за пола
        • .checkbox-list Списък с квадратчета за отметка Въпрос с множество възможности за избор, номер на масив (кутия за отметка) тип въпрос
            ,
          Някои типове въпроси използват клас с множество списъци, като квадратче за отметка с коментар: class="checkbox-list text-list"
          .checkbox-array (New in 3.0 ) Масив от квадратчета за отметка Масив (числа) с опция за отметка
          .чекбокс-елемент Частта за отговор с квадратче Въпрос с множество възможности за избор, номер на масив (кутия за отметка) тип въпрос
        • ,
        • .радио-списък Списък с радио елемент Въпрос с един избор, тип масивен въпрос (всеки ред)
            ,
          .радио-масив (New in 3.0 ) Масив от радио елемент Въпрос тип масив
          .радио-елемент Отговорът е радио Въпрос с един избор, въпрос тип масив
        • ,
        • .text-list Списък с въвеждане на текст Тип въпрос с много текст, масив от текст
            ,
          .текст-елемент Частта с отговора на въвеждане на текст Тип въпрос с много текст, масив от текст
        • ,
        • .numeric-list Списък с въвеждане на текст само с числови отговори Многочислов тип въпрос, масив от числа
            ,
          .number-list Списък с въвеждане на текст с отговор само с цифри (всеки ред) Многочислов тип въпрос, масив от числа
            ,
          .number-array (New in 3.0 ) Отговорната част на числово въвеждане Масив от числа
          .select-list Template:OstarelIn Списък с select Масив с числа, масив с двоен мащаб (избор)
          .dropdown-list (New in 2.50 ) Списък с select Масив с числа, масив с двоен мащаб (избор) (всеки ред)