Jinja2 bao gồm tệp css

Biến đổi. ví dụ biến bắt đầu với {{ tên biến và kết thúc với }}. ví dụ tạo biến có tên giao diện {{ giao diện }} biến bắt đầu với {{ tên biến và kết thúc với }}. tạo biến có tên giao diện {{ giao diện }}

cho vòng lặp. ví dụ câu lệnh for started with {% for statement %} and end with {% end %}. Ví dụ {% for interface in interfaces %} … {% endfor %} câu lệnh bắt đầu với {% for câu lệnh %} và kết thúc với {% end %}. {% cho giao diện trong giao diện %} … {% endfor %}

câu lệnh nếu. Câu lệnh if bắt đầu với {% if statement %} và kết thúc với {% endif %} ví dụ. {% if interface == ‘ge-0/0/2’ %} … {% endif %} Câu lệnh if bắt đầu với {% if statement %} và kết thúc với {% endif %} ví dụ. {% if giao diện == ‘ge-0/0/2’ %} … {% endif %}

Bình luận. chú thích bắt đầu bằng ‘{#’ và kết thúc bằng ‘#} ví dụ. {# chỉ đặt mô tả cho giao diện ge-0/0/2 #} nhận xét bắt đầu bằng ‘{#’ và kết thúc bằng ‘#} ví dụ. {# chỉ đặt mô tả cho giao diện ge-0/0/2 #}

Cài đặt. pip install jinja2 ( cho python 2. 7 ) pip3 install jinja2 ( cho python > 3. 6 ) pip install jinja2 ( cho python 2. 7 ) pip3 install jinja2 ( cho python > 3. 6 )

2. Các bước thực hiện

**Bước-1. ** Tạo tệp mẫu Jinja2 với tên giao diện. j2. Thêm nội dung vào giao diện tập tin. j2, ở đây tôi tạo một xml mẫu nhưng nó có thể là định dạng bất kỳ

{% for interface in interfaces %}
     {{interface}} 
          {{description}} 
     
{% endfor %}

Bước-2. mở terminal hoặc dòng lệnh và khởi động python ( ở đây tôi đang sử dụng terminal trên Linux ), Nhập gói, đặt môi trường và tải mẫu jinja2. mở terminal hoặc dòng lệnh và khởi động python ( ở đây tôi đang sử dụng terminal trên Linux ), Nhập gói, đặt môi trường và tải mẫu jinja2

$ python3
Python 3.6.7 (default, Oct 22 2018, 11:32:17) 
[GCC 8.2.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import jinja2
>>> import yaml
>>> import os
>>> from lxml import etree
>>> templateFilePath = jinja2.FileSystemLoader(os.getcwd())
>>> jinjaEvn = jinja2.Environment(loader=templateFilePath, trim_blocks=True, lstrip_blocks=True)
>>> jTemplate = jinjaEvn.get_template('interfaces.j2')
>>> config = {
..         'interfaces' : ['ge-0/0/1', 'ge-0/0/2', 'ge-0/0/3'], 
..         'description': 'interface configured using jinja2 template'
..     }
>>> print(jTemplate.render(config))

      ge-0/0/1 
           interface configured using jinja2 template 
      
      ge-0/0/2 
           interface configured using jinja2 template 
      
      ge-0/0/3 
           interface configured using jinja2 template 
      

>>> 

Ngoài ra bạn có thể kết xuất bằng cách sau

>>> print(jTemplate.render(
..         interfaces={'ge-0/0/1', 'ge-0/0/2', 'ge-0/0/3'}, 
..         description= 'interface configured using jinja2 template'
..         ))

      ge-0/0/2 
           interface configured using jinja2 template 
      
      ge-0/0/1 
           interface configured using jinja2 template 
      
      ge-0/0/3 
           interface configured using jinja2 template 
      

>>> 

Bước-3. You can configure to file instead of the config variable at on to when need to change not to edit back code. Tạo giao diện. yaml để lưu lại các giao diện cấu hình thông tin. yaml để lưu lại các thông tin cấu hình

Hãy tạo một block khác trong mẫu cơ sở của chúng ta để chúng ta có thể thay đổi mọi thứ ở đó trên mỗi mẫu. Trong video này, tôi sẽ chỉ cho bạn cách bạn có thể sử dụng nó cùng với các thẻ style để tùy chỉnh CSS một cách dễ dàng

Tôi cũng sẽ chỉ cho bạn cách bạn có thể tận dụng các điều kiện Jinja để làm cho CSS động.

Mã ở đầu bài giảng này

Có sẵn tại thư mục start

Mã được viết trong bài giảng này

Đầu tiên, hãy sửa đổi mẫu base.html để nó có thêm một block bên trong thẻ head

Bây giờ trong mỗi mẫu, chúng ta có thể tạo khối đó và đặt bất cứ thứ gì chúng ta muốn

Nói một cách đơn giản, chúng tôi có thể tạo các tệp CSS riêng biệt cho từng mẫu và đưa chúng vào đó hoặc chúng tôi có thể viết các kiểu nội tuyến

Viết các kiểu nội tuyến thường không được khuyến khích vì mọi thứ có thể trở nên khá lộn xộn, nhưng đối với các ứng dụng nhỏ, đơn giản, nó thực sự có thể giúp việc phát triển nhanh hơn và dễ dàng hơn

Hãy xem làm thế nào điều đó có thể được thực hiện

not-found.html

Tôi sẽ bắt đầu với mẫu not-found.html vì các kiểu ở đây đơn giản hơn. Hiện tại chúng tôi chỉ có khối

$ python3
Python 3.6.7 (default, Oct 22 2018, 11:32:17) 
[GCC 8.2.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import jinja2
>>> import yaml
>>> import os
>>> from lxml import etree
>>> templateFilePath = jinja2.FileSystemLoader(os.getcwd())
>>> jinjaEvn = jinja2.Environment(loader=templateFilePath, trim_blocks=True, lstrip_blocks=True)
>>> jTemplate = jinjaEvn.get_template('interfaces.j2')
>>> config = {
..         'interfaces' : ['ge-0/0/1', 'ge-0/0/2', 'ge-0/0/3'], 
..         'description': 'interface configured using jinja2 template'
..     }
>>> print(jTemplate.render(config))

      ge-0/0/1 
           interface configured using jinja2 template 
      
      ge-0/0/2 
           interface configured using jinja2 template 
      
      ge-0/0/3 
           interface configured using jinja2 template 
      

>>> 

Nhưng bây giờ chúng ta cũng có thể định nghĩa một khối head. Bên trong nó, chúng tôi sẽ đặt một thẻ style, với các kiểu CSS của chúng tôi

Tôi cũng sẽ thêm một lớp vào thẻ style1 cuối cùng để chúng tôi có thể nhắm mục tiêu nó bằng CSS

style2

Các kiểu ở đây có thể phức tạp hơn, bởi vì chúng ta có thể tận dụng các điều kiện Jinja để có các kiểu khác nhau tùy thuộc vào việc việc cần làm đã hoàn thành hay chưa

Đây là điều bạn có thể làm khi nội tuyến các kiểu CSS, nhưng bạn không thể thực hiện dễ dàng nếu bạn có các tệp CSS riêng biệt cho từng mẫu