<!DOCTYPE html><!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="blog/amaze/header::head-fragment">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
</head>
<link rel="stylesheet" th:href="@{/admin/plugins/editormd/css/editormd.preview.css}"/>
<body>
<div th:replace="blog/amaze/header::header-fragment"></div>
<div class="container" style="position:relative;margin-top: 10rem;">
    <article class="am-article">
        <div class="am-article-hd" style="text-align: center">
            <h1 class="am-article-title" th:text="${blogDetailVO.blogTitle}">永远的蝴蝶</h1>
            <p class="am-article-meta">
                <span><i class="am-icon-calendar am-icon-fw"></i>&nbsp;</span><span
                    th:text="${#dates.format(blogDetailVO.createTime, 'yyyy-MM-dd')}"></span>
                <span><i class="am-icon-comment am-icon-fw"></i>&nbsp;</span><span th:text="${commentTotal}"></span> 条评论
                <span><i class="am-icon-eye am-icon-fw"></i>&nbsp;</span><span
                    th:text="${blogDetailVO.blogViews}"></span> 浏览
            </p>
            <div>
                <th:block th:each="tag : ${blogDetailVO.blogTags}">
                            <span>
                                <a class="am-badge am-badge-success am-round am-text-default"
                                   th:href="@{'/tag/' + ${tag}}">
                                    <th:block th:text="${tag}"></th:block>
                                </a>
                            </span>
                </th:block>
            </div>
        </div>

        <div class="am-article-bd" id="post-content">
            <th:block th:utext="${blogDetailVO.blogContent}"/>
            <p class="am-article-meta" style="text-align: center">
                欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</p>
        </div>
    </article>
    <aside class="comments" id="comments">
        <th:block th:if="${null != commentPageResult}">
            <ul class="am-comments-list am-comments-list-flip">
                <th:block th:each="comment,iterStat : ${commentPageResult.list}">
                    <li class="am-comment">
                        <article class="am-comment">
                            <a href="#link-to-user-home">
                                <img th:src="${comment.headImage}" alt="" class="am-comment-avatar" width="48"
                                     height="48"/>
                            </a>
                            <div class="am-comment-main">
                                <header class="am-comment-hd">
                                    <div class="am-comment-meta">
                                        <a class="am-comment-author" th:text="${comment.nickName}">某人</a>
                                        评论于
                                        <time th:text="${#dates.format(comment.commentCreateTime, 'yyyy-MM-dd HH:mm:ss')}">
                                            2019-12-12 15:30
                                        </time>
                                    </div>
                                </header>

                                <div class="am-comment-bd" th:text="${comment.commentBody}">

                                </div>
                            </div>
                        </article>
                    </li>
                    <th:block th:unless="${#strings.isEmpty(comment.replyBody)}">
                        <li class="am-comment am-comment-flip ">
                            <article class="am-comment ">
                                <a href="#link-to-user-home">
                                    <img th:src="@{${configurations.get('yourAvatar')}}" alt=""
                                         class="am-comment-avatar" width="48" height="48"/>
                                </a>
                                <div class="am-comment-main">
                                    <header class="am-comment-hd">
                                        <!--<h3 class="am-comment-title">评论标题</h3>-->
                                        <div class="am-comment-meta">
                                            <a class="am-comment-author" th:text="${configurations.get('yourName')}">敲代码的长腿毛欧巴</a>
                                            回复 <strong>
                                            <th:block th:text="${comment.nickName}"></th:block>
                                        </strong> 于
                                            <time th:text="${#dates.format(comment.replyCreateTime, 'yyyy-MM-dd HH:mm:ss')}">
                                                2019-12-12 15:30
                                            </time>
                                        </div>
                                    </header>

                                    <div class="am-comment-bd" th:text="${comment.replyBody}">

                                    </div>
                                </div>
                            </article>
                        </li>
                    </th:block>
                </th:block>
            </ul>
        </th:block>
    </aside>
    <th:block th:if="${blogDetailVO.enableComment==0}">
        <aside class="create-comment" id="create-comment">
            <hr>
            <h2><i class="fa fa-pencil"></i> 添加评论</h2>

            <div id="commentForm" class="form" style="width:auto; margin:0 auto; text-align: center;">
                <input type="hidden" id="blogId" name="blogId" th:value="${blogDetailVO.blogId}"></input>

                <!--横向表单-->
                <div class="am-form-inline" role="form" style="display: inline-block;">
                    <!--头像-->
                    <div class="am-form-group">
                        <img id="idPic" class="am-img-thumbnail" src="/blog/default/img/avatar.png"
                             style="width:60%; border-radius: 50%;">
                    </div>
                    <!--QQ号-->
                    <div class="am-form-group">
                        <input id="qqNum" type="text" class="am-form-field" placeholder="QQ号" onmouseout="qqfun()">
                    </div>
                    <!--昵称-->
                    <div class="am-form-group">
                        <input id="commentator" type="text" class="am-form-field" placeholder="QQ昵称">
                    </div>
                    <!--邮箱-->
                    <div class="am-form-group">
                        <input id="email" type="text" class="am-form-field" placeholder="电子邮箱">
                    </div>
                </div>
                <div>
                    <!--网站地址-->
                    <input type="text" name="websiteUrl" id="websiteUrl" style="width: 80%;" placeholder="你的网站地址(可不填)">
                </div>
                <!--评论-->
                <div>
                    <textarea rows="3" name="commentBody" id="commentBody" style="width: 80%;"
                              placeholder="请输入您的评论"></textarea>
                </div>
                <div class="am-form-inline">
                    <!--图片验证-->
                    <input style="width:57%" type="text" name="verifyCode" id="verifyCode"
                           placeholder="Verification Code">
                    <img alt="单击图片刷新！" style="width:15%" class="pointer" th:src="@{/common/kaptcha}"
                         onclick="this.src='/common/kaptcha?d='+new Date()*1">
                    <!--提交-->
                    <button id="commentSubmit" type="submit" class="submit am-btn am-btn-primary">提交</button>
                </div>
            </div>
        </aside>
    </th:block>
</div>

</div>
<div th:replace="blog/amaze/to-top::to-top-fragment"></div>
<footer th:replace="blog/amaze/footer::footer-fragment"></footer>
</body>
<script th:src="@{/blog/plugins/jquery/jquery.min.js}"></script>
<!-- editor.md -->
<script th:src="@{/admin/plugins/editormd/editormd.min.js}"></script>

<script th:src="@{/blog/plugins/comment/valid.js}"></script>
<script th:src="@{/blog/plugins/comment/comment.js}"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/admin/plugins/editormd/lib/marked.min.js}"></script>
<script th:src="@{/admin/plugins/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/admin/plugins/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/admin/plugins/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/admin/plugins/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/admin/plugins/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/admin/plugins/editormd/lib/jquery.flowchart.min.js}"></script>

<!-- 背景动画 -->
<script type="text/javascript" color="0,0,205" opacity='0.7' zIndex="-2" count="199"
        src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
<script type="text/javascript">
    $(function () {
        var testEditormdView;
        testEditormdView = editormd.markdownToHTML("post-content", {
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
            previewCodeHighlight: true
        });
    });
</script>

</html>