在我看来,您应该关注一个更加动态的数据系统。 CMS 是一个简单的解决方案,但可能是一种臃肿的方法。
如果您只是希望能够使用静态页面模板并动态填写数据,则可以使用简单的 JSON 文件或 XML。
您使用的是 Javascript,更具体地说是 Angular 还是 jQuery?
可能还有数千种方法可以做到这一点,但如果没有更好的项目细节,那就有点投掷硬币了。
一个非常简单的解决方案是简单地创建一个 AngularJS 组件并将其粘贴到您的单个博客页面 html 中。然后,仅使用外部 JSON 文件,您就可以将所有博客文章动态填充到单个模板文件中。
HTML:
<div ng-app='app' ng-controller='mainCtrl'>
<div ng-repeat="blog in myJson" class="blog-post">
<ul class="blog-list">
<li class="blog-post-item">
<h3>{{blog.title}}</h3>
<p>{{blog.body}}</p>
<p>{{blog.date}}</p>
<p>{{blog.misc}}</p>
</li>
</ul>
</div>
</div>
Javascript:
angular.module('app',['QuickList']).controller('mainCtrl', function($scope){
$scope.myJson = [{
title: "Some title here",
body: "Main blog post body here with <b> html content </b>",
date: "Jan, 1, 2016",
misc: "other info"
},{
title: "Some title here 2",
body: "Main blog post body here with <b> html content </b>",
date: "Jan, 1, 2016",
misc: "other info"
},{
title: "Some title here 3",
body: "Main blog post body here with <b> html content </b>",
date: "Jan, 1, 2016",
misc: "other info"
},{
title: "Some title here 4",
body: "Main blog post body here with <b> html content </b>",
date: "Jan, 1, 2016",
misc: "other info"
}]
})
并确保在您的 index.html 中包含角度源
Here is a Fiddle Example