## 簡介
> 本使用手冊僅適用于**FastAdmin官方的[CMS](https://www.fastadmin.net/store/cms.html)插件**。
本手冊將通過套用一份html模版，詳細講述[CMS](https://www.fastadmin.net/store/cms.html)里常用的命令及用法；
> 另附：FastAdmin[CMS](https://www.fastadmin.net/store/cms.html)插件 標簽使用說明
## 1、基本功能
### 1.1 構思網站架構
常見的企業網站架構一般包括封面頁（首頁、欄目封面等）、列表頁（新聞列表、服務列表、[案例](https://www.fastadmin.net/case.html)列表等）、內容頁（新聞、服務、[案例](https://www.fastadmin.net/case.html)詳情等）單頁（聯系方式、關于等）等，復雜網站還有企業商城、多語言等，本手冊僅做常見功能的介紹，如需要的人數較多，后續會考慮更新。
### 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" /}
~~~
