公共模板 · 模板

[TOC] # 公共模板 ## 菜單導航制作 bootstrap導航： ```php <?php /*生成菜單的 id*/ $effected_id="main-nav"; /*無子菜單導航的模板*/ $filetpl="<a href='\$href' target='\$target'>\$label</a>"; /*有子菜單導航的模板*/ $foldertpl="<a href='\$href' target='\$target' class='dropdown-toggle' data-toggle='dropdown'>\$label <b class='caret'></b></a>"; /*有子菜單導航元素li的class屬性*/ $dropdown='dropdown'; /*有子菜單導航元素ul的class屬性*/ $ul_class="dropdown-menu"; /*菜單元素li的class屬性/ $li_class="" ; /*生成菜單的class屬性*/ $style="nav"; /*顯示的菜單層級*/ $showlevel=6; echo sp_get_menu("main",$effected_id,$filetpl,$foldertpl,$ul_class,$li_class,$style,$showlevel,$dropdown); ?> ``` ## 幻燈片制作在后臺擴展工具》幻燈片分類添加分類標識為"portal_index"的分類，然后在此分類添加幻燈片； ```html <php> $home_slides=sp_getslide("portal_index"); </php> <foreach name="home_slides" item="vo"> {$vo.slide_name} <a href="{$vo.slide_url}"> <img src="{:sp_get_asset_upload_path($vo['slide_pic'])}" alt="" /> </a> </foreach> ``` ## 廣告位制作在文章底部加一個廣告：到后臺擴展工具》網站廣告添加廣告名稱為'portal_article_bottom'的廣告，同時加上廣告代碼；模板里代碼如下： ```html <div>{:sp_getad("portal_article_bottom")}</div> ``` ## 友情鏈接制作 ```html <php>$links=sp_getlinks();</php> <foreach name="links" item="vo"> <a href="{$vo.link_url}" target="{$vo.link_target}">{$vo.link_name}</a> </foreach> ``` ## 添加留言控件在模板中加入以下代碼： ```html <form class="js-ajax-form" role="form" method="post" action="{:U('api/guestbook/addmsg')}"> <label>姓名</label> <input type="text" class="span3" placeholder="Your name" name="full_name"> <label>郵箱</label> <input type="email" class="span3" placeholder="Email address" name="email"> <label>內容</label> <textarea class="span6" placeholder="Write message here..." name="msg"></textarea> <label>驗證碼</label> <input type="text" class="span3" placeholder="please enter the code" name="verify" autocomplete="off"> {:sp_verifycode_img('length=4&font_size=20&width=238&height=34&font_color=&background=','style="cursor: pointer;vertical-align:top;" title="點擊獲取"')} <button type="submit" class="btn btn-primary js-ajax-submit">發送留言</button> </form> ``` ## 如何收藏收藏組件，其它應用可以公用 ```html <a href="{:U('user/favorite/do_favorite')}" class="js-favorite-btn" data-title="收藏的內容標題" data-url="收藏的內容的url" data-key="{:sp_get_favorite_key('收藏內容所在表',收藏內容的id)}"></a>  <a href="{:U('user/favorite/do_favorite',array('id'=>$object_id))}" class="js-favorite-btn" data-title="{$post_title}" data-url="{:U('article/index',array('id'=>$tid))}" data-key="{:sp_get_favorite_key('posts',$object_id)}"> <i class="fa fa-star-o"></i> </a> ``` ```php sp_get_favorite_key($table,$object_id) ``` 參數1：收藏內容所在的表，不帶表前綴的表名稱，如cmf_posts應該改為“posts”; 參數2：收藏內容的id: data-title:收藏的內容標題； data-url:收藏內容的url； data-key:安全key，用sp_get_favorite_key方法生成，防止有人提交錯誤數據； ## 點贊組件點贊組件 ```html <a href="{:U('article/do_like',array('id'=>$object_id))}" class="js-count-btn"><i class="fa fa-thumbs-up"></i><span class="count">{$post_like}</span></a> ``` 分解組件： ```html  href="{:U('article/do_like',array('id'=>$vo['object_id']))}" ``` js類名： `js-count-btn` js數量操作組件，加上此類名的a標簽為可以實現數量增加ajax操作； ajax執行成功返回后對其內類名包含count的標簽進行數量加1操作此組件可復用，只要鏈接是數量操作，開發者可以在自己的應用里添加相應操作 ## 最新評論組件制作 ```html <php>$last_comments=sp_get_comments("field:*;limit:0,5;order:createtime desc;");</php> <foreach name="last_comments" item="vo"> <div class="comment-ranking-inner"> <i class="fa fa-comment"></i> <a href="{:U('user/index/index',array('id'=>$vo['uid']))}">{$vo.full_name}:</a> <span>{$vo.content}</span> <a href="__ROOT__/{$vo.url}#comment{$vo.id}">查看原文</a> <span class="comment-time">{:date('m月d日 H:i',strtotime($vo['createtime']))} </span> </div> </foreach> ``` ## 最新加入組件制作 ```html <php>$last_users=sp_get_users("field:*;limit:0,8;order:create_time desc;");</php> <ul class="list-unstyled tc-photos margin-bottom-30"> <foreach name="last_users" item="vo"> <li> <a href="{:U('user/index/index',array('id'=>$vo['id']))}"> <img alt="" src="{:U('user/public/avatar',array('id'=>$vo['id']))}"> </a> </li> </foreach> </ul> ``` ## 本站用戶登錄模板制作模板文件：User/login.html ```html <form class="js-ajax-form" action="{:U('user/login/dologin')}" method="post"> <label for="input_username">賬號</label> <input type="text" id="input_username" name="username" placeholder="請輸入用戶名或者郵箱" class="span3"> <label for="input_password">密碼</label> <input type="password" id="input_password" name="password" placeholder="請輸入密碼" class="span3"> <label for="input_verify">驗證碼</label> <input type="text" id="input_verify" name="verify" placeholder="請輸入驗證碼" class="span3"> {:sp_verifycode_img('length=4&font_size=15&width=100&height=35&charset=1234567890')} <button class="btn btn-primary js-ajax-submit" type="submit">確定</button> </form> ``` ## 本站用戶注冊模板制作模板文件：User/register.html ```html <form class="form-horizontal js-ajax-form" action="{:U('user/register/doregister')}" method="post"> <label class="control-label" for="input_username">賬號</label> <input type="text" id="input_username" name="username" placeholder="請輸入賬號" class="span3"> <label class="control-label" for="input_email">郵箱</label> <input type="text" id="input_email" name="email" placeholder="請輸入郵箱" class="span3"> <label class="control-label" for="input_password">密碼</label> <input type="password" id="input_password" name="password" placeholder="請輸入密碼" class="span3"> <label class="control-label" for="input_repassword">重復密碼</label> <input type="password" id="input_repassword" name="repassword" placeholder="請輸入重復密碼" class="span3"> <label class="control-label" for="input_verify">驗證碼</label> <input type="text" id="input_verify" name="verify" placeholder="請輸入驗證碼" class="span3"> {:sp_verifycode_img('length=4&font_size=15&width=100&height=35&charset=1234567890')} <button class="btn btn-primary js-ajax-form" type="submit" data-wait="1500">確定注冊</button> </form> ``` ## 忘記密碼模板制作模板文件：User/forgot_password.html ```html <form class="form-horizontal js-ajax-form" action="{:U('user/login/doforgot_password')}" method="post"> <label class="control-label" for="input_email">注冊郵箱</label> <input type="email" id="input_email" name="email" class="span3"> <label class="control-label" for="input_verify">驗證碼</label> <input type="text" id="input_verify" name="verify" class="span3"> {:sp_verifycode_img('length=4&font_size=15&width=100&height=35&charset=1234567890')} <label class="control-label" for="input_repassword"></label> <button class="btn btn-primary js-ajax-form" type="submit">確定</button> </form> ``` ## 密碼重置模板制作模板文件：User/password_reset.html ```html <form class="form-horizontal js-ajax-form" action="{:U('user/login/doforgot_password')}" method="post"> <label class="control-label" for="input_email">注冊郵箱</label> <input type="email" id="input_email" name="email" class="span3"> <label class="control-label" for="input_verify">驗證碼</label> <input type="text" id="input_verify" name="verify" class="span3"> {:sp_verifycode_img('length=4&font_size=15&width=100&height=35&charset=1234567890')} <button class="btn btn-primary js-ajax-form" type="submit">確定</button> </form> ``` ## 評論組件顯示評論組件： ```php {:Comments("posts",$object_id)}  ``` Comments方法說明： `參數1`：評論內容所在的表，不帶表前綴的表名稱，如cmf_posts應該改為“posts”; `參數2`：評論內容的id: `參數3`：數組，目前支持tpl參數，如array("tpl"=>"comment_custom"),這樣設置就會加載模板目錄Comment/coment_custom.html這個模板。評論模板：默認評論模板文件：Comment/comment.html ```html <br> <h3>評論</h3> <div class="comment-area"> <hr> <form class="form-horizontal comment-form" action="{:U('comment/comment/post')}" method="post"> <div class="control-group"> <div class="comment-postbox-wraper"> <textarea class="form-control comment-postbox" placeholder="Write your comment here" style="min-height:90px;" name="content"></textarea> </div> </div> <div class="control-group"> <button type="submit" class="btn pull-right btn-primary js-ajax-submit"><i class="fa fa-comment-o"></i> 發表評論</button> </div> <input type="hidden" name="post_table" value="{:sp_authencode('posts')}"/> <input type="hidden" name="post_id" value="{$post_id}"/> <input type="hidden" name="to_uid" value="0"/> <input type="hidden" name="parentid" value="0"/> </form> <script class="comment-tpl" type="text/html"> <div class="comment" data-username="{$user.user_nicename}" data-uid="{$user.id}"> <a class="pull-left" href="{:U('user/index/index',array('id'=>$user['id']))}"> <img class="media-object avatar" src="{:U('user/public/avatar',array('id'=>$user['id']))}" class="headicon"/> </a> <div class="comment-body"> <div class="comment-content"><a href="{:U('user/index/index',array('id'=>$user['id']))}">{$user.user_nicename}</a>:<span class="content"></span></div> <div><span class="time">剛剛</span> <a onclick="comment_reply(this);" href="javascript:;"><i class="fa fa-comment"></i></a></div> </div> <div class="clearfix"></div> </div> </script> <script class="comment-reply-box-tpl" type="text/html"> <div class="comment-reply-submit"> <div class="comment-reply-box"> <input type="text" class="textbox" placeholder="回復"> </div> <button class="btn pull-right" onclick="comment_submit(this);">回復</button> </div> </script> <hr> <div class="comments"> <foreach name="comments" item="vo"> <div class="comment" data-id="{$vo.id}" data-uid="{$vo.uid}" data-username="{$vo.full_name}" id="comment{$vo.id}"> <a class="pull-left" href="{:U('user/index/index',array('id'=>$vo['uid']))}"> <img class="media-object avatar" src="{:U('user/public/avatar',array('id'=>$vo['uid']))}" class="headicon"/> </a> <div class="comment-body"> <div class="comment-content"><a href="{:U('user/index/index',array('id'=>$vo['uid']))}">{$vo.full_name}</a>:<span>{$vo.content}</span></div> <div><span class="time">{:date('m月d日 H:i',strtotime($vo['createtime']))}</span> <a onclick="comment_reply(this);" href="javascript:;"><i class="fa fa-comment"></i></a></div> <if condition="!empty($vo['children'])"> <foreach name="vo.children" item="voo"> <div class="comment" data-id="{$voo.id}" data-uid="{$voo.uid}" data-username="{$voo.full_name}" id="comment{$voo.id}"> <a class="pull-left" href="{:U('user/index/index',array('id'=>$voo['uid']))}"> <img class="media-object avatar" src="{:U('user/public/avatar',array('id'=>$voo['uid']))}" class="headicon"/> </a> <div class="comment-body"> <div class="comment-content"><a href="{:U('user/index/index',array('id'=>$voo['uid']))}">{$voo.full_name}</a>:<span>回復 <a href="{:U('user/index/index',array('id'=>$voo['to_uid']))}">{$parent_comments[$voo['parentid']]['full_name']}</a> {$voo.content}</span></div> <div><span class="time">{:date('m月d日 H:i',strtotime($voo['createtime']))}</span> <a onclick="comment_reply(this);" href="javascript:;"><i class="fa fa-comment"></i></a></div> </div> <div class="clearfix"></div> </div> </foreach> </if> </div> <div class="clearfix"></div> </div> </foreach> </div> </div> ```