使用idea thymeleaf模板,在html页面直接用浏览器打开可以渲染,用idea 启动后,内容出不来,不知道是什么原因
<body> <!--导航--> <nav th:replace="_fragments :: menu(0)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small"> <div class="ui container"> <div class="ui inverted secondary stackable menu"> <h2 class="ui teal header item">Blog</h2> <a href="index.html" class=" m-item item m-mobile-hide"><i class="tiny home icon"></i>首页</a> <a href="types.html" class="m-item item m-mobile-hide"><i class="tiny idea icon"></i>分类</a> <a href="tags.html" class="m-item item m-mobile-hide"><i class="tiny tags icon"></i>标签</a> <a href="archives.html" class="m-item item m-mobile-hide"><i class="tiny clone icon"></i>归档</a> <a href="about.html" class="m-item item m-mobile-hide"><i class="tiny info icon"></i>关于我</a> <div class="right m-item item m-mobile-hide"> <div class="ui icon inverted transparent input m-margin-tb-tiny"> <input type="text" placeholder="Search...."> <i class="search link icon"></i> </div> </div> </div> </div> <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"> <i class="sidebar icon"></i> </a> </nav> <!--中间内容--> <div id="waypoint" class="m-container-small m-padded-tb-big animated fadeIn"> <div class="ui container"> <div class="ui top attached segment"> <div class="ui horizontal link list"> <div class="item"> <img src="https://unsplash.it/100/100?image=1005" th:src="@{${blog.user.avatar}}" alt="" class="ui avatar image"> <div class="content"><a href="#" class="header" th:text="${blog.user.nickname}">付云飞</a></div> </div> <div class="item"> <i class="calendar icon"></i> <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2017-10-01</span> </div> <div class="item"> <i class="eye icon"></i> <span th:text="${blog.views}">2342</span> </div> </div> </div> <div class="ui attached segment"> <!--图片区域--> <img src="https://unsplash.it/800/450?image=1005" th:src="@{${blog.firstPicture}}" alt="" class="ui fluid rounded image"> </div> <div class="ui attached padded segment"> <!--内容--> <div class="ui right aligned basic segment"> <div class="ui orange basic label" th:text="${blog.flag}">原创</div> </div> <h2 class="ui center aligned header" th:text="${blog.title}">关于刻意练习的清单</h2> <br> <!--中间主要内容部分--> <div id="content" class="typo typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large" th:utext="${blog.content}"> </div> <!--标签--> <div class="m-padded-lr-responsive"> <div class="ui basic teal left pointing label" th:each="tag : ${blog.tags}" th:text="${tag.name}">方法论 </div> </div> <!--赞赏--> <div th:if="${blog.appreciation}"> <div class="ui center aligned basic segment"> <button id="payButton" class="ui orange basic circular button">赞赏</button> </div> <div class="ui payQR flowing popup transition hidden"> <div class="ui orange basic label"> <div class="ui images" style="font-size: inherit !important;"> <div class="image"> <img src="../static/images/alipay.jpg" th:src="@{/images/wechat.jpg}" alt="" class="ui rounded bordered image" style="width: 120px"> <div>支付宝</div> </div> <div class="image"> <img src="../static/images/wechatpay.png" th:src="@{/images/wechat.jpg}" alt="" class="ui rounded bordered image" style="width: 120px"> <div>微信</div> </div> </div> </div> </div> </div> </div> <div class="ui attached positive message" th:if="${blog.shareStatement}"> <!--博客信息--> <div class="ui middle aligned grid"> <div class="eleven wide column"> <ui class="list"> <li>作者:<span th:text="${blog.user.nickname}">付云飞</span><a href="#" th:href="@{/about}" target="_blank">(联系作者)</a></li> <li>发表时间:<span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2020-05-24 09:57</span> </li> <li>版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)</li> <li>公众号转载:请在文末添加作者公众号二维码</li> </ui> </div> <div class="five wide column"> <img src="../static/images/wechat.jpg" th:src="@{./images/wechat.jpg}" alt="" class="ui right floated rounded bordered image" style="width: 110px"> </div> </div> </div> <div class="ui bottom attached segment" th:if="${blog.commentabled}"> <!--留言区域列表--> <div id="comment-container" class="ui teal segment"> <div th:fragment="commentList"> <div class="ui threaded comments" style="max-width: 100%;"> <h3 class="ui dividing header">评论</h3> <div class="comment" th:each="comment : ${comments}"> <a class="avatar"> <img src="https://unsplash.it/100/100?image=1005" th:src="@{${comment.avatar}}"> </a> <div class="content"> <a class="author"> <span th:text="${comment.nickname}">Matt</span> <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${comment.adminComment}">博主 </div> </a> <div class="metadata"> <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span> </div> <div class="text" th:text="${comment.content}"> How artistic! </div> <div class="actions"> <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" onclick="reply(this)">回复</a> </div> </div> <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0"> <div class="comment" th:each="reply : ${comment.replyComments}"> <a class="avatar"> <img src="https://unsplash.it/100/100?image=1005" th:src="@{${reply.avatar}}"> </a> <div class="content"> <a class="author"> <span th:text="${reply.nickname}">小红</span> <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${reply.adminComment}">博主 </div> <span th:text="|@ ${reply.parentComment.nickname}|" class="m-teal">@ 小白</span> </a> <div class="metadata"> <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span> </div> <div class="text" th:text="${reply.content}"> How artistic! </div> <div class="actions"> <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a> </div> </div> </div> </div> </div> </div> </div> </div> <div id="comment-form" class="ui form"> <input type="hidden" name="blog.id" th:value="${blog.id}"> <input type="hidden" name="parentComment.id" value="-1"> <div class="field"> <textarea name="content" placeholder="请输入评论信息..."></textarea> </div> <div class="fields"> <div class="field m-mobile-wide m-margin-bottom-small"> <div class="ui left icon input"> <i class="user icon"></i> <input type="text" name="nickname" placeholder="姓名" th:value="${session.user}!=null ? ${session.user.nickname}"> </div> </div> <div class="field m-mobile-wide m-margin-bottom-small"> <div class="ui left icon input"> <i class="mail icon"></i> <input type="text" name="email" placeholder="邮箱" th:value="${session.user}!=null ? ${session.user.email}"> </div> </div> <div class="field m-margin-bottom-small m-mobile-wide"> <button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布 </button> </div> </div> </div> </div> </div> </div> <div id="toolbar" class="m-padded m-fixed m-right-bottom" style="display: none"> <div class="ui vertical icon buttons "> <button type="button" class="ui toc teal button">目录</button> <a href="#comment-container" class="ui teal button">留言</a> <button class="ui wechat icon button"><i class="weixin icon"></i></button> <div id="toTop-button" class="ui icon button"><i class="chevron up icon"></i></div> </div> </div> <div class="ui toc-container flowing popup transition hidden" style="width: 250px!important;"> <ol class="js-toc"> </ol> </div> <div id="qrcode" class="ui wechat-qr flowing popup transition hidden " style="width: 130px !important;"> <!--<img src="./static/images/wechat.jpg" alt="" class="ui rounded image" style="width: 120px !important;">--> </div> <br> <br> <!--底部--> <footer th:replace="_fragments :: footer" class="ui inverted vertical segment"> <div class="ui center aligned container"> <div class="ui inverted divided stackable grid"> <div class="three wide column"> <div class="ui inverted link list"> <div class="item"> <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" class="ui rounded image" alt="" style="width: 110px"> </div> </div> </div> <div class="three wide column"> <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4> <div class="ui inverted link list"> <a href="#" class="item m-text-thin">用户故事(User Story)</a> <a href="#" class="item m-text-thin">用户故事(User Story)</a> <a href="#" class="item m-text-thin">用户故事(User Story)</a> </div> </div> <div class="three wide column"> <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4> <div class="ui inverted link list"> <a href="#" class="item m-text-thin">Email:814165764@qq.com</a> <a href="#" class="item m-text-thin">QQ:814165764</a> </div> </div> <div class="seven wide column"> <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4> <p class="m-text-thin m-text-spaced m-opacity-mini"> 这是我的个人博客、我是一个代码新人,会分享关于编程、写作、思考相关的任何内容,希望可以给来到这儿的人有所帮助...</p> </div> </div> <div class="ui inverted section divider"></div> <div style="color: #F08047;margin-top: -18px" class="ui inverted m-text-thin m-text-spaced">距离我出生已经:<span id="htmer_time" class="item m-text-thin"></span>了 (*๓´╰╯`๓) </div> <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2020 - 2021 fuyunfei Designed by fuyunfei</p> </div> </footer> <!-- /*/ <th:block th:replace=" _fragments :: script" > /*/ --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script> <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script> <script src="../static/lib/prism/prism.js"></script> <script src="../static/lib/tocbot/tocbot.min.js"></script> <script src="../static/lib/qrcode/qrcode.min.js"></script> <script src="../static/lib/waypoints/jquery.waypoints.min.js"></script> <!-- /*/ </th:block> /*/ --> <script th:inline="javascript"> $('.menu.toggle').click(function () { $('.m-item').toggleClass('m-mobile-hide'); }); $('#payButton').popup({ popup: $('.payQR.popup'), on: 'click', position: 'bottom center' }); tocbot.init({ // Where to render the table of contents. tocSelector: '.js-toc', // Where to grab the headings to build the table of contents. contentSelector: '.js-toc-content', // Which headings to grab inside of the contentSelector element. headingSelector: 'h1, h2, h3', }); $('.toc.button').popup({ popup: $('.toc-container.popup'), on: 'click', position: 'left center' }); $('.wechat').popup({ popup: $('.wechat-qr'), position: 'left center' }); var serurl = /*[[#{blog.serurl}]]*/"127.0.0.1:8080"; var url = /*[[@{/blog/{id}(id=${blog.id})}]]*/""; var qrcode = new QRCode("qrcode", { text: serurl + url, width: 110, height: 110, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H }); $('#toTop-button').click(function () { $(window).scrollTo(0, 500); }); var waypoint = new Waypoint({ element: document.getElementById('waypoint'), handler: function (direction) { if (direction == 'down') { $('#toolbar').show(100); } else { $('#toolbar').hide(500); } console.log('Scrolled to waypoint! ' + direction); } }) //评论表单验证 $('.ui.form').form({ fields: { title: { identifier: 'content', rules: [{ type: 'empty', prompt: '请输入评论内容' } ] }, content: { identifier: 'nickname', rules: [{ type: 'empty', prompt: '请输入你的大名' }] }, type: { identifier: 'email', rules: [{ type: 'email', prompt: '请填写正确的邮箱地址' }] } } }); $(function () { $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"comments/6"); }); $('#commentpost-btn').click(function () { var boo = $('.ui.form').form('validate form'); if (boo) { console.log('校验成功'); postData(); } else { console.log('校验失败'); } }); function postData() { $("#comment-container").load(/*[[@{/comments}]]*/"", { "parentComment.id": $("[name='parentComment.id']").val(), "blog.id": $("[name='blog.id']").val(), "nickname": $("[name='nickname']").val(), "email": $("[name='email']").val(), "content": $("[name='content']").val() }, function (responseTxt, statusTxt, xhr) { // $(window).scrollTo($('#comment-container'),500); clearContent(); }); } function clearContent() { $("[name='content']").val(''); $("[name='parentComment.id']").val(-1); $("[name='content']").attr("placeholder", "请输入评论信息..."); } function reply(obj) { var commentId = $(obj).data('commentid'); var commentNickname = $(obj).data('commentnickname'); $("[name='content']").attr("placeholder", "@" + commentNickname).focus(); $("[name='parentComment.id']").val(commentId); $(window).scrollTo($('#comment-form'), 500); } // 运行时间统计 function secondToDate(second) { if (!second) { return 0; } var time = new Array(0, 0, 0, 0, 0); if (second >= 365 * 24 * 3600) { time[0] = parseInt(second / (365 * 24 * 3600)); second %= 365 * 24 * 3600; } if (second >= 24 * 3600) { time[1] = parseInt(second / (24 * 3600)); second %= 24 * 3600; } if (second >= 3600) { time[2] = parseInt(second / 3600); second %= 3600; } if (second >= 60) { time[3] = parseInt(second / 60); second %= 60; } if (second > 0) { time[4] = second; } return time; } function setTime() { /*此处为网站的创建时间*/ var create_time = Math.round(new Date(Date.UTC(2020, 5, 1, 0, 0, 0)).getTime() / 1000); var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000); currentTime = secondToDate((timestamp - create_time)); currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天' + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4] + '秒'; document.getElementById("htmer_time").innerHTML = currentTimeHtml; } setInterval(setTime, 1000); </script> </body>