Làm cách nào để tạo HTML bằng Python?

Gói python để tạo HTML từ một mẫu được xác định thông qua cây các phần tử kết xuất

Tại sao

  • Đảm bảo đánh dấu chính xác. Đừng lo lắng về cấu trúc đánh dấu chính xác nữa, không bao giờ đếm các div đóng hoặc khó chịu về một dấu gạch chéo bị thiếu nữa

  • Đã bao gồm định dạng mã (nếu bạn định dạng mã Python của mình). Đừng lo lắng đâu sẽ là cách chính xác và nhất quán nhất để định dạng HTML của bạn, đừng bao giờ tìm kiếm trình định dạng ngôn ngữ mẫu Django cho IDE của bạn một cách tuyệt vọng nữa. (. trái tim. đen)

  • Dễ dàng tạo và sửa đổi bất kỳ mẫu nào. Đừng lo lắng về việc ghi đè các mẫu html của bên thứ 3 chỉ để thay đổi một chữ cái nữa, không bao giờ làm chật chội các mẫu của bạn với vô số câu lệnh

    import htmlgenerator as hg
    
    my_page = hg.HTML(hg.HEAD(), hg.BODY(hg.H1("It works!")))
    
    print(hg.render(my_page, {}))
    
    8 cố gắng bao gồm tất cả các trường hợp sử dụng có thể

  • Tạo HTML giống như cách bạn viết mã Python. Sử dụng các hàm để tạo các đối tượng html được tham số hóa hoặc xây dựng một hệ thống giống như khai báo tùy chỉnh để soạn đầu ra

  • Giữ những lợi thế của kết xuất lười biếng. Kết xuất bối cảnh và giá trị lười biếng cho phép phụ thuộc ngầm định, giống như các mẫu truyền thống

  • Xác định các thành phần của riêng bạn. Việc phân lớp các phần tử cơ sở cho phép dễ dàng thực hiện e. g. một thiết kế tùy chỉnh hoặc hệ thống bố trí

Bắt đầu

cài đặt

pip install htmlgenerator

Một ví dụ đơn giản

import htmlgenerator as hg

my_page = hg.HTML(hg.HEAD(), hg.BODY(hg.H1("It works!")))

print(hg.render(my_page, {}))

Điều này sẽ in tài liệu HTML sau

It works!

Lưu ý rằng việc triển khai được cung cấp của thẻ HTML và thẻ HEAD đi kèm với các giá trị mặc định hợp lý cho các thẻ DOCTYPE và META

phần tử HTML

Gói

import htmlgenerator as hg

my_page = hg.HTML(hg.HEAD(), hg.BODY(hg.H1("It works!")))

print(hg.render(my_page, {}))
9 xác định tất cả các thẻ HTML tiêu chuẩn với tên lớp viết hoa, e. g. CƠ THỂ, DIV, PHẦN, v.v. Phương thức init của phần tử HTML sẽ coi tất cả các đối số được truyền là phần tử con và đối số từ khóa là thuộc tính trên phần tử HTML. Dấu gạch dưới hàng đầu của tên thuộc tính sẽ bị xóa (để cho phép chỉ định lớp và thuộc tính) và dấu gạch dưới sẽ được thay thế bằng dấu gạch ngang vì python không cho phép định danh có dấu gạch ngang và thuộc tính HTML thường không sử dụng dấu gạch dưới

Thí dụ

from htmlgenerator import render, DIV, OL, LI

print(
    render(
        DIV(
            "My list is:",
            OL(
                LI("not very long"),
                LI("having a good time"),
                LI("rendered with htmlgenerator"),
                LI("ending with this item"),
            ),
        ),
        {},
    )
)
print(
    render(
        DIV(
            "Hello world!",
            _class="success-message",
            style="font-size: 2rem",
            data_status="ok",
        ),
        {},
    )
)

đầu ra

Hello world!

My list is:

  1. not very long
  2. having a good time
  3. rendered with htmlgenerator
  4. ending with this item

kết xuất

Phương pháp

It works!
0 nên được sử dụng để hiển thị cây phần tử. Tất cả các nút trong cây nên kế thừa từ
It works!
1. Lá trên cây có thể là vật trăn tùy ý. Hàm kết xuất mong muốn phần tử gốc của cây và từ điển ngữ cảnh làm đối số. Đầu ra được tạo bằng cách hiển thị cây đệ quy. Nếu một đối tượng trong cây là một thể hiện của
It works!
2 thì phương thức kết xuất của nó sẽ được gọi với ngữ cảnh là một đối số duy nhất và nó phải trả về một trình tạo tạo ra các đối tượng thuộc loại
It works!
3. Nếu không, đối tượng sẽ được chuyển đổi thành chuỗi và thoát để sử dụng trong HTML. Để ngăn một chuỗi bị thoát, có thể sử dụng
It works!
4 hoặc
It works!
5 từ gói django

Ví dụ đối tượng python

import datetime
from htmlgenerator import render, DIV

print(render(DIV("Hello, here is some date: ", datetime.date.today()), {}))
print(
    render(
        DIV(
            "Hello, here is some data: ",
            {"fingers": [1, 2, 3, 4, 5], "stuff": {"set": {1, 2, 3, 3, 3, 3, 3}}},
        ),
        {},
    )
)

đầu ra

Hello, here is some date: 2020-11-20

Hello, here is some data: {'fingers': [1, 2, 3, 4, 5], 'stuff': {'set': {1, 2, 3}}}

Ví dụ kết xuất đối tượng

from htmlgenerator import render, DIV


class DoStuff:
    # be aware that all yielded strings will not be seperated by spaces but concatenated directly
    def render(self, context):
        yield "eat "
        yield "sleep "
        yield "program"


print(render(DIV("I like to ", DoStuff()), {}))

đầu ra

I like to eat sleep program

thoát ví dụ

from htmlgenerator import mark_safe, render, DIV

print(
    render(
        DIV(
            "Hello, here is some HTML: ",
            '

Hello world!

', ), {}, ) ) print( render( DIV( "Hello, here is NOT some HTML: ", mark_safe('

Hello world!

'), ), {}, ) )

đầu ra

import htmlgenerator as hg

my_page = hg.HTML(hg.HEAD(), hg.BODY(hg.H1("It works!")))

print(hg.render(my_page, {}))
0

Giá trị lười biếng

Để cho phép các giá trị kết xuất chưa được biết tại thời điểm xây dựng mà chỉ có thể sử dụng các giá trị lười biếng tại thời điểm kết xuất. Theo mặc định, trình tạo html đi kèm với các giá trị lười biếng sau

  • It works!
    
    6. Gọi một hàm với ngữ cảnh làm đối số và hiển thị giá trị trả về (phím tắt
    It works!
    
    7)
  • It works!
    
    8. Kết xuất một biến từ ngữ cảnh, có thể sử dụng. để truy cập các thuộc tính lồng nhau hoặc khóa từ điển (phím tắt
    It works!
    
    9)

Một giá trị lười biếng sẽ được giải quyết ngay trước khi nó được hiển thị. Việc triển khai tùy chỉnh các giá trị lười biếng có thể được thêm vào bằng cách kế thừa từ

from htmlgenerator import render, DIV, OL, LI

print(
    render(
        DIV(
            "My list is:",
            OL(
                LI("not very long"),
                LI("having a good time"),
                LI("rendered with htmlgenerator"),
                LI("ending with this item"),
            ),
        ),
        {},
    )
)
print(
    render(
        DIV(
            "Hello world!",
            _class="success-message",
            style="font-size: 2rem",
            data_status="ok",
        ),
        {},
    )
)
0

Thí dụ

import htmlgenerator as hg

my_page = hg.HTML(hg.HEAD(), hg.BODY(hg.H1("It works!")))

print(hg.render(my_page, {}))
1

đầu ra

import htmlgenerator as hg

my_page = hg.HTML(hg.HEAD(), hg.BODY(hg.H1("It works!")))

print(hg.render(my_page, {}))
2

Yếu tố ảo

Để cho phép xây dựng một trang động, các yếu tố ảo cần được sử dụng. Các yếu tố ảo sau đây tồn tại

  • It works!
    
    1. Cơ sở cho tất cả các phần tử, cũng có thể được sử dụng để nhóm các phần tử mà không tự tạo đầu ra
  • from htmlgenerator import render, DIV, OL, LI
    
    print(
        render(
            DIV(
                "My list is:",
                OL(
                    LI("not very long"),
                    LI("having a good time"),
                    LI("rendered with htmlgenerator"),
                    LI("ending with this item"),
                ),
            ),
            {},
        )
    )
    print(
        render(
            DIV(
                "Hello world!",
                _class="success-message",
                style="font-size: 2rem",
                data_status="ok",
            ),
            {},
        )
    )
    
    2. Lazy đánh giá đối số đầu tiên tại thời điểm kết xuất và trả về phần tử con đầu tiên là true và phần tử con thứ hai là false
  • from htmlgenerator import render, DIV, OL, LI
    
    print(
        render(
            DIV(
                "My list is:",
                OL(
                    LI("not very long"),
                    LI("having a good time"),
                    LI("rendered with htmlgenerator"),
                    LI("ending with this item"),
                ),
            ),
            {},
        )
    )
    print(
        render(
            DIV(
                "Hello world!",
                _class="success-message",
                style="font-size: 2rem",
                data_status="ok",
            ),
            {},
        )
    )
    
    3. Lấy một trình lặp có thể là một giá trị lười biếng và hiển thị phần tử con cho mỗi lần lặp
  • from htmlgenerator import render, DIV, OL, LI
    
    print(
        render(
            DIV(
                "My list is:",
                OL(
                    LI("not very long"),
                    LI("having a good time"),
                    LI("rendered with htmlgenerator"),
                    LI("ending with this item"),
                ),
            ),
            {},
        )
    )
    print(
        render(
            DIV(
                "Hello world!",
                _class="success-message",
                style="font-size: 2rem",
                data_status="ok",
            ),
            {},
        )
    )
    
    4. Cho phép đặt tên cho một phần của cây mà sau đó có thể được hiển thị có chọn lọc bằng cách đặt tham số
    from htmlgenerator import render, DIV, OL, LI
    
    print(
        render(
            DIV(
                "My list is:",
                OL(
                    LI("not very long"),
                    LI("having a good time"),
                    LI("rendered with htmlgenerator"),
                    LI("ending with this item"),
                ),
            ),
            {},
        )
    )
    print(
        render(
            DIV(
                "Hello world!",
                _class="success-message",
                style="font-size: 2rem",
                data_status="ok",
            ),
            {},
        )
    )
    
    5 khi gọi
    from htmlgenerator import render, DIV, OL, LI
    
    print(
        render(
            DIV(
                "My list is:",
                OL(
                    LI("not very long"),
                    LI("having a good time"),
                    LI("rendered with htmlgenerator"),
                    LI("ending with this item"),
                ),
            ),
            {},
        )
    )
    print(
        render(
            DIV(
                "Hello world!",
                _class="success-message",
                style="font-size: 2rem",
                data_status="ok",
            ),
            {},
        )
    )
    
    6 (lấy cảm hứng từ https. //htmx. org/essays/template-fragments/)

Thí dụ

import htmlgenerator as hg

my_page = hg.HTML(hg.HEAD(), hg.BODY(hg.H1("It works!")))

print(hg.render(my_page, {}))
3

đầu ra

import htmlgenerator as hg

my_page = hg.HTML(hg.HEAD(), hg.BODY(hg.H1("It works!")))

print(hg.render(my_page, {}))
4

Chuyển đổi nguồn HTML hiện có

htmlgenerator đi kèm với một công cụ dòng lệnh tiện dụng để chuyển đổi mã HTML hiện có thành các đối tượng python htmlgenerator. Để có được tất cả các phụ thuộc cho công cụ, hãy cài đặt nó với

from htmlgenerator import render, DIV, OL, LI

print(
    render(
        DIV(
            "My list is:",
            OL(
                LI("not very long"),
                LI("having a good time"),
                LI("rendered with htmlgenerator"),
                LI("ending with this item"),
            ),
        ),
        {},
    )
)
print(
    render(
        DIV(
            "Hello world!",
            _class="success-message",
            style="font-size: 2rem",
            data_status="ok",
        ),
        {},
    )
)
7

Nó có thể được sử dụng với đầu vào tiêu chuẩn hoặc với một danh sách các tệp làm đối số

import htmlgenerator as hg

my_page = hg.HTML(hg.HEAD(), hg.BODY(hg.H1("It works!")))

print(hg.render(my_page, {}))
5

Theo mặc định, các tệp python được tạo có định dạng màu đen. Mã Python đã được tạo từ các tệp rất lớn, e. g. trang web hoàn chỉnh, có thể mất nhiều phút để được định dạng. Để có được mã python chưa được định dạng nhưng vẫn hợp lệ, hãy thêm cờ

from htmlgenerator import render, DIV, OL, LI

print(
    render(
        DIV(
            "My list is:",
            OL(
                LI("not very long"),
                LI("having a good time"),
                LI("rendered with htmlgenerator"),
                LI("ending with this item"),
            ),
        ),
        {},
    )
)
print(
    render(
        DIV(
            "Hello world!",
            _class="success-message",
            style="font-size: 2rem",
            data_status="ok",
        ),
        {},
    )
)
8. Điều này sẽ không chạy màu đen trên mã python được tạo và do đó rất nhanh. Để tạo mã nhỏ gọn hơn, cờ
from htmlgenerator import render, DIV, OL, LI

print(
    render(
        DIV(
            "My list is:",
            OL(
                LI("not very long"),
                LI("having a good time"),
                LI("rendered with htmlgenerator"),
                LI("ending with this item"),
            ),
        ),
        {},
    )
)
print(
    render(
        DIV(
            "Hello world!",
            _class="success-message",
            style="font-size: 2rem",
            data_status="ok",
        ),
        {},
    )
)
9 có thể được chuyển đến

Hello world!

My list is:

  1. not very long
  2. having a good time
  3. rendered with htmlgenerator
  4. ending with this item

0. Điều này sẽ tạo mã python nhỏ gọn nhất và hoạt động có và không có
from htmlgenerator import render, DIV, OL, LI

print(
    render(
        DIV(
            "My list is:",
            OL(
                LI("not very long"),
                LI("having a good time"),
                LI("rendered with htmlgenerator"),
                LI("ending with this item"),
            ),
        ),
        {},
    )
)
print(
    render(
        DIV(
            "Hello world!",
            _class="success-message",
            style="font-size: 2rem",
            data_status="ok",
        ),
        {},
    )
)
8. Để có được mã có thể đọc được của con người, nên sử dụng cờ
from htmlgenerator import render, DIV, OL, LI

print(
    render(
        DIV(
            "My list is:",
            OL(
                LI("not very long"),
                LI("having a good time"),
                LI("rendered with htmlgenerator"),
                LI("ending with this item"),
            ),
        ),
        {},
    )
)
print(
    render(
        DIV(
            "Hello world!",
            _class="success-message",
            style="font-size: 2rem",
            data_status="ok",
        ),
        {},
    )
)
9. Để lấy mã nhanh (đặc biệt đối với các trang lớn), nên sử dụng cờ
from htmlgenerator import render, DIV, OL, LI

print(
    render(
        DIV(
            "My list is:",
            OL(
                LI("not very long"),
                LI("having a good time"),
                LI("rendered with htmlgenerator"),
                LI("ending with this item"),
            ),
        ),
        {},
    )
)
print(
    render(
        DIV(
            "Hello world!",
            _class="success-message",
            style="font-size: 2rem",
            data_status="ok",
        ),
        {},
    )
)
8. Để có được một lớp lót, hãy sử dụng
from htmlgenerator import render, DIV, OL, LI

print(
    render(
        DIV(
            "My list is:",
            OL(
                LI("not very long"),
                LI("having a good time"),
                LI("rendered with htmlgenerator"),
                LI("ending with this item"),
            ),
        ),
        {},
    )
)
print(
    render(
        DIV(
            "Hello world!",
            _class="success-message",
            style="font-size: 2rem",
            data_status="ok",
        ),
        {},
    )
)
9 và
from htmlgenerator import render, DIV, OL, LI

print(
    render(
        DIV(
            "My list is:",
            OL(
                LI("not very long"),
                LI("having a good time"),
                LI("rendered with htmlgenerator"),
                LI("ending with this item"),
            ),
        ),
        {},
    )
)
print(
    render(
        DIV(
            "Hello world!",
            _class="success-message",
            style="font-size: 2rem",
            data_status="ok",
        ),
        {},
    )
)
8

Lưu ý về mã hóa tệp đầu vào

Trong trường hợp mã hóa của tệp nguồn HTML đầu vào khác với mã hóa mặc định của hệ điều hành, sẽ có cờ

Hello world!

My list is:

  1. not very long
  2. having a good time
  3. rendered with htmlgenerator
  4. ending with this item

6 cho phép thực thi mã hóa đã cho khi đọc tệp. Đây có thể là trường hợp trên các hệ thống Windows. Do đó, nên sử dụng

Hello world!

My list is:

  1. not very long
  2. having a good time
  3. rendered with htmlgenerator
  4. ending with this item

7 khi sử dụng

Hello world!

My list is:

  1. not very long
  2. having a good time
  3. rendered with htmlgenerator
  4. ending with this item

0 trên windows

tích hợp Django

Để sử dụng trình kết xuất cây phần tử trong các mẫu django html, cần phải thêm thẻ mẫu gọi hàm kết xuất

import htmlgenerator as hg

my_page = hg.HTML(hg.HEAD(), hg.BODY(hg.H1("It works!")))

print(hg.render(my_page, {}))
6

Phương thức kết xuất của bất kỳ đối tượng nào cũng có thể được chuyển trực tiếp tới đối tượng HttpResponse. Điều này hữu ích nếu htmlgenerator sẽ tạo trang hoàn chỉnh trong chế độ xem dựa trên chức năng

Chúng ta có thể tạo trang HTML bằng Python không?

Nếu bạn quan tâm đến việc phát triển web bằng Python thì việc biết HTML và CSS sẽ giúp bạn hiểu rõ hơn về các khung web như Django và Flask. Nhưng ngay cả khi bạn mới bắt đầu với Python, HTML và CSS có thể cho phép bạn tạo các trang web nhỏ để gây ấn tượng với bạn bè .

Thư viện Python nào tạo HTML?

Yattag là thư viện Python để tạo HTML hoặc XML theo cách Pythonic. Với Yattag, bạn không phải lo lắng về việc đóng các thẻ HTML. các mẫu HTML của bạn là mã Python.