10.1 制作标签文档
产品多级分类
<ul class="xypg-left-nav">
{% for value in app('category').lists('product') %}
<li data-id="{{ value.cid }}">
<a href="{{ value.url }}">{{ value.cname }}</a>
<div class="first-nav-btn"></div>
{% if second.childcategory is not empty %}
<ul class="xypg-left-subnav">
{% for second in second.childcategory %}
<li data-id="{{ second.cid }}">
<a href="{{ second.url }}">{{ second.cname }}</a>
{% if second.childcategory is not empty %}
<ul class="xypg-left-threenav">
{% for third in second.childcategory %}
<li data-id="{{ third.cid }}">
<a href="{{ third.url }}">{{ third.cname }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
单页面多级分类
<ul class="nav-down">
{% for value in app('page').lists(31) %}
<li><a href="{{value.url}}">{{ value.title }}</a>
{% if second.chil_cate is not empty %}
<ul class="three_menu">
{% for cate in second.chil_cate %}
<li><a href="{{ cate.url }}">{{ cate.title }}</a><li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% if value.target == '_blank' %}target='_blank'{% endif %} // 判断跳转方式
说明页调取
{% set test = app('section').id(28680) %} // 声明变量
<a href="{{ test.content.link }}" >
<h3>{{ test.title}}</h3>
<img src="{{ test.content.img }} " alt="{{ test.title}}">
<h4>{{ test.content.summary |truncate(200,'...') }} </h4>
<h5>{{ test.content.content | raw }}</h5>
</a>
{% set test = app('section').id(28680) %}
{{ test.title} // 调用名称
{{ test.content.img }} // 调用图片
{{ test.content.link }} // 调用链接
{{ test.content.summary }} // 调用描述
{{ test.content.content | raw }} // 调用内容
广告图调用方法
{% for value in app('section').id('45528') %}
<li>
<a href="{{ value.url }} " >
<img src="{{ value.img }}" alt="{{ value.name }}">
<h3>{{ value.name }}</h3>
<p>{{ value.summary }}</p>
</a>
</li>
{% endfor %}
<!--单个广告图调取-->
<img src="{{ app('section').id('45528')[0].img }}" alt="{{ app('section').id('45528')[0].name }}">
参数说明:
{{ value.img }} // 调用图片路径
{{ value.name }} // 调用标题
{{ value.url }} // 调用链接
{{ value.summary }} // 调用描述
图文调用方法
{% for value in app('section').id('20066') %}
<li>
<a href="{{ value.url }} " >
<img src="{{ value.img[0] }}" alt="{{ value.name }}">
<h3>{{ value.name }}</h3>
<h4>{{ value.fname }}</h4>
<dd>{{ value.text1 }}</dd>
<dt>{{ value.text2 }}</dt>
<dl>{{ value.text3 }}</dl>
<p>{{ value.summary }}</p>
</a>
</li>
{% endfor %}
参数说明:
{{ value.name }} // 调用主标题
{{ value.fname }} // 调用副标题
{{ value.text1 }} // 调用文字1
{{ value.text2 }} // 调用文字2
{{ value.text3 }} // 调用文字3
{{ value.img[0] }} // 调用多图路径 第一个默认为0 第二个为1 以此类推...
{{ value.url }} // 调用链接地址
{{ value.summary }} // 调用备注
延伸:通过增加参数达到遍历循环
{% for key,value in app('section').id('20066') %}
<li class="<!--{$key/4}-->">asasa</li>
{% endfor %}
模块(产品,新闻,案例….)调用方法
{% for value in app('section').id('47248') %}
<li class="news_list">
<a href="{{ value.url }}">
<img src="{{ app('content').thumb(value.uploadfiles,400,400) }}" alt="{{ value.title }}">
<h3>{{ value.title }}</h3>
<h4>{{ value.description }} </h4>
<h5>{{ value.summary }}</h5>
<p>{{ value.timeline|date("Y-m-d") }} </p>
<span>{{ value.author }}</span>
</a>
</li>
{% endfor %}
参数说明:
{{ value.url }} // 调用链接地址
{{ value.title }} // 调用标题
{{ value.uploadfiles }} // 调用原图
{{ app('content').thumb(value.uploadfiles[0],400,400) }} // 调用缩略图
{{ value.description }} // 调用描述
{{ value.summary }} // 调用内容
{{ value.timeline|date("Y-m-d") }} // 调用时间
{{ value.author }} // 调用新闻作者
自动调取产品,新闻,案例…
<ul class="product_list">
{% for value in news.show(0,6,0,1) %}
<li>
<a href="{{ value.url }}">
<img src="{{ app('content').thumb(value.uploadfiles[0],400,400) }}" alt="{{ value.title }}">
<h3>{{ value.title }}</h3>
<h4>{{ value.description }} </h4>
<h5>{{ value.summary }}</h5>
<p>{{ value.timeline|date("Y-m-d") }} </p>
<span>{{ value.author }}</span>
</a>
</li>
{% endfor %}
</ul>
* 参数说明:
// 产品调用
{% for value in products.show(0,6,0,1) %}
...
{% endfor %}
// 案例调用
{% for value in cases.show(0,6,0,1) %}
...
{% endfor %}
// 新闻调用
{% for value in news.show(0,6,0,1) %}
...
{% endfor %}
// (0,6,0,1)
//第一个参数 调取分类
//第二个参数 调取显示个数
//第三个参数 0(默认),1(推荐),2(置顶)
//第四个参数 0(正序),1(倒序)
分类调取
{% for value in app('category').lists('news') %}
<li>
<a href="{{ value.url }}">
<h3>{{ value.cname }}</h3>
<img src="{{ value.img }}" alt="{{ value.cname }}">
<img src="{{ value.banner }}" alt="{{ value.cname }}">
<h4>{{ value.intro }}</h4>
</a>
</li>
{% endfor %}
参数说明:
{% for value in app('category').lists('news') %}
{{ value.url }} // 调取链接地址
{{ value.cname }} // 调取分类名称
{{ value.img }} // 调取缩略图
{{ value.banner }} // 调取栏目图片(一般为当前分类banner图)
{{ value.intro }} // 调取缩略图备注
{% endfor %}
拆分
{% block menus %}
{% snippet "category" data=app('category').lists('product',first_cid) %}
{% endblock %}
友情链接
<!--0 调取所有 1 调取文字链接 2 调取图片链接-->
{% for value in app('links').lists(1) %}
<a href='{{ value.linkurl }}' target='_blank'>
<h3>{{ value.linktitle }}</h3>
<img src="{{ value.logoimg }}">
</a>
{% endfor %}
参数说明:
{% for value in app('links').lists(1) %}
{{ value.linkurl }} // 调取网站URL
{{ value.linktitle }} // 调取网站名称
{{ value.logoimg }} // 调取LOGO图片
{{ value.intro }} // 调取网站描述
{% endfor %}
商盟链接调取:
{% for value in app('links').league %}
<a href='{{ value.linkurl }}' target='_blank'>
{{ value.linktitle }}
</a>
{% endfor %}
单页判断
{% if page.id ==96 %}
{{ page.content | raw }}
{% else if page.id ==99 %}
{{ page.content | raw }}
{% else %}
{{ page.content | raw }}
{% endif %}
企业分站
<div class="top_seo wow fadeInRight">
{% if config('version') == 1 %}
<a href="{{ url_article }}">{{ 'general.article' | t }}</a> |
<a href="{{ url_index }}region/">{{ 'general.region' | t }}</a> | {% endif %}
<a href="{{ url_sitemap }}">{{ 'general.site_map' | t }}</a> |
<a href="{{ url_index }}rss.xml">RSS</a> |
<a href="{{ url_index }}sitemap.xml">XML</a>
{% if count is not empty %} | <a href="{{ url_index }}dm/" class="feedback" target="_blank" rel="nofollow">
{% if count > 0 %}{{ 'general.you_have' | t }}<span class="text-danger">{{ count }}</span>
{{ 'general.inquiry_info' | t }}{% else %}
{{ 'general.no_inquiry_info' | t }}{% endif %}</a>
{% endif %}
</div>
限制数量
{% if loop.index0 <3 %}
{% endif %}
10.1单页三级下拉
{% for cate in second.chil_cate %}
<li><a href="{{ cate.url }}">{{ cate.title }}</a><li>
{% endfor %}
10.1分类三级下拉
<div class="secc">
<a href="{{ second.url }}" {% if second.target=='_blank' %}target='_blank' {% endif %}>{{ second.title }}</a>
<div class="third">
{% for cate in second.chil_cate %}
<a href="{{ cate.url }}">{{ cate.title }}</a>
{% endfor %}
</div>
</div>
常用代码
/* 文字阴影 */
h2{
text-shadow: 6px 1px 10px #000;
}
/* 单页面单独调二级 */
{% for value in app('page').lists(27) %}
<dd><a href="{{ value.url }}">{{ value.title }}</a></dd>
{% endfor %}
/* 单个分类二级调用 */
{% for value in app('category').lists('product', 1) %}
<li>
<a href="{{ value.url }}">
<h3>{{ value.cname }}</h3>
</a>
</li>
{% endfor %}
/* 热门关键词: */
{{ h1 | raw }}
/* 限制字符 */
{{ value.summary|truncate(60,'...') }}
/* 友情链接内页不显示 */
{% if count is not empty %}
<div class="link hidden-sm hidden-xs">
<dd>
{% for value in app('links').lists(1) %}
<a href='{{ value.linkurl }}' target='_blank'>{{ value.linktitle }}</a>
{% endfor %}
</dd>
</div>
{% endif %}
/* 底部分类 */
<dl>
<dt>关于我们</dt>
{% for value in app('page').lists(27) %}
<dd><a href="{{ value.url }}">{{ value.title }}</a></dd>
{% endfor %}
</dl>
<dl>
<dt>产品中心</dt>
{% for value in app('category').lists('product') %}
<dd><a href="{{ value.url }}">{{ value.cname }}</a></dd>
{% endfor %}
</dl>
/* WOW.js – 让页面滚动更有趣 */
1、引入文件
<link rel="stylesheet" href="css/animate.min.css">
2、HTML
<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>
可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>
3、JavaScript
new WOW().init();
如果需要自定义配置,可如下使用:
var wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true
});
wow.init();
属性/方法 类型 默认值 说明
boxClass 字符串 ‘wow’ 需要执行动画的元素的 class
animateClass 字符串 ‘animated’ animation.css 动画的 class
offset 整数 0 距离可视区域多少开始执行动画
mobile 布尔值 true 是否在移动设备上执行动画
live 布尔值 true 异步加载的内容是否有效
Tab切换 (10.1)
<!-- c1_index -->
<div class="c1_index">
<div class="max1500 clearfix">
<div class="ttt1 wow fadeInUp">
<em></em>
<h3>产品展示</h3>
</div>
<div class="pro_wap wow fadeInUp">
<ul class="sort1 hd">
{% for value in app('category').lists('product') %}
<li><a href="{{ value.url }}">{{ value.cname }}</a></li>
{% endfor %}
</ul>
<div class="pro_con bd">
{% for value in app('category').lists('product') %}
<div class="pro_main">
<ul class="list_pp clearfix">
{% for val in app('content').lists('product', value.cid, 8) %}
<li>
<a href="{{ val.url }}" title="{{ val.title }}" class="img">
<div class="img com-img"><img src="{{ app('content').thumb(val.uploadfiles[0],600,600) }}" alt="{{ val.title }}"></div>
<h3>{{ val.title | truncate(20,'...')}}</h3>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<script>
jQuery(".pro_wap").slide({});
</script>
导航下拉三级 (10.1)
{% if data is not empty %}
<ul class="x-menu clearfix">
{% for key, first in data %}
{% if key== 1 %}
<li>
<a href="{{ first.url }}" {% if first.target == '_blank' %}target='_blank'{% endif %}>{{ first.name }}{% if first.content_model_id is not empty %}<span>+</span>{% endif %}</a>
{% if app('page').lists(first.content_model_id) is empty %}{% else %}
<ul class="nav-down">
{% for second in app('page').lists(first.content_model_id)%}
<li><a href="{{second.url}}" {% if second.target == '_blank' %}target='_blank'{% endif %}><img src="{{ second.img }}" alt="{{ second.title }}">{{ second.title }}</a>
{% if second.chil_cate is not empty %}
<ul class="three_menu">
{% for cate in second.chil_cate %}
<li><a href="{{ cate.url }}">{{ cate.title }}</a><li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% else %}
<li>
<a href="{{ first.url }}" {% if first.target == '_blank' %}target='_blank'{% endif %}>{{ first.name }}<span>+</span></a>
{% if first.content_model is not empty %}
{% if first.content_model == 'page' %}
{% if app('page').lists(first.content_model_id) is empty %}{% else %}
<ul class="x-sub-menu">
{% for second in app('page').lists(first.content_model_id)%}
<li><a href="{{ second.url }}" {% if second.target == '_blank' %}target='_blank'{% endif %}>{{ second.title }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% else %}
{% if app('category').lists(first.content_model, first.content_model_id) is empty %}{% else %}
<ul class="x-sub-menu">
{% for second in app('category').lists(first.content_model, first.content_model_id) %}
<li><a href="{{ second.url }}" {% if second.target == '_blank' %}target='_blank'{% endif %}>{{ second.cname }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endif %}
{% else %}
{% if first.child is not empty %}
<ul class="x-sub-menu">
{% for second in first.child %}
<li><a href="{{ second.url }}" {% if second.target == '_blank' %}target='_blank'{% endif %}>{{ second.name }}</a></li>
{% endfor %}
</ul>
{% endif %}
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}