[Yesod] StaticR, 静的ファイル(js,css)の読込

Viewからの読込

YesodでCSS/Javascripを使用する場合、Shakespearean TemplatesのCassius(CSS) / Lucius(CSS) / Julius(Javascript) を使うことができます。ただし通常のjavascriptファイルやcssファイルを読み込んで使用したい場合は、StaticRを使ってパスを指定できます。

今回は次のjavascriptファイルを作成し、読み込みます。単純ですが。

static/js/test.js

alert('StaticRテスト');

今回はtemplates/default-layout-wrapper.hamletのheadタグに記述します。

templates/default-layout-wrapper.hamlet

<script type="text/javascript" src="@{StaticR js_test_js}"/>

StaticRの引数のjs_test_jsが、static以下のパスを指しています。この場合、/static/js/test.jsとなります。 / と . が _ を置き換えて指定する感じです。cssでも同様です。

これで実行して、動作を確認してみましょう。うまく行けばダイアログが表示されるはずです。

ビルドエラーが発生する場合

まれにエラーが発生する場合がありますがその場合は、stack buildをやり直す必要があるようです。

Not in scope: 'js_test_js'

stack buildを再度実行

rm -fr dist
stack clean & stack build

Handlerからの読込

ファイルはView側からだけでなく、Handlerからも読み込むことができます。
それにはaddScriptもしくはaddStylesheetを使います。

getTestR :: Handler Html
getTestR = do
  defaultLayout $ do
    addScript $ StaticR js_test_js
    [whamlet|<p>テスト ...|]

” Not in scope: “のエラーが発生する場合は、上記と同じように stack build をやり直しましょう。