Actions

New Template System in LS3.x/vi: Difference between revisions

From LimeSurvey Manual

(Created page with "<div class="simplebox">File:help.png Nếu bạn đọc mã kết xuất giao diện người dùng, bạn sẽ thấy những tên tệp đó xuất hiện trực tiếp...")
(Created page with "Bạn không thể thêm tệp có cùng tên với chủ đề gốc: nó sẽ luôn thay thế tệp đó. ví dụ: Nếu bạn có tệp có tên "my_mother_theme/foo.css"...")
 
(48 intermediate revisions by the same user not shown)
Line 575: Line 575:
</div>
</div>


=== Content ===
=== Nội dung ===


In Vanilla's layout_global.twig, you'll see we use a variable called "include_content" to decide what to show
Trong bố cục_global.twig của Vanilla, bạn sẽ thấy chúng tôi sử dụng một biến có tên là "include_content" để quyết định nội dung sẽ hiển thị
https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/layout_global.twig#L114-L115
https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/ bố cục_global.twig#L114-L115


<syntaxhighlight lang="php">
<syntaxhighlight lang="php">
                    {% set sViewContent = './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
{% set sViewContent = './subviews/content/' ~ aSurveyInfo.include_content ~ '.twig' %}
                    {% include './subviews/content/outerframe.twig' with {'include_content': sViewContent } %}
{% include './subviews/content/outerframe.twig' với {'include_content': sViewContent } %}
</syntaxhighlight>
</syntaxhighlight>


aSurveyInfo.include_content tell you what action is currently going on: showing questions? showing submit result? showing clear all? etc
aSurveyInfo.include_content cho bạn biết hành động nào hiện đang diễn ra: hiển thị câu hỏi? hiển thị kết quả gửi? hiển thị rõ ràng tất cả? v.v
As you can see, in vanilla, we create one file to include by action. So if you want to know the list of actions, just check the vanilla's directory '''views/subviews/content''', and remove the "twig" extension :
Như bạn có thể thấy, trong vanilla, chúng tôi tạo một tệp để đưa vào bằng hành động. Vì vậy, nếu bạn muốn biết danh sách các hành động, chỉ cần kiểm tra thư mục '''views/subviews/content''' của vanilla và xóa tiện ích mở rộng "cành cây" :
https://github.com/LimeSurvey/LimeSurvey/tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content
https://github.com/LimeSurvey/LimeSurvey /tree/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/subviews/content


* '''clearall.twig'''  
* '''clearall.twig'''  
* '''firstpage.twig'''  
* '''firstpage.twig'''  
* '''load.twig'''  
* '''load.twig'''  
Line 596: Line 596:
* '''optin.twig'''  
* '''optin.twig'''  
* '''optout.twig'''  
* '''optout.twig'''  
* '''outerframe.twig'''  
* '''outerframe.twig'' '  
* '''printanswers.twig'''  
* '''printanswers.twig'''  
* '''quotas.twig'''  
* '''quotas.twig'''  
* '''register.twig'''  
* '''register.twig'''  
* '''save.twig'''  
* '''save.twig '''  
* '''submit_preview.twig'''  
* '''submit_preview.twig'''  
* '''submit.twig'''  
* '''submit.twig'''  
* '''userforms.twig'''  
* '''userforms.twig'''  


If you already created a them for 2.x versions of LimeSurvey, you'll notice that most of them corresponds to the old pstpl files for limesurvey 2.x.  
Nếu bạn đã tạo chúng cho phiên bản 2.x của LimeSurvey, bạn sẽ nhận thấy rằng hầu hết chúng đều tương ứng với các tệp pstpl cũ cho Limesurvey 2.x.  
Again, there is no obligation for you in your theme to create those files, with those names, in this directory. You could for example just add a giant switch in layout_global.twig with the wanted HTML for each action.
Một lần nữa, trong chủ đề của bạn, bạn không có nghĩa vụ phải tạo các tệp đó, với những tên đó, trong thư mục này. Ví dụ: bạn có thể chỉ cần thêm một công tắc khổng lồ trong bố cục_global.twig với HTML mong muốn cho mỗi hành động.


=== The manifest config.xml ===
=== Tệp kê khai config.xml ===


The manifest of the theme contains the main informations about your theme. When you install a theme, the content of the manifest will be loaded in the database, in two different tables: template and template_configuration. So each time you modify the manifest of a theme, you must uninstall and reinstall it (or just reset it). Because this process is annoying while developing a theme you can force the direct usage of the XML file rather than the DB entries. To do so, in config.php turn on debug mode and 'force_xmlsettings_for_survey_rendering' to true.
Tệp kê khai của chủ đề chứa thông tin chính về chủ đề của bạn. Khi bạn cài đặt một chủ đề, nội dung của tệp kê khai sẽ được tải trong cơ sở dữ liệu ở hai bảng khác nhau: template và template_configuration. Vì vậy, mỗi khi bạn sửa đổi bảng kê khai của một chủ đề, bạn phải gỡ cài đặt và cài đặt lại chủ đề đó (hoặc chỉ cần đặt lại chủ đề đó). Vì quá trình này gây khó chịu khi phát triển chủ đề nên bạn có thể buộc sử dụng trực tiếp tệp XML thay vì các mục nhập DB. Để làm như vậy, trong config.php hãy bật chế độ gỡ lỗi và 'force_xmlsettings_for_survey_rendering' thành true.


==== The metadata section ====
==== Phần siêu dữ liệu ====


Nothing complex: just the main infos about your theme. It will be pushed in the table templates_configuration   
Không có gì phức tạp: chỉ là thông tin chính về chủ đề của bạn. Nó sẽ được đẩy vào bảng templates_configuration   


<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
    <metadata>
<metadata>  
        <name>the_name_of_your_theme</name>
<name> the_name_of_your_theme</name>  
        <title>The Title of your theme</title>
<title> Tiêu đề chủ đề của bạn</title>  
        <creationDate>16/10/2017</creationDate>
<creationDate> 16/10/2017</creationDate>  
        <author>Your Name</author>
<author> Tên của bạn</author>  
        <authorEmail>your@email.org</authorEmail>
<authorEmail> your@email.org</authorEmail>  
        <authorUrl>http://www.yourwebsite.org</authorUrl>
<authorUrl> http://www.yourwebsite.org</authorUrl>  
        <copyright>Your Copyright </copyright>
<copyright> Bản quyền của bạn</copyright>  
        <license>Licence of your theme</license>
<license> Giấy phép chủ đề của bạn</license>  
        <version>version of your theme</version>
<version> phiên bản chủ đề của bạn</version>  
        <apiVersion>3</apiVersion>
<apiVersion> 3</apiVersion>  
        <description>Description of your theme</description>
<description> Mô tả chủ đề của bạn</description>  
        <extends>parent_theme</extends>
<extends> chủ đề gốc</extends>  
    </metadata>
</metadata>  
</syntaxhighlight>
</syntaxhighlight>




Few remarks:
Một số nhận xét:
* '''name''': will be used as a key in the db. So it must be unique, and it should not have any special chars (no spaces). Note that cases will not be taken in account
* '''name''': sẽ được sử dụng làm khóa trong db. Vì vậy, nó phải là duy nhất và không được có bất kỳ ký tự đặc biệt nào (không có khoảng trắng). Lưu ý rằng các trường hợp sẽ không được tính đến
* '''Title''': will be used to display your theme name in the different lists. It can have special chars
* '''Title''': sẽ được sử dụng để hiển thị tên chủ đề của bạn trong các danh sách khác nhau. Nó có thể có các ký tự đặc biệt
* '''description''': will be used in the main list of survey theme. It can contains special chars, and even HTML code by using
* '''description''': sẽ được sử dụng trong danh sách chính của chủ đề khảo sát. Nó có thể chứa các ký tự đặc biệt và thậm chí cả mã HTML bằng cách sử dụng
* '''extends''': optional, it defines the parent themes. So if any file is not present in this theme (twig/js/css/jpg, etc) it will look for it in the parent theme
* '''extends''': tùy chọn, nó xác định các chủ đề gốc. Vì vậy, nếu bất kỳ tệp nào không có trong chủ đề này (twig/js/css/jpg, v.v.), nó sẽ tìm tệp đó trong chủ đề gốc




<div class="simplebox">[[File:help.png]] If you extended one of the the 3 core themes (Vanilla, Bootswatch, Fruity), you can change the "extends" value from one parent theme to the other. Of course, you'll have to reset the theme. </div>
<div class="simplebox">[[File:help.png]] Nếu bạn mở rộng một trong 3 chủ đề cốt lõi (Vanilla, Bootswatch, Fruity), bạn có thể thay đổi giá trị "extends" từ chủ đề gốc này sang chủ đề gốc khác. Tất nhiên, bạn sẽ phải đặt lại chủ đề.</div>




Line 647: Line 647:




==== The files section ====
==== Phần tập tin ====


This one is an important one. It will be pushed in the table template_configuration, in the field files_css, files_js, files_print_css as json arrays.   
Đây là một trong những điều quan trọng. Nó sẽ được đẩy vào bảng template_configuration, trong trường files_css, files_js, files_print_css dưới dạng mảng json.   


Eg: the files section of the Material Premium Theme:
Ví dụ: phần tệp của Chủ đề Material Premium:


<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
    <files>
<files>  
        <css>
<css>  
            <add>css/bootstrap-material-design.css</add>
<add> css/bootstrap-material-design.css</add>  
            <add>css/ripples.min.css</add>
<add> css/ripples.min.css</add>  
            <replace>css/ajaxify.css</replace>
<replace> css/ajaxify.css</replace>  
            <replace>css/theme.css</replace>
<replace> css/theme.css</replace>  
            <replace>css/custom.css</replace>
<replace> css/custom.css</replace>  
            <remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
<remove> awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>  
        </css>
</css>  
        <js>
<js>  
            <replace>scripts/theme.js</replace>
<replace> scripts/theme.js</replace>  
            <replace>scripts/ajaxify.js</replace>
<replace> scripts/ajaxify.js</replace>  
            <add>scripts/material.js</add>
<add> scripts/material.js</add>  
            <add>scripts/ripples.min.js</add>
<add> scripts/ripples.min.js</add>  
            <replace>scripts/custom.js</replace>
<replace> scripts/custom.js</replace>  
        </js>
</js>  
        <print_css>
<print_css>  
            <add>css/print_theme.css</add>
<add> css/print_theme.css</add>  
        </print_css>
</print_css>  
    </files>
</files>  
</syntaxhighlight>
</syntaxhighlight>


All the CSS/JS files present in this section will be loaded at the launch of the survey (in ajax mode. If ajax mode is off, then of course all the files are reloaded at each page).  
Tất cả các tệp CSS/JS có trong phần này sẽ được tải khi bắt đầu khảo sát (ở chế độ ajax. Nếu chế độ ajax tắt thì tất nhiên tất cả các tệp sẽ được tải lại ở mỗi trang).  




They will be added to a Yii Asset Packet based on the name of the theme. So when Asset Manager is on (debug mode being off), those files will be copied to the tmp directory with the rest of the theme (so you can use relative path in the CSS and JS to reach the image files).
Chúng sẽ được thêm vào Gói tài sản Yii dựa trên tên của chủ đề. Vì vậy, khi Trình quản lý nội dung được bật (chế độ gỡ lỗi bị tắt), các tệp đó sẽ được sao chép vào thư mục tmp cùng với phần còn lại của chủ đề (vì vậy bạn có thể sử dụng đường dẫn tương đối trong CSS và JS để tiếp cận các tệp hình ảnh).  
About the Asset manager in Yii: https://www.yiiframework.com/wiki/148/understanding-assets  
Giới thiệu về Trình quản lý tài sản trong Yii: https://www.yiiframework.com/wiki/148/under Hiểu-assets  
About packages in Yii: http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail
Giới thiệu về các gói trong Yii: http://www.yiiframework.com/doc/api/1.1 /CClientScript#packages-detail




They will use the inheritance system. It means that if you add a CSS/JS file to a theme, but it's not present in the theme, then the engine will look into all the mother themes of this theme and will use the first one it finds. So if a user extends your theme via the theme editor, all those files will be inherited in his theme. The keywords refer to this inheritance system.
Họ sẽ sử dụng hệ thống kế thừa. Điều đó có nghĩa là nếu bạn thêm tệp CSS/JS vào một chủ đề nhưng nó không có trong chủ đề thì công cụ sẽ xem xét tất cả các chủ đề gốc của chủ đề này và sẽ sử dụng chủ đề đầu tiên mà nó tìm thấy. Vì vậy, nếu người dùng mở rộng chủ đề của bạn thông qua trình chỉnh sửa chủ đề, tất cả các tệp đó sẽ được kế thừa trong chủ đề của họ. Các từ khóa đề cập đến hệ thống kế thừa này.




* '''add''' : it will add the file to the theme, and to all its inherited theme
* '''add''' : nó sẽ thêm tệp vào chủ đề và vào tất cả chủ đề được kế thừa của nó
* '''replace''': it will replace the the file of its mother theme
* '''replace''': nó sẽ thay thế tệp của chủ đề mẹ của nó
* '''remove''': it will remove the file from '''any''' package, even the core package (since 3.14)
* '''remove''': nó sẽ xóa tệp khỏi gói '''bất kỳ''', kể cả gói lõi (kể từ 3.14)


<div class="simplebox">[[File:help.png]]   Remember you can set in config.php 'force_xmlsettings_for_survey_rendering' so configuration is read from XML instead of DB (no reset needed). This will make easier to test the modifications of the XML files, and will avoid you to uninstall/reinstall theme at each modification of the XML </div>
<div class="simplebox">[[File:help.png]] Hãy nhớ rằng bạn có thể thiết lập trong config.php 'force_xmlsettings_for_survey_rendering' để cấu hình được đọc từ XML thay vì DB (không cần thiết lập lại). Điều này sẽ giúp việc kiểm tra các sửa đổi của tệp XML trở nên dễ dàng hơn và sẽ tránh cho bạn phải gỡ cài đặt/cài đặt lại chủ đề ở mỗi lần sửa đổi XML</div>




Few remarks on those keywords:  
Một số nhận xét về những từ khóa đó:  




===== Inheritance tips  =====
===== Mẹo kế thừa =====
As explained before, the "add" keyword can refer to a file being in one of the mother theme. So you can "add" a file in this section, and still not having this file in your theme, but in one of its parents theme. The engine will look into all its parent themes and will use the first one it finds. If it can't find the file, and debug mode is on in config, and js frontend debug mode is on in global setting, a message in console will warn you. Eg: if we add in a my_theme: <add>css/unexisting.css</add>, in the console we'll see:
Như đã giải thích trước đó, từ khóa "add" có thể đề cập đến một tệp nằm trong một trong các chủ đề mẹ. Vì vậy, bạn có thể "thêm" một tệp trong phần này và vẫn không có tệp này trong chủ đề của mình mà ở một trong các chủ đề gốc của nó. Công cụ này sẽ xem xét tất cả các chủ đề gốc của nó và sẽ sử dụng chủ đề đầu tiên mà nó tìm thấy. Nếu nó không thể tìm thấy tệp và chế độ gỡ lỗi được bật trong cấu hình và chế độ gỡ lỗi giao diện người dùng js được bật trong cài đặt chung thì một thông báo trong bảng điều khiển sẽ cảnh báo bạn. Ví dụ: nếu chúng ta thêm vào my_theme:<add> css/không tồn tại.css</add> , trong bảng điều khiển chúng ta sẽ thấy:


<syntaxhighlight lang="">
<syntaxhighlight lang="">
  (¯`·._.·(¯`·._.· Theme Configuration Error  ·._.·´¯)·._.·´¯)  
  (¯`·._.·(¯`·._.· Lỗi cấu hình chủ đề ·._.·`¯)·._.·`¯)  


Can't find file 'css/unexisting.css' defined in theme 'my_theme'  
Không thể tìm thấy tệp 'css/unbeing.css' được xác định trong chủ đề 'my_theme'  
</syntaxhighlight>
</syntaxhighlight>


If the debug mode is off, then no error at all will be seen. The engine will just ignore the wrong add statements.
Nếu chế độ gỡ lỗi tắt thì sẽ không thấy lỗi nào cả. Động cơ sẽ bỏ qua các câu lệnh thêm sai.






===== When to use add, when to use replace, when can I just leave it to the parent theme? =====
===== Khi nào nên sử dụng add, khi nào nên sử dụng thay thế, khi nào tôi có thể để nó cho chủ đề gốc? =====


First: add and replace are the very same keyword. You can use the one or the other, the engine will just do the same. They are distinct for human readers, so they understand what was your intention.  
Đầu tiên: thêm và thay thế là những từ khóa giống nhau. Bạn có thể sử dụng cái này hay cái kia, động cơ sẽ làm như vậy. Chúng khác biệt đối với độc giả là con người, vì vậy họ hiểu ý định của bạn là gì.  




You can't add a file with the same name as the mother theme: it will always replace it. eg: If you have a file called "my_mother_theme/foo.css" and you add a file called "foo.cs" in the daughter theme, only  "daughter_theme/foo.css" will be added to the theme. If you want to keep "my_mother_theme/foo.css", just choose another name for "daughter_theme/foo.css", like "daughter_theme/bar.css". So the keyword "add" can be used as a "replace" keyword.  
Bạn không thể thêm tệp có cùng tên với chủ đề gốc: nó sẽ luôn thay thế tệp đó. ví dụ: Nếu bạn có tệp có tên "my_mother_theme/foo.css" và bạn thêm tệp có tên "foo.cs" vào chủ đề con, thì chỉ "daughter_theme/foo.css" mới được thêm vào chủ đề. Nếu bạn muốn giữ lại "my_mother_theme/foo.css", chỉ cần chọn một tên khác cho "daughter_theme/foo.css", chẳng hạn như "daughter_theme/bar.css". Vì vậy từ khóa "thêm" có thể được sử dụng làm từ khóa "thay thế".  




If you wonder why: this make much easier the automatic generation of inherited theme, copying the file section works out of the box (no need to rename "add" to "replace" when extending one the file).  
Nếu bạn thắc mắc tại sao: điều này giúp việc tạo chủ đề kế thừa tự động dễ dàng hơn nhiều, việc sao chép phần tệp sẽ hoạt động ngay lập tức (không cần đổi tên "thêm" thành "thay thế" khi mở rộng một tệp).  




To make it clear, let's take the Fruity example. Here its css file section:
Để làm rõ điều này, hãy lấy ví dụ về Fruity. Đây là phần tệp css của nó:




<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
        <css>
<css>  
            <add>css/variations/sea_green.css</add>
<add> css/biến thể/sea_green.css</add>  
            <replace>css/animate.css</replace>
<replace> css/animate.css</replace>  
            <replace>css/theme.css</replace>
<replace> css/theme.css</replace>  
            <replace>css/custom.css</replace>
<replace> css/custom.css</replace>  
        </css>
</css>  
</syntaxhighlight>
</syntaxhighlight>




If you look to the custom.css file in fruity, it is exactly the same as the vanilla one. We could delete the custom.css file inside fruity, the one of vanilla would loaded. We could remove the statement <replace>custom.css</replace> from the Fruity manifest, the statement from vanilla will be used, and the vanilla custom.css would be loaded.  
Nếu bạn nhìn vào tệp custom.css ở dạng trái cây, nó hoàn toàn giống với tệp vani. Chúng ta có thể xóa tệp custom.css bên trong Fruity, tệp vanilla sẽ được tải. Chúng ta có thể xóa câu lệnh<replace> tùy chỉnh.css</replace> từ bảng kê khai Fruity, câu lệnh từ vanilla sẽ được sử dụng và vanilla custom.css sẽ được tải.  




So why do we use the statement  <replace>custom.css</replace> inside the fruity manifest? The answer is easy: because we want the end user to be able to extend the fruity theme, to modify the file in his local theme, and to load this modified file from his inherited theme. To understand, just extend fruity and have a look to the extended theme. THe extended theme doesn't even have the file custom.css. So the one of fruity will be used. But: if the user create this file in the extended theme (by clicking on "extend" in the theme editor), then this file will be loaded from his theme.  
Vậy tại sao chúng ta lại sử dụng câu lệnh<replace> tùy chỉnh.css</replace> bên trong bảng kê khai trái cây? Câu trả lời rất dễ: bởi vì chúng tôi muốn người dùng cuối có thể mở rộng chủ đề trái cây, sửa đổi tệp trong chủ đề cục bộ của mình và tải tệp đã sửa đổi này từ chủ đề kế thừa của anh ấy. Để hiểu, chỉ cần mở rộng kết quả và xem chủ đề mở rộng. Chủ đề mở rộng thậm chí không có tệp custom.css. Vì vậy, một trong những trái cây sẽ được sử dụng. Nhưng: nếu người dùng tạo tệp này trong chủ đề mở rộng (bằng cách nhấp vào "mở rộng" trong trình chỉnh sửa chủ đề), thì tệp này sẽ được tải từ chủ đề của họ.  




So in general:  
Vì vậy, nói chung:  
if you create a theme from scratch not extending any theme, just use the add statement to add your css/js files. Easy peasy.
nếu bạn tạo một chủ đề từ đầu mà không mở rộng bất kỳ chủ đề nào, chỉ cần sử dụng câu lệnh add để thêm các tệp css/js của bạn. Thật dễ dàng.
if you create a theme extending another theme, and you don't want the users to be able to extends the css/js file from the mother theme: don't use the add statement in your manifest. THe files will still be loaded from the mother theme configuration.
nếu bạn tạo một chủ đề mở rộng một chủ đề khác và bạn không muốn người dùng có thể mở rộng tệp css/js từ chủ đề mẹ: đừng sử dụng câu lệnh thêm trong bảng kê khai của bạn. Các tập tin sẽ vẫn được tải từ cấu hình chủ đề mẹ.
if you create a theme extending another theme, and you want to replace a file from the mother theme: use the replace keyword (the add keyword will have the same result)
nếu bạn tạo một chủ đề mở rộng một chủ đề khác và bạn muốn thay thế một tập tin từ chủ đề mẹ: hãy sử dụng từ khóa thay thế (từ khóa thêm sẽ có kết quả tương tự)  
if you create a theme extending another theme, if you don't replace a given file from css/js, but you want the users to be able to extend this file: then use the "replace" statement in your manifest for this file. Even if you don't replace the file, by using the keyword replace in the manifest: you allow the user to do it if he wants to do it.   
nếu bạn tạo một chủ đề mở rộng một chủ đề khác, nếu bạn không thay thế một tệp nhất định từ css/js, nhưng bạn muốn người dùng có thể mở rộng tệp này: thì hãy sử dụng câu lệnh "thay thế" trong bảng kê khai của bạn cho tập tin này. Ngay cả khi bạn không thay thế tệp, bằng cách sử dụng từ khóa thay thế trong bảng kê khai: bạn cho phép người dùng làm điều đó nếu họ muốn làm điều đó.   




Only this very last case needs a bit of mental gymnastic ot understand, all the other cases are trivial.
Chỉ có trường hợp cuối cùng này cần phải rèn luyện trí óc một chút mới hiểu được, các trường hợp khác đều tầm thường.






<div class="simplebox">[[File:help.png]]  
<div class="simplebox">[[File:help.png]]  
You can also register CSS and JS files directly from the twig code. Those files will be loaded only when the twig file is asked. If you want the users to be able to inherit those JS/Css files from the theme editor, remember to use the functions {{registerTemplateCssFile('my_style.css')}} and {{registerTemplateScript('my_script.js')}}. If you don't use those functions, your theme may work, but inheritance on it will be broken. It is the same logic as the {{image('my_picture.jpg')}} function
Bạn cũng có thể đăng ký các tệp CSS và JS trực tiếp từ mã cành. Những tệp đó sẽ chỉ được tải khi tệp cành cây được yêu cầu. Nếu bạn muốn người dùng có thể kế thừa các tệp JS/Css đó từ trình chỉnh sửa chủ đề, hãy nhớ sử dụng các hàm {{registerTemplateCssFile('my_style.css')}} và {{registerTemplateScript('my_script.js')}} . Nếu bạn không sử dụng các chức năng đó, chủ đề của bạn có thể hoạt động nhưng tính kế thừa trên đó sẽ bị hỏng. Nó có cùng logic với hàm {{image('my_picture.jpg')}}
</div>
</div>


===== The remove keyword  =====
===== Từ khóa xóa =====


The remove keyword is available only since 3.14. With this one, you can remove any css/file from any package, even the core ones. It is used in Material Premium Theme to remove the Awseome Bootstrap Checkbox's files:
Từ khóa xóa chỉ khả dụng kể từ 3.14. Với cái này, bạn có thể xóa bất kỳ css/tệp nào khỏi bất kỳ gói nào, ngay cả những gói cốt lõi. Nó được sử dụng trong Chủ đề Material Premium để xóa các tệp của Hộp kiểm Awseome Bootstrap:


<syntaxhighlight lang="xml">
<syntaxhighlight lang="xml">
<remove>awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>
<remove> awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove>  
</syntaxhighlight>
</syntaxhighlight>


so you should use the very same syntax as the package's file (eg: "awesome-bootstrap-checkbox.css" alone without it's folder path would not work). You'll find the complete list of core packages and their files in /application/config/packages.php and config/third_party.php. For example, for awesome-bootstrap-checkbox.css:
vì vậy bạn nên sử dụng cú pháp giống như tệp của gói (ví dụ: chỉ "awesome-bootstrap-checkbox.css" nếu không có đường dẫn thư mục sẽ không hoạt động). Bạn sẽ tìm thấy danh sách đầy đủ các gói cốt lõi và tệp của chúng trong /application/config/packages.php và config/third_party.php. Ví dụ: đối với awesome-bootstrap-checkbox.css:
https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56
https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/config/packages.php#L54-L56


<syntaxhighlight lang="php">
<syntaxhighlight lang="php">
        'css'=> array(
'css'=> array(
            'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
'awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css',
        ),
),
</syntaxhighlight>
</syntaxhighlight>




Another way to find the exact name to use in the remove tag is to turn asset manager on (turning debug mode off or setting 'use_asset_manager'=>true in the config). Then, the path to use will be the one just after the random directory in the tmp directory. For example, for awesome-bootstrap-checkbox.css:
Một cách khác để tìm tên chính xác để sử dụng trong thẻ xóa là bật trình quản lý nội dung (tắt chế độ gỡ lỗi hoặc đặt 'use_asset_manager'=>true trong cấu hình). Sau đó, đường dẫn sử dụng sẽ là đường dẫn ngay sau thư mục ngẫu nhiên trong thư mục tmp. Ví dụ: đối với awesome-bootstrap-checkbox.css:
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">  
<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />
<link rel="stylesheet" type="text/css" href="/tmp/assets/cbc4e3cb/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" />  
</syntaxhighlight>
</syntaxhighlight>


Files you should not remove:
Các tập tin bạn không nên xóa:


'''jquery-3.1.1.min.js''' : needed
'''jquery-3.1.1.min.js''' : cần thiết


'''jquery-migrate-3.0.0.min.js''' : needed
'''jquery-migrate-3.0.0.min.js''' : cần thiết


'''survey.js''' : needed
'''survey.js''' : cần thiết


'''moment-with-locales.min.js''' : needed for date question type (and some other i think)
'''moment-with-locales.min.js''' : cần thiết cho loại câu hỏi ngày (và một số câu hỏi khác tôi nghĩ)


'''em_javascript.js''' : needed for all ExpressionScript javascript
'''em_javascript.js''' : cần thiết cho tất cả javascript của ExpressionScript


==== The options section ====
==== Phần tùy chọn ====


This section is relative to the option of your theme. It will be used to feed the filed "options" of the table template_configuration as a json array.
Phần này liên quan đến tùy chọn chủ đề của bạn. Nó sẽ được sử dụng để cung cấp các "tùy chọn" đã được phân loại của bảng template_configuration dưới dạng mảng json.


=== Further information ===
=== Thông tin thêm ===


* [[Theme:Available function]]
* [[Chủ đề:Chức năng có sẵn]]


== Some notes ==
== Một số lưu ý ==


'''NOTE''': if you edit the XML file of a theme, you must uninstall and reinstall the theme so it's taken into account.  
'''LƯU Ý''': nếu bạn chỉnh sửa tệp XML của một chủ đề, bạn phải gỡ cài đặt và cài đặt lại chủ đề đó để nó được tính đến.  


'''NOTE''': to avoid that, you can force the use to the XML rather than DB. In config.php turn debug mode on and uncommment:
'''LƯU Ý''': để tránh điều đó, bạn có thể buộc sử dụng XML thay vì DB. Trong config.php, bật chế độ gỡ lỗi và bỏ ghi chú:


'force_xmlsettings_for_survey_rendering' => true, // Uncomment if you want to force the use of the XML file rather than DB (for easy theme development)  
'force_xmlsettings_for_survey_rendering' => true, // Bỏ ghi chú nếu bạn muốn ép buộc sử dụng tệp XML thay vì DB (để dễ dàng phát triển chủ đề)  


Becareful: everything will be loaded from the XML (included options, etc)
Hãy cẩn thận: mọi thứ sẽ được tải từ XML (các tùy chọn được bao gồm, v.v.)




'''NOTE''': if you manually edit the CSS/JS files (without using the Theme Editor), and if debug mode is off, you can now force the asset to be flushed. In "Global Settings", "General tab", click the button "Clear assets cache".
'''LƯU Ý''': nếu bạn chỉnh sửa thủ công các tệp CSS/JS (không sử dụng Trình chỉnh sửa chủ đề) và nếu chế độ gỡ lỗi bị tắt, giờ đây bạn có thể buộc xóa nội dung. Trong "Cài đặt chung", "tab Chung", nhấp vào nút "Xóa bộ đệm nội dung".


'''NOTE''': if you remove the section
'''LƯU Ý''': nếu bạn xóa phần

Latest revision as of 19:40, 15 January 2024

Other languages:

Giới thiệu

Xin lưu ý: trong các phiên bản trước của LimeSurvey, các tệp xác định giao diện của khảo sát, cách trình bày khảo sát về màu sắc, phông chữ, bố cục và (một số) hành vi, được gọi là "mẫu". Do những hiểu biết mới, giờ đây đây được gọi là "chủ đề", trong khi mẫu được dành riêng cho các khảo sát mẫu.

Trên trang này bạn sẽ học cách:

  • Sử dụng hệ thống chủ đề mới của LimeSurvey 3.0.
  • Sử dụng tính kế thừa để quản lý chủ đề của riêng bạn.
  • Thêm ảnh vào chủ đề của bạn
  • Quản lý các tùy chọn chủ đề cho khảo sát và nhóm khảo sát của bạn

LimeSurvey 3 giới thiệu một hệ thống công cụ chủ đề hoàn toàn mới, dựa trên Twig 1.29, Bootstrap và cho phép kế thừa chủ đề và các tùy chọn chủ đề. Nó loại bỏ hoàn toàn hệ thống từ khóa thay thế cũ. Vì vậy, bây giờ, 100% HTML giao diện người dùng có thể được tùy chỉnh. Ví dụ: trong hệ thống chủ đề cũ, có từ khóa {ASSESSMENTS} được thay thế bằng HTML đánh giá tại thời điểm thực thi. Người thiết kế chủ đề không có cách nào để tùy chỉnh HTML này (ngoài việc sử dụng JavaScript). Bây giờ, có một tệp tên là đánh giá.twig chứa logic (được viết bằng Twig) để tạo HTML này. Trong các trang này, chúng tôi sẽ cung cấp cho bạn một số giải thích về cách sử dụng công cụ chủ đề mới này.

Ở đây chúng tôi sẽ không nêu chi tiết cách thức hoạt động của Twig. Đó là một loại PHP rất đơn giản, cung cấp mức độ bảo mật cao nhờ hệ thống “sandbox” (chúng ta sẽ thấy điều đó chi tiết hơn trong phần về mã Theme Engine Core). Nếu bạn đã biết PHP thì sẽ cực kỳ dễ dàng để bạn thành thạo. Nếu bạn không biết PHP, nó vẫn khá dễ học. Vui lòng xem tài liệu Twig 1.X: https://twig.symfony.com/

Chỉnh sửa bằng Giao diện quản trị

danh sách chủ đề

Trên bảng điều khiển quản trị hiện có một hộp để truy cập danh sách chủ đề:

Danh sách chủ đề sau khi cài đặt RC3 mới


Danh sách được chia thành 5 cột:

  • bản xem trước của chủ đề: nó chỉ là một tệp hình ảnh có tên “preview.png” ở thư mục gốc của chủ đề
  • “tiêu đề” của chủ đề như được chỉ định trong tệp kê khai (config.xml trong thư mục gốc của chủ đề)
  • mô tả về chủ đề: một chuỗi được đặt trong tệp kê khai của nó
  • loại chủ đề: Chủ đề cốt lõi (được cung cấp cùng với LimeSurvey), Chủ đề người dùng (được thêm trong thư mục tải lên), chủ đề XML (không được tải trong cơ sở dữ liệu)
  • Mở rộng: nếu chủ đề mở rộng một chủ đề khác, tên của nó sẽ được chỉ định ở đây
  • Một số nút hành động:
    • Cài đặt: it sẽ tải tệp kê khai của một chủ đề để thêm nó vào cơ sở dữ liệu và cung cấp nó để lựa chọn ở cấp khảo sát
    • Gỡ cài đặt: nó sẽ xóa các mục cấu hình của một chủ đề trong cơ sở dữ liệu
    • Trình chỉnh sửa chủ đề: nó sẽ chuyển hướng bạn đến trình chỉnh sửa chủ đề
    • Tùy chọn chủ đề: nó sẽ dẫn bạn cấu hình chung của các tùy chọn chủ đề

Trình chỉnh sửa chủ đề

Tài liệu này giả sử bạn đã biết cách sử dụng Theme Editor trong phiên bản LS trước.


Trình chỉnh sửa chủ đề đã được giữ nguyên nhất có thể so với bản gốc. Vì vậy, khi bạn mở Chủ đề cốt lõi, bạn không thể chỉnh sửa nó. Nhưng bây giờ, thay vì nút “sao chép”, bạn có “nút mở rộng”.

Bây giờ bạn mở rộng chủ đề
Bây giờ bạn mở rộng chủ đề

Tổng quan nhanh về khái niệm kế thừa chủ đề

Trong LS3, một chủ đề bây giờ có thể kế thừa từ một chủ đề khác, nó có thể “mở rộng” một chủ đề khác. Điều này có nghĩa là thư mục chủ đề thực tế sẽ trống, nó sẽ chỉ chứa các tệp (chế độ xem, biểu định kiểu, tập lệnh, tài nguyên, v.v.) khác với thư mục gốc. Làm như vậy, bạn sẽ dễ dàng tạo một nhóm chủ đề cho những người dùng khác nhau của mình mà không cần phải duy trì nhiều chủ đề khác nhau. Ví dụ: bạn có thể có chủ đề tự tạo của riêng mình và sau đó là một phiên bản dành cho một công ty (với logo, phong cách của nó, có thể là một liên kết đến trang web của nó ở chân trang, v.v.), một phiên bản khác cho một công ty khác, v.v. bạn cập nhật CSS hoặc bố cục chung của chủ đề tùy chỉnh của mình, tất cả các chủ đề kế thừa từ đó sẽ được cập nhật tự động. Lưu ý rằng tính kế thừa là đệ quy: một chủ đề có thể mở rộng một chủ đề mở rộng một chủ đề khác, v.v.

Điều đó cũng có nghĩa là nếu bạn mở rộng một trong những chủ đề cốt lõi của LimeSurvey, bạn vẫn sẽ được hưởng lợi từ các bản cập nhật của nó.

Tính mới trong giao diện người dùng

Để mở rộng chủ đề Đơn sắc của LimeSurvey, hãy chuyển đến danh sách Chủ đề, nhấp vào nút “Trình chỉnh sửa chủ đề” của chủ đề Đơn sắc. Sau đó, nhấp vào “mở rộng” và xác thực tên mới “extends_monochrome”.

Nếu bây giờ bạn vào thư mục tải lên (với ứng dụng khách file/ftp của bạn), bạn sẽ thấy rằng một thư mục mới đã được tạo: upload/themes/extends_monochrome Nó chứa một tệp XML và các thư mục , nhưng hầu hết các thư mục đều trống. Nó không có chế độ xem, CSS hay JS. Tuy nhiên, bạn vẫn có thể chọn chủ đề này làm chủ đề bình thường từ cuộc khảo sát và nó sẽ trông giống hệt chủ đề đơn sắc.

center|đường cơ sở|biên giới|Cây chủ đề (thư mục và tệp) ngay sau khi được tạo. Nó gần như trống rỗng

Các tài nguyên (jpg, png, v.v.) từ chủ đề gốc được sao chép khi mở rộng chủ đề. Điều này là do nếu bạn sao chép tệp CSS từ chủ đề gốc cục bộ và nếu nó đề cập đến các tệp đó (như trong câu lệnh hình nền), thì nó sẽ cần tìm những ảnh đó trong đường dẫn chủ đề hiện tại.

Trình chỉnh sửa chủ đề cho chủ đềext_monochrome trông như thế này:

Chỉnh sửa chủ đềext_monochrome
Chỉnh sửa chủ đềext_monochrome



Không có sự khác biệt lớn với trình chỉnh sửa chủ đề cũ. Hãy liệt kê những cái chính:

  • Từ khóa inherit trong danh sách file. Điều đó có nghĩa là tệp không có trong thư mục chủ đề và tệp từ chủ đề gốc sẽ được sử dụng.


  • Trình chỉnh sửa chính ( ACE editor ) hiển thị nội dung của tệp đã chọn. Các tệp không chỉ chứa HTML, CSS hoặc JS mà còn chứa các câu lệnh Twig. Các câu lệnh Twig đó cho chúng ta khả năng đẩy một số logic vào các chế độ xem chủ đề vốn nằm sâu trong lõi trước đó và giờ đây có thể được tùy chỉnh.
Some cành mã dành cho Danh sách khảo sát
Some cành mã dành cho Danh sách khảo sát


  • Đây là lý do tại sao hiện tại bạn có nhiều loại màn hình hơn trong bộ chọn thả xuống của menu trên cùng. Bạn sẽ nhận thấy các trang như 'Danh sách khảo sát', 'Tải', 'Lưu', 'Lỗi', 'Đăng ký', 'Đánh giá', 'In câu trả lời' không có sẵn trước đây hoặc bạn thực sự không thể được tùy chỉnh trước.
Bây giờ, bạn có thể tùy chỉnh tất cả các màn hình
Bây giờ, bạn có thể tùy chỉnh tất cả các màn hình


  • Liên kết 'mẹo' ở cuối danh sách tệp cung cấp cho bạn cách Twig để thêm ảnh vào HTML của bạn


  • Nút 'lưu thay đổi' trở thành nút Sao chép vào chủ đề cục bộ và lưu thay đổi

Ví dụ nhanh: thêm ảnh

Nút Sao chép vào chủ đề cục bộ và lưu thay đổi' sẽ thực hiện chính xác những gì nó nói: nếu bạn chỉnh sửa bất cứ thứ gì bên trong tệp và sau đó nhấp vào nút đó, nó sẽ sao chép tệp vào chủ đề bạn đang chỉnh sửa và lưu các thay đổi của bạn.
Ví dụ: nhấp vào tệp bố cục_global.twig, sau đó ngay trước nội dung khối ( {% block content %}) thêm văn bản “TEST” và nhấp vào nút. Bạn có thể thấy nhãn của tệp đã thay đổi từ “inherited” thành “local” và bây giờ nút này là một nút đơn giản lưu thay đổi.

ngay sau khi nhấp vào nút
ngay sau khi nhấp vào nút


Nếu bạn mở file explorer và vào thư mục upload/themes/extends_monochrome/views/, bạn sẽ thấy rằng nó chỉ chứa một tệp duy nhất, tệp bố cục_global.twig và có chuỗi “TEST” ở đó.!N !center|Bây giờ tệp đã có trong chủ đề của bạn

Bây giờ thay vì thêm một văn bản ngẫu nhiên, chúng ta sẽ thêm một hình ảnh. Nếu bạn nhấp vào liên kết mẹo, nó sẽ cho bạn biết:
Để sử dụng ảnh trong tệp .twig: {{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass" }) }}
Nếu bạn đã đọc tài liệu về Twig (và lẽ ra bạn nên làm như vậy vào thời điểm này), bạn sẽ biết rằng Template:Function( ) sẽ lặp lại kết quả của một chức năng trên màn hình. Ở đây, hàm là hình ảnh().

Nếu bạn tò mò muốn biết nó làm gì, bạn có thể tìm thấy nó trong mã ở đây (phiên bản RC3): Hàm /application/core/LS_Twig_Extension.php#L219-L237 image() trong RC3

Nếu bạn không hiểu mã: đừng lo lắng, bạn không cần biết nó hoạt động như thế nào, nhưng tại sao phải sử dụng nó và cách sử dụng nó.


Bạn nên sử dụng hàm image() vì hai lý do:

  • Hàm image lặp qua chủ đề để tìm hình ảnh. Nếu chủ đề bạn đang làm việc được mở rộng sang một chủ đề khác và nếu bạn sao chép tệp vào nơi bạn đã chèn ảnh cục bộ nhưng ảnh đó không được sao chép trong chủ đề cục bộ thì nó sẽ lặp qua cây kế thừa chủ đề để tìm vị trí bức ảnh đó là.
  • Nó sẽ sử dụng trình quản lý tài sản, vì vậy nó sẽ cải thiện hiệu suất chủ đề của bạn. Xem tài liệu Trình quản lý tài sản Yii để biết thêm thông tin về nó: http://www.yiiframework.com/wiki/148/under Hiểu-assets/

Vì vậy, để thêm ảnh vào chủ đề của bạn:

  • chỉ cần tải ảnh lên như bình thường bằng trình tải tệp lên ở bên phải rồi thêm ảnh vào nơi bạn muốn trong bất kỳ tệp ghép nào:

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

  • Nếu bạn muốn thêm văn bản thay thế cho ảnh của mình (dành cho trình đọc màn hình và xác thực HTML), hãy thêm:

Template:Image('./files/myfile.png'), ''' 'my alternative text' ' ''

  • Nếu bạn muốn thêm thuộc tính lớp và thêm id vào thuộc tính đó:

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

Một số nội dung trong danh sách VIỆC CẦN LÀM của chúng tôi

  • Cung cấp cho người dùng khả năng tải lên tệp xem trước tùy chỉnh từ chính trình chỉnh sửa
  • Thêm một nút để xóa tệp cục bộ và quay lại câu lệnh được kế thừa
  • Chỉ sao chép hình ảnh được sử dụng trong các tệp CSS (bằng cách liệt kê chúng trong tệp kê khai dưới dạng tệp cần sao chép)
  • Nhắc nhở chủ đề hiện tại mở rộng (nếu có)

Tùy chọn chủ đề

Một điểm mới khác của LS3 là trang tùy chọn chủ đề. Như chúng ta sẽ thấy sau, người tạo chủ đề có thể tạo các tùy chọn của riêng họ và thậm chí cả trang tùy chọn quản trị viên của riêng họ. Ở đây, chúng ta sẽ xem nhanh cách hoạt động của trang tùy chọn của Chủ đề cốt lõi. Để truy cập các tùy chọn chủ đề ở cấp độ toàn cầu: hãy nhấp vào “tùy chọn chủ đề” trong danh sách chủ đề

Tùy chọn nâng cao

QS:Trình chỉnh sửa chủ đề - tùy chọn nâng cao

Tùy chọn đơn giản

Trang tùy chọn Đơn giản xuất phát từ chính Mẫu. Nó được tạo thông qua một tệp cành và một số javascript bên trong thư mục /options của chủ đề: https://github.com/LimeSurvey/LimeSurvey/tree/develop/templates/default/options (Liên kết bị hỏng)

Trang này có thể khác hoàn toàn giữa các chủ đề và các nhà cung cấp chủ đề được khuyến khích tạo ra giao diện của riêng họ.



Trang tùy chọn đơn giản chỉ cần điền vào các thông tin đầu vào ở biểu mẫu nâng cao. Bạn có thể thấy nó bằng cách bật hoặc tắt một cài đặt trong trang đơn giản và xem cách sửa đổi dữ liệu đầu vào liên quan ở dạng nâng cao cho phù hợp. Ví dụ: trong các tùy chọn đơn giản của Mẫu mặc định, nếu bạn thay đổi chủ đề Bootswatch thành “Darkly” rồi nhấp vào tab dành cho các tùy chọn nâng cao (ngay cả khi không lưu), bạn sẽ thấy trường “Cssframework Css” đã thay đổi từ

{"thay thế": "css/bootstrap.css","css/flatly.css"}
đến
{"thay thế": "css/bootstrap.css","css/darkly.css"}
Dưới đây là các tùy chọn đơn giản khác nhau cho các chủ đề cốt lõi:

  • Ajax mode: Trang tiếp theo nên được tải qua ajax (nhanh hơn) hay qua tải lại trang (tốt hơn cho mục đích gỡ lỗi)!N !*Hình nền: nếu được đặt thành Có, hình ảnh có tên sample.png sẽ được tải (sẽ được thay thế bằng bộ chọn tệp trong Master)
  • Box container: if được đặt thành Không, các câu hỏi sẽ không được chứa trong một hộp (vì vậy bạn có thể sử dụng các mảng lớn hơn chiều rộng màn hình)
  • Brandlogo: nếu được đặt thành không, tên của cuộc khảo sát sẽ là được hiển thị ở thanh trên cùng, nếu không, bạn có thể chọn một trong các ảnh bên trong thư mục tệp để sử dụng làm ảnh biểu tượng.
  • Animate body: nếu được đặt thành có, bạn có thể chọn một trong các ảnh động để áp dụng khi nội dung khảo sát được tải
  • Hoạt hình câu hỏi: tương tự với các câu hỏi
  • Hoạt hình cảnh báo: tương tự với các cảnh báo
  • Bootstrap theme: tại đây, bạn có thể chọn chủ đề Bootstrap để tải. Chúng đến từ Bootswatch https://bootswatch.com/3/


Thư viện được sử dụng cho hoạt ảnh là animate.css: https://daneden.github.io/animate.css/ Tất nhiên, nhà cung cấp chủ đề có thể thêm thư viện hoạt ảnh của riêng mình hoặc không có thư viện hoạt ảnh nào cả.

Các chủ đề đơn sắc sử dụng cùng một chủ đề màu bootstrap như giao diện người dùng quản trị. Họ không sử dụng hệ thống thay thế khung css mà chỉ cần thêm tệp CSS. Vì vậy, nó minh họa một cách khác để xử lý các chủ đề tùy chỉnh cho nhà cung cấp chủ đề.

Hệ thống kế thừa

Trong phần trước, chúng ta đã thấy rằng một chủ đề có thể mở rộng một chủ đề khác. Cấu hình chủ đề cũng có thể kế thừa từ cấu hình chủ đề khác. Điều đó có nghĩa là đối với một chủ đề nhất định, bạn có thể có cấu hình tại

  • cấp độ toàn cầu (cấp độ chúng tôi vừa thấy có thể truy cập được từ danh sách chủ đề)
  • ở cấp độ nhóm khảo sát
  • cấp độ cuối cùng ở cấp độ khảo sát.

Mỗi tham số ở một cấp độ nhất định có thể kế thừa từ cấp trên: kế thừa nhóm khảo sát. Đầu tiên chúng ta hãy xem cấp độ nhóm khảo sát.

Ở cấp độ nhóm khảo sát

Thật vậy, một trong những điểm mới tuyệt vời khác của LS3 là hệ thống nhóm khảo sát. Bây giờ bạn có thể tạo các nhóm khác nhau để tổ chức các cuộc khảo sát của mình. Để truy cập nó, hãy chuyển đến danh sách khảo sát rồi nhấp vào tab nhóm khảo sát:

tab nhóm khảo sát


Trong danh sách này, bạn có hai nút hành động. Nếu nhóm trống, bạn có thể xóa nó. Nếu không, bạn luôn có thể chỉnh sửa nó. Bằng cách nhấp vào nút chỉnh sửa, bạn sẽ đến trang cấu hình Nhóm khảo sát:

Chỉnh sửa nhóm khảo sát mặc định


Tab thứ ba của trang này có tên là “Tùy chọn mẫu cho nhóm khảo sát này”. Nếu bạn nhấp vào nó, bạn sẽ thấy danh sách các chủ đề giống như trong danh sách chủ đề, ngoại trừ việc ở đây chỉ hiển thị nút tùy chọn (chỉ có thể truy cập trình chỉnh sửa chủ đề từ danh sách chính).
Bây giờ, nếu bạn nhấp vào tùy chọn cho Mẫu mặc định, bạn sẽ thấy điều này:

File:Option group kế thừa.png
Tại Nhóm khảo sát, Tùy chọn mẫu được kế thừa theo mặc định


  • Kế thừa mọi thứ có nghĩa là tất cả cấu hình sẽ được kế thừa từ cấp cấu hình Toàn cầu.
  • Nếu bạn vào trang tùy chọn nâng cao, bạn sẽ thấy tất cả các trường được đặt thành kế thừa.
  • Nếu bạn nhấp vào "không" cho "Kế thừa mọi thứ" trong các tùy chọn đơn giản, bạn sẽ lại thấy một trang rất giống với trang tùy chọn chung. Sự khác biệt duy nhất là đối với mỗi trường, bạn có thể đặt thành có, không hoặc kế thừa; và mỗi bộ chọn thả xuống có giá trị kế thừa .
Mỗi cài đặt có thể có một giá trị kế thừa
Một nhóm khảo sát có thể là con của một nhóm khác. Trong trường hợp này, nó sẽ kế thừa từ cha mẹ của nó.

Ở cấp độ khảo sát

Khi chỉnh sửa khảo sát, ở menu thanh bên trái, bạn sẽ thấy mục mới “Tùy chọn chủ đề”. Nó sẽ dẫn bạn đến trang tùy chọn của Chủ đề được chọn cho khảo sát hiện tại. Bạn sẽ tìm thấy hệ thống kế thừa giống như trong nhóm khảo sát, nhưng lần này, kế thừa có nghĩa là cài đặt sẽ được kế thừa từ Nhóm khảo sát của khảo sát.

File:Options Survey.png
Tùy chọn chủ đề ở cấp độ khảo sát

Ví dụ về trường hợp sử dụng

Giả sử bạn đang sử dụng một chủ đề duy nhất cho các công ty khác nhau (A và B). Bạn đặt các tùy chọn yêu thích của mình ở cấp độ toàn cầu (ví dụ: bật ajax, tạo hoạt ảnh cho nội dung có trang trình bày, cảnh báo bằng xung). Sau đó, bạn tạo một nhóm khảo sát cho mỗi công ty: một nhóm khảo sát cho công ty A sẽ tổ chức tất cả các cuộc khảo sát cho công ty này và một nhóm khảo sát cho công ty B sẽ tổ chức tất cả các cuộc khảo sát cho công ty B. Ở cấp độ này, bạn sẽ đặt chỉ có biểu tượng và nền và bạn sẽ cho phép các tùy chọn khác kế thừa. Vì vậy, tất cả các cuộc khảo sát trong nhóm A sẽ sử dụng logo của công ty A và tất cả các cuộc khảo sát từ nhóm B sẽ sử dụng logo của công ty B. Đối với một trong các cuộc khảo sát của công ty A, bạn có thể sử dụng một nền tảng khác liên quan đến chủ đề của khảo sát: bạn chỉ cần thay đổi nền trong các tùy chọn ở cấp độ khảo sát. Nếu ai đó ở công ty B nói với bạn rằng cảnh báo xung quá mạnh và anh ta muốn thứ gì đó mượt mà hơn như mờ dần, bạn chỉ cần thay đổi hoạt ảnh cảnh báo ở cấp Nhóm khảo sát B và tất cả các cuộc khảo sát của nhóm này giờ đây sẽ sử dụng hoạt ảnh này. Nếu công ty A thay đổi logo, bạn có thể thay đổi logo ở cấp Nhóm khảo sát A và tất cả các khảo sát của nhóm này sẽ sử dụng logo mới.

Những ví dụ đó dựa trên các tùy chọn hiện tại của chủ đề cốt lõi. Nhưng tất nhiên, nếu bạn là nhà cung cấp chủ đề hoặc nếu bạn có thể viết kịch bản một chút bằng cành cây, bạn có thể thêm các tùy chọn của riêng mình. Ví dụ: bạn có thể thêm tùy chọn “chân trang thông tin”, nơi bạn có thể thêm dữ liệu như trang web công ty hoặc số điện thoại để được trợ giúp. Sau đó, nếu công ty A có các phòng ban khác nhau, với số điện thoại khác nhau, bạn chỉ cần tạo một nhóm con cho mỗi phòng ban trong Nhóm khảo sát A. Mỗi nhóm con sẽ có số điện thoại riêng trong các tùy chọn này.

Câu hỏi thường gặp về tùy chỉnh chủ đề

Bạn sẽ tìm thấy ở đây một số câu trả lời cho các câu hỏi đã được hỏi trong diễn đàn và điều đó có thể giúp bạn tùy chỉnh chủ đề của mình.

Tùy chỉnh CSS/JS: giải quyết với người quản lý tài sản ("tại sao những thay đổi của tôi không được áp dụng?")


Nếu bạn đang cố cập nhật CSS/JS của một chủ đề bằng cách chỉnh sửa trực tiếp mã bằng trình chỉnh sửa yêu thích của mình, bạn có thể ngạc nhiên khi những thay đổi của mình không được áp dụng.


Kể từ phiên bản 2.50, LS sử dụng trình quản lý tài sản Yii: Hiểu-assets/ Yii Tài liệu về Tài sản

Nó di chuyển các tệp CSS/JS của một chủ đề sang thư mục con tmp/ với một chuỗi ngẫu nhiên (ví dụ: "tmp/1ef64ml/"). Vì vậy, nếu bạn thực hiện bất kỳ thay đổi nào đối với tệp css/js và thông báo cho người quản lý nội dung, các tệp sẽ được sao chép sang thư mục con mới có tên mới để bộ đệm của trình duyệt người dùng được cập nhật và họ thấy css/js mới . Nếu không, họ sẽ phải xóa bộ nhớ đệm của trình duyệt.


Ở đây các liên kết CSS trong tiêu đề khi trình quản lý tài sản được bật:

Như bạn có thể thấy, tất cả chúng đều đề cập đến các thư mục con tmp/.


Ở đây các liên kết CSS trong tiêu đề khi trình quản lý nội dung tắt:

Như bạn có thể thấy, chúng trỏ đến các tệp thực của chủ đề.


Tất nhiên, nếu Trình quản lý tài sản không biết bạn đã thay đổi tệp thì tệp cũ từ thư mục tmp/cũ vẫn không thay đổi và những thay đổi của bạn sẽ không bao giờ được áp dụng..

Vì vậy, khi bạn chỉnh sửa CSS/JS của một chủ đề, bạn có nhiều khả năng khác nhau:

  • Bạn có thể sử dụng LS Theme Editor: nó xử lý công việc quản lý tài sản và bạn không cần phải làm vậy lo lắng về bất cứ điều gì
  • Bạn có thể bật chế độ gỡ lỗi: nó sẽ tắt trình quản lý nội dung, do đó, các tệp css/js thực sự trong chủ đề của bạn sẽ được gọi (nhưng sau đó, bạn phải làm mới bộ nhớ đệm của trình duyệt ở mỗi lần tải)
  • Bạn có thể làm mới bộ đệm nội dung: từ Cài đặt chung -> Chung -> Xóa bộ đệm nội dung

Sử dụng trình chỉnh sửa chủ đề để chỉnh sửa CSS tùy chỉnh cho đến nay là giải pháp tốt nhất.


Sử dụng trình chỉnh sửa chủ đề sẽ giúp bạn hiểu cấu trúc của công cụ chủ đề mới. Ngoài ra, nếu việc tùy chỉnh của bạn có tính chất trái cây, hãy cẩn thận với đặc tính CSS: hầu hết các định nghĩa đều sử dụng bộ chọn ".fruity" (một trong các lớp của phần tử cơ thể)

Thêm phông chữ tùy chỉnh vào chủ đề của tôi

Cách dễ dàng: sử dụng Google Font CDN

Bootswatch Survey Theme sử dụng Google Font CDN. Hãy cùng xem nó hoạt động như thế nào nhé: 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");

Sau đó, phông chữ Lato được sử dụng thông qua các quy tắc CSS: https://github.com/thomaspark/bootswatch/blob/master/dist/flatly/bootstrap.css#L72 

 
cơ thể {
 ...
 Họ phông chữ: "Lato";
 ...
}

Bạn có thể sử dụng bất kỳ phông chữ Google nào theo cách đó trong chủ đề tùy chỉnh của mình. Tất nhiên, bạn nên xóa bộ chọn phông chữ khỏi các tùy chọn của chủ đề. Xóa những dòng đó trong options.twig: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.twig#L209-L230

Sử dụng phông chữ cục bộ

Tất nhiên, bạn cũng có thể tải xuống các tệp phông chữ và sử dụng chúng từ máy chủ cục bộ thay vì từ Google CDN (tốt hơn cho quyền riêng tư). Để có ví dụ về cách thực hiện, đây là phiên bản phông chữ noto địa phương của chúng tôi: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/assets/fonts/noto.css 

 
@font-face {
 họ phông chữ: 'Noto Sans';
 cỡ chữ: 300;
 kiểu phông chữ: bình thường;
 src: url('./font-src/Noto/NotoSans-Regular.ttf');
}
...

Bạn có thể sử dụng định nghĩa tương tự trong tệp css chủ đề của mình, sau đó bằng cách sao chép tệp NotoSans-Regular.ttf trong thư mục css/font-src/ chủ đề của bạn.

Sau đó, áp dụng phông chữ đó cho nội dung của bạn (hoặc bất kỳ thành phần nào khác) như trên và xóa bộ chọn phông chữ tùy chọn mặc định.

Tạo bộ chọn phông chữ của riêng bạn trong các tùy chọn

Hiện tại, bạn không thể dễ dàng sử dụng bộ chọn phông chữ cốt lõi để thêm phông chữ của riêng mình vào các tùy chọn. Trước tiên, chúng tôi cần cung cấp khả năng cho người dùng cuối tải lên các gói tùy chỉnh (xem đoạn tiếp theo: Tìm hiểu về Fruity Font Selector )


Đây là cách tiến hành:

  • Thêm hai phông chữ (my_custom_font và my_custom_other_font) vào chủ đề của bạn, sử dụng CDN hoặc máy chủ cục bộ
  • Sau đó, trong tệp css của bạn, thêm hai lớp mới:


 
.font-my_custom_font {
 họ phông chữ: 'my_custom_font ';
}
.font-my_custom_other_font {
 họ phông chữ: 'my_custom_other_font';
}
  • Trong tệp XML của chủ đề của bạn, hãy thêm tùy chọn phông chữ (mặc định sẽ là my_custom_font) :
 
<options> 
 ....
 <font>my_custom_font</font> 
</options>
  • trong option.twig, hãy thêm bộ chọn phông chữ để thêm các dòng đó (hiện chưa được kiểm tra, vì vậy hãy khiếu nại lên diễn đàn nếu nó không hoạt động):
 
 
<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'> {{ "Phông chữ tùy chỉnh của tôi" | t }}</div> 
<div class='panel-body'> 
<div class='form-group row'> 
 <label for='simple_edit_font' class='control-label'>{{ "Chọn phông chữ:" | t }}</label> 
<div class='col-sm-12'> 
<select class='form-control selector_option_value_field' id='simple_edit_font' name='font'> 
 {% nếu templateConfiguration.sid không trống hoặc templateConfiguration.gsid không trống %} // Đây không phải là "chủ đề" thay vì "mẫu" sao?
 {% đặt fontOptions = fontOptions ~ '<option value = "inherit" > Thừa kế</option> ' %}
 {% endif %}
<optgroup  label="{{ "My Custom fonts" | t }}"> 
<option class="font-my_custom_font"     value="custom_font"   data-font-package=""  > Phong tục</option> 
<option class="font-my_custom_other_font" value="my_custom_other_font" data-font-package=""  > Khác</option> 
</optgroup> 
 
</select> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div>


Bây giờ người dùng của bạn sẽ có thể chọn giữa hai phông chữ đó.

Xem xét Bộ chọn phông chữ Fruity

Trong tương lai, chúng tôi sẽ cung cấp cho người dùng cuối khả năng tải lên các gói nội dung của riêng họ, bao gồm các gói phông chữ. Nó sẽ thực hiện rất dễ dàng mọi tùy chỉnh phông chữ.
Để hiểu Yii Gói:
http://www.yiiframework.com/doc/api/1.1/CClientScript#packages-detail

Các gói LimeSurvey được xác định trong các tệp khác nhau. Các gói phông chữ được xác định tại đây: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/application/config/fonts.php
Ví dụ: gói phông chữ Noto được xác định tại đây: 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',
 ),
 ),


Tệp noto.css chứa ở đây: https://github.com/LimeSurvey/LimeSurvey/blob/4c40b61afb0dba8fd80154b50f5831045df8d814/assets/fonts/noto.css
Chú ý định nghĩa của lớp css ".font-noto" ở cuối nó: 

 
@font-face {
 họ phông chữ: 'Noto Sans';
 ...
}
...
.font-noto{
 họ phông chữ: 'Noto Sans';
}


Sau đó, trong Chủ đề Vanilla, phông chữ noto được sử dụng bằng cách thêm gói noto và xác định tùy chọn phông chữ thành noto:
https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/config.xml#L79 

<packages> 
 ....
<add> phông chữ-noto</add> 
</packages>

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

 
<options> 
 ....
 <font>không phải</font> 
</options>


Sau đó, phông chữ của lớp nội dung được xác định bằng giá trị này: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/views/layout_global.twig#L76 

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

Tất nhiên, tệp XML chỉ chứa các giá trị mặc định cho cấu hình chủ đề của bạn. Nhưng thực tế, những giá trị đó được xác định và đọc bên trong cơ sở dữ liệu (bảng "template_configuration" (Câu hỏi: "template_" của "theme_"?) dưới dạng chuỗi json. Tệp option.js chỉ sử dụng giá trị của bộ chọn phông chữ của tùy chọn đơn giản để thay đổi giá trị bên trong biểu mẫu tab nâng cao: https://github.com/LimeSurvey/LimeSurvey/blob/70a1d99cd2ebe411597231a8bc746b4ca9e19584/themes/survey/vanilla/options/options.js#L148-L174

Vì vậy, khi chức năng "tải lên gói nội dung" khả dụng, bạn sẽ dễ dàng thêm tập lệnh quét tất cả các gói phông chữ hiện có để thêm chúng vào bộ chọn.

Thêm tùy chọn chủ đề để kiểm soát vị trí và hiển thị các thành phần khảo sát

Hướng dẫn này sẽ chỉ ra cách thêm tùy chọn vào chủ đề mở rộng để hiển thị các thành phần khảo sát ở nhiều vị trí khác nhau. Trong trường hợp này, chúng tôi sẽ tạo các tùy chọn chủ đề để hiển thị tiêu đề khảo sát ở hai vị trí khác nhau.
Để đơn giản, chúng tôi sẽ hướng dẫn dựa trên phần mở rộng của chủ đề "bootswatch" trong phiên bản LimeSurvey 3.4.3.

Tạo một chủ đề tùy chỉnh

  1. Mở rộng chủ đề "bootswatch" như mô tả ở trên.
  2. Sao chép custom.css sang chủ đề cục bộ như mô tả ở trên.

Tạo tùy chọn chủ đề mới

  1. Sao chép nội dung của /themes/survey/bootswatch/options/ sang /upload/themes/survey/yourThemeName/options/ .
  2. Open /upload/themes/survey/yourThemeName/ options/options.twig trong trình chỉnh sửa và tìm "{# Bootstrap Bootswatch theme #}". Trực tiếp trước cha mẹ của nó<div class='row'> phần tử, thêm phần này:
     
 {# Tên khảo sát tùy chỉnh trong thanh điều hướng #}
<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'>Tên khảo sát trong thanh điều hướng</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'/> 
 Vâng
</label> 
 <label class="btn btn-default">
 <input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/> 
 Không
</label> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class='row'> 
<hr/> 
</div>

		{# Tên khảo sát tùy chỉnh bên dưới thanh tiến trình #}
<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'>Tên khảo sát bên dưới thanh tiến trình</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'/> 
 Vâng
</label> 
 <label class="btn btn-default">
 <input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/> 
 Không
</label> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div class='row'> 
<hr/> 
</div>
  3. Mở /upload/themes/survey/yourThemeName/config.xml và thêm hai mục vào khối "options" để nó trông như thế này:
    <options> 
<ajaxmode> TRÊN</ajaxmode> 
 ...
<surveyname1> TRÊN</surveyname1> 
<surveyname2> TRÊN</surveyname2> 
</options>
  4. Điều này sẽ cung cấp cho bạn hai tùy chọn mới trong màn hình Tùy chọn chủ đề như thế này:

Chế độ xem đã sửa đổi cho Tiêu đề khảo sát trong thanh điều hướng

  1. Tạo thư mục mới /upload/themes/survey/yourThemeName/views/subviews/header/ .
  2. Copy /themes/survey/vanilla/ lượt xem/subviews/header/nav_bar.twig vào thư mục mới đó.
  3. Mở /themes/survey/vanilla/views/subviews/header/nav_bar.twig và tìm "{# Logo option #}". Theo đó, hãy sửa đổi câu lệnh IF cho logo/tên khảo sát để nó trông như thế này:
     
 {# Tùy chọn biểu trưng #}
 {% 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. Thêm nội dung như thế này vào /upload/themes/survey/yourThemeName/css/custom.css :
     .navbar-thương hiệu {
 chiều cao dòng: 60px;
 cỡ chữ: 32px;
}
  5. Chuyển tùy chọn chủ đề "Tên khảo sát trong thanh điều hướng" thành "Có"
  6. Bạn sẽ thấy điều này:

Chế độ xem đã sửa đổi cho Tiêu đề khảo sát trong thanh tiến trình

  1. Tạo thư mục mới /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews .
  2. Sao chép /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig vào thư mục mới đó.
  3. Open /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container .twig và thêm một<h1> phần tử cho tên khảo sát. Vì vậy, nó trông như thế này: 
    <div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}>
 
 {# Tên khảo sát tùy chỉnh #}
 {% if( aSurveyInfo.options.surveyname2 == "on") %}
<h1 class="custom-survey-name"> {{ aSurveyInfo.name }}</h1> 
 {% endif %}
 
 {# Tên nhóm #}
 {{ include('./subviews/survey/group_subviews/group_name.twig') }}
 
 {# Mô tả nhóm #}
 {{ include('./subviews/survey/group_subviews/group_desc.twig') }}
 
 {#
 TRÌNH BÀY CÂU HỎI
 
 Đây là phần chính. Nó sẽ hiển thị từng câu hỏi cho nhóm này
 #}
 
<!-- PRESENT THE QUESTIONS --> 
 {% cho aQuestion trong 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>
  4. Thêm nội dung như thế này vào /upload/themes/survey/yourThemeName/css/custom.css :
     .navbar-thương hiệu {
 chiều cao dòng: 60ph1.custom-survey-name {
 lề: 0;
 căn chỉnh văn bản: giữa;
}
  5. Chuyển tùy chọn chủ đề "Tên khảo sát bên dưới thanh tiến trình" thành "Có"
  6. Bạn sẽ thấy điều này:

Tải xuống

Tạo chủ đề từ đầu

Sắp có tài liệu.

Hiện tại chỉ đưa ra vài lời khuyên thôi.

Cấu trúc chủ đề

Tệp và thư mục

Khi bạn tạo Chủ đề từ đầu, bạn không cần phải tôn trọng cấu trúc tệp/thư mục/css/js từ Vanilla. Css/js bắt buộc được thêm vào theo lõi (bạn vẫn có thể xóa nó nếu cần)

Các tệp duy nhất mà chủ đề của bạn phải có là các tệp bố cục:

  • layout_global.twig : hiển thị các trang để thực hiện khảo sát
  • layout_survey_list.twig : hiển thị danh sách khảo sát (nếu chủ đề này được đặt làm mặc định)
  • 'layout_errors.twig' : được sử dụng để hiển thị các lỗi chặn hiển thị khảo sát. ( id khảo sát sai, nhóm trống trong nhóm xem trước, v.v.)
  • layout_user_forms.twig: hiển thị các biểu mẫu người dùng như: token (người tham gia khảo sát) và đăng ký.
  • 'layout_print.twig' : dùng để in bản khảo sát ra pdf
  • layout_printanswers.twig: in câu trả lời

Nội dung của các tệp đó, các tệp có chứa hay không, hoàn toàn tùy thuộc vào bạn. Tất cả các tệp và thư mục khác mà bạn tìm thấy trên Vanilla hoàn toàn là tùy chọn, vui lòng sắp xếp mã theo cách bạn muốn.

Nếu bạn đọc mã kết xuất giao diện người dùng, bạn sẽ thấy những tên tệp đó xuất hiện trực tiếp trong đó. Đó là lý do tại sao chúng là bắt buộc.

Ví dụ: https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/application/helpers/SurveyRuntimeHelper.php#L462

Nội dung

Trong bố cục_global.twig của Vanilla, bạn sẽ thấy chúng tôi sử dụng một biến có tên là "include_content" để quyết định nội dung sẽ hiển thị https://github.com/LimeSurvey/LimeSurvey/blob/2398dda3b425da1a37d4611cd7963d39ac739987/themes/survey/vanilla/views/ bố cục_global.twig#L114-L115 

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

aSurveyInfo.include_content cho bạn biết hành động nào hiện đang diễn ra: hiển thị câu hỏi? hiển thị kết quả gửi? hiển thị rõ ràng tất cả? v.v Như bạn có thể thấy, trong vanilla, chúng tôi tạo một tệp để đưa vào bằng hành động. Vì vậy, nếu bạn muốn biết danh sách các hành động, chỉ cần kiểm tra thư mục views/subviews/content của vanilla và xóa tiện ích mở rộng "cành cây" : 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

Nếu bạn đã tạo chúng cho phiên bản 2.x của LimeSurvey, bạn sẽ nhận thấy rằng hầu hết chúng đều tương ứng với các tệp pstpl cũ cho Limesurvey 2.x. Một lần nữa, trong chủ đề của bạn, bạn không có nghĩa vụ phải tạo các tệp đó, với những tên đó, trong thư mục này. Ví dụ: bạn có thể chỉ cần thêm một công tắc khổng lồ trong bố cục_global.twig với HTML mong muốn cho mỗi hành động.

Tệp kê khai config.xml

Tệp kê khai của chủ đề chứa thông tin chính về chủ đề của bạn. Khi bạn cài đặt một chủ đề, nội dung của tệp kê khai sẽ được tải trong cơ sở dữ liệu ở hai bảng khác nhau: template và template_configuration. Vì vậy, mỗi khi bạn sửa đổi bảng kê khai của một chủ đề, bạn phải gỡ cài đặt và cài đặt lại chủ đề đó (hoặc chỉ cần đặt lại chủ đề đó). Vì quá trình này gây khó chịu khi phát triển chủ đề nên bạn có thể buộc sử dụng trực tiếp tệp XML thay vì các mục nhập DB. Để làm như vậy, trong config.php hãy bật chế độ gỡ lỗi và 'force_xmlsettings_for_survey_rendering' thành true.

Phần siêu dữ liệu

Không có gì phức tạp: chỉ là thông tin chính về chủ đề của bạn. Nó sẽ được đẩy vào bảng templates_configuration 

<metadata> 
<name> the_name_of_your_theme</name> 
<title> Tiêu đề chủ đề của bạn</title> 
<creationDate> 16/10/2017</creationDate> 
<author> Tên của bạn</author> 
<authorEmail> your@email.org</authorEmail> 
<authorUrl> http://www.yourwebsite.org</authorUrl> 
<copyright> Bản quyền của bạn</copyright> 
<license> Giấy phép chủ đề của bạn</license> 
<version> phiên bản chủ đề của bạn</version> 
<apiVersion> 3</apiVersion> 
<description> Mô tả chủ đề của bạn</description> 
<extends> chủ đề gốc</extends> 
</metadata>


Một số nhận xét:

  • name: sẽ được sử dụng làm khóa trong db. Vì vậy, nó phải là duy nhất và không được có bất kỳ ký tự đặc biệt nào (không có khoảng trắng). Lưu ý rằng các trường hợp sẽ không được tính đến
  • Title: sẽ được sử dụng để hiển thị tên chủ đề của bạn trong các danh sách khác nhau. Nó có thể có các ký tự đặc biệt
  • description: sẽ được sử dụng trong danh sách chính của chủ đề khảo sát. Nó có thể chứa các ký tự đặc biệt và thậm chí cả mã HTML bằng cách sử dụng
  • extends: tùy chọn, nó xác định các chủ đề gốc. Vì vậy, nếu bất kỳ tệp nào không có trong chủ đề này (twig/js/css/jpg, v.v.), nó sẽ tìm tệp đó trong chủ đề gốc


Nếu bạn mở rộng một trong 3 chủ đề cốt lõi (Vanilla, Bootswatch, Fruity), bạn có thể thay đổi giá trị "extends" từ chủ đề gốc này sang chủ đề gốc khác. Tất nhiên, bạn sẽ phải đặt lại chủ đề.



Phần tập tin

Đây là một trong những điều quan trọng. Nó sẽ được đẩy vào bảng template_configuration, trong trường files_css, files_js, files_print_css dưới dạng mảng json.

Ví dụ: phần tệp của Chủ đề Material Premium: 

<files> 
<css> 
<add> css/bootstrap-material-design.css</add> 
<add> css/ripples.min.css</add> 
<replace> css/ajaxify.css</replace> 
<replace> css/theme.css</replace> 
<replace> css/custom.css</replace> 
<remove> awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css</remove> 
</css> 
<js> 
<replace> scripts/theme.js</replace> 
<replace> scripts/ajaxify.js</replace> 
<add> scripts/material.js</add> 
<add> scripts/ripples.min.js</add> 
<replace> scripts/custom.js</replace> 
</js> 
<print_css> 
<add> css/print_theme.css</add> 
</print_css> 
</files>

Tất cả các tệp CSS/JS có trong phần này sẽ được tải khi bắt đầu khảo sát (ở chế độ ajax. Nếu chế độ ajax tắt thì tất nhiên tất cả các tệp sẽ được tải lại ở mỗi trang).


Chúng sẽ được thêm vào Gói tài sản Yii dựa trên tên của chủ đề. Vì vậy, khi Trình quản lý nội dung được bật (chế độ gỡ lỗi bị tắt), các tệp đó sẽ được sao chép vào thư mục tmp cùng với phần còn lại của chủ đề (vì vậy bạn có thể sử dụng đường dẫn tương đối trong CSS và JS để tiếp cận các tệp hình ảnh). Giới thiệu về Trình quản lý tài sản trong Yii: https://www.yiiframework.com/wiki/148/under Hiểu-assets Giới thiệu về các gói trong Yii: http://www.yiiframework.com/doc/api/1.1 /CClientScript#packages-detail


Họ sẽ sử dụng hệ thống kế thừa. Điều đó có nghĩa là nếu bạn thêm tệp CSS/JS vào một chủ đề nhưng nó không có trong chủ đề thì công cụ sẽ xem xét tất cả các chủ đề gốc của chủ đề này và sẽ sử dụng chủ đề đầu tiên mà nó tìm thấy. Vì vậy, nếu người dùng mở rộng chủ đề của bạn thông qua trình chỉnh sửa chủ đề, tất cả các tệp đó sẽ được kế thừa trong chủ đề của họ. Các từ khóa đề cập đến hệ thống kế thừa này.


  • add : nó sẽ thêm tệp vào chủ đề và vào tất cả chủ đề được kế thừa của nó
  • replace: nó sẽ thay thế tệp của chủ đề mẹ của nó
  • remove: nó sẽ xóa tệp khỏi gói bất kỳ, kể cả gói lõi (kể từ 3.14)
Hãy nhớ rằng bạn có thể thiết lập trong config.php 'force_xmlsettings_for_survey_rendering' để cấu hình được đọc từ XML thay vì DB (không cần thiết lập lại). Điều này sẽ giúp việc kiểm tra các sửa đổi của tệp XML trở nên dễ dàng hơn và sẽ tránh cho bạn phải gỡ cài đặt/cài đặt lại chủ đề ở mỗi lần sửa đổi XML


Một số nhận xét về những từ khóa đó:


Mẹo kế thừa

Như đã giải thích trước đó, từ khóa "add" có thể đề cập đến một tệp nằm trong một trong các chủ đề mẹ. Vì vậy, bạn có thể "thêm" một tệp trong phần này và vẫn không có tệp này trong chủ đề của mình mà ở một trong các chủ đề gốc của nó. Công cụ này sẽ xem xét tất cả các chủ đề gốc của nó và sẽ sử dụng chủ đề đầu tiên mà nó tìm thấy. Nếu nó không thể tìm thấy tệp và chế độ gỡ lỗi được bật trong cấu hình và chế độ gỡ lỗi giao diện người dùng js được bật trong cài đặt chung thì một thông báo trong bảng điều khiển sẽ cảnh báo bạn. Ví dụ: nếu chúng ta thêm vào my_theme:<add> css/không tồn tại.css</add> , trong bảng điều khiển chúng ta sẽ thấy: 

 (¯`·._.·(¯`·._.· Lỗi cấu hình chủ đề ·._.·`¯)·._.·`¯) 

Không thể tìm thấy tệp 'css/unbeing.css' được xác định trong chủ đề 'my_theme'

Nếu chế độ gỡ lỗi tắt thì sẽ không thấy lỗi nào cả. Động cơ sẽ bỏ qua các câu lệnh thêm sai.


Khi nào nên sử dụng add, khi nào nên sử dụng thay thế, khi nào tôi có thể để nó cho chủ đề gốc?

Đầu tiên: thêm và thay thế là những từ khóa giống nhau. Bạn có thể sử dụng cái này hay cái kia, động cơ sẽ làm như vậy. Chúng khác biệt đối với độc giả là con người, vì vậy họ hiểu ý định của bạn là gì.


Bạn không thể thêm tệp có cùng tên với chủ đề gốc: nó sẽ luôn thay thế tệp đó. ví dụ: Nếu bạn có tệp có tên "my_mother_theme/foo.css" và bạn thêm tệp có tên "foo.cs" vào chủ đề con, thì chỉ "daughter_theme/foo.css" mới được thêm vào chủ đề. Nếu bạn muốn giữ lại "my_mother_theme/foo.css", chỉ cần chọn một tên khác cho "daughter_theme/foo.css", chẳng hạn như "daughter_theme/bar.css". Vì vậy từ khóa "thêm" có thể được sử dụng làm từ khóa "thay thế".


Nếu bạn thắc mắc tại sao: điều này giúp việc tạo chủ đề kế thừa tự động dễ dàng hơn nhiều, việc sao chép phần tệp sẽ hoạt động ngay lập tức (không cần đổi tên "thêm" thành "thay thế" khi mở rộng một tệp).


Để làm rõ điều này, hãy lấy ví dụ về Fruity. Đây là phần tệp css của nó: 


<css> 
<add> css/biến thể/sea_green.css</add> 
<replace> css/animate.css</replace> 
<replace> css/theme.css</replace> 
<replace> css/custom.css</replace> 
</css>


Nếu bạn nhìn vào tệp custom.css ở dạng trái cây, nó hoàn toàn giống với tệp vani. Chúng ta có thể xóa tệp custom.css bên trong Fruity, tệp vanilla sẽ được tải. Chúng ta có thể xóa câu lệnh<replace> tùy chỉnh.css</replace> từ bảng kê khai Fruity, câu lệnh từ vanilla sẽ được sử dụng và vanilla custom.css sẽ được tải.


Vậy tại sao chúng ta lại sử dụng câu lệnh<replace> tùy chỉnh.css</replace> bên trong bảng kê khai trái cây? Câu trả lời rất dễ: bởi vì chúng tôi muốn người dùng cuối có thể mở rộng chủ đề trái cây, sửa đổi tệp trong chủ đề cục bộ của mình và tải tệp đã sửa đổi này từ chủ đề kế thừa của anh ấy. Để hiểu, chỉ cần mở rộng kết quả và xem chủ đề mở rộng. Chủ đề mở rộng thậm chí không có tệp custom.css. Vì vậy, một trong những trái cây sẽ được sử dụng. Nhưng: nếu người dùng tạo tệp này trong chủ đề mở rộng (bằng cách nhấp vào "mở rộng" trong trình chỉnh sửa chủ đề), thì tệp này sẽ được tải từ chủ đề của họ.


Vì vậy, nói chung: nếu bạn tạo một chủ đề từ đầu mà không mở rộng bất kỳ chủ đề nào, chỉ cần sử dụng câu lệnh add để thêm các tệp css/js của bạn. Thật dễ dàng. nếu bạn tạo một chủ đề mở rộng một chủ đề khác và bạn không muốn người dùng có thể mở rộng tệp css/js từ chủ đề mẹ: đừng sử dụng câu lệnh thêm trong bảng kê khai của bạn. Các tập tin sẽ vẫn được tải từ cấu hình chủ đề mẹ. nếu bạn tạo một chủ đề mở rộng một chủ đề khác và bạn muốn thay thế một tập tin từ chủ đề mẹ: hãy sử dụng từ khóa thay thế (từ khóa thêm sẽ có kết quả tương tự) nếu bạn tạo một chủ đề mở rộng một chủ đề khác, nếu bạn không thay thế một tệp nhất định từ css/js, nhưng bạn muốn người dùng có thể mở rộng tệp này: thì hãy sử dụng câu lệnh "thay thế" trong bảng kê khai của bạn cho tập tin này. Ngay cả khi bạn không thay thế tệp, bằng cách sử dụng từ khóa thay thế trong bảng kê khai: bạn cho phép người dùng làm điều đó nếu họ muốn làm điều đó.


Chỉ có trường hợp cuối cùng này cần phải rèn luyện trí óc một chút mới hiểu được, các trường hợp khác đều tầm thường.


Bạn cũng có thể đăng ký các tệp CSS và JS trực tiếp từ mã cành. Những tệp đó sẽ chỉ được tải khi tệp cành cây được yêu cầu. Nếu bạn muốn người dùng có thể kế thừa các tệp JS/Css đó từ trình chỉnh sửa chủ đề, hãy nhớ sử dụng các hàm Template:RegisterTemplateCssFile('my style.css') và Template:RegisterTemplateScript('my script.js') . Nếu bạn không sử dụng các chức năng đó, chủ đề của bạn có thể hoạt động nhưng tính kế thừa trên đó sẽ bị hỏng. Nó có cùng logic với hàm Template:Image('my picture.jpg')

Từ khóa xóa

Từ khóa xóa chỉ khả dụng kể từ 3.14. Với cái này, bạn có thể xóa bất kỳ css/tệp nào khỏi bất kỳ gói nào, ngay cả những gói cốt lõi. Nó được sử dụng trong Chủ đề Material Premium để xóa các tệp của Hộp kiểm Awseome Bootstrap: 

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

vì vậy bạn nên sử dụng cú pháp giống như tệp của gói (ví dụ: chỉ "awesome-bootstrap-checkbox.css" nếu không có đường dẫn thư mục sẽ không hoạt động). Bạn sẽ tìm thấy danh sách đầy đủ các gói cốt lõi và tệp của chúng trong /application/config/packages.php và config/third_party.php. Ví dụ: đối với 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',
 ),


Một cách khác để tìm tên chính xác để sử dụng trong thẻ xóa là bật trình quản lý nội dung (tắt chế độ gỡ lỗi hoặc đặt 'use_asset_manager'=>true trong cấu hình). Sau đó, đường dẫn sử dụng sẽ là đường dẫn ngay sau thư mục ngẫu nhiên trong thư mục tmp. Ví dụ: đối với awesome-bootstrap-checkbox.css: 

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

Các tập tin bạn không nên xóa:

jquery-3.1.1.min.js : cần thiết

jquery-migrate-3.0.0.min.js : cần thiết

survey.js : cần thiết

moment-with-locales.min.js : cần thiết cho loại câu hỏi ngày (và một số câu hỏi khác tôi nghĩ)

em_javascript.js : cần thiết cho tất cả javascript của ExpressionScript

Phần tùy chọn

Phần này liên quan đến tùy chọn chủ đề của bạn. Nó sẽ được sử dụng để cung cấp các "tùy chọn" đã được phân loại của bảng template_configuration dưới dạng mảng json.

Thông tin thêm

Một số lưu ý

LƯU Ý: nếu bạn chỉnh sửa tệp XML của một chủ đề, bạn phải gỡ cài đặt và cài đặt lại chủ đề đó để nó được tính đến.

LƯU Ý: để tránh điều đó, bạn có thể buộc sử dụng XML thay vì DB. Trong config.php, bật chế độ gỡ lỗi và bỏ ghi chú:

'force_xmlsettings_for_survey_rendering' => true, // Bỏ ghi chú nếu bạn muốn ép buộc sử dụng tệp XML thay vì DB (để dễ dàng phát triển chủ đề)

Hãy cẩn thận: mọi thứ sẽ được tải từ XML (các tùy chọn được bao gồm, v.v.)


LƯU Ý: nếu bạn chỉnh sửa thủ công các tệp CSS/JS (không sử dụng Trình chỉnh sửa chủ đề) và nếu chế độ gỡ lỗi bị tắt, giờ đây bạn có thể buộc xóa nội dung. Trong "Cài đặt chung", "tab Chung", nhấp vào nút "Xóa bộ đệm nội dung".

LƯU Ý: nếu bạn xóa phần

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