Actions

Új sablonrendszer az LS3.x-ben

From LimeSurvey Manual

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

Bevezetés

Ne feledje: a LimeSurvey korábbi verzióiban azokat a fájlokat, amelyek meghatározzák a felmérés megjelenését, színek, betűtípusok, elrendezés és (bizonyos) viselkedés tekintetében, "sablonnak" nevezték. Az új meglátások miatt ezt most "témának" nevezik, míg a sablon például felmérések számára van fenntartva.

Ezen az oldalon megtudhatja, hogyan:

  • Használja a LimeSurvey 3.0 új témarendszerét
  • Használja az öröklődést saját témáinak kezeléséhez.
  • Adjon hozzá egy képet a témához
  • Kezelje a felmérések és felmérési csoportok témabeállításait

A LimeSurvey 3 egy teljesen új témamotor-rendszert mutat be, amely a Twig 1.29-en, a Bootstrapen alapul, és lehetővé teszi a téma öröklését és a témabeállításokat. Teljesen eltávolítja a régi cserekulcsszó-rendszert. Így most a frontend HTML 100%-a testreszabható. Például a régi témarendszerben volt egy {ASSESSMENTS} kulcsszó, amelyet a végrehajtás során az értékelési HTML váltott fel. Egy tématervezőnek nem volt módja testreszabni ezt a HTML-t (a JavaScript használatával). Most van egy assessments.twig nevű fájl, amely tartalmazza a HTML létrehozásához szükséges logikát (a Twig nyelven írva). Ezeken az oldalakon néhány magyarázatot adunk az új témamotor használatáról.

Itt nem részletezzük a Twig működését. Ez egy nagyon leegyszerűsített PHP, amely magas szintű biztonságot kínál a „sandbox” rendszernek köszönhetően (erről részletesebben a Theme Engine Core kóddal foglalkozó részben olvashatunk). Ha már ismeri a PHP-t, akkor rendkívül könnyű lesz elsajátítania. Ha nem ismeri a PHP-t, akkor is elég könnyű megtanulnia. Kérjük, tekintse meg a Twig 1.X dokumentációját: https://twig.symfony.com/

Szerkesztés az adminisztrátori felület használatával

témalista

Az adminisztrációs irányítópulton van egy mező a témalista eléréséhez: thumb|800px |center|baseline|border|A témalista az RC3 friss telepítése után
A lista 5 oszlopra oszlik:

  • a téma előnézete: ez csak egy „preview.png” nevű képfájl a téma gyökerében
  • a téma „címe”, mint a jegyzékben megadott (config.xml a téma gyökerében)
  • a téma leírása: egy karakterlánc a manifestben
  • a téma típusa: Alaptéma (a LimeSurvey-vel együtt), Felhasználói téma (hozzáadva a feltöltési könyvtárba), XML téma (nincs betöltve az adatbázisba)
  • Kiterjed: ha a téma kiterjeszt egy másik témát, akkor itt megjelenik a neve
  • Néhány műveletgomb:
    • Telepítés: it betölti egy téma jegyzékét, hogy hozzáadja az adatbázishoz, és elérhetővé teszi a felmérés szintjén történő kiválasztáshoz
    • Eltávolítás: törli egy téma konfigurációs bejegyzéseit az adatbázisban
    • Témaszerkesztő: it átirányítja a témaszerkesztőbe
    • Téma opció: ez vezeti el a témabeállítások globális konfigurációját

Témaszerkesztő

Ez a dokumentáció feltételezi, hogy már tudja, hogyan kell használni a témaszerkesztőt az LS előző verziójában.


A témaszerkesztőt a lehető legközelebb tartottuk az eredetihez. Tehát amikor megnyit egy alaptémát, nem szerkesztheti azt. De most a „másolás” gomb helyett van egy „kiterjesztés gomb”.
center|baseline|border|Most kiterjeszted a témát

A téma öröklődésének fogalmának gyors áttekintése

Az LS3-ban egy téma örökölhet egy másik témát, „kibővíthet” egy másik témát. Ez azt jelenti, hogy a témakönyvtár gyakorlatilag üres lesz, csak az eredetitől eltérő fájlok (nézetek, stíluslapok, szkriptek, források stb.) lesznek benne. Ezzel könnyen létrehozhat egy témát a különböző felhasználók számára anélkül, hogy sok különböző témát kellene karbantartania. Például: lehet saját házi témája, majd egy változata egy cégnek (logójával, stílusával, esetleg a honlapjára mutató hivatkozással a láblécben stb.), egy másik verzió egy másik cégnek stb. frissíti a CSS-t vagy az egyéni témája globális elrendezését, akkor minden tőle örökölt téma automatikusan frissül. Vegye figyelembe, hogy az öröklődés rekurzív: egy téma kiterjeszthet egy témát, amely kiterjeszt egy másikat stb.

Ez azt is jelenti, hogy ha kiterjeszti a LimeSurvey egyik alaptémáját, továbbra is profitálhat a frissítésekből.

Újdonságok a felhasználói felületen

A LimeSurvey monokróm témájának kiterjesztéséhez lépjen a Téma listára, kattintson a Monokróm téma „Témaszerkesztő” gombra. Ezután kattintson az „extend” gombra, és érvényesítse az új „extends_monochrome” nevet.

Ha most a feltöltési könyvtárba lép (a file/ftp kliensével), látni fogja, hogy létrejött egy új könyvtár: upload/themes/extends_monochrome Egy XML fájlt és könyvtárakat tartalmaz , de a legtöbb könyvtár üres. Nincs benne sem nézet, sem CSS, sem JS. De továbbra is kiválaszthatja ezt a témát normálként egy felmérésből, és pontosan úgy fog kinézni, mint a monokróm téma.

A témafa (könyvtár és fájlok) közvetlenül a létrehozása után. Gyakorlatilag üres
A témafa (könyvtár és fájlok) közvetlenül a létrehozása után. Gyakorlatilag üres
Az eredeti témából származó források (jpg, png stb.) a téma kiterjesztésekor másolásra kerülnek. Ennek az az oka, hogy ha helyileg másol egy CSS-fájlt az eredeti témáról, és az ezekre a fájlokra hivatkozik (mint a background-image utasításban), akkor meg kell találnia ezeket a képeket az aktuális téma elérési útjában.

Az expands_monochrome téma témaszerkesztője így néz ki: center|baseline|border| Editing extends_monochrome theme

Nincs nagy különbség a régi témaszerkesztőhöz képest. Soroljuk fel a főbbeket:

  • Az örökölt kulcsszó a fájllistában. Ez azt jelenti, hogy a fájl nem található a témakönyvtárban, és az eredeti témából származó fájl kerül felhasználásra.

center

  • A főszerkesztő ( ACE editor ) mutatja a kiválasztott fájl tartalmát. A fájlok nem csak HTML-t, CSS-t vagy JS-t tartalmaznak, hanem Twig utasításokat is. Ezek a Twig utasítások lehetőséget adnak arra, hogy logikát toljunk a téma nézeteihez, amelyek korábban mélyen a magban helyezkedtek el, és amelyek most testreszabhatók.

center|Some gally kód, a felmérési listához

  • Ezért most több képernyőtípus érhető el a felső menü legördülő választójában. Olyan oldalakat fog észrevenni, mint például a „Felmérés lista”, „Betöltés”, „Mentés”, „Hiba”, „Regisztráció”, „Értékelések”, „Válaszok nyomtatása”, amelyek korábban nem voltak elérhetők, vagy amelyeket nem igazán tudott előtt testreszabható.

195px|center|Most már az összes képernyőt személyre szabhatja

  • A fájllista alján található 'tipp' hivatkozás megadja a Twig módot, hogy képet adjon a HTML-ben

605px|középre

  • A 'Változtatások mentése' gomb a Másolás helyi témába és a változtatások mentése gomb lesz

360px|center

Gyors példa: kép hozzáadása

A Másolás helyi témába és módosítások mentése gomb pontosan azt teszi, amit ír: ha szerkeszt valamit a fájlon belül, majd rákattint arra a gombra, a fájl átmásolja a szerkesztett témába, és mentse el a változtatásokat.
Például: kattintson a layout_global.twig fájlra, majd közvetlenül a blokktartalom elé ( {% block content %}) adja hozzá a „TESZT” szöveget, és kattintson a gombra. Látható, hogy a fájl címkéje „örökölt”-ről „helyi”-re változott, és a gomb most egy egyszerű gomb módosítások mentése. center|közvetlenül a gombra kattintás után
Ha megnyit egy fájlkezelőt, és belép a upload/themes/extends_monochrome/views/ könyvtárba, látni fogja, hogy az csak egy fájlt tartalmaz, a layout_global.twig fájlt és a „TEST” karakterláncot. center|Most a fájl jelen van a témában

Most a véletlenszerű szöveg hozzáadása helyett egy képet adunk hozzá. Ha rákattint a tipp linkjére, akkor azt fogja mondani:
Kép használatához .twig fájlban: {{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass" }) }}
Ha elolvasta a Twig dokumentációját (és ezt most meg kellett volna tennie), akkor tudja, hogy Template:Function( ) A ' egy függvény eredményét visszhangozza a képernyőn. Itt a függvény az image( ).

Ha kíváncsi arra, hogy mit csinál, itt találja meg a kódban (az RC3 verziója): /application/core/LS_Twig_Extension.php#L219-L237 image() függvény az RC3-ban

Ha nem érti a kódot: ne aggódjon, nem kell tudnia, hogyan működik, de miért használja és hogyan kell használni.


Az image() függvényt két okból érdemes használni:

  • A függvénykép végigfut a témán, hogy megtalálja a képet. Ha a témát, amelyen dolgozik, egy másik témára is kiterjesztették, és ha a fájlt oda másolja, ahová a képet beszúrta, de a kép nem a helyi témában van másolva, akkor a téma öröklési fán keresztül keresi, hol ez a kép.
  • Az eszközkezelőt fogja használni, így javítja a téma teljesítményét. További információért tekintse meg a Yii Asset Manager dokumentációját: http://www.yiiframework.com/wiki/148/understanding-assets/

Tehát, hogy képet adjon a témájához:

  • , csak töltse fel a szokásos módon a jobb oldali fájlfeltöltővel, majd adja hozzá a kívánt helyre bármilyen gallyfájlban:

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

  • Ha alternatív szöveget szeretne hozzáadni a képéhez (képernyőolvasókhoz és HTML-ellenőrzéshez), adja hozzá:

Template:Image('./files/myfile.png'), ''' 'az alternatív szövegem' ' ''

  • Ha szeretne hozzáadni egy class attribútumot, és hozzá szeretne adni egy azonosítót:

{{ image('./files/myfile.png'), 'az én alternatív szövegem', {"class": "a_nice_css_class ”, „id”: „any_id”} }}

Néhány dolog a TO-DO listánkon

  • Adja meg a felhasználóknak, hogy egyéni előnézeti fájlt töltsenek fel magából a szerkesztőből
  • Adjon hozzá egy gombot a helyi fájl törléséhez, és visszatérjen a öröklött utasítás
  • Csak a CSS-fájlokban használt képet másolja át (másolandó fájlként a manifestben felsorolva)
  • Emlékeztessen, hogy az aktuális téma melyik témát terjeszti ki (ha van)

Témabeállítások

Az LS3 másik újdonsága a témabeállítások oldala. Mint később látni fogjuk, a téma létrehozói létrehozhatják saját beállításaikat, sőt saját adminisztrátori beállítási oldalukat is. Itt gyorsan meglátjuk, hogyan működik az Alaptémák opcióoldala. A témabeállítások globális szintű eléréséhez: kattintson a „témabeállítások” elemre a témalistában

Speciális beállítások

QS:Témaszerkesztő – speciális beállítások

Egyszerű lehetőségek

Az Egyszerű beállítás oldal magából a sablonból származik. Ez egy gallyfájl és néhány javascript segítségével készült a téma /options könyvtárában: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Sérült link)

Ez az oldal témánként teljesen eltérő lehet, és a témaszolgáltatókat erősen javasoljuk, hogy alakítsák ki saját megjelenésüket és hangulatukat.

thumb|750px|center

Az egyszerű beállítási oldal egyszerűen kitölti a speciális űrlapbeviteli adatokat. Megtekintheti az egyszerű oldalon egy beállítás be- vagy kikapcsolásával, és megnézheti, hogyan módosul ennek megfelelően a kapcsolódó bevitel a speciális űrlapon. Például az Alapértelmezett sablon egyszerű beállításainál, ha a Bootswatch témát „Sötét”-re módosítja, majd a speciális beállítások fülére kattint (még mentés nélkül is), látni fogja, hogy a „Cssframework Css” mező megváltozott.

{"csere": "css/bootstrap.css","css/flatly.css"}
to
{"csere": "css/bootstrap.css","css/darkly.css"}
Itt vannak a különböző egyszerű lehetőségek a Core témákhoz:

  • Ajax mód: A következő oldalt ajax-on keresztül (gyorsabban) vagy oldalújratöltéssel (jobb hibakeresési célra) kell betölteni
  • Háttérkép: ha Igen értékre van állítva, akkor a minta.png nevű kép betöltődik (a Master-ben egy fájlválasztó váltja fel)
  • Box konténer: ha a Nem értékre állítva a kérdések nem lesznek dobozban (tehát a képernyő szélességénél nagyobb tömböket használhatsz)
  • Brandlogo: ha nem értékre van állítva, akkor a kérdőív neve A felső sávban látható, különben kiválaszthatja a fájlkönyvtárban lévő képek egyikét, hogy logóképként használhassa.
  • Animate body: Ha yes-re van állítva, akkor az animációk közül választhat a kérdőív törzsének betöltésekor alkalmazni kell
  • Animált kérdés: ugyanaz a kérdésekkel
  • Figyelmeztetések animálása: Ugyanez a figyelmeztetésekkel
  • Bootstrap theme: Itt kiválaszthat egy betöltendő Bootstrap témát. A Bootswatchtól származnak: https://bootswatch.com/3/


Az animációkhoz használt könyvtár az animate.css: https://daneden.github.io/animate.css/ Természetesen a témaszolgáltató hozzáadhat saját animációs könyvtárat vagy egyáltalán nem.

A monokróm témák ugyanazt a bootstrap színtémát használják, mint az adminisztrátori felhasználói felület. Nem a css keretrendszer helyettesítő rendszerét használják, hanem egyszerűen hozzáadnak egy CSS-fájlt. Tehát egy másik módszert mutat be a témaszolgáltatók egyéni témáinak kezelésére.

Öröklési rendszer

Az előző részben láthattuk, hogy egy téma kiterjeszthet egy másik témát. Egy témakonfiguráció örökölhet egy másik témakonfigurációt is. Ez azt jelenti, hogy egy adott témához a következő címen lehet konfigurációt megadni

  • globális szinten (amelyet az imént láttunk elérhetővé a témalistáról)
  • felmérési csoportszinten
  • egy utolsó a felmérés szintjén.

Minden paraméter egy bizonyos szinten örökölhet a felső szintről: felmérési csoport öröklődése. Először lássuk a felmérés csoport szintjét.

A felmérés csoport szintjén

Valóban, az LS3 másik nagy újdonsága a felmérési csoportrendszer. Mostantól különböző csoportokat hozhat létre felmérései szervezéséhez. Az eléréséhez lépjen a felmérés listára, majd kattintson a felmérés csoport fülére: thumb|800px|center|A felmérés csoportok lapja
Ebben a listában két műveletgombja van. Ha a csoport üres, törölheti. Egyébként mindig szerkesztheti. A szerkesztés gombra kattintva eléri a Survey Group konfigurációs oldalát: thumb|800px|center|Alapértelmezett felmérési csoport szerkesztése
Az oldal harmadik lapja a „Sablonbeállítások ehhez a felmérési csoporthoz”. Ha rákattint, ugyanazt a témalistát fogja látni, mint a témalistában, csak itt csak az opció gomb látható (a témaszerkesztő csak a fő listáról érhető el).
Most, ha rákattint a Default Template opcióra, ezt fogja látni: thumb|800px|center|A Survey Groupnál a sablon beállításai öröklődnek alapértelmezés szerint

  • Az Mindent örököl azt jelenti, hogy az összes konfigurációt a globális konfigurációs szintről örököljük.
  • Ha a speciális beállítások oldalra lép, látni fogja, hogy az összes mező öröklésre van beállítva.
  • Ha a "Nem" gombra kattint a "Mindent örököl" mezőben. egyszerű beállításokat, akkor ismét egy nagyon hasonló oldalt fog látni a globális opciók oldalához. Az egyetlen különbség az, hogy minden mezőben beállíthatja azt, hogy igen, nem vagy öröklődik; és minden legördülő választónak van egy „örököl” értéke.

thumb|800px|center|Minden beállításnak lehet öröklött értéke

Egy felmérési csoport lehet egy másik csoport gyermeke. Ebben az esetben a szülőtől örökli.

A felmérés szintjén

A felmérés szerkesztésekor a bal oldali sávmenüben egy új bejegyzés jelenik meg: „Témabeállítások”. Ez az aktuális felméréshez kiválasztott téma opcióoldalára vezet. Ugyanazt az öröklési rendszert fogja megtalálni, mint a felmérési csoportban, de ezúttal az öröklés azt jelenti, hogy a beállítás a felmérés felmérési csoportjából öröklődik. thumb|800px|center|Téma lehetőségek felmérési szinten

Példa az esetre

Tegyük fel, hogy egyetlen témát használ különböző vállalatokhoz (A és B). A kedvencek beállításait globális szinten állíthatja be (pl.: ajax bekapcsolva, test animálása becsúsztatással, riasztások pulzussal). Ezután minden vállalathoz hozzon létre egy felmérési csoportot: egy felmérési csoportot az A vállalathoz, amely a vállalat összes felmérését, és egy felmérést a B vállalat számára, amely a B vállalat összes felmérését tartalmazza. Ezen a szinten beállíthatja csak a logót és a hátteret, és hagyod, hogy a többi opció örököljön. Tehát az A csoport összes felmérése az A vállalat logóját fogja használni, a B csoport összes felmérése pedig a B vállalat logóját. Az A vállalat egyik felméréséhez használhat egy másik hátteret a témával kapcsolatban a felmérésből: egyszerűen módosíthatja a hátteret a felmérés szintjén. Ha valaki a B vállalatnál azt mondja Önnek, hogy a pulzáló riasztás túl agresszív, és valami simábbat szeretne, például egy fade in, akkor egyszerűen módosítsa a riasztási animációt a B felmérési csoport szintjén, és a csoport összes felmérése ezt az animációt fogja használni. Ha az A cég megváltoztatja a logóját, azt az A felmérési csoport szintjén módosíthatja, és ennek a csoportnak minden felmérése az új logót fogja használni.

Ezek a példák az alaptéma aktuális lehetőségein alapulnak. De természetesen, ha Ön témaszolgáltató, vagy ha egy kicsit tud szkriptet írni a twig segítségével, megadhatja saját lehetőségeit. Hozzáadhat például egy „információs lábléc” opciót, ahol olyan adatokat adhat meg, mint a vállalat webhelye vagy egy telefonszám segítségért. Ezután, ha az A vállalat különböző részlegekkel rendelkezik, különböző telefonszámokkal, akkor egyszerűen létrehozhat egy alcsoportot az A felmérési csoport minden részlegéhez. Ezekben a lehetőségekben minden alcsoportnak saját telefonszáma lesz.

GYIK a téma testreszabásával kapcsolatban

Itt talál néhány választ a fórumon feltett kérdésekre, amelyek segíthetnek a téma testreszabásában.

CSS/JS testreszabása: foglalkozzon az eszközkezelővel ("miért nem alkalmazzák a módosításaimat?")


Ha egy téma CSS/JS-ét úgy próbálja frissíteni, hogy közvetlenül szerkeszti a kódot kedvenc szerkesztőjével, meglepődhet, hogy a változtatások nem kerülnek alkalmazásra.


2.50 óta az LS a Yii eszközkezelőt használja: Yii Dokumentáció az eszközökről

Egy téma CSS/JS fájljait egy tmp/ alkönyvtárba helyezi át egy véletlenszerű karakterlánccal (pl.: "tmp/1ef64ml/"). Tehát ha bármilyen módosítást végez egy css/js fájlon, és közli az eszközkezelővel, a fájlok egy új alkönyvtárba másolódnak új néven, így a felhasználói böngésző gyorsítótára frissül, és az új css/js fájlt látják. . Ellenkező esetben meg kell tisztítaniuk a böngésző gyorsítótárát.


Itt a CSS hivatkozások a fejlécben találhatók, amikor az eszközkezelő be van kapcsolva:
Fájl:Assets on vanilla.jpg
Mint látható, mindegyik a tmp/ almappákra vonatkozik.


Itt a CSS linkek a fejlécben, ha az eszközkezelő ki van kapcsolva:
Fájl:Asset off.png
Amint láthatja, a téma valódi fájljaira mutatnak.


Természetesen, ha az Eszközkezelő nem tudja, hogy megváltoztatta a fájlt, a régi tmp/könyvtár régi fájlja változatlan marad, és a változtatások soha nem lesznek alkalmazva.

Tehát, amikor egy téma CSS/JS fájlját szerkeszti, számos lehetősége van:

  • Használhatja az LS témaszerkesztőt: az eszközkezelővel foglalkozik, és nem kell törődj bármivel
  • Bekapcsolhatod a hibakeresési módot: kikapcsolja az eszközkezelőt, így a témáid valódi css/js fájljai lesznek meghívva (de akkor frissíteni kell a böngésző gyorsítótárát minden betöltésnél)
  • Frissítheti az eszközök gyorsítótárát: a Globális beállítások -> Általános -> Eszközgyorsítótár törlése

Fájl:Clearassets-ls3 3.png

A témaszerkesztő használata az egyéni CSS szerkesztéséhez messze a legjobb megoldás.


A témaszerkesztő használata segít megérteni az új témamotor architektúráját. Ha a testreszabás gyümölcsös, legyen óvatos a CSS-specifikációkkal: a legtöbb definíció a ".fruity" választót használja (az egyik osztály a test elem)

Egyéni betűtípusok hozzáadása a témámhoz

Az egyszerű módszer: a Google Font CDN használata

Bootswatch Survey Theme a Google Font CDN-t használja. Nézzük meg, hogyan működik: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/bootswatch/cssss/minations/csflatsly. 

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

Ezután a Lato betűtípust használja a CSS szabályok: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72 

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

Az egyéni témában így bármilyen google betűtípust használhat. Természetesen el kell távolítania a betűtípus-választót a téma beállításai közül. Törölje ezeket a sorokat az options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.tw-L2009-L209

Helyi betűtípus használata

Természetesen letöltheti a betűtípusfájlokat, és használhatja őket a helyi szerverről a Google CDN helyett (jobb az adatvédelem érdekében). A noto font helyi verziója:

https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/N!css.

 
@font-face {
 font-family: 'Noto Sans';
 betűsúly: 300;
 betűstílus: normál;
 src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...

Nagyon hasonló definíciót használhat a téma css fájljában, majd a NotoSans-Regular.ttf fájl átmásolásával a téma css/font-src/ mappájába.

Ezután alkalmazza ezt a betűtípust a testére (vagy bármely más elemre), mint a fenti, és távolítsa el az alapértelmezett betűtípus-választót.

Saját betűtípus-választó létrehozása a lehetőségek között

Egyelőre nem tudja könnyen használni az alapvető betűtípus-választót saját betűtípus hozzáadására a lehetőségek között. Először is lehetőséget kell adnunk a végfelhasználóknak egyéni csomagok feltöltésére (lásd a következő bekezdést: Bepillantás a Fruity Font Selectorba)
Íme, hogyan tovább:

  • Adjon hozzá két betűtípust (my_custom_font és my_custom_other_font) a témához CDN vagy helyi szerver használatával
  • Ezután adjon hozzá két új osztályt a css fájlhoz:


 
.font-my_custom_font {
 font-family: 'my_custom_font';
}
.font-my_custom_other_font {
 font-family: 'my_custom_other_font';
}
  • A téma XML-fájljában adjon hozzá egy betűtípus-beállítást (az alapértelmezett a my_custom_font) :
 
<options> 
 ....
 <font>my_custom_font</font> 
</options>
  • Az option.twig-ben adjon hozzá betűtípusválasztót ezeknek a soroknak a hozzáadásával (egyelőre nem tesztelt, ezért jöjjön panaszkodni a fórumon, ha nem működik):
 
 
<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'> {{ "Saját betűtípusaim" | t }}</div> 
<div class='panel-body'> 
<div class='form-group row'> 
 <label for='simple_edit_font' class='control-label'>{{ "Betűtípus kiválasztása:" | 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 %} //Nem "theme" kellene a "sablon" helyett?
 {% set fontOptions = fontOptions ~ '<option value = "inherit" > Örököl</option> ' %}
 {% endif %}
<optgroup  label="{{ "My Custom fonts" | t }}"> 
<option class="font-my_custom_font"     value="custom_font"   data-font-package=""  > Egyedi</option> 
<option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package=""  > Egyéb</option> 
</optgroup> 
 
</select> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div>


Most a felhasználók választhatnak a két betűtípus közül.

Betekintés a Fruity Font Selectorba

A jövőben lehetőséget adunk a végfelhasználóknak, hogy feltöltsék saját eszközcsomagjaikat, beleértve a betűtípuscsomagokat is. Nagyon egyszerűvé teszi a betűtípusok testreszabását.
A Yii csomagok megértéséhez:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

Az LimeSurvey csomagok különböző fájlokban vannak definiálva. A betűtípus-csomagok meghatározása itt található: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Például a Noto betűtípuscsomag itt van definiálva: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php5#3!

    'font-noto' => array(
 'devBaseUrl' => 'assets/fonts/',
 'basePath' => 'betűtípusok',
 'css' => array(
' noto.css',
 ),
 ),


A benne található noto.css fájl itt található: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/N!noto.css!
Vegye észre a css osztály ".font-noto" definícióját a végén: 

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


Ezután a Vanília témában a noto betűtípus használatos a noto csomag hozzáadásával és a noto:!N betűtípus beállításának megadásával!
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>nem</font> 
</options>


Ezután a törzsosztály-betűtípust a következő értékkel határozzuk meg:

https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanillaN/global7/t!

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

Természetesen az XML-fájl csak a témakonfiguráció alapértelmezett értékeit tartalmazza. Valójában azonban ezek az értékek az adatbázisban ("template_configuration" tábla (Kérdés: "theme_" "template_"?)) json-karakterláncként vannak definiálva és olvasva. Az option.js fájl csak az egyszerű beállítás betűtípus-választójának értékét használja. az érték módosításához a speciális lap űrlapon belül: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js

Így amikor az „eszközcsomag feltöltése” funkció elérhető lesz, könnyen hozzáadhat egy szkriptet, amely átvizsgálja az összes meglévő fontcsomagot, hogy hozzáadja azokat a választóhoz.

Témabeállítások hozzáadása a felmérési elemek elhelyezésének és megjelenítésének vezérléséhez

Ez az oktatóanyag bemutatja, hogyan adhat hozzá opciókat egy kiterjesztett témához a felmérési elemek különböző helyeken történő megjelenítéséhez. Ebben az esetben témalehetőségeket hozunk létre, hogy a felmérés címét két különböző helyen jelenítsük meg.

Az egyszerűség kedvéért az oktatóanyagot a LimeSurvey 3.4.3-as verziójában található "bootswatch" téma kiterjesztésére fogjuk alapozni.

Hozzon létre egyéni témát

  1. Bővítse ki a "bootswatch" témát a fent leírtak szerint.
  2. Másolja a custom.css fájlt a helyi témába a fent leírtak szerint.

Létrehozása new theme options

  1. Másolja a /themes/survey/bootswatch/options/ tartalmát a /upload/themes/survey/yourThemeName/options/ .
  2. Open /upload/themes/survey/yourThemeName/ options/options.twig egy szerkesztőben, és keresse meg a „{# Bootstrap Bootswatch téma #}” elemet. Közvetlenül a szülője előtt<div class='row'> elemet, add hozzá ezt:
     
 {# Egyéni felmérés neve a navigációs sávban #}
<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'>A felmérés neve a navigációs sávban</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'/> 
 Igen
</label> 
 <label class="btn btn-default">
 <input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> 
 Nem!</label> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class='row'> 
<hr/> 
</div>

		{# Egyéni felmérés neve a folyamatjelző alatt #}
<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'>A felmérés neve folyamatjelző sáv alatt</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'/> 
 Igen
</label> 
 <label class="btn btn-default">
 <input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> 
 Nem!</label> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class='row'> 
<hr/> 
</div>
  3. Nyissa meg a /upload/themes/survey/yourThemeName/config.xml fájlt, és adjon hozzá két elemet az "opciók" blokkhoz, hogy így nézzen ki:
    <options> 
<ajaxmode> tovább</ajaxmode> 
 ...
<surveyname1> tovább</surveyname1> 
<surveyname2> tovább</surveyname2> 
</options>
  4. Ez két új lehetőséget biztosít a Témabeállítások képernyőn, például:
    Fájl:Tutorial_tp_1_1.png

Módosított nézet a felmérés címéhez a navigációs sávban

  1. Hozzon létre egy új könyvtárat /upload/themes/survey/yourThemeName/views/subviews/header/ .
  2. Másolás /themes/survey/vanilla/ views/subviews/header/nav_bar.twig az új könyvtárba.
  3. Nyissa meg a /themes/survey/vanilla/views/subviews/header/nav_bar.twig-ot , és keresse meg a „{# Logo option #}” elemet. Ez alatt módosítsa az embléma/felmérésnév IF utasítását, így az így néz ki:
     
 {# Logóopció #}
 {% 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 %}
  4. Adjon hozzá ehhez hasonlót a /upload/themes/survey/yourThemeName/css/custom.css fájlhoz:
     .navbar-brand {
 vonalmagasság: 60 képpont;
 betűméret: 32 képpont;
}
  5. Váltsa a "Felmérés neve a navigációs sávban" témabeállítást "Igen"-re
  6. Ezt kell látnia:

Módosított nézet a felmérés címéhez a folyamatjelző sáv alatt

  1. Hozzon létre egy új könyvtárat /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews .
  2. Másolja a /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig-ot az új könyvtárba.
  3. Nyissa meg a /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container .twig és adjunk hozzá egy<h1> elem a felmérés nevéhez. Tehát így néz ki: 
    <div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}>
 
 {# Egyéni felmérés neve #}
 {% if( aSurveyInfo.options.surveyname2 == "on") %}
<h1 class="custom-survey-name"> {{ aSurveyInfo.name }}</h1> 
 {% endif %}
 
 {# Csoportnév #}
 {{ include('./subviews/survey/group_subviews/group_name.twig') }}
 
 {# Csoportleírás #}
 {{ include('./subviews/survey/group_subviews/group_desc.twig') }}
 
 {#
 MUTASD EL A KÉRDÉSEKET
 
 Ez a fő rész. Ez minden kérdést megjelenít a csoport számára
 #}
 
<!-- PRESENT THE QUESTIONS --> 
 {% aQuestion in aGroup.aQuestions %}
 {{ include('./subviews/survey/question_container.twig') }}
 {% endfor %}
 
<!-- Hidden inputs --> 
 {% if aGroup.show_last_group == igaz %}
<input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' /> 
 {% endif %}
 
 {% if aGroup.show_last_answer == igaz %}
<input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' /> 
 {% endif %}
</div>
  4. Adjon hozzá ehhez hasonlót a /upload/themes/survey/yourThemeName/css/custom.css fájlhoz:
     .navbar-brand {
 line-height: 60ph1.custom-survey-name {
 margó: 0;
 text-align: center;
}
  5. Váltsa a "Felmérés neve a folyamatjelző alatt" téma opciót "Igen"-re
  6. Ezt kell látnia:
    Fájl:Tutorial_tp_1_3.png

Letöltések

Téma létrehozása a semmiből

Hamarosan érkezik a dokumentáció.

Egyelőre csak néhány tippet adok.

Téma felépítése

Fájlok és könyvtárak

Amikor témát a semmiből hoz létre, nem kell tiszteletben tartania a Vanilla fájl/könyvtár szerkezetét/css/js-t. A kötelező css/js-t mag adja hozzá (szükség esetén még eltávolíthatja)

A témának csak az elrendezési fájlokat kell tartalmaznia:

  • layout_global.twig : az oldalak megjelenítése felmérés készítéséhez
  • layout_survey_list.twig : a felmérési lista megjelenítése (ha ez a téma alapértelmezettként van beállítva)
  • 'layout_errors.twig: olyan hibák megjelenítésére szolgál, amelyek blokkolják a felmérés megjelenítését. ( rossz felmérési azonosító, üres csoport az előnézeti csoportban stb.)
  • layout_user_forms.twig: megjeleníti a felhasználói űrlapokat, például: token (felmérés résztvevője), és regisztráljon.
  • 'layout_print.twig : a kérdőív pdf-be történő nyomtatására szolgál
  • layout_printanswers.twig: a válaszok kinyomtatása

A fájlok tartalma, a bennük lévő fájlok vagy nem, teljes mértékben Önön múlik. Az összes többi fájl és könyvtár, amelyet a Vanilla-n talál, teljesen opcionális, nyugodtan rendezze a kódot a kívánt módon.

Ha elolvassa a frontend renderelő kódot, látni fogja, hogy ezek a fájlnevek közvetlenül megjelennek benne. Ezért kötelezőek.

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

Tartalom

A Vanilla layout_global.twig fájljában látni fogja, hogy az „include_content” nevű változót használjuk annak eldöntésére, hogy mit jelenítsünk meg! layout_global.twig#L114-L115 

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

Az aSurveyInfo.include_content megmondja, milyen művelet folyik jelenleg: kérdéseket jelenít meg? beküldési eredményt mutat? mindent tisztán mutat? stb Amint láthatja, vaníliában egyetlen fájlt hozunk létre, amelyet cselekvéssel kell beilleszteni. Tehát ha tudni szeretné a műveletek listáját, csak ellenőrizze a vanília views/subviews/content könyvtárát, és távolítsa el a "gally" kiterjesztést : 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 '
  • válaszok kinyomtatása.twig
  • kvóták.twig
  • register.twig
  • save.twig '
  • beküldés_előnézet.twig
  • submit.twig
  • felhasználói formák.ágak

Ha már létrehozott egy őket a LimeSurvey 2.x verziójához, akkor észre fogja venni, hogy a legtöbbjük megfelel a limesurvey 2.x régi pstpl fájljainak. Még egyszer, a témában nem köteles létrehozni ezeket a fájlokat ebben a könyvtárban ezekkel a nevekkel. Például egyszerűen hozzáadhat egy óriási kapcsolót a layout_global.twig fájlhoz a kívánt HTML-kóddal minden egyes művelethez.

A jegyzék config.xml

A téma manifestje tartalmazza a témával kapcsolatos fő információkat. Amikor telepít egy témát, a jegyzék tartalma betöltődik az adatbázisba, két különböző táblába: template és template_configuration. Tehát minden alkalommal, amikor módosítja egy téma jegyzékét, el kell távolítania, majd újra kell telepítenie (vagy egyszerűen vissza kell állítania). Mivel ez a folyamat bosszantó a téma fejlesztése során, kényszerítheti az XML-fájl közvetlen használatát a DB-bejegyzések helyett. Ehhez kapcsolja be a config.php-ben a hibakeresési módot, és a 'force_xmlsettings_for_survey_rendering' értéket igazra állítja.

A metaadatok szakasz

Semmi bonyolult: csak a témával kapcsolatos főbb információk. A templates_configuration táblába kerül 

<metadata> 
<name> a_téma_neve</name> 
<title> A téma címe</title> 
<creationDate> 2017.10.16</creationDate> 
<author> A neved</author> 
<authorEmail> your@email.org</authorEmail> 
<authorUrl> http://www.yourwebsite.org</authorUrl> 
<copyright> Az Ön szerzői joga</copyright> 
<license> A téma licence</license> 
<version> témája verziója</version> 
<apiVersion> 3</apiVersion> 
<description> A téma leírása</description> 
<extends> szülő_téma</extends> 
</metadata>


Néhány megjegyzés:

  • name: kulcsként lesz használva a db-ban. Tehát egyedinek kell lennie, és nem tartalmazhat speciális karaktereket (szóközök nélkül). Ne feledje, hogy az eseteket nem vesszük figyelembe
  • Cím: a téma nevének megjelenítésére szolgál a különböző listákban. Különleges karaktereket tartalmazhat
  • leírás: a felmérés téma fő listájában lesz használva. Tartalmazhat speciális karaktereket, sőt HTML kódot is az
  • használatával extends: opcionális, ez határozza meg a szülőtémákat. Tehát ha valamelyik fájl nem található ebben a témában (twig/js/css/jpg stb.), akkor a szülőtémában keresi


Ha kiterjesztette a 3 alaptéma (Vanília, Bootswatch, Fruity) egyikét, módosíthatja az „extends” értéket egyik szülőtémáról a másikra. Természetesen vissza kell állítania a témát.



A fájlok szakasz

Ez egy fontos. A template_configuration táblában, a files_css, files_js, files_print_css mezőben json tömbként kerül leküldésre.

Pl.: a Material Premium téma fájlok része: 

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

Az ebben a részben található összes CSS/JS fájl betöltődik a felmérés indításakor (ajax módban. Ha az ajax mód ki van kapcsolva, akkor természetesen az összes fájl újratöltésre kerül minden oldalon).


A téma neve alapján hozzáadódnak egy Yii Asset Packethez. Tehát amikor az Asset Manager be van kapcsolva (a hibakeresési mód ki van kapcsolva), ezek a fájlok a tmp könyvtárba másolódnak a témával együtt (így a CSS-ben és a JS-ben a relatív elérési utat használhatja a képfájlok eléréséhez). A Yii eszközkezelőjéről: https://www.yiiframework.com/wiki/148/understanding-assets A Yii csomagjairól: http://www.yiiframework.com/doc/api/1.1 /CClientScript#packages-detail


Az öröklési rendszert fogják használni. Ez azt jelenti, hogy ha hozzáad egy CSS/JS fájlt egy témához, de az nincs benne a témában, akkor a motor megvizsgálja ennek a témának az összes alaptémáját, és az első talált fájlt használja. Tehát ha egy felhasználó kiterjeszti a témát a témaszerkesztővel, akkor az összes fájl öröklődik a témájában. A kulcsszavak erre az öröklési rendszerre utalnak.


  • add : hozzáadja a fájlt a témához és az összes örökölt témához
  • replace: lecseréli az anyatéma fájlját
  • remove: eltávolítja a fájlt a 'bármely csomagból, még az alapcsomagból is (3.14 óta)
Ne feledje, hogy a config.php fájlban beállíthatja a 'force_xmlsettings_for_survey_rendering'-et, hogy a konfiguráció XML-ből legyen beolvasva DB helyett (nincs szükség alaphelyzetbe állításra). Ez megkönnyíti az XML fájlok módosításainak tesztelését, és elkerüli a téma eltávolítását/újratelepítését az XML minden egyes módosításakor.


Néhány megjegyzés a kulcsszavakhoz:


Öröklődési tippek

Amint azt korábban kifejtettük, az "add" kulcsszó utalhat egy fájlra, amely az egyik alaptémában található. Tehát "hozzáadhat" egy fájlt ebben a szakaszban, de ez a fájl továbbra sem szerepel a témában, hanem az egyik szülőtémájában. A motor megvizsgálja az összes szülőtémáját, és az elsőt fogja használni. Ha nem találja a fájlt, és a hibakeresési mód be van kapcsolva a konfigurációban, és a js frontend hibakeresési mód be van kapcsolva globális beállításban, a konzolon egy üzenet figyelmeztet. Pl.: ha hozzáadunk egy my_theme-et:<add> css/unexisting.css</add> , a konzolon látni fogjuk: 

 (¯`·._.·(¯`·._.· Témakonfigurációs hiba ·._.·´¯)·._.·´¯) 

A 'css/unexisting.css' fájl nem található a 'my_theme' témában

Ha a hibakeresési mód ki van kapcsolva, akkor semmilyen hiba nem jelenik meg. A motor figyelmen kívül hagyja a rossz hozzáadási utasításokat.


Mikor használja az add, mikor használja a helyettesítést, mikor hagyhatom csak a szülőtémára?

Először is: a hozzáadás és a csere ugyanaz a kulcsszó. Használhatja az egyiket vagy a másikat, a motor is ezt fogja tenni. Az emberi olvasók számára különállóak, így megértik, mi volt a szándékod.


Nem adhat hozzá olyan fájlt, amely megegyezik az anyateémával: mindig lecseréli. pl.: Ha van egy "anyám_téma/foo.css" nevű fájlja, és hozzáad egy "foo.cs" nevű fájlt a leánytémához, akkor csak a "lánya_téma/foo.css" lesz hozzáadva a témához. Ha meg szeretné tartani a „my_mother_theme/foo.css” címet, csak válasszon másik nevet a „lánya_téma/foo.css” számára, például „lánya_téma/bar.css”. Tehát az "add" kulcsszó használható "csere" kulcsszóként.


Ha kíváncsi rá, hogy miért: ez nagyban megkönnyíti az örökölt téma automatikus generálását, a fájlrész másolása már a dobozból működik (nem kell átnevezni az „add”-t „replace”-re a fájl kiterjesztésekor).


Hogy egyértelmű legyen, vegyük a Fruity példáját. Itt a css fájl része: 


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


Ha gyümölcsösen nézzük a custom.css fájlt, az pontosan ugyanaz, mint a vaníliás. A custom.css fájlt a fruity belsejében törölhetnénk, a vaníliás betöltődik. Eltávolíthatnánk az állítást<replace> egyéni.css</replace> a Fruity manifestből a vanilla utasítás kerül felhasználásra, és a vanilla custom.css betöltődik.


Miért használjuk tehát az állítást<replace> egyéni.css</replace> a gyümölcsös manifeszten belül? A válasz egyszerű: mert azt akarjuk, hogy a végfelhasználó kiterjeszthesse a gyümölcsös témát, módosíthassa a fájlt a helyi témájában, és betölthesse ezt a módosított fájlt az örökölt témájából. Ahhoz, hogy megértsd, csak bővítsd gyümölcsösen, és nézd meg a kiterjesztett témát. A kiterjesztett témában még a custom.css fájl sem található. Tehát a gyümölcsöst használjuk. De: ha a felhasználó létrehozza ezt a fájlt a kiterjesztett témában (a témaszerkesztőben az "extend" gombra kattintva), akkor ez a fájl betöltődik a témájából.


Tehát általánosságban: ha a semmiből hoz létre egy témát anélkül, hogy kiterjesztené a témát, csak használja az add utasítást a css/js fájlok hozzáadásához. Egyszerűen. ha egy másik témát kiterjesztő témát hoz létre, és nem szeretné, hogy a felhasználók kiterjeszthessék a css/js fájlt az anya témáról: ne használja az add utasítást a manifestben. A fájlok továbbra is az anyatema konfigurációból töltődnek be. ha egy másik témát kiterjesztő témát hoz létre, és le szeretne cserélni egy fájlt az alaptémáról: használja a csere kulcsszót (az add kulcsszónak ugyanaz lesz az eredménye) ha egy másik témát kiterjesztő témát hoz létre, ha nem cserél le egy adott fájlt css/js-ből, de szeretné, hogy a felhasználók kibővíthessék ezt a fájlt: akkor használja a "replace" utasítást a manifestben ez a fájl. Még ha nem is cseréli ki a fájlt, a jegyzékben szereplő csere kulcsszó használatával engedélyezi a felhasználónak, hogy megtegye, ha meg akarja tenni.


Csak ez a legutolsó eset igényel egy kis szellemi torna megértését, a többi eset triviális.


CSS és JS fájlokat közvetlenül is regisztrálhat a gally kódból. Ezek a fájlok csak akkor töltődnek be, amikor a gallyfájlt kérik. Ha azt szeretné, hogy a felhasználók örökölhessék ezeket a JS/Css fájlokat a témaszerkesztőből, ne felejtse el használni a Template:RegisterTemplateCssFile('my style.css') és a Template:RegisterTemplateScript('my script.js') függvényeket. . Ha nem használja ezeket a funkciókat, a téma működhet, de az öröklődés megszakad. Ugyanaz a logika, mint a Template:Image('my picture.jpg') függvény

Az eltávolítás kulcsszó

Az eltávolítás kulcsszó csak 3.14 óta érhető el. Ezzel bármilyen css-t/fájlt eltávolíthat bármelyik csomagból, még az alapvető csomagokból is. A Material Premium Theme programban az Awseome Bootstrap Checkbox fájljainak eltávolítására szolgál: 

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

ezért ugyanazt a szintaxist kell használnia, mint a csomag fájljának (pl.: "awesome-bootstrap-checkbox.css" önmagában a mappa elérési útja nélkül nem működne). Az alapvető csomagok és fájljaik teljes listája a /application/config/packages.php és a config/third_party.php fájlokban található. Például: awesome-bootstrap-checkbox.css: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/5-L64. 

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


Az eltávolítási címkében használandó pontos név megtalálásának másik módja az eszközkezelő bekapcsolása (a hibakeresési mód kikapcsolása vagy a „use_asset_manager'=>true” beállítás a konfigurációban). Ezután a használandó elérési út közvetlenül a tmp könyvtár véletlenszerű könyvtára utáni lesz. Például az awesome-bootstrap-checkbox.css: 

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

Fájlok, amelyeket nem szabad eltávolítani:

jquery-3.1.1.min.js : szükséges

jquery-migrate-3.0.0.min.js : szükséges

survey.js : szükséges

moment-with-locales.min.js : szükséges a dátum kérdéstípushoz (és szerintem másokhoz is)

em_javascript.js : minden ExpressionScript javascripthez szükséges

Az opciók szakasz

Ez a szakasz a témája beállításától függ. A template_configuration tábla tárolt "beállításainak" json-tömbként való betáplálására lesz használva.

További információ

Néhány megjegyzés

'MEGJEGYZÉS: ha egy téma XML-fájlját szerkeszti, el kell távolítania, majd újra kell telepítenie a témát, hogy a rendszer figyelembe vegye.

''MEGJEGYZÉS: ennek elkerülése érdekében a DB helyett XML-re kényszerítheti a használatát. A config.php-ben kapcsolja be a hibakeresési módot, és törölje a megjegyzéseket:

'force_xmlsettings_for_survey_rendering' => true, // Törölje a megjegyzést, ha a DB helyett az XML fájl használatát szeretné kényszeríteni (az egyszerű témafejlesztés érdekében)

Vigyázat: minden az XML-ből lesz betöltve (beleértve a beállításokat stb.)


''MEGJEGYZÉS: ha manuálisan szerkeszti a CSS/JS fájlokat (a Témaszerkesztő használata nélkül), és ha a hibakeresési mód ki van kapcsolva, akkor most kényszerítheti az eszköz kiürítését. A „Globális beállítások” „Általános lapon” kattintson az „Eszközök gyorsítótárának törlése” gombra.

MEGJEGYZÉS: ha eltávolítja a részt

Retrieved from "http://manual.limesurvey.org/index.php?title=New_Template_System_in_LS3.x/hu&oldid=271463"