108 lines
3.6 KiB
HTML
108 lines
3.6 KiB
HTML
{% extends '__base__.html' %}
|
|
|
|
{% block title %}{{ blog.name }}{% endblock %}
|
|
|
|
{% block beforehead %}
|
|
|
|
<script>
|
|
|
|
var comment_url = '/api/blogs/{{ blog.id }}/comments';
|
|
|
|
$(function () {
|
|
var $form = $('#form-comment');
|
|
$form.submit(function (e) {
|
|
e.preventDefault();
|
|
$form.showFormError('');
|
|
var content = $form.find('textarea').val().trim();
|
|
if (content==='') {
|
|
return $form.showFormError('请输入评论内容！');
|
|
}
|
|
$form.postJSON(comment_url, { content: content }, function (err, result) {
|
|
if (err) {
|
|
return $form.showFormError(err);
|
|
}
|
|
refresh();
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="uk-width-medium-3-4">
|
|
<article class="uk-article">
|
|
<h2>{{ blog.name }}</h2>
|
|
<p class="uk-article-meta">发表于{{ blog.created_at|datetime }}</p>
|
|
<p>{{ blog.html_content|safe }}</p>
|
|
</article>
|
|
|
|
<hr class="uk-article-divider">
|
|
|
|
{% if __user__ %}
|
|
<h3>发表评论</h3>
|
|
|
|
<article class="uk-comment">
|
|
<header class="uk-comment-header">
|
|
<img class="uk-comment-avatar uk-border-circle" width="50" height="50" src="{{ __user__.image }}">
|
|
<h4 class="uk-comment-title">{{ __user__.name }}</h4>
|
|
</header>
|
|
<div class="uk-comment-body">
|
|
<form id="form-comment" class="uk-form">
|
|
<div class="uk-alert uk-alert-danger uk-hidden"></div>
|
|
<div class="uk-form-row">
|
|
<textarea rows="6" placeholder="说点什么吧" style="width:100%;resize:none;"></textarea>
|
|
</div>
|
|
<div class="uk-form-row">
|
|
<button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-comment"></i> 发表评论</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</article>
|
|
|
|
<hr class="uk-article-divider">
|
|
{% endif %}
|
|
|
|
<h3>最新评论</h3>
|
|
|
|
<ul class="uk-comment-list">
|
|
{% for comment in comments %}
|
|
<li>
|
|
<article class="uk-comment">
|
|
<header class="uk-comment-header">
|
|
<img class="uk-comment-avatar uk-border-circle" width="50" height="50" src="{{ comment.user_image }}">
|
|
<h4 class="uk-comment-title">{{ comment.user_name }} {% if comment.user_id==blog.user_id %}(作者){% endif %}</h4>
|
|
<p class="uk-comment-meta">{{ comment.created_at|datetime }}</p>
|
|
</header>
|
|
<div class="uk-comment-body">
|
|
{{ comment.html_content|safe }}
|
|
</div>
|
|
</article>
|
|
</li>
|
|
{% else %}
|
|
<p>还没有人评论...</p>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="uk-width-medium-1-4">
|
|
<div class="uk-panel uk-panel-box">
|
|
<div class="uk-text-center">
|
|
<img class="uk-border-circle" width="120" height="120" src="{{ blog.user_image }}">
|
|
<h3>{{ blog.user_name }}</h3>
|
|
</div>
|
|
</div>
|
|
<div class="uk-panel uk-panel-header">
|
|
<h3 class="uk-panel-title">友情链接</h3>
|
|
<ul class="uk-list uk-list-line">
|
|
<li><i class="uk-icon-link"></i> <a href="#">编程</a></li>
|
|
<li><i class="uk-icon-link"></i> <a href="#">思考</a></li>
|
|
<li><i class="uk-icon-link"></i> <a href="#">读书</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|