当前位置:首页 > 新闻动态 > 网站文章

FA CMS 使用手册(网页+小程序)

来源: 浏览:131 时间:2023-08-14

简介

本使用手册仅适用于FastAdmin官方的CMS插件。

本手册将通过套用一份html模版,详细讲述CMS里常用的命令及用法;并使用UniApp+ColorUI创建小程序端(暂时只测试微信小程序)。

E0pO4OplgF43q1sFxGW7eQ==
另附:FastAdmin CMS插件 标签使用说明

1、基本功能

1.1 构思网站架构

常见的企业网站架构一般包括封面页(首页、栏目封面等)、列表页(新闻列表、服务列表、案例列表等)、内容页(新闻、服务、案例详情等)单页(联系方式、关于等)等,复杂网站还有企业商城、多语言等,本手册仅做常见功能的介绍,如需要的人数较多,后续会考虑更新。

WN7/mhx4XWq/wz80fzR6FA==

1.2 创建模型(可跳过)

模型是区分内容类型的方式,如普通的新闻内容、产品内容, 他们有比较明显的类型划分。操作流程:添加模型 -> 添加表名(建议cms_addon开头) -> 添加需要的新字段(除基本模型里的字段外,新增的字段)

f8jXmRxCvNqch8DDKYJJAA==

1.3 新建单页(可跳过)

自定义URL名称
RJWEGyYDPFo/34HzcIHk+Q==

1.4 新建栏目、内容

栏目有频道、列表、外链三种类型;频道下 不能 添加内容(文章),主要用于频道封面页的跳转;列表下 可以 添加内容,主要用于列表页的跳转;外链下 不能 添加内容,主要用于外链、单页的跳转。

SPABvEGfzL39NQgLKBvVLQ==

2、创建Web模版

2.1 提取公共布局

2.1.1 静态资源

addons/cms/assetsimages|fonts|css|js
DvarqiwEAg+RsFULWMwglg==

2.1.2 基本布局

common/layout.html
oEgkt8R/i3BzFUmnJU4ZZA==

2.2 编写首页

2.2.1 导航栏(栏目列表)

举例:

VSIpYlkgCyHW7BUDjZeJbg==
  • 首页
  • {cms:channellist id="nav" type="top" condition="1=isnav"}
  • {$nav.name} {if $nav.has_child}
      {cms:channellist id="sub" type="son" typeid="$nav['id']" condition="1=isnav"}
    • {$sub.name}
    • {/cms:channellist}
    {/if}
  • {/cms:channellist}
{cms:channellist id="nav" type="top" condition="1=isnav"}VryHyOfrjgCfK5LmsQ7jRQ==

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} 判断当前菜单是否被选中3zCSQArzi5Ml0V0q0nakbw==

{if $nav.has_child} 判断是否包含子菜单

2.2.2 区块

一些简单的数据列表可以可以使用区块进行管理,区块可以包含的字段包含:标题、图片、链接、内容,可以满足基本的数据需求,调用时也比较简单,常用于局部列表文本(提供的服务、友情链接等)。举例:

iD8IvjV2Z2k38q0MZXpG3A==
{cms:blocklist id="block" name="clients" row="9" orderway="asc"}
{/cms:blocklist}
{cms:blocklist id="block" name="clients" row="9" orderway="asc"}AlpvyPOp133rWV9gtxwIDA==

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:指定区块的名称

如果只需要调用区块的内容,可以使用简化的调用方式:

GbZULi4xfNtFurqNw0HReA==
{cms:block name="aboutus" /}

2.2.3 内容(文章)列表

{cms:arclist id="row" channel="2" limit="0,1"}
    

{$row.textlink}

{$row.description}

{/cms:arclist}
{cms:arclist id="row" channel="$channel.id" limit="0,1"}lqFFfflXHtwoWGMGgJPZ9w==

cms:arclist 为内容列表的模版标签,其可用变量及含义如下:

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"}
  • {$item.name}
  • {/cms:breadcrumb}

    2.3.3 栏目+内容列表组合

    {cms:channellist id="channel" type="son" typeid="$__CHANNEL__.id"}
    

    {$channel.textlink} {:__('More')}

    {cms:arclist id="row" channel="$channel.id" limit="0,1"}

    {$row.textlink}

    {$row.description}

    {/cms:arclist}
      {cms:arclist id="row" channel="$channel.id" limit="1,5"}
    • {$row.title} {$row.publishtime|date='m-d',###}
    • {/cms:arclist}

    2.4 编写列表页

    列表也可使用频道页标签。

    ZINxwbJ09CJW+7YWW7cW7w==

    2.4.1 内容列表

    {cms:pagelist id="item"}
        {include file="common/item_news"}
    {/cms:pagelist}

    2.4.2 分页

    {if false}
    
    
    {cms:pageinfo type="simple" /}
    {if $__PAGELIST__->isEmpty()}
    暂无数据
    {/if} {/if}

    2.4.3 无刷新加载

    {if $__PAGELIST__->isEmpty()}
    
    暂无更多数据
    {else /} {/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}
    
    温馨提示! 你需要支付 ¥{cms:archives name='price' /} 元后才能查看付费内容 立即支付 支付宝支付 余额支付
    {/if}
    isset($__ARCHIVES__.price)

    2.6 编写单页

    2.6.1 基本字段调用

    UqUiMdykPk/5EgZlTBzPLg==
    //调用单页标题
    {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项目模版。

    jdSxZlvMLoAyt/SHxFkqSw==

    4、小程序进阶使用

    小程序进阶部分,例举了数据接口的编写,并包含一个封装好的请求模块和api接口地址,以及对应的用法。为了控制篇幅这里新开一篇文章。

    地址 · ADDRESS

    地址:建邺区新城科技园嘉陵江东街18号2层

    邮箱:309474043@qq.Com

    点击查看更多案例

    联系 · CALL TEL

    400-8793-956

    售后专线:025-65016872

    业务QQ:309474043    售后QQ:1850555641

    ©南京安优网络科技有限公司 版权所有   苏ICP备12071769号-4  网站地图