幫助中心 > CmsEasy 模板制作 > 內(nèi)容頁模板 > 下載內(nèi)容頁

下載展示內(nèi)容頁

1、制作下載展示內(nèi)容頁

內(nèi)頁模板布局主要分三部分,頁頭/頁中/頁底。

頁面引用語法


1.1 引用頁頭模板header.html



{template 'header.html'}



1.2 頁中部分制作


下載展示內(nèi)容頁其他調(diào)用項(xiàng)都與普通內(nèi)容頁雷同,區(qū)別在于多出了下載信息列表和多圖輪播部分。

內(nèi)容頁頁中調(diào)用可參考[ 查看 ]


1.3 引用頁底模板footer.html



{template 'footer.html'}


2、下載說明部分

2.1 下載信息列表
<table>
<tr>
<th>{lang('dong_size')}:</th>
<td>{$archive['my_size']}</td>//附件尺寸(內(nèi)容自定義字段)
</tr>
<tr>
<th>{lang('nowdownload')}:</th>

 <td>{if $archive['attachment_id']}//判斷內(nèi)容是否上傳了附件
{attachment_js($archive['aid'])}//內(nèi)容附件下載遞增
{else}
{lang('nodownload')}//如無附件顯示無附件(語言項(xiàng)編輯提示信息)
{/if}
</td>
</tr>
</table>
</div>
<div>
<table>
{if config::get('isecoding')=='1'}//判斷是否生成防偽碼
<tr>
<th>{lang('ecoding')}:</th>
<td>{if $archive['ecoding']}{$archive['ecoding']}{else}{lang('not')}{/if}</td>//防偽碼信息,如未生成顯示無
</tr>
{/if}
<tr>
<th>{lang('adddate')}:</th>
<td>{$archive['adddate']}</td>//發(fā)布時(shí)間
</tr>
<tr>
<th>{lang('strgrades')}:</th>
<td>{$archive['strgrade']}</td>//內(nèi)容評(píng)級(jí)
</tr>
</table>


2.2 下載內(nèi)頁多圖輪播代碼


<link href="{$skin_path}/js/lightgallery/css/lightgallery.css" rel="stylesheet">
<div id="carousel-example-generic" class="carousel slide section clearfix" data-ride="carousel" style="max-height:700px; margin-top:10px; overflow:hidden;">
<!-- 大圖切換 -->
<div class="carousel-inner demo-gallerylist-unstyled row" id="lightgallery" role="listbox">
{loop $archive['pics'] $i $pic}
<div class="item img-auto{if $i==1} active{/if}" data-src="{$pic['url']}" data-sub-html="{$pic['alt']}">
<a href="" rel="lightbox['roadtrip']"><img src="{$pic['url']}" alt="{$pic['alt']}" class="img-responsive" onerror='this.src="{config::get('onerror_pic')}"' /></a>
</div>
{/loop}
</div>
<!-- 左右按鈕 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

下載輪播必須加載js調(diào)用:

<script src="{$skin_path}/js/lightgallery/js/lightgallery.min.js"></script>
<script src="{$skin_path}/js/lightgallery/js/lg-pager.min.js"></script>
<script src="{$skin_path}/js/lightgallery/js/lg-fullscreen.min.js"></script>
<script src="{$skin_path}/js/lightgallery/js/lg-zoom.min.js"></script>
<script src="{$skin_path}/js/lightgallery/js/lg-hash.min.js"></script>
<script>
lightGallery(document.getElementById('lightgallery'));
</script>

用 CmsEasy 助您「輕松搭建」企業(yè)官網(wǎng)。

本文是否有幫助?