geling's Introduction

Bootstrap 4 脚手架

A Bootstrap 4.0 (Beta 3) boiler plate with sass, concatenation, minification, autoprefixer, Browsersync, hot reloading and sourcemaps all runned by Gulp

Quick Start

# 1 克隆仓库
git clone https://github.com/cnzi/geling.git

# 2 进入目录
cd geling

# 3 安装依赖
npm install

# 4 启动脚本
gulp serve 启动本地预览服务
gulp 生成dist文件

脚本相关

前端模板引擎

前端模板引起在浏览器中使用js，生成html文件插入到页面中，本项目使用jquery tmpl模板引擎，教程

首页在页面中定义模板

<script id="articleTemplate" type="text/x-jquery-tmpl">
    {{each(i, item) list}}
    <a href="/portal/game/article?id=${item.id}">
        <div class="container pageListItem">
            <div class="row">
                <div class="text-right cover col-5 col-sm-4 ">
                    <img src="${item.more.thumbnail}" alt="">
                </div>
                <div class="text-left col-7 col-sm-8 pageListItemRight">
                    <h2 class="title">${item.post_title}</h2>
                    <p>${item.post_excerpt}</p>
                    <div class="time">${item.published_time.split(' ')[0]}</div>
                </div>
            </div>
        </div>
    </a>
    {{/each}}
</script>

使用ajax，请求数据，生成html，插入页面中

$.ajax({
    dataType: "json",
    url: "http://itecon.org/api/portal/lists/getDefaultCategoryPostLists?field=post.id,post_excerpt,post_title,published_time,more&limit=6",
    success: function(r) {
        $("#articleTemplate").tmpl({
            list: r.data.list,
        }).appendTo("#articleList");
    }
});

Recommend Projects