htbuilder — Python的微型HTML字符串构建器

htbuilder允许您使用Python的纯函数式语法构建HTML字符串。为什么使用模板语言，而不是直接使用函数呢？

(PS：如果您喜欢这个，可以查看jsbuild，它允许您通过简单地注释Python函数来构建JavaScript字符串！)

安装

只需使用PIP安装！

pip install htbuilder

使用方法

只需像这样导入标签，例如div：`from htbuilder import div`，然后调用它们

# Import any tag you want from htbuilder, and it just works!
# (This syntax requires Python 3.7+. See below for an alternate syntax)
from htbuilder import div

dom = div('Hello world!')

然后您可以通过在它上面调用str()来获取字符串输出

str(dom)
# Returns '<div>Hello world!</div>'

...这意味着您也可以直接使用print()在终端中查看它

print(dom)
# Prints '<div>Hello world!</div>'

要指定属性，请使用关键字参数调用标签构建器

print(
  div(id='sidebar', foo='bar')
)
# Prints '<div id="sidebar" foo="bar"></div>'

要指定属性和子元素，首先使用关键字参数指定属性，然后传递子元素，将其放在一对新的括号中

print(
  div(id='sidebar', foo='bar')(
    "Hello world!"
  )
)
# Prints '<div id="sidebar" foo="bar">Hello world!</div>'

这是必需的，因为Python不允许在传递正常参数之前传递关键字参数。

多个子元素

想要输出多个子元素？只需将它们全部作为参数传递

from htbuilder import div, ul, li, img

dom = (
  div(id='container')(
    ul(_class='greetings')(
      li('hello'),
      li('hi'),
      li('whattup'),
    )
  )
)

print(dom)

# Prints this (but without added spacing):
# <div id="container">
#   <ul class="greetings">
#     <li>hello</li>
#     <li>hi</li>
#     <li>whattup</li>
#   </ul>
# </div>

以编程方式添加子元素

您还可以传递任何可迭代对象来指定多个子元素，这意味着您可以简单地使用像生成器表达式这样的东西来获得惊人的效果。

from htbuilder import div, ul, li, img

image_paths = [
  'http://myimages.com/foo1.jpg',
  'http://myimages.com/foo2.jpg',
  'http://myimages.com/foo3.jpg',
]

dom = (
  div(id='container')(
    ul(_class='image-list')(
      li(img(src=image_path, _class='large-image'))
      for image_path in image_paths
    )
  )
)

print(dom)
# Prints:
# <div id="container">
#   <ul class="image-list">
#     <li><img src="http://myimages.com/foo1.jpg" class="large-image"/></li>
#     <li><img src="http://myimages.com/foo2.jpg" class="large-image"/></li>
#     <li><img src="http://myimages.com/foo3.jpg" class="large-image"/></li>
#   </ul>
# </div>

条件添加元素

因为它是Python，所以您可以使用if/else表达式来条件性地插入元素。

use_bold = True

dom = (
  div(
      b("bold text")
    if use_bold else
      "normal text"
  )
)

print(dom)
# Prints: <div><b>bold text</b></div>

样式

我们提供辅助工具来编写样式，而无需传递巨大的样式字符串作为参数。相反，只需使用方便的构建器，如styles()、classes()、fonts()，以及您可以从units和funcs模块中导入的辅助工具。

# styles, classes, and fonts are special imports to help build attribute strings.
from htbuilder import div, styles, classes, fonts

# You can import anything from .units and .funcs to make it easier to specify
# units like "%" and "px", as well as functions like "rgba()" and "rgba()".
from htbuilder.units import percent, px
from htbuilder.funcs import rgba, rgb

bottom_margin = 10
is_big = True

dom = (
  div(
    _class=classes('btn', big=is_big)
    style=styles(
        color='black',
        font_family=fonts('Comic Sans', 'sans-serif'),
        margin=px(0, 0, bottom_margin, 0),
        padding=(px(10), percent(5))
        box_shadow=[
            (0, 0, px(10), rgba(0, 0, 0, 0.1)),
            (0, 0, '2px', rgb(0, 0, 0)),
        ],
    )
  )
)

# Prints:
# <div
#   class="btn big"
#   style="
#     color: black;
#     font-family: "Comic Sans", "sans-serif";
#     margin: 0 0 10px 0;
#     padding: 10px 5%;
#     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 2px rgb(0, 0, 0);
#   "></div>

下划线是神奇的

使用下划线而不是破折号

与大多数流行语言一样，Python不支持在标识符中使用破折号。因此，如果您想创建一个包含破折号在标签名或属性中的元素，例如<my-element foo-bar="baz">，您可以通过使用下划线来实现。

from htbuilder import my_element

dom = my_element(foo_bar="baz")

print(dom)
# Prints:
# <my-element foo-bar="baz"></my-element>

以下划线为前缀以避免保留字

单词class在Python中是保留的，因此如果您想设置元素的class属性，您应该像这样在其前面加上下划线。

dom = div(_class="myclass")

print(dom)
# Prints:
# <div class="myclass"></div>

这是因为任何标识符之前或之后的下划线都会自动为您删除。

与Python < 3.7一起工作

如果您使用Python < 3.7，则导入应如下所示。

from htbuilder import H

div = H.div
ul = H.ul
li = H.li
img = H.img
# ...etc