文章内容_GJ-UI前端组件

发布时间::2018-06-02 11:42:10 已收录 阅读:315次

将将下列html代码、javascript代码复制粘贴在html文件的相应位置即可(可参考组件附带index.html文件中相应的注释说明位置);

文章内容[gj-content]:

HTML代码:

<div class="gj-wk">
    <nav class="ljdh">
        <i class="fa fa-home" aria-hidden="true"></i>
        <a href="javascript:(0)">首页</a> &gt;
        <a href="javascript:(0)">列表名称</a> &gt; 文章正文
    </nav>
    <div class="gj-body gj-content">
        <div class="gj-title">
            <h3>这里是此篇文章内容的标题部分显示</h3>
            <span>发布时间:2018-02-26 17:15</span>
            <a href="http://www.baidu.com/s?wd=文章标题" target="_blank">已收录</a>
            <span class="hidden-xs">作者:admin</span>
            <span>阅读:668次</span>
            <div class="gjcont-fx bdsharebuttonbox hidd-xs bdshare-button-style0-24" data-bd-bind="1523441750983">
                <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
                <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
                <a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a>
                <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
                <a href="#" class="bds_meilishuo" data-cmd="meilishuo" title="分享到美丽说"></a>
                <a href="#" class="bds_mogujie" data-cmd="mogujie" title="分享到蘑菇街"></a>
                <a href="#" class="bds_huaban" data-cmd="huaban" title="分享到花瓣"></a>
                <a href="#" class="bds_youdao" data-cmd="youdao" title="分享到有道云笔记"></a>
                <a href="#" class="bds_ty" data-cmd="ty" title="分享到天涯社区"></a>
                <a href="#" class="bds_isohu" data-cmd="isohu" title="分享到我的搜狐"></a>
                <a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
                <a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a>
                <a href="#" class="bds_print" data-cmd="print" title="分享到打印"></a>
                <a href="#" class="bds_copy" data-cmd="copy" title="分享到复制网址"></a>
            </div>
        </div>
        <div class="gj-cont">
            <p>不久前,著名演员、歌手刘德华在香港树仁大学获颁授荣誉博士学位。作为知名艺人,刘德华曾获得过铜紫荆星章、太平绅士、香港十大杰出青年、世界十大杰出青年、世界杰出华人奖、演艺学院颁发荣誉院士、加拿大纽宾士域蓝仕桥大学颁授荣誉博士学位等荣誉,可见他受到各方认可,是一个有学问的艺人。</p>
            <blockquote>
                <p>看来腾讯与头条又起摩擦,此前微信朋友圈一直屏蔽阿里系链接,淘宝与微信的恩怨一直不断。在用户已经习惯了“微信中打不开任何阿里系链接”的局面之后,淘宝曾屡次试图撬开微信大门,成效甚小。如今头条貌似也未能逃过腾讯的屏蔽。</p>
            </blockquote>
            <h1>这里是标题部分内容</h1>
            <h2>这里是标题部分内容</h2>
            <h3>这里是标题部分内容</h3>
            <h4>这里是标题部分内容</h4>
            <h5>这里是标题部分内容</h5>
            <h6>这里是标题部分内容</h6>
            <p><img src="images/gjui.jpg" alt=""></p>
            <p>有记者问“对靠脸吃饭的小鲜肉有什么忠告”,刘德华幽默以对:“我还能说什么呢,我靠这个脸靠了那么多年!”然后又补充道:“我觉得小鲜肉也不要介意别人说那么多,要好好准备自己,总有一天可以走到我这个年纪,大家就开始发现你的演技了。”</p>
        </div>
        <div class="gcont-page">
            <div class="gj-lg-6">上一篇:<a href="javascript:(0)">这是上一篇内容的标题部分</a></div>
            <div class="gj-lg-6">下一篇:已经是最后一篇了</div>
        </div>
    </div>
</div>

javascript代码(分享插件):

<script>
    //分享js代码
    window._bd_share_config = {
        "common": {
            "bdSnsKey": {},
            "bdText": "",
            "bdMini": "2",
            "bdMiniList": false,
            "bdPic": "",
            "bdStyle": "0",
            "bdSize": "24"
        },
        "share": {}
    };
    with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
</script>

YzmCMS代码:

<div class="gj-wk">
    <nav class="ljdh">
        <i class="fa fa-home" aria-hidden="true"></i>
        {get_location($catid)}
    </nav>
    <div class="gj-body gj-content">
        <div class="gj-title">
            <h3>{$title}</h3>
            <span>发布时间:{date('Y-m-d H:i:s',$updatetime)}</span>
            <a href="http://www.baidu.com/s?wd={$title}" target="_blank">已收录</a>
            <span class="hidden-xs">作者:{$nickname}</span>
            <span>阅读:{$click}次</span>
            <div class="gjcont-fx bdsharebuttonbox hidd-xs bdshare-button-style0-24" data-bd-bind="1523441750983">
                <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
                <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
                <a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a>
                <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
                <a href="#" class="bds_meilishuo" data-cmd="meilishuo" title="分享到美丽说"></a>
                <a href="#" class="bds_mogujie" data-cmd="mogujie" title="分享到蘑菇街"></a>
                <a href="#" class="bds_huaban" data-cmd="huaban" title="分享到花瓣"></a>
                <a href="#" class="bds_youdao" data-cmd="youdao" title="分享到有道云笔记"></a>
                <a href="#" class="bds_ty" data-cmd="ty" title="分享到天涯社区"></a>
                <a href="#" class="bds_isohu" data-cmd="isohu" title="分享到我的搜狐"></a>
                <a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
                <a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a>
                <a href="#" class="bds_print" data-cmd="print" title="分享到打印"></a>
                <a href="#" class="bds_copy" data-cmd="copy" title="分享到复制网址"></a>
            </div>
        </div>
        <div class="gj-cont">{$content}</div>
        <div class="gcont-page">
            <div class="gj-lg-6">上一篇:{$pre}</div>
            <div class="gj-lg-6">下一篇:{$next}</div>
        </div>
    </div>
</div>