这几天在github上搭建了博客，但是遇到了这个问题。
本来我是把数据都放在json文件里的，然后。。。我发现这就是在虐待自己，这样写过的人应该都知道，以下是部分代码
这个text对象里就是正文内容，很长很长。。然后就悲剧了！
所以我就又把里面的内容单独放到一个html文件了，向下面这样：
然后就感觉性能也不够好，而且每一篇博文，难道都要新建一个html文件。。汗。。
有没有什么好的解决办法？下面是博客的地址：
https://yuyao1994.github.io/blog
希望有高手能够指点一下。
还有，我的页面除了导航logo外，所有内容都是ajax动态获取的。我的这种写法是不是有问题，
感觉性能有很大的问题！以下附上javascript的源码：
//request方法获取文章内容
$(function(){
function request(title){
var msg="";
$.ajax({
url: 'text/content.json',
type: 'GET',
cache:false,
dataType: 'json',
data:"",
})
.done(function(data) {
if(title==undefined) {
var maxNum=data.blog[data.blog.length-1];
msg+="<header><h2>"+maxNum.title+"</h2><h5>"+maxNum.time+"</h5></header>";
msg+="<div class='text'></div>";
$(".content").html(msg);
eval("("+maxNum.text+")");
}else{
var i=0,j=data.blog.length;
for(;i<j;i++){
if(title==data.blog[i].title){
break;
}
}
var charNum=data.blog[i];
msg+="<header><h2>"+charNum.title+"</h2><h5>"+charNum.time+"</h5></header>";
msg+="<div class='text'></div>";
$(".content").html(msg);
eval("("+charNum.text+")");
};
})
.fail(function() {
$(".content").html("<h2 style='text-align:center;'>抱歉，没有找到该篇文章！</h2>");
})}
request();
//获取最新文章列表
$(function(){
var titleList="";
$.ajax({
url: 'text/content.json',
type: 'get',
cache:false,
dataType: 'json',})
.done(function(data) {
var num=data.blog.length;
if (num<6) {
var i,j=data.blog.length-1;
for(i=j;i>-1;i--){
titleList+="<li><a href='javascript:void(0)'>"+data.blog[i].title+"</a><span>--"+data.blog[i].style+"</span><span class='time'>"+data.blog[i].time+"</span></li>"
}
$(".leftNav .newsList").html(titleList);
}else if(num>5){
var i,j=data.blog.length-1;
for(i=j;i>(num-6);i--){
titleList+="<li><a href='javascript:void(0)'>"+data.blog[i].title+"</a><span>--"+data.blog[i].style+"</span><span class='time'>"+data.blog[i].time+"</span></li>"
}
$(".leftNav .newsList").html(titleList);
};})
.fail(function() {
$(".leftNav .newsList").html("<li>获取文章列表失败！</li>");})
})
//最新文章列表点击事件
$(".container .leftNav .newsList").delegate("li a","click",function() {
var title=$(this).text();
request(title);});
//获取分类列表
function styleList(style){
var msg="";
$.ajax({
url: 'text/content.json',
type: 'get',
cache:false,
dataType: 'json',
})
.done(function(data) {
var i,j=data.blog.length-1;
for(i=j;i>-1;i--){
if (style==data.blog[i].style) {
msg+="<ul class='styleList'><li><a>"+data.blog[i].title+"</a><div class='text'>"+data.blog[i].profile+"</div></li><ul>";
};
}
if(msg==""){
msg+="<h2>本博客"+style+"系列目前没有文章，请看其他系列的文章！</h2>"
};
$(".content").html(msg);
})
.fail(function() {
$(".content").html("<h2 style='text-align:center;'>抱歉，获取文章列表失败！</h2>");
}) }
//styleList列表点击事件
$(".content").delegate('.styleList li a', 'click', function() {
var title=$(this).text();
request(title);});
//导航按钮点击事件
$(".container .leftNav .btn li").click(function() {
var style=$(this).find('a').text();
styleList(style);});
})
为什么要这么做...
直接把文章写成md格式，用jekyll或者Hexo生成静态页面不就好了？
例如：Ahonn' Blog
有git的基础，用一下hexo会简单很多
YzzBlog
你需要Jekyll，这是一个简单的，针对博客设计的静态网站生成器
如果你只用JavaScript，你也可以用JavaScript写一个程序来动态生成文件。
hexo，附带我的博客
写issue里
不要用拼接字符串的方式产生html，而是应该使用前端的模板引擎
为什么我看不懂？
其实如果是静态博文…为何不直接用MD...很多静态博文的博客系统都是这么做的
no zuo no die
用 jekyll 或 hexo
hexo 简单易用