此文档在默认文档基础上扩展

一、 模板文件组成

了解模板文件夹里面的文件结构

文件结构

基本模板里面包含的 main.htm, listcolumn.htm, displayinfo.htm (三个HTML文件是必须的),

 1、使用 UTF-8无 BOM格式编码保存文件，

 2、 模板封面缩略图（summary.jpg）必须使用小图片，尺寸为160*120。

二、 模板文件代码结构

以通用模板为例：

首页：

（图2-1）

默认列表页：

（图2-2）

默认文章页：

（图2-3）

 3个模板文件，结构默认为三个部分分别为页头(header)、主体(container)和页脚(footer)

多屏自适应：

<meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>

css:

<link rel="stylesheet" href="mobile.css" type="text/css" />
<link rel="stylesheet" href="media.css" type="text/css" />

js：

<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
$(function(){
    // 初始化SDAPP
    new SDAPP({
        'focus':{
            zWidth:1000,
            zHeight:366,
            pagination: true
        },
        "menu":{
            type:"aside,slide" // wap导航显示方式（只能二选一）
        }
    });
});
</script>

三、 默认页特殊位置

A 、导航部分（nav）

结构源码：

<!--aside侧边抽屉导航，点击使用，位置任意-->
<a class="navi-aside-toggle"></a>
<!--Start||nav-->
<!--导航根div上需写上这两个class类名 nav ，  wp-navi  -->
<div class="wrapper nav wp-navi" id="nav">
    <div class="inner">
        <!--导航-->
        <div class="navbar" frag="面板1">
            <div class="navbox" frag="窗口1">
                <div frag="窗口内容">
                    <div class="navi-slide-head">
                        <h3 class="navi-slide-title">导航</h3>
                        <a class="navi-slide-arrow"></a>
                    </div>
                    <!--[NaviStructBegin]-->
<!--
data-nav-aside：代码识别标志，需放置在 ul标签上，
title：显示的标题名称；
index：区块
-->
                    <ul class="wp-menu clearfix" data-nav-aside='{"title":"导航","index":0}'>
                        <!--[NaviItemCycleBegin]-->
                        <li class="menu-item {级别样式}"> <a class="menu-link" href="{栏目URL}" target="{打开方式}">{栏目名称}</a>
                            <!--[MenuStructBegin]-->
                            <em class="menu-switch-arrow"></em>
                            <ul class="sub-menu clearfix">
                                <!--[MenuItemCycleBegin]-->
                                <li class="sub-item {级别样式}"><a class="sub-link" href="{栏目URL}" target="{打开方式}">{栏目名称}</a>
                                    <!--[SubMenuList]-->
                                </li>
                                <!--[MenuItemCycleEnd]-->
                            </ul>
                            <!--[MenuStructEnd]-->
                        </li>
                        <!--[NaviItemCycleEnd]-->
                    </ul>
                    <!--[NaviStructEnd]-->
                </div>
            </div>
        </div>
    </div>
</div>
<!--aside导航-->
<div class="wp-navi-aside" id="wp-navi-aside">
    <div class="aside-inner">
        <div class="navi-aside-wrap"></div>
    </div>
    <div class="navi-aside-mask"></div>
</div>
<!--End||nav-->

js控制：

<script type="text/javascript">
$(function(){
    // 初始化SDAPP
    new SDAPP({
        "menu":{
            type:"aside,slide"
        }
    });
});
</script>

B、大图切换（fouce）

结构源码：

<div frag="窗口2">
    <div frag="窗口内容">
        <div class="focus" data-focus>
            <!--[InfoCycleBegin]-->
            <img src="{图片路径}" data-focus-title="{标题}" data-focus-url="{文章URL}">
            <!--[InfoCycleEnd]-->
        </div>
    </div>
</div>

js控制：

<script type="text/javascript">
$(function(){
    // 初始化SDAPP
    new SDAPP({
        'focus':{
            zWidth:1000,
            zHeight:366,
            pagination: true
        }
    });
});
</script>

C、列表页（listcolumn）

位置栏目

结构源码：

<!--位置栏目-->
<div class="col_menu_head" frag="面板3">
    <h3 class="col_name" frag="窗口3" portletmode="simpleColumnAnchor">
        <span class="col_name_text">
            <div frag="窗口内容">位置栏目</div>
        </span>
    </h3>
    <a class="column-switch"></a> <!--wap情况，有无栏目列表时使用-->
</div>