因此從上面的分析可以看出，在通常情況下，加入一個好看的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. 可以使用了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
