A Bootstrap 4.0 (Beta 3) boiler plate with sass, concatenation, minification, autoprefixer, Browsersync, hot reloading and sourcemaps all runned by Gulp
# 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");
}
});