FA CMS 使用手册(网页+小程序)
简介
本使用手册仅适用于FastAdmin官方的CMS插件。
本手册将通过套用一份html模版,详细讲述CMS里常用的命令及用法;并使用UniApp+ColorUI创建小程序端(暂时只测试微信小程序)。
另附:FastAdmin CMS插件 标签使用说明
1、基本功能
1.1 构思网站架构
常见的企业网站架构一般包括封面页(首页、栏目封面等)、列表页(新闻列表、服务列表、案例列表等)、内容页(新闻、服务、案例详情等)单页(联系方式、关于等)等,复杂网站还有企业商城、多语言等,本手册仅做常见功能的介绍,如需要的人数较多,后续会考虑更新。
1.2 创建模型(可跳过)
模型是区分内容类型的方式,如普通的新闻内容、产品内容, 他们有比较明显的类型划分。操作流程:添加模型 -> 添加表名(建议cms_addon开头) -> 添加需要的新字段(除基本模型里的字段外,新增的字段)
1.3 新建单页(可跳过)
单页是独立的单页面,一般没有同类型的内容时使用。主要用于联系我们、关于我们等类似页面。其中自定义URL名称
字段是提供给外部链接的地址,如菜单里调用单页时就用到这个字段。
1.4 新建栏目、内容
栏目有频道、列表、外链三种类型;频道下 不能 添加内容(文章),主要用于频道封面页的跳转;列表下 可以 添加内容,主要用于列表页的跳转;外链下 不能 添加内容,主要用于外链、单页的跳转。
2、创建Web模版
2.1 提取公共布局
2.1.1 静态资源
静态资源放入 addons/cms/assets
目录下,为了便于管理,可以新建目录或者直接放入对应的 images|fonts|css|js
等目录内。
2.1.2 基本布局
复制默认模版下 common/layout.html
的布局文件,根据需要修改需要加载的静态资源、标题、图标等。
2.2 编写首页
2.2.1 导航栏(栏目列表)
举例:
<div class="rd-navbar-search_collapsable"> <ul class="rd-navbar-nav"> <li> <a href="/">首页</a> </li> {cms:channellist id="nav" type="top" condition="1=isnav"} <li class="{if $nav->is_active} active{/if}"> <a id="{$nav.diyname}_menu" href="{$nav.url}">{$nav.name}</a> {if $nav.has_child} <ul class="rd-navbar-dropdown"> {cms:channellist id="sub" type="son" typeid="$nav['id']" condition="1=isnav"} <li> <a href="{$sub.url}">{$sub.name}</a> </li> {/cms:channellist} </ul> {/if} </li> {/cms:channellist} </ul> </div>复制
{cms:channellist id="nav" type="top" condition="1=isnav"}
cms:channellist 为频道的模版标签,其可用变量及含义如下:
id:循环变量名 key:循环索引名row:行数 limit:行数empty:为空时显示的信息 mod:取模基数,常用于控制多少条数据后换行、变色等 cache:缓存时间,为0则不缓存,为true则永久缓存 orderby:排序字段,支持id,createtime,updatetime,rand(随机),weigh(权重) orderway:排序方式,asc=正序,desc=倒序 imgwidth:图片宽度 imgheight:图片高度condition:筛选条件,可使用SQL字段筛选 model:模型ID field:调用字段,默认为*type:指定类型,top=顶级栏目,brother=兄弟栏目,son=子栏目,sons=子孙栏目 typeid:指定类型关联的ID,如果type为空,这里可指定栏目的ID集合复制
{if $nav->is_active} 判断当前菜单是否被选中
{if $nav.has_child} 判断是否包含子菜单
2.2.2 区块
一些简单的数据列表可以可以使用区块进行管理,区块可以包含的字段包含:标题、图片、链接、内容,可以满足基本的数据需求,调用时也比较简单,常用于局部列表文本(提供的服务、友情链接等)。举例:
{cms:blocklist id="block" name="clients" row="9" orderway="asc"} <div class="col-sm-6 col-md-3"> <figure class="box-icon-image"> <a href="#"><img src="{$block.image}" alt=""/></a> </figure></div> {/cms:blocklist}复制
{cms:blocklist id="block" name="clients" row="9" orderway="asc"}
cms:blocklist 为区块的模版标签,其可用变量及含义如下:
id:循环变量名 key:循环索引名row:行数 limit:行数empty:为空时显示的信息 mod:取模基数,常用于控制多少条数据后换行、变色等 cache:缓存时间,为0则不缓存,为true则永久缓存 orderby:排序字段,支持id,name,createtime,updatetime,rand(随机) orderway:排序方式,asc=正序,desc=倒序 imgwidth:图片宽度 imgheight:图片高度condition:筛选条件,可使用SQL字段筛选 name:指定区块的名称复制
如果只需要调用区块的内容,可以使用简化的调用方式:
{cms:block name="aboutus" /}复制
2.2.3 内容(文章)列表
{cms:arclist id="row" channel="2" limit="0,1"} <div class="media"> <div class="media-left"> <a href="{$row.url}" {if $row.style}style="{$row.style_text}"{/if}> <div class="embed-responsive embed-responsive-4by3 img-zoom"> <img class="embed-responsive-item media-object" width="64" height="64" src="{$row.image}"> </div> </a> </div> <div class="media-body"> <h4 class="media-heading">{$row.textlink}</h4> <p>{$row.description}</p> </div> </div> {/cms:arclist}复制
{cms:arclist id="row" channel="$channel.id" limit="0,1"}
cms:arclist 为内容列表的模版标签,其可用变量及含义如下:
id:循环变量名 key:循环索引名row:行数 limit:行数empty:为空时显示的信息 mod:取模基数,常用于控制多少条数据后换行、变色等 cache:缓存时间,为0则不缓存,为true则永久缓存 orderby:排序字段,支持id,createtime,updatetime,rand(随机),weigh(权重),views(浏览次数) orderway:排序方式,asc=正序,desc=倒序 imgwidth:图片宽度 imgheight:图片高度condition:筛选条件,可使用SQL字段筛选 model:模型ID channel:栏目ID或栏目ID集合 tags:标签 addon:副本字段集,如果为true则表示所有副表字段,多个字段以,进行分隔 field:调用字段,默认为*flag:标志复制
2.3 编写频道页
2.3.1 专属标签
//栏目ID{cms:channel name="id" /}//栏目名称{cms:channel name="name" /}//栏目图片{cms:channel name="image" /}复制
2.3.2 面包屑
{cms:breadcrumb id="item"} <li> <a href="{$item.url}">{$item.name}</a> </li> {/cms:breadcrumb}复制
2.3.3 栏目+内容列表组合
{cms:channellist id="channel" type="son" typeid="$__CHANNEL__.id"} <div class="col-xs-12 col-sm-6"> <h3>{$channel.textlink} <em><a href="{$channel.url}">{:__('More')}</a></em></h3> {cms:arclist id="row" channel="$channel.id" limit="0,1"} <div class="media"> <div class="media-left"> <a href="{$row.url}" {if $row.style}style="{$row.style_text}"{/if}> <div class="embed-responsive embed-responsive-4by3 img-zoom"> <img class="embed-responsive-item media-object" width="64" height="64" src="{$row.image}"> </div> </a> </div> <div class="media-body"> <h4 class="media-heading">{$row.textlink}</h4> <p>{$row.description}</p> </div> </div> {/cms:arclist} <ul class="list-unstyled inner-list"> {cms:arclist id="row" channel="$channel.id" limit="1,5"} <li> <a href="{$row.url}" {if $row.style}style="{$row.style_text}"{/if}>{$row.title}</a> <span class="pull-right">{$row.publishtime|date='m-d',###}</span> </li> {/cms:arclist} </ul> </div>复制
2.4 编写列表页
列表也可使用频道页标签。
2.4.1 内容列表
{cms:pagelist id="item"} {include file="common/item_news"} {/cms:pagelist}复制
2.4.2 分页
{if false}<!-- S 分页栏 --><div class="text-center pager">{cms:pageinfo type="simple" /}</div><!-- E 分页栏 -->{if $__PAGELIST__->isEmpty()}<div class="loadmore loadmore-line loadmore-nodata"><span class="loadmore-tips">暂无数据</span></div>{/if} {/if}复制
2.4.3 无刷新加载
{if $__PAGELIST__->isEmpty()} <div class="loadmore loadmore-line loadmore-nodata"><span class="loadmore-tips">暂无更多数据</span></div> {else /} <div class="text-center"> <a href="?page={:$__PAGELIST__->getNextPage()}" data-page="{:$__PAGELIST__->getNextPage()}" class="btn btn-default my-4 px-4 btn-loadmore">加载更多</a> </div> {/if}复制
2.5 编写内容页
2.5.1 基本字段调用
//文档查看次数{cms:archives name="views" /}//文章作者{cms:archives name="author" /}//评论数{cms:archives name="comments" /} //点赞{cms:archives name="likes" /} //文档发布时间{cms:archives name="createtime|date='d',###" /}//文档内容{cms:archives name="content" /}//调用副表字段 price{cms:archives name="price" /}复制
2.5.2 是否包含副本字段
{if isset($__ARCHIVES__.price) && $__ARCHIVES__.price>0 && !$__ARCHIVES__.ispaid}<div class="article-pay"> <div class="alert alert-danger"> <strong>温馨提示!</strong> 你需要支付 <b>¥{cms:archives name='price' /}</b> 元后才能查看付费内容 <a href="{:addon_url('cms/order/submit', ['id'=>$__ARCHIVES__.id])}" class="btn btn-success"><i class="fa fa-wechat"></i> 立即支付</a> <a href="{:addon_url('cms/order/submit', ['id'=>$__ARCHIVES__.id,'paytype'=>'alipay'])}" class="btn btn-primary"><i class="fa fa-money"></i> 支付宝支付</a> <a href="{:addon_url('cms/order/submit', ['id'=>$__ARCHIVES__.id,'paytype'=>'balance'])}" class="btn btn-warning btn-balance" data-price="{cms:archives name='price' /}"><i class="fa fa-dollar"></i> 余额支付</a> </div></div>{/if}复制
isset($__ARCHIVES__.price)
返回是否包含字段
2.6 编写单页
2.6.1 基本字段调用
//调用单页标题{cms:page name="title" /}//调用单页内容{cms:page name="content" /}//评论数{cms:archives name="comments" /} //点赞{cms:archives name="likes" /}//查看次数{cms:archives name="views" /}复制
3、创建小程序页面(UniApp+ColorUI)
3.1 创建UniApp+ColorUI模版
新版UniApp已包含ColorUI项目模版。
4、小程序进阶使用
小程序进阶部分,例举了数据接口的编写,并包含一个封装好的请求模块和api接口地址,以及对应的用法。为了控制篇幅这里新开一篇文章。
发表评论 取消回复