Hướng dẫn tạo nhiều giao diện cho SMM cho nhiều thiết bị

nhox49

Đầu tiên, bạn cần tạo thư mục templates rồi trong nó bạn tạo tiếp cho mình 2 thư mục con đó là mobile và desktop cho mình .
Trong 2 thư mục con này bạn cần tạo những tập tin có tên tương tự tập tin ngoài index như:

• index (Đây là trang chủ)
• search (Tìm kiếm)
• article (Trang xem bài viết)
• category (Trang xem chuyên mục)
  

Tương tự cho các file khác nếu có, sau đó copy nội dung của các file này hoặc không tạo mà copy hết chúng nó vào 2 thư mục mobile và desktop nha.

Tương tự thì bạn cần tạo 2 file _block với các layout cần thiết vào đó thôi, ví dụ như tạo 2 file đó xong trong mỗi file thì bạn có header và footer trong nó.
Và trước khi tiếp tục thì bạn copy 2 layout này của file block chính vào 2 file block phụ vừa tạo nha, sau này chúng ta chỉnh sửa nó sau.

Giờ tạo cho mình file _functions.twig (Để chứa cái function mới này)
sau đó thì copy code này vào file function:

1. 
   
2. {% macro display_layout() %}
   
3.   {% set ua = SERVER_HTTP_USER_AGENT %}
   
4.   {% set arrUA = ua|lower %}
   
5.   {% if arrUA|preg_match('/windows|ipod|ipad|iphone|android|webos|blackberry|midp/') and arrUA|preg_match('/mobile/') %}
   
6.     mobile
   
7.   {% elseif arrUA|preg_match('/mobile/') %}
   
8.     mobile
   
9.   {% else %}
   
10.     desktop
    
11.   {% endif %}
    
12. {% endmacro %}
    

Sao chép mã

Cách sử dụng:
Bạn phải chắc chắn rằng bạn đã copy layout từ file block chính. Giả sử file đó là [_layout]
Đầu tiên, bạn cần import macro từ file chứa nó. Giả sử file đó là [_functions.twig], bạn thực hiện như sau:

1. 
   
2. {% block header %}
   
3. {% from '_functions' import display_layout %}
   
4. {% set display = display_layout()|trim %}
   
5. {% endblock %}
   

Sao chép mã

Làm tương tự với footer nha.

Gọi layout cho thiết bị:
Tiếp theo, bạn có thể sử dụng biến display để kiểm tra loại thiết bị và gọi layout tương ứng.

Bạn để code này ở dưới ngay chỗ trước

1. {% endblock %}

Sao chép mã

cho mình nha:

1. 
   
2. {% if display == 'desktop' %}
   
3. {% use '/templates/desktop/_block' %}
   
4. {% else %}
   
5. {% use '/templates/mobile/_block' %}  
   
6. {% endif %}
   
7. {{block('header')}}
   

Sao chép mã

Làm tương tự với footer nhé.


Sử dụng trong các file khác:
Bạn có thể áp dụng tương tự trong các file khác như index, category, article, search...

Ví dụ với file index:

1. 
   
2. {% from '_functions' import display_layout %}
   
3. {% set display = display_layout()|trim %}
   
4. {% if display == 'desktop' %}
   
5. {% include '/templates/desktop/index' %}
   
6. {% else %}
   
7. {% include '/templates/mobile/index' %}  
   
8. {% endif %}
   

Sao chép mã

Giải thích:
- /templates/mobile/index là đường dẫn tới thư mục templates và thư mục con mobile.
- index là file cần gọi. Bạn có thể thay đổi nó thành file khác mà bạn muốn.

Tùy chọn giao diện:
Nếu bạn muốn khách có thể lựa chọn giao diện bằng cookie, bạn có thể điều chỉnh hàm display_layout như sau:

1. 
   
2. {% macro display_layout() %}
   
3.   {% set ua = SERVER_HTTP_USER_AGENT %}
   
4.   {% set arrUA = ua|lower %}
   
5.   {% if COOKIE['device'] == 'mobile' or COOKIE['device'] == 'desktop' %}{{COOKIE['device'] }}{% else %}
   
6.     {% if arrUA|preg_match('/windows|ipod|ipad|iphone|android|webos|blackberry|midp/') and arrUA|preg_match('/mobile/') %}
   
7.       mobile
   
8.     {% elseif arrUA|preg_match('/mobile/') %}
   
9.       mobile
   
10.     {% else %}
    
11.       desktop
    
12.     {% endif %}
    
13.   {% endif %}
    
14. {% endmacro %}
    

Sao chép mã

Với hàm này, nếu có cookie device, nó sẽ trả về giá trị của cookie đó, cho phép người dùng chọn giao diện mà họ muốn.

Và tất nhiên là không thể thiếu đó là phần chọn giao diện mẫu cho cái trang chọn giao diện:
HTML

1. <div id="selectDevice" class="modal">
   
2.     <div class="modal-content">
   
3.         <h2 class="modal-header">Hãy chọn giao diện bạn muốn sử dụng:         <span class="close">&times;</span></h2>
   
4.         <div class="modal-body">
   
5.         <p>Giao diện mobile thích hợp cho các loại điện thoại di động, touch và điện thoại sử dụng wap.</p>
   
6.         <p>Giao diện Desktop là giao diện hiện đại hơn, dành cho các loại máy tính để bàn và laptop, macbook.</p>
   
7.         <p><b style="color: red">Lời khuyên</b>: Tuỳ chọn giao diện có thể dẫn đến giao diện không trực quan và khó sử dụng hơn đối với các thiết bị có màn hình nhỏ. Nên để hệ thống tự phân phát giao diện, như vậy bạn có thể dễ dàng sử dụng hơn.</p>
   
8.         </div>
   
9.         <div class="modal-footer">
   
10.         <button onclick="setDevice('desktop')" class="button">Giao Diện Desktop</button>
    
11.         <button onclick="setDevice('mobile')" class="button">Giao Diện Mobile</button>
    
12.         </div>
    
13.         </div>
    
14.     </div>

Sao chép mã

CSS

1. body{font-family:Arial,sans-serif;margin:50px}
   
2. .button { color: red;padding:10px 20px;font-size:16px;cursor:pointer;margin:10px;background:#fff;border:1px solid #ff2828}
   
3. #chooseLayoutBtn {padding:10px 20px;size:16px;cursor:pointer;margin:10px;background:#fff;border:1px solid #ff2828}
   
4. .modal{position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4);padding-top:60px;display:none;opacity:0;animation:animatetop 0.1s;transform:translateY(-100%);transition:opacity 0.3s ease,transform 0.9s ease}
   
5. .modal.active{display:block;opacity:1;transform:translateY(0);animation:animatetop 0.1s}
   
6. .modal-content{background-color:#fefefe;margin:5% auto;border:2px solid #ff2828;border-radius:6px;width:80%}
   
7. .modal-header{background:#ff2828;border-radius:5px 5px 0 0;padding:10px;color:#fff;margin:0}
   
8. .modal-body{padding:25px}
   
9. .modal-footer{text-align:center;background:#f4f4f4;padding:15px;border-radius:0 0 5px 5px}
   
10. .close{color:#fff;float:right;font-size:28px;font-weight:bold}
    
11. .close:hover,.close:focus{color:black;text-decoration:none;cursor:pointer}
    
12. .menu {margin: 20px; padding: 16px 10px; background: #fff; color: #444; border: 1px solid #ff2828;}
    
13. .menu .title {text-align: center;}
    
14. @keyframes animatetop{from{top:-300px;opacity:0}to{top:0;opacity:1}}

Sao chép mã

Và quan trọng nhất đó là phần JS dùng để set cookie device:

1.     var modal = document.getElementById("selectDevice");
   
2.     var btn = document.getElementById("chooseLayoutBtn");
   
3.     var span = document.getElementsByClassName("close")[0];
   
4.     btn.onclick = function() {
   
5.             modal.style.display = "block";
   
6.             modal.classList.add("active");
   
7.     }
   
8.     span.onclick = function() {
   
9.         modal.classList.remove("active");
   
10.         setTimeout(() => {
    
11.             modal.style.display = "none";
    
12.         }, 300);
    
13.     }
    
14.     window.onclick = function(event) {
    
15.         if (event.target == modal) {
    
16.             modal.classList.remove("active");
    
17.             setTimeout(() => {
    
18.             modal.style.display = "none";
    
19.         }, 300);
    
20.         }
    
21.     }
    
22.     function setDevice(device) {
    
23.         document.cookie = "devi=" + device + "; path=/; max-age=" + (60 * 60 * 24 * 30);
    
24.         alert("Bạn đã chọn giao diện: " + device);
    
25.         modal.classList.remove("active");
    
26.         setTimeout(() => {
    
27.             modal.style.display = "none";
    
28.         }, 300);
    
29.     }

Sao chép mã