WebHelperを使用してリンクを作成する方法
${h.link_to(u'通常リンク','http://www.google.co.jp')}
普通のリンクに変換されます
[生成されるHTML]
＜a href="http://www.google.co.jp"＞通常リンク＜/a＞
${h.link_to(u'リンクテスト','http://www.google.co.jp', target='_blank')}
別ウインドウで開くリンクに変換されます
[生成されるHTML]
＜a href="http://www.google.co.jp" target="_blank"＞リンクテスト＜/a＞
${h.link_to(u'リンクテスト',confirm=u"確認です")}
遷移する前に、javascriptで確認メッセージを表示します。
[生成されるHTML]
＜a href="" ｏnclick="return confirm('確認です');"＞リンクテスト＜/a＞
${h.link_to(u'リンクテスト', h.url(action='destroy', id=4), confirm=u'確認です')}
/destroy/4へのリンクに変換されます。
[生成されるHTML]
＜a href="/makotest/destroy/4" ｏnclick="return confirm('確認です');"＞リンクテスト＜/a＞
${h.link_to('Help', h.url(action="help"), popup=True)}
/helpを別ウインドウ(javascript使用)で開きます。
[生成されるHTML]
＜a href="/makotest/help" ｏnclick="window.ｏｐｅｎ(this.href);return false;"＞Help＜/a＞
${h.link_to(u'リンクテスト', h.url(action='busy'), popup=['new_window', 'height=300,width=600'])}
/busyを別ウインドウ(javascript使用)で開きます。
※メニューバー非表示です。
[生成されるHTML]
＜a href="/makotest/busy" ｏnclick="window.ｏｐｅｎ(this.href,'new_window','height=300,width=600');return false;"＞リンクテスト＜/a＞
${h.link_to(u'リンクテスト', h.url(action='destroy', id=4, p='param'), confirm=u'確認です')}
/destroy/4?p=paramへのリンクを作成します。
遷移する前に、javascriptで確認メッセージを表示します。
[生成されるHTML]
＜a href="/makotest/destroy/4?p=param" ｏnclick="return confirm('確認です');"＞リンクテスト＜/a＞
${h.link_to(u'リンクテスト', h.url(action='destroy', p='param'), method='post')}
postメソッドでリクエストを送信します。
[生成されるHTML]
＜a href="/makotest/destroy?p=param" ｏnclick="var f = ｄocument.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;f.submit();return false;"＞リンクテスト＜/a＞
WebHelperを使用してボタンリンクを作成
${h.button_to("Edit", h.url(action='edit', id=3))}
ボタンのリンクを生成します
[生成されるHTML]
＜form method="POST" action="/makotest/edit/3" class="button-to"＞＜div＞＜input type="submit" value="Edit" /＞＜/div＞＜/form＞
${h.button_to("Destroy", h.url(action='destroy', id=3), confirm="Are you sure?", method='DELETE')}
deleteメソッドを発行するボタンリンクを生成します
[生成されるHTML]
＜form method="POST" action="/makotest/destroy/3" class="button-to"＞＜div＞＜input id="_method" name="_method" type="hidden" value="DELETE" /＞＜input ｏnclick="return confirm('Are you sure?');" type="submit" value="Destroy" /＞＜/div＞＜/form＞
${h.button_to("Edit", h.url(action='edit', id=3), type='image', alt=u'altです', src='button.png')}
画像ボタンを生成します。
srcに画像のファイル名のみ指定した場合は、自動的に/images/button.pngと
imagesの階層が付加されます。
/test/button.pngのように、ディレクトリも含めて指定すると
そのまま出力されます。
[生成されるHTML]
＜form method="POST" action="/makotest/edit/3" class="button-to"＞＜div＞＜input alt="altです" src="/images/button.png" type="image" value="Edit" /＞＜/div＞＜/form＞
${h.button_to("Edit", h.url(action='edit', id=3), confirm=u'確認です')}
ボタンを押した後、javascriptにより確認メッセージが表示されます。
[生成されるHTML]
＜form method="POST" action="/makotest/edit/3" class="button-to"＞＜div＞＜input ｏnclick="return confirm('確認です');" type="submit" value="Edit" /＞＜/div＞＜/form＞
条件付でリンクを生成
link_to_unless_currentを使用すると、
「現在表示しているURLと、作成しようとするリンクが同じ場合は、
リンクの名称のみ表示する」
ということが出来ます。
こう書くと・・・
${h.link_to_unless_current(u'リンク名称', h.url(action='unless_current'))}
/unless_current
を表示しているときは、「リンク名称」という文字列だけ、
違うURLを表示しているときには、ちゃんとリンクが作成されます。
BBSやブログで改ページ処理が必要な場合、
「１ページ目を表示しているときは、１ページ目へのリンクを切りたい」
なんてことがあります。
そんなとき、link_to_unless_currentを使えば、カンタンに実装できますね。
条件付でリンクを生成
link_to_unlessは、条件式を第一引数に取ります。
渡された条件式がTrueになる場合は、リンクが作成されず、
名称のみ。
※以下の記述だと、リンクは作成されない。
${h.link_to_unless(1==1,u'リンク名称', 'http://www.google.co.jp')}
※以下のように、条件式がFalseになる場合は、リンクが作成されます。
${h.link_to_unless(1==2,u'リンク名称', 'http://www.google.co.jp')}
もちろん、h.link_toと同じ機能も備えているので、
${h.link_to_unless(1==2,u'リンク名称', 'http://www.google.co.jp', confirm=u"確認です")}
という記述も可能です。
条件付でリンクを生成
link_to_ifは、条件式を第一引数に取ります。
渡された条件式がTrueになる場合は、リンクがされます。
※以下の記述はリンクが作成される。
${h.link_to_if(1==1,u'リンク名称', 'http://www.google.co.jp')}
※以下のように条件式がFalseになる場合は、リンクは作成されず
名称のみ表示される。
${h.link_to_if(1==2,u'リンク名称', 'http://www.google.co.jp')}
h.link_to_unlessと逆の機能ですね。
ソースコードも
def link_to_if(condition, name, url, **html_options):
"""
Conditionally create a link tag of the given ``name`` using the ``url``
If ``condition`` is True only the name is returned.
"""
return link_to_unless(not condition, name, url, **html_options)
条件式を反転させてlink_to_unlessしてます。
表示しているページを判定
current_pageは、現在表示しているページが引数で
指定しているページと同じであるか判定します。
こういう記述を行った場合・・・
${h.current_page(h.url(action='unless_current'))}
/unless_currentを表示中
Trueを返却
/unless_current以外を表示中
Falseを返却
という感じで動作してくれます。
表示しているページのURL取得
current_urlで、現在表示しているURLの相対パスを取得できます。
以下のように記述すると
${h.current_url()}
現在のURLの相対パスが取得できます。
例）
http://localhost:5000/makotest/unless_current
で表示させると
/makotest/unless_current
idやパラメータの指定も可能
${h.current_url(id=10, p='param')}
例）
http://localhost:5000/makotest/unless_current
で表示させると
/makotest/unless_current/10?p=param
別なactionももちろん指定できます。
${h.current_url(action='test_url', id=10, p='param')}
例）
http://localhost:5000/makotest/unless_current
で表示させると
/makotest/test_url/10?p=param
mailtoを生成する
昨今、あまり使用されていないと思いますが・・・
${h.mail_to('[mailtoで表示するメールアドレス]')}
これで
＜a href="[mailtoで表示するメールアドレス]"＞[mailtoで表示するメールアドレス]＜/a＞
というタグを生成してくれます。
ちなみに、utf-8でテンプレートを書いている場合などで、
subjectを指定するときは、エンコードしないと化けました。
${h.mail_to('[mailtoで表示するメールアドレス]',subject=u'日本語件名'.encode('cp932','replace'))}
subject以外に使用できるのは、
・name:リンクに使用する名称
・cc:ccに入れるメールアドレス
・bcc:bccに入れるメールアドレス
・body:メール本文
・replace_at:スパム対策用。メールアドレス中の@を指定した文字で置き換えて表示
・replace_dot:スパム対策用。メールアドレス中の.を指定した文字で置き換えて表示
タグを難読化して表示
obfuscate:困惑させる; 暗くする; 不明瞭にする
ということで、
${h.js_obfuscate('＜input type="hidden" name="access_check" value="access_ok"＞')}
と記載すると
＜ｓｃｒｉｐｔ ｔｙｐｅ＝”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”＞
//＜![CDATA[
ｅｖａｌ(ｕｎｅｓｃａｐｅ('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%61%63%63%65%73%73%5f%63%68%65%63%6b%22%20%76%61%6c%75%65%3d%22%61%63%63%65%73%73%5f%6f%6b%22%3e%27%29%3b'))
//]]＞
＜/script＞
こんな感じで、URLエンコードされた状態でHTMLが出力されます。