标签及使用说明 - 宝塔CMS平台

网站基础类库

1、位置：放到<head></head>内。

2、作用：jQuery类库+常用JS方法类库。

3、插件信息：

下载最新版 bt.core.js （右击链接》目标另存为），建议下载完请放到自己项目的此目录下再引用：/Content/UserSite/

分页插件

1、位置：放到<head></head>内。

2、作用：列表页分页码效果。

3、插件信息：

搜索模板页

1、命名：search.html

2、作用：搜索站内的产品、文章等信息。

3、数据源字段说明：

字段名称	说明	字段名称	说明
id	信息ID	title	文章标题/产品名称
date	发布日期（格式：2019-07-01）	image	图片路径
summary	摘要	price	价格（产品使用）
typeid	分类ID（产品使用）	typename	分类名称（产品使用）
href	详情页链接

4-1、搜索按钮事件实例：

4-2、搜索结果页实例：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
            <title>站内搜索 - </title>
            <meta name="keywords" content="" />
            <meta name="description" content="" />

5、使用说明：

(1) 可直接复制上面的实例使用，参数可根据实际情况进行修改。
(2) 同时搜索多个关键字时支持的字段：

type:"news"时	type:"pro"时	说明
title、keyword、summary、source	title、keyword、summary、typeid、所有扩展字段	字段名均不带$符号

详情页评论/网站留言评论

1、作用：文章或产品详情页需要评论功能时。

表单控件名称	用途说明	表单控件名称	用途说明
InfoId	这是一个隐藏控件，默认值="<!--$id$-->"即可，若非详情页评论，可忽略此项	InfoName	这是一个隐藏控件，默认值="<!--$title$-->"即可，若非详情页评论，可忽略此项
Content	留言内容	Name	姓名/昵称
Phone	电话/手机号	Title	主题/标题
Email	邮箱	QQ	QQ号码
Company	公司/企业名称	Address	地址
Job	职位/岗位/职业/行业	ReContent	评论回复

2-1、使用实例（提交表单）：

2-2、使用实例（表单中上传图片、附件）：

2-3、使用实例（不分页调取列表数据）：

2-4、使用实例（分页调取列表数据）：

<div id="commentapp" v-cloak>
        <div v-for="(item,index) in dataList">
            <div>
                <div>{{item.Name}}，{{item.Phone}}，{{item.CreateDate}}</div>
                <div>{{item.Content}}</div>
                <div>【回复】{{item.ReContent}}</div>
            </div>
        </div>
        <div v-if="dataList.length==0">没有相关信息</div>

3、使用说明：

(1) 此实例中的控件元素可直接复制使用，排版布局仅作参考。

拆分日期进行排版

1、作用：页面内容排版布局时，需要对日期进行拆分排版。此插件依赖于网站基础类库：bt.core.js

2-1、使用实例：

实例效果

3、使用说明：

(1) 此实例中的控件元素、JS代码可直接复制使用，排版布局仅作参考。

栏目选中效果

1、作用：给导航某一栏目加上选中的样式（样式自定义）。此插件依赖于网站基础类库：bt.core.js

2-1、使用实例：

实例效果

3、使用说明：

(1) 此实例中的控件元素、JS代码可直接复制使用，排版布局仅作参考。

点击量(文章/产品)

1、作用：文章或产品详情页的点击量功能。此插件依赖于网站基础类库：bt.core.js

2-1、详情页使用实例：

2-2、列表页使用实例：

3、使用说明：

(1) 此实例中的控件元素、JS代码可直接复制使用，排版布局仅作参考。

网站计数器

1、作用：网站底部计数器功能，记录网站访问量。此插件依赖于网站基础类库：bt.core.js

2、使用实例：

3、使用说明：

(1) 此实例中的控件元素、JS代码可直接复制使用，排版布局仅作参考。

自动检测终端

网站基础类库bt.core.js中已包含此插件！

1、作用：移动端浏览PC站网址时，自动转向手机站。PC端浏览手机站网址时，自动转向PC站。

2、使用实例：（若没有引用过 bt.core.js）

3、使用说明：

(1) 放置于PC站+手机站的所有模板页内，也可放置于公共JS文件内（若有）；
(2) 此插件依赖于jQuery文件。

网站访问统计

网站基础类库bt.core.js中已包含此插件！

1、作用：统计网站每天的访问量，并在后台以报表形式展示。

2、使用实例：（若没有引用过 bt.core.js）

3、使用说明：

(1) 放置于PC站+手机站的所有模板页内，也可放置于公共JS文件内（若有）；
(2) 此插件依赖于jQuery文件。

微信分享

1、作用：通过微信分享页面网址给朋友或朋友圈时，以卡片形式显示。此插件依赖于网站基础类库：bt.core.js

2、使用实例：

<div class="cont-detail">
        <rzq:viewnewscontent>
            <template>
                <h3 class="title">$title$</h3>
                ......
                <div class="remark" style="display:none;">
                    <img src="$image$" style="height:0;width:0;" />
                    <span>$summary$</span>
                </div>
                ......
            </template>
        </rzq:viewnewscontent>
    </div>
    
    
    <script src="/content/usersite/bt.Core.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

<script>
        $(function () {
            //微信分享接口
            bt.wxShare(
                $(".cont-detail .title").text(), //分享标题
                $(".cont-detail .remark span").text() || $(".cont-detail .title").text(), //分享描述
                location.href, //分享链接，http形式，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                "http://" + window.location.hostname + ($(".cont-detail .remark img").attr("src") || "/temp/m/images/logo.jpg"), //分享图标，http形式
            );
        });
    </script>

<add key="wx_AppId" value="wx****************" />
    
    <add key="wx_Secret" value="********************************" />

3、使用说明：

(1) 此实例中的控件元素、JS代码可直接复制使用，排版布局仅作参考。