現在我們進入第五章的學習
首先複製P71頁的程式碼。這裡我們看到了很多新的東西，例如setTitle,toWidget,addScriptRemote,這些具體函式我們會在後面討論到。我們先複習一下前面的知識，來改寫一下現有的邏輯程式碼。

我們先增強一下網頁的正文內容，我們看到有一個

[hamlet|
    <h1>Here's one way of including content
|]

還記得我們上一章的總結麼，hamlet可以渲染其中的@{..}語法，但是需要接一個data->[(Text,Text)]->Text的函式
我們先來補充這樣一個data

data Fruits = Apple | Banana
renderFruits :: Fruits->[(Text,Text)]->Text
renderFruits Apple _ = "Apple"
renderFruits Banana _ = "Banana"

嗯，OK了。我們來做一個拼接

toWidget
    [hamlet|
    ...
    <a [email protected]{Apple}>apple
    |] renderFruits

Oh,不錯所料，出錯了，為什麼呢。因為[hamlet|..|] render

我們實際可以執行的程式碼如下

toWidget
    $ toHtml $[hamlet|
        ...
        <a [email protected]{Apple}>
    |] renderFruits

接下來我們處理僅替換變數的[hamlet||]

toWidgetHead
    [hamlet|
        <meta name=keywords content="some sample"
    |]

我們來試一下直接在後面新增where語句

data Fruits = Apple|Banana deriving Show
toWidgetHead
    [hamlet|
        <meta name=keywords content="some sample">
        <meta name=search content=#{show keywords}
    |] 
     where keywords=Apple

但是在這裡要注意，content=#{show keyword}當轉成Html時，會自動在content=之後的值兩側加上引號,所以#{..}會對其中的值做Encode，導致不能直接輸出字串在{..}中，必須採用構造值的形式傳入，例如上述的例子。該問題影響面較廣，留待以後解決。