1. 引用css。這可能是最常見的做法了，對一些特定的元素定義特定的樣式。那么使用它，你需要在HTML
頁面中加入<link>標簽。
2. 引入js。許多特效也可以通過javascript來進行處理，比如動態顯示效果，或對元素進行封裝。使用
它你需要在HTML頁面加入<script>標簽，必要時還要加一些javascript代碼。
3. HTML元素。需要設定一些特殊的屬性，比如class=某個屬性。這塊還相對簡單。
因此從上面的分析可以看出，在通常情況下，加入一個好看的web元素可能到許多地方的修改。因此我一
直在思考如何讓這個過程可以更簡化，麻煩的地方就是如何處理這些資源，如何讓這些資源可以與原始的
HTML很好的結合呢？最終我想出的辦法就是：代碼組裝。
對于css, javascript鏈接和代碼，它們可以按調用的順序依次拼成一段文本，然后插入到</head>元素前
面。然后對于html代碼，在模板中直接輸出。對于css, javascript的鏈接可以檢查是否重復。
那么如何定義web元素類和如何在模板中對其進行處理？
一個web元素類定義如下：
class Snippet(object):
css = ''
csslink = ''
jslink = ''
html = ''
js = ''
def render(self):
return ''
def __str__(self):
return self.render()
定義為類屬性的將輸出到HTML的頭部，而render()的結果將顯示在模板中調用類的地方。先看一下在模板
中調用的示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Helper</title>
<script type="text/javascript" src="/static/js/jquery.js"></script>
</head>
<body>
{{
htmlbuf << htmlwidgets.Message('This is a test')
}}
</body>
</html>
這里你可以看到htmlbuf，它是什么，它就是用來采集每個Snippet類的類屬性的。這里使用<<來將一個
Snippet對象加到htmlbuf中去。同時它還會將Snippet的HTML代碼在調用位置輸出。
如何輸出？首先uliweb的模板將轉為python代碼，它有一個內置的out對象，可以調用它的方法來輸出
HTML代碼。那么htmlbuf對象將在調用模板前被創建，在調用模板后被處理，在創建時將傳入out的write
屬性。這一切都是在SImpleFrame.py中通過plugin方法來實現的，但是這只是定義了一個調用點，如：
fname, code = template.render_file(filename, vars, env, dirs)
out = template.Out()
template._prepare_run(vars, env, out)
callplugin(self, 'before_render_template', env, out)
if isinstance(code, (str, unicode)):
code = compile(code, fname, 'exec')
exec code in env, vars
text = out.getvalue()
output = execplugin(self, 'after_render_template', text, vars, env)
before_render_template 會在調用模板前被調用。after_render_template 會在調用模板后被調用。因
此你可以通過plugin機制來加入額外的處理。這是在settings.py中定義的，如：
@plugin('before_render_template')
def before_render_template(sender, env, out):
from uliweb.core import js
from uliweb.core.SimpleFrame import url_for
from uliweb.helpers import htmlwidgets
htmlbuf = js.HtmlBuf(write=out.noescape, static_suffix=url_for('Portal.views.static',
filename=''))
env['htmlbuf'] = htmlbuf
env['htmlwidgets'] = htmlwidgets
這里注入htmlbuf和htmlwidgets到模板的env環境中，所以可以在模板中直接使用。在htmlwidgets中已經
定義了一些Snippet。htmlbuf在創建時，會使用out.noescape方法，它將不會對Snippet中的代碼進行轉
義。static_suffix表示靜態文件的前綴，缺省為/static/，這里由于使用了靜態服務，所以通過url_for
來得到靜態URL前綴。
@plugin('after_render_template')
def after_render_template(sender, text, vars, env):
import re
r_links = re.compile('<link/s.*?/shref/s*=/s*"?(.*?)["/s>]|<script/s.*?/ssrc/s*=/s*"?
(.*?)["/s>]', re.I)
if 'htmlbuf' in env:
htmlbuf = env['htmlbuf']
if htmlbuf.modified:
b = re.search('(?i)</head>', text)
if b:
pos = b.start()
#find links
links = [x or y for x, y in r_links.findall(text[:pos])]
htmlbuf.remove_links(links)
t = htmlbuf.render()
if t:
return ''.join([text[:pos], t, text[pos:]])
else:
return t+text
return text
這里將在模板處理完畢后查找生成的HTML文本中的</head>標簽，然后將相應的信息插入到它的前面。同
時這里增加了對原HTML中已經存在的鏈接進行了判斷，如果存在則刪除之，這是通過remove_links來處理
的。
經過這些的處理，你只要定義一個Snippet，Uliweb將自動為你處理css, js的鏈接包括代碼，和HTML代碼
的生成。因此你就可以簡單的：
{{
htmlbuf << htmlwidgets.Message('This is a test')
}}
來生成一個消息的提示信息。
我會慢慢擴展這個htmlwidgets庫。
再簡單描述一下如何配置：
1. 在settings.py中
INSTALLED_APPS = ['Documents', 'Examples', 'Portal', 'Post',
'uliweb.builtins.auth', 'uliweb.helpers.htmlwidgets']
這里要加入'uliweb.helpers.htmlwidgets'，讓static目錄生效
2. 加入：
@plugin('before_render_template')
def before_render_template(sender, env, out):
和
@plugin('after_render_template')
def after_render_template(sender, text, vars, env):
3. 可以使用了。
