{{template "Blog/header.html" .}}

<!--  -->
<div id="postsContainer">
	<div id="posts">
		<div class="each-post">
			<div class="title">
				{{.blog.Title}}
			</div>
			<div class="created-time">
				<i class="fa fa-bookmark-o" style="color: #666"></i>
				{{if .blog.Tags}} 
					{{blogTags .blog.Tags}}
				{{else}}
					{{msg . "noTag"}}
				{{end}}
				|
				<i class="fa fa-calendar" style="color: #666"></i> {{msg . "updatedTime"}} {{.blog.UpdatedTime | datetime}} | 
				<i class="fa fa-calendar" style="color: #666"></i> {{msg . "createdTime"}} {{.blog.CreatedTime | datetime}}
			</div>
			
			<div class="desc" id="content">
				{{if .blog.IsMarkdown }}
					<div id="markdownContent" style="display: none">
						<!-- 用textarea装html, 防止得到的值失真 -->
						<textarea>
						{{.blog.Content | raw}}
						</textarea>
					</div>
					<div style="padding: 20px; text-align: center">
						<img src="/images/loading-32.gif" />
					</div>
				{{else}}
						{{.blog.Content | raw}}
				{{end}}
			</div>
			
			<!-- comment -->
			{{template "blog/comment.html" .}}
		</div>
	</div>
	
</div>
{{template "Blog/footer.html" .}}
{{template "Blog/highlight.html"}}

<!-- Nav -->
<style>
#blogNav {
	display: none; 
	background-color: #fff;
	opacity: 0.7;
	position: fixed;
	z-index: 10;
	padding: 3px;
	border-radius: 3px;
}
#blogNavContent {
	overflow-y: auto;
	max-height: 250px;
	display: none;
}
#blogNavNav {
	cursor: pointer;
}
#blogNav a {
	color: #666;
}
#blogNav:hover {
	opacity: 0.9;
}
#blogNav a:hover {
	color: #0fb264;
}
#blogNav ul {
	padding-left: 20px;
}
#blogNav ul .nav-h1 {
}
#blogNav ul .nav-h2 {
  margin-left: 20px;
}
#blogNav ul .nav-h3 {
  margin-left: 30px;
}
#blogNav ul .nav-h4 {
  margin-left: 40px;
}
#blogNav ul .nav-h5 {
  margin-left: 50px;
}
</style>
<div id="blogNav">
	<div id="blogNavNav">
		<i class="fa fa-align-justify" title="文档导航"></i>
		<span>{{msg . "blogNav"}}</span>
	</div>
	<div id="blogNavContent" style="max-width: 200px">
	</div>
</div>
<script src="/public/js/app/blog/nav.js"></script>

{{if .blog.IsMarkdown }}
<script src="/public/mdeditor/editor/google-code-prettify/prettify.js"></script>
<script src="/public/mdeditor/editor/pagedown/Markdown.Converter.js"></script>
<script src="/public/mdeditor/editor/pagedown/Markdown.Sanitizer.js"></script>
<script src="/public/mdeditor/editor/pagedown/Markdown.Editor.js"></script>
<script src="/public/mdeditor/editor/pagedown/local/Markdown.local.zh.js"></script>
<script src="/public/mdeditor/editor/Markdown.Extra.js"></script>

<!--mathjax-->
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]], processEscapes: true },  messageStyle: "none"});
</script>
<script src="/public/mdeditor/editor/mathJax.js"></script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script>
var content = $.trim($("#markdownContent textarea").val());

// $("#markdownContent").html("");
var converter = Markdown.getSanitizingConverter();
Markdown.Extra.init(converter, {extensions: ["tables", "fenced_code_gfm", "def_list"]});
var html = converter.makeHtml(content);
$("#content").html(html);
$("pre").addClass("prettyprint linenums");
prettyPrint();
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"wmd-preview"]);

initNav();
</script>
{{else}}
<script>
$(function() {
	initNav();
});
</script>
{{end}}
</body>
</html>