[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
<!-- 点赞链接 须传入文章id -->
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)}
<!-- 评论文章表里的某个id为$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>
```
- HBuilder扩展代码块
- Sublime扩展代码块
- 模板
- 基础
- 模板标签
- 前端组件
- 公共模板
- 进阶
- 前台模板
- 房产装修风格
- 博客类模板
- 企业站-监控模板
- 后台模板
- 漂亮的后台模板
- ThinkCMF 1.6 后台界面升级
- 新的模板
- 后台UI
- H+后台主题
- Ace Admin
- 信息系统（橙蓝）
- 阿里云UI
- 不错的网站
- 常见问题
- dedecms 模板修改为 newthink 模板目录的步骤
- 网站信息 新增条目方法
- 系统切换中英文
- 2.3 门户模板制作
- 文章列表页制作
- 文章内容页制作
- 页面制作
- 获取文章的各种方式
- 热门文章组件制作
- SEO制作
- 文章相册制作
- 文章列表推荐功能制作
- 文章列表置顶功能制作
- 面包屑制作
- 格式化