335 lines
8.8 KiB
HTML
335 lines
8.8 KiB
HTML
{{template "member/top.html" .}}
|
|
<div class="m-b-md">
|
|
<h3 class="m-b-none">
|
|
{{if .isNew}}
|
|
新建主题
|
|
{{else}}
|
|
编辑主题
|
|
-
|
|
{{.theme.Name}}
|
|
{{end}}
|
|
<a class="btn btn-default" href="{{$.siteUrl}}/preview?themeId={{.themeId}}" target="_blank"><span class="fa fa-eye"></span> 预览</a>
|
|
</h3>
|
|
</div>
|
|
|
|
<style>
|
|
#tplContent * {
|
|
font-family: Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
|
|
}
|
|
.image-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
.image-list li {
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
text-align: center;
|
|
}
|
|
.image-list li .thumb {
|
|
width: 100px;
|
|
height: 100px;
|
|
line-height: 100px;
|
|
overflow: hidden;
|
|
border: 1px solid #ccc;
|
|
padding: 3px;
|
|
border-radius: 5px;
|
|
}
|
|
.op {
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<section class="panel panel-default">
|
|
<header class="panel-heading">
|
|
模板, 样式, 脚本:
|
|
</header>
|
|
<div class="panel-body" style="height:430px;overflow: auto;">
|
|
|
|
<div class="list-group bg-white file-list">
|
|
{{range .myTpls}}
|
|
<a href="#" class="list-group-item " data-file="{{.}}">
|
|
<i class="fa fa-remove icon-muted remove-file" title="delete file" ></i>
|
|
{{.}}
|
|
<span class="badge"></span>
|
|
</a>
|
|
{{end}}
|
|
|
|
</div>
|
|
</div>
|
|
<footer class="panel-footer text-right bg-light lter">
|
|
<a class="btn btn-default" id="newFile">新建文件</a>
|
|
</footer>
|
|
</section>
|
|
</div>
|
|
<div class="col-sm-8">
|
|
<section class="panel panel-default">
|
|
<header class="panel-heading">
|
|
当前文件: <span id="curTpl">header.html</span>
|
|
<span id="msg"></span>
|
|
</header>
|
|
<div class="panel-body">
|
|
<div id="tplContent" class="form-control" style="width: 100%; height: 400px;"></div>
|
|
</div>
|
|
<footer class="panel-footer text-right bg-light lter">
|
|
<button type="submit" id="saveBtn" class="btn btn-success">{{msg . "save"}}</button>
|
|
</footer>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<section class="panel panel-default">
|
|
<header class="panel-heading">
|
|
图片: images/
|
|
</header>
|
|
<div class="panel-body">
|
|
<ul class="image-list" id="imageList">
|
|
</ul>
|
|
</div>
|
|
<footer class="panel-footer text-right bg-light lter">
|
|
<form id="formLogo" action="/member/blog/uploadThemeImage" method="post"
|
|
enctype="multipart/form-data" target="logoTarget">
|
|
<input type="hidden" name="themeId" value="{{.themeId}}" />
|
|
<input type="file" class="form-control" id="logo2" name="file"
|
|
onChange='$("#formLogo").submit();' />
|
|
</form>
|
|
<iframe id="logoTarget" name="logoTarget" src="#" style="display: none"></iframe>
|
|
</footer>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
{{template "member/footer.html" .}}
|
|
<script src="/public/member/js/ace/ace.js" type="text/javascript"></script>
|
|
<script>
|
|
var editor = ace.edit("tplContent");
|
|
editor.setTheme("ace/theme/tomorrow");
|
|
|
|
var urlPrefix = "{{.siteUrl}}";
|
|
var userId = "{{.userInfo.UserId.Hex}}";
|
|
var themeId = "{{.themeId}}";
|
|
var themeBasePath = "/{{$.theme.Path}}";
|
|
var theme = {
|
|
cache: {}, // filename => content
|
|
curTplO: $("#curTpl"),
|
|
tplContentO: $("#tplContent"),
|
|
saveBtnO: $("#saveBtn"),
|
|
newFileO: $("#newFile"),
|
|
curTpl: "",
|
|
tplInfos: {"header.html": "头部", "footer.html": "底部", "index.html": "首页", "cate.html": "分类页", "search.html": "搜索页", "single.html": "单页", "archive.html": "归档页", "post.html": "文章页", "tags.html": "标签页", "tag_posts.html": "标签文章页", "share_comment.html": "分享评论", "404.html":"404", "theme.json": "主题配置", "paging.html": "分页", "highlight.html": "高亮"},
|
|
init: function() {
|
|
var self = this;
|
|
self.showTplInfo();
|
|
$(".file-list").on("click", "a", function() {
|
|
$(".file-list a").removeClass("active");
|
|
var filename = $(this).data('file');
|
|
self.saveCurContent(); // 保存当前的
|
|
self.renderTpl(filename); // 再渲染
|
|
$(this).addClass("active");
|
|
});
|
|
|
|
self.renderTpl("header.html");
|
|
$(".file-list a").eq(0).addClass("active");
|
|
|
|
self.saveBtnO.click(function(){
|
|
self.saveCurContent($(this));
|
|
});
|
|
|
|
self.removeFile();
|
|
self.newFile();
|
|
|
|
self.initImage();
|
|
},
|
|
removeFile: function() {
|
|
var self = this;
|
|
$(".file-list").on("click", ".remove-file", function(e) {
|
|
e.stopPropagation();
|
|
var $a = $(this).closest("a");
|
|
var file = $a.data('file');
|
|
art.confirm("Are you sure to delete " + file + " ?", function() {
|
|
ajaxPost("/member/blog/deleteTpl", {themeId: themeId, filename: file}, function(re) {
|
|
// if(reIsOk(re)) {
|
|
art.tips("Success");
|
|
$a.remove();
|
|
if(self.curTpl == file) {
|
|
$(".file-list a").eq(0).trigger("click");
|
|
}
|
|
//} else {
|
|
// art.alert(re.Msg);
|
|
//}
|
|
})
|
|
});
|
|
});
|
|
},
|
|
newFile: function() {
|
|
var self = this;
|
|
self.newFileO.click(function() {
|
|
art.prompt("文件名", function(file){
|
|
if(!file) {
|
|
return;
|
|
}
|
|
var t = '<a href="#" class="list-group-item " data-file="' + file + '"> <i class="fa fa-remove icon-muted remove-file" title="delete file" ></i> ' + file + '<span class="badge"></span></a>';
|
|
$(".file-list").append(t);
|
|
});
|
|
});
|
|
},
|
|
showTplInfo: function() {
|
|
var self = this;
|
|
$(".file-list a").each(function() {
|
|
var file = $(this).data("file");
|
|
var info = "";
|
|
info = self.tplInfos[file];
|
|
if(!info) {
|
|
if(file.indexOf(".css") > 0) {
|
|
info = "样式";
|
|
} else if(file.indexOf(".js") > 0) {
|
|
info = "脚本";
|
|
} else if(file.indexOf(".html") > 0) {
|
|
info = "模板";
|
|
}
|
|
} else {
|
|
$(this).find(".remove-file").remove();
|
|
}
|
|
$(this).find(".badge").text(info);
|
|
});
|
|
},
|
|
msgO: $("#msg"),
|
|
saveCurContent: function(t) {
|
|
var self = this;
|
|
var content = editor.getValue()
|
|
|
|
var filename = self.curTpl;
|
|
// 之前的内容是否有改动
|
|
if(self.cache[filename] == content) {
|
|
return;
|
|
}
|
|
|
|
if(t) {
|
|
t.button("loading");
|
|
}
|
|
self.msgO.html("正在保存...");
|
|
ajaxPost("/member/blog/updateTplContent", {themeId: themeId, filename: self.curTpl, content: content}, function(re) {
|
|
if(t) {
|
|
t.button("reset");
|
|
}
|
|
if(reIsOk(re)) {
|
|
self.cache[filename] = content;
|
|
// art.tips("Success");
|
|
self.msgO.html("保存成功")
|
|
setTimeout(function() {
|
|
self.msgO.html("");
|
|
}, 3000);
|
|
} else {
|
|
art.alert(re.Msg);
|
|
}
|
|
});
|
|
},
|
|
renderContent: function(name, content) {
|
|
var self = this;
|
|
self.curTplO.html(name);
|
|
self.curTpl = name; // 这里设计
|
|
var lang = "html";
|
|
if(name.indexOf(".js") > 0 || name.indexOf(".json") > 0) {
|
|
lang = "javascript";
|
|
} else if(name.indexOf(".css") > 0) {
|
|
lang = "css";
|
|
}
|
|
editor.setValue(content);
|
|
editor.session.setMode("ace/mode/" + lang);
|
|
editor.gotoLine(1);
|
|
setTimeout(function() {
|
|
editor.gotoLine(1);
|
|
}, 200);
|
|
},
|
|
renderTpl: function(name) {
|
|
var self = this;
|
|
var content = "";
|
|
self.curTpl = name; // 这里设置
|
|
if(self.cache[name]) {
|
|
content = self.cache[name];
|
|
self.renderContent(name, content);
|
|
return;
|
|
}
|
|
ajaxGet("/member/blog/getTplContent", {themeId: themeId, filename: name}, function(re){
|
|
if(reIsOk(re)) {
|
|
self.cache[name] = re.Item;
|
|
self.renderContent(name, re.Item);
|
|
}
|
|
});
|
|
},
|
|
//-----------------
|
|
// theme images
|
|
imageListO: $("#imageList"),
|
|
initImage: function() {
|
|
var self = this;
|
|
self.reRenderImages();
|
|
self.imageListO.on("click", ".delete-image", function(re) {
|
|
var file = $(this).data('image');
|
|
var t = this;
|
|
art.confirm("Are you sure to delete it " + file + " ?", function() {
|
|
ajaxPost("/member/blog/deleteThemeImage", {themeId: themeId, filename: file}, function(re) {
|
|
if(reIsOk(re)) {
|
|
art.tips("Success");
|
|
$(t).closest("li").remove();
|
|
} else {
|
|
art.alert(re.Msg);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
},
|
|
renderImages: function(images) {
|
|
var self = this;
|
|
if(!images || images.length == 0) {
|
|
self.imageListO.html("无图片");
|
|
return;
|
|
}
|
|
var html = "";
|
|
for(var i = 0; i < images.length; ++i) {
|
|
var image = images[i];
|
|
var path = themeBasePath + "/images/" + image;
|
|
|
|
html += '<li><div class="thumb"><img src="' + path + '"></div><div class="op"><span>' + image + '</span><br /><a class="btn btn-xs btn-warning delete-image" data-image="' + image + '"><span class="fa fa-remove"></span></a></div></li>';
|
|
}
|
|
self.imageListO.html(html);
|
|
},
|
|
reRenderImages: function() {
|
|
var self = this;
|
|
ajaxGet("/member/blog/listThemeImages", {themeId: themeId}, function(re) {
|
|
if(reIsOk(re)) {
|
|
var images = re.List;
|
|
self.renderImages(images);
|
|
}
|
|
});
|
|
},
|
|
}
|
|
$(function() {
|
|
theme.init();
|
|
$(window).keydown(function(e) {
|
|
if (e.keyCode == 83 && (e.ctrlKey || e.metaKey)) {
|
|
e.preventDefault();
|
|
theme.saveBtnO.trigger("click");
|
|
}
|
|
});
|
|
});
|
|
|
|
// filename, result, resultCode
|
|
function uploadFinish(ret) {
|
|
if (ret) {
|
|
if (ret.resultCode == '1') {
|
|
theme.reRenderImages();
|
|
art.tips(ret.result)
|
|
return;
|
|
}
|
|
art.alert(ret.result);
|
|
return;
|
|
}
|
|
// 上传出错
|
|
art.alert("error");
|
|
}
|
|
</script>
|
|
|
|
{{template "member/end.html" .}}
|