【Python】300行程式碼搞定HTML模板渲染

一、前言

    模板語言由HTML程式碼和邏輯控制程式碼組成，此處@PHP。通過模板語言可以快速的生成預想的HTML頁面。應該算是後端渲染不可缺少的組成部分。

二、功能介紹

    通過使用學習tornado、bottle的模板語言，我也效仿著實現可以獨立使用的模板渲染的程式碼模組，模板語法來自tornado和bottle的語法。可以用來做一些簡單的網頁渲染，郵件內容生成等HTML顯示方面。以下就是簡單的語法使用介紹。

    1.  變數。使用{{ }}包裹起來，裡面的變數為Python傳入。模板渲染時會將傳入的變數轉換成字串並填入對應位置。

# 模板檔案內容
<title>{{my_title}}</title>
<label>{{ session.name }}</label>
# py程式碼呼叫  t_html 為上面的內容
Template(t_html).render(my_title="標題", session = some_obj) 

    2. 轉義。預設傳入的資料都會進行HTML轉義，可以使用{% raw value %}來將value的內容按原始字串輸出。

# 模板檔案內容
<p>{% raw value %} </p>
# Py呼叫內容
Template(t_html).render(my_title="<label>顯示標籤</label>")

    3. 條件控制。支援Python的if，elif，else。條件程式碼需要放在{% %}內部，並且在條件結束後需要額外增加{% end %}，用於標識條件控制語句塊範圍。

# 模板檔案內容
{% if a > 1%}
<label>A大於1</label>
{% else %}
<label>A小於或等於1</label>
{% end %}
# py呼叫
Template(t_html).render(a=1)

    4. 迴圈控制。支援Python的for和while。與條件控制一樣也需要放在{% %}內部，並且結束處需要額外增加{% end %}，用於標識迴圈控制語句塊的範圍。

# 模板檔案內容
{% for i in range(10) %}
  <label>當前序號:{{i+1}}</label>
{% end %}
# py呼叫
Template(t_html).render()  

    5. 變數宣告。如果需要在模板檔案內宣告一個變數，方便使用時，可以通過set來實現。具體格式為{% set v = xx %}。通過set宣告的變數整個模板檔案中都可以使用，包括在條件控制和迴圈控制中作為條件判斷也可以。

# 模板檔案內容
{% set a = 1 %}
<label>a的值：{{a}}</label>

三、原始碼

    這個模板語言模組是在Python2.7上開發使用的，如果要在Python3+上使用需要對str和bytes進行一些處理即可，由於沒有引用任何其他模組，可以很好的獨立使用。

# -*- coding:utf-8 -*-

""" 模板語言"""

# TOKEN相關的定義
TOKEN_S_BRACE = "{"
TOKEN_S_BLOCK = "%"
TOKEN_EXPRESSION_L = "{{"  
TOKEN_EXPRESSION_R = "}}"
TOKEN_BLOCK_L = "{%"
TOKEN_BLOCK_R = "%}"
TOKEN_KEY_SET = "set"
TOKEN_KEY_RAW = "raw"
TOKEN_KEY_IF = "if"
TOKEN_KEY_ELIF = "elif"
TOKEN_KEY_ELSE = "else"
TOKEN_KEY_FOR = "for"
TOKEN_KEY_WHILE = "while"
TOKEN_KEY_END = "end"
TOKEN_KEY_BREAK = "break"
TOKEN_KEY_CONTINUE = "continue"
TOKEN_SPACE = " "
TOKEN_COLON = ":"
# Token標記 {{}} {% %}
TOKEN_FLAG_SET = {TOKEN_S_BRACE, TOKEN_S_BLOCK}
# 簡單的語句
TOKEN_KEY_SET_SIMPLE_EXPRESSION = {TOKEN_KEY_SET, TOKEN_KEY_RAW}
# 前置條件
TOKEN_KEY_PRE_CONDITION = {
    # end 必須在if/elif/else/for/while 後面
    TOKEN_KEY_END: {TOKEN_KEY_IF, TOKEN_KEY_ELIF, TOKEN_KEY_ELSE, 
                    TOKEN_KEY_FOR, TOKEN_KEY_WHILE},
    # elif 必須在if 後面
    TOKEN_KEY_ELIF: {TOKEN_KEY_IF},
    # else 必須在if/elif 後面
    TOKEN_KEY_ELSE: {TOKEN_KEY_IF, TOKEN_KEY_ELIF, TOKEN_KEY_FOR, TOKEN_KEY_WHILE},
}
# 迴圈語句
TOKEN_KEY_LOOP = {TOKEN_KEY_WHILE, TOKEN_KEY_FOR}
# 迴圈的控制break continue
TOKEN_KEY_LOOP_CTRL = {TOKEN_KEY_BREAK, TOKEN_KEY_CONTINUE}

class ParseException(Exception):
    pass

class TemplateCode(object):
    def __init__(self):
        self.codeTrees = {"parent": None, "nodes": []}
        self.cursor = self.codeTrees
        self.compiled_code = None

    def create_code(self):
        """建立一個程式碼子塊"""
        child_codes = {"parent": self.cursor, "nodes": []}
        self.cursor["nodes"].append(child_codes)
        self.cursor = child_codes

    def close_code(self):
        """ 關閉一個程式碼子塊 """
        assert self.cursor["parent"] is not None, "overflow"
        self.cursor = self.cursor["parent"]

    def append_text(self, text):
        """ 新增文字 """
        # 排除空行
        self.cursor["nodes"].append("_add(%r)" % text)

    def append_express(self, express, raw=False):
        """ 表示式 """
        if raw:
            temp_exp = "_t_exp = _str_(%s)" % express
        else:
            temp_exp = "_t_exp = _esc_(%s)" % express
        self.cursor["nodes"].append(temp_exp)
        self.cursor["nodes"].append("_add(_t_exp)")

    def append_statement(self, statement):
        """ 語句 """
        temp_statement = "%s" % statement
        self.cursor["nodes"].append(temp_statement)

    def reset(self):
        self.codeTrees = {"parent": None, "nodes": []}
        self.cursor = self.codeTrees
        self.compiled_code = None

    def build_code(self, filename):
        temp_code_buff = []
        self.write_buff_with_indent(temp_code_buff, "def _template_render():", 0)
        self.write_buff_with_indent(temp_code_buff, "_codes = []", 4)
        self.write_buff_with_indent(temp_code_buff, "_add = _codes.append", 4)
        self.write_codes(temp_code_buff, self.codeTrees, 4)
        self.write_buff_with_indent(temp_code_buff, "return ''.join(_codes)", 4)
        temp_code = "".join(temp_code_buff)
        self.compiled_code = compile(temp_code,filename, "exec", dont_inherit=True)

    def write_codes(self, code_buff, codes, indent):
        for node in codes.get("nodes", []):
            if isinstance(node, dict):
                self.write_codes(code_buff, node, indent+4)
            else:
                self.write_buff_with_indent(code_buff, node, indent)

    def generate(self, **kwargs):
        temp_namespace = {}
        temp_namespace['_str_'] = self.to_utf8
        temp_namespace['_esc_'] = self.to_safe_utf8
        temp_namespace.update(kwargs)
        exec(self.compiled_code, temp_namespace)
        return temp_namespace['_template_render']()

    @staticmethod
    def write_buff_with_indent(code_buff, raw_str, indent):
        """"""
        temp = (" " * indent) + raw_str + "\n"
        code_buff.append(temp)

    @staticmethod
    def to_utf8(raw_str):
        """ 轉換 """
        if isinstance(raw_str, str):
            return raw_str
        elif isinstance(raw_str, bytes):
            return raw_str.decode()
        return str(raw_str)

    @staticmethod
    def to_safe_utf8(raw_str):
        """ 過濾html轉義 """
        text = TemplateCode.to_utf8(raw_str)
        return text.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
class Template(object):
    """模板類"""
    def __init__(self, input_obj,filename="<string>", **namespace):
        """模板初始化"""
        self.namespace = {}
        self.namespace.update(namespace)
        # 將資料丟進去解析生成編譯程式碼
        self.lexer = TemplateLexer(input_obj, filename)

    def render(self, **kwargs):
        """渲染模板 """
        temp_name_space = {}
        temp_name_space.update(self.namespace)
        temp_name_space.update(kwargs)
        # 執行渲染
        return self.lexer.render(**kwargs)

class TemplateLexer(object):
    """模板語法分析器 """
    def __init__(self, input_obb, filename="<string>"):
        if hasattr(input_obb, "read"):
            self.raw_string = input_obb.read()
        else:
            self.raw_string = input_obb
        self.filename = filename
        # 記錄當前的位置
        self.pos = 0
        # 記錄原始資料的總長度
        self.raw_str_len = len(self.raw_string)
        # 記錄解析的資料
        self.code_data = TemplateCode()
        # 開始解析
        self.parse_template()

    def match(self, keyword, pos=None):
        return self.raw_string.find(keyword, pos if pos is not None else self.pos)

    def cut(self, size=-1):
        """剪取資料 size切割資料的大小，-1表示全部"""
        if size == -1:
            new_pos = self.raw_str_len
        else:
            new_pos = self.pos + size
        s = self.raw_string[self.pos: new_pos]
        self.pos = new_pos
        return s

    def remaining(self):
        """獲取剩餘大小 """
        return self.raw_str_len - self.pos

    def function_brace(self):
        """ 獲取{{  / {% """
        skip_index = self.pos
        while True:
            index = self.match(TOKEN_S_BRACE, skip_index)  # {% {{
            # 沒找到
            if index == -1:
                return None, -1
            # 末尾
            if index >= self.raw_str_len:
                return None, -1
            # 匹配型別
            next_value = self.raw_string[index + 1:index + 2]
            if next_value not in TOKEN_FLAG_SET:
                skip_index = index + 1
                # 說明不是關鍵型別
                continue
            brace = self.raw_string[index: index + 2]
            return brace, index
        return None, -1

    def read_content_with_token(self, index, begin_token, end_token):
        """
        讀取匹配token的內容
        """
        end_index = self.match(end_token)
        if end_index == -1:
            return ParseException("{0} missing end token {1}".format(begin_token, end_token))
        # 過濾 begin_token
        self.pos = index + len(begin_token)
        content = self.cut(end_index - self.pos)
        # 去除末尾 end_token
        self.cut(len(end_token))
        return content

    def add_simple_block_statement(self, operator, suffix):
        if not suffix:
            raise ParseException("{0} missing content".format(operator))
        if operator == TOKEN_KEY_SET:
            self.code_data.append_statement(suffix)
        elif operator == TOKEN_KEY_RAW:
            self.code_data.append_express(suffix, True)
        else:
            raise ParseException("{0} is undefined".format(operator))

    def parse_template(self):
        """解析模板 """
        # TODO 檢查模板檔案是否更改過，如果沒有則不需要重新解析
        self.code_data.reset()
        # 解析模板原檔案
        self.__parse()
        # 生成編譯code
        self.__compiled_code()

    def render(self, **kwargs):
        return self.code_data.generate(**kwargs)

    def __parse(self, control_operator=None, in_loop=False):
        """開始解析"""
        while True:
            if self.remaining() <= 0:
                if control_operator or in_loop:
                    raise ParseException("%s missing {%% end %%}" % control_operator)
                break
            # 讀取 {{ {%
            brace, index = self.function_brace()
            # 說明沒有找到
            if not brace:
                text = self.cut(index)
                self.code_data.append_text(text)
                continue
            else:
                text = self.cut(index - self.pos)
                if text:
                    self.code_data.append_text(text)

            if brace == TOKEN_EXPRESSION_L:
                content = self.read_content_with_token(index, TOKEN_EXPRESSION_L, TOKEN_EXPRESSION_R).strip()
                if not content:
                    raise ParseException("Empty Express")
                self.code_data.append_express(content)
                continue
            elif brace == TOKEN_BLOCK_L:
                content = self.read_content_with_token(index, TOKEN_BLOCK_L, TOKEN_BLOCK_R).strip()
                if not content:
                    raise ParseException("Empty block")

                # 得到表示式 for x in x ;  if x ;  elif x ;  else ;  end ;  set ;  while x ;
                operator, _, suffix = content.partition(TOKEN_SPACE)
                if not operator:
                    raise ParseException("block missing operator")

                suffix = suffix.strip()
                # 簡單語句，set / raw
                if operator in TOKEN_KEY_SET_SIMPLE_EXPRESSION:
                    self.add_simple_block_statement(operator, suffix)
                elif operator in TOKEN_KEY_LOOP_CTRL:
                    if not in_loop:
                        raise ParseException("{0} must in loop block".format(operator))
                    self.code_data.append_statement(operator)
                else:
                    # 控制語句 檢查匹配if 後面可以跟elif/else
                    pre_condition = TOKEN_KEY_PRE_CONDITION.get(operator, None)
                    if pre_condition:
                        # 裡面就是elif/else/end
                        if control_operator not in pre_condition:
                            raise ParseException("{0} must behind with {1}".format(operator, pre_condition))
                        elif operator == TOKEN_KEY_END:
                            # 遇到{% end %}則結束
                            self.code_data.close_code()
                            return
                        else:
                            # 由於是依據if 進入 來計算elif ，因此elif與if是同級的
                            self.code_data.close_code()
                            self.code_data.append_statement(content + TOKEN_COLON)
                            self.code_data.create_code()
                            self.__parse(operator, in_loop or (operator in TOKEN_KEY_LOOP))
                            break
                    # 新增控制語句及內部語句體 if for while
                    self.code_data.append_statement(content + TOKEN_COLON)
                    self.code_data.create_code()
                    self.__parse(operator, in_loop or (operator in TOKEN_KEY_LOOP))
            else:
                raise ParseException("Unkown brace")
        return

    def __compiled_code(self):
        """生成 編譯code """
        self.code_data.build_code(self.filename)
if __name__ == "__main__":
        t = Template("<html>{{hello}}</html>")
        t.render(hello="你好"