658 lines
36 KiB
HTML
658 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||
<head th:replace="_fragments :: head(~{::title})">
|
||
<meta charset="UTF-8">
|
||
<!--移动端预览-->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>博客详情</title>
|
||
<!--引入semantic-ui框架-->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
|
||
<!--引入页面排版CSS-->
|
||
<link rel="stylesheet" href="../static/css/typo.css">
|
||
<!--引入动画插件CSS-->
|
||
<link rel="stylesheet" href="../static/css/animate.css">
|
||
<!--引入代码高亮插件CSS-->
|
||
<link rel="stylesheet" href="../static/lib/prism/prism.css">
|
||
<!--引入目录生成插件CSS-->
|
||
<link rel="stylesheet" href="../static/lib/tocbot/tocbot.css">
|
||
<!--引入自定义CSS-->
|
||
<link rel="stylesheet" href="../static/css/me.css">
|
||
</head>
|
||
<body >
|
||
<!--导航-->
|
||
<nav th:replace="_fragments :: menu(1)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
|
||
<div class="ui container">
|
||
<div class="ui inverted secondary stackable menu" id="nav_menu">
|
||
<h2 class="ui teal header item">沐雪社区</h2>
|
||
<a href="#" class="m-item item m-mobile-hide"><i class="small home icon"></i>首页</a>
|
||
<a href="#" class="m-item item m-mobile-hide"><i class="small idea icon"></i>分类</a>
|
||
<a href="#" class="m-item item m-mobile-hide" ><i class="small tags icon"></i>标签</a>
|
||
<a href="#" class="m-item item m-mobile-hide" ><i class="small clone icon"></i>归档</a>
|
||
<a href="#" class="m-item item m-mobile-hide"><i class="small info icon"></i>站长信息</a>
|
||
<div class="right m-item item m-mobile-hide">
|
||
<div class="ui icon inverted input">
|
||
<input type="text" placeholder="Search...">
|
||
<i class="search icon link"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--menu toggle无任何显示意思-->
|
||
<a href="" class="ui icon menu toggle black 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://picsum.photos/id/1011/100/100" th:src="@{${blog.user.avatar}}" alt="" class="ui avatar image">
|
||
<div class="content"> <a href="#" class="header" th:text="${blog.user.nickname}">QFMX</a></div>
|
||
</div>
|
||
<div class="item">
|
||
<i class="calendar icon"></i>
|
||
<span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2019-10-01</span>
|
||
</div>
|
||
<div class="item">
|
||
<i class="eye icon"></i><span th:text="${blog.views}">7437</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 image">
|
||
</div>
|
||
<div class="ui attached padding 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}">semantic-ui的使用教程.</h2>
|
||
<br>
|
||
<div id="content" class="typo typo-selection js-toc-content m-padding-lr-responsive m-padded-tb-large" th:utext="${blog.content}">
|
||
<h2> </h2>
|
||
<h2 id="tagline" class="serif">一致化浏览器排版效果，构建最适合中文阅读的网页排版</h2>
|
||
|
||
<ol id="table" class="ui table">
|
||
<li><a href="#section1">关于 <i class="serif">Typo.css</i></a></li>
|
||
<li><a href="#section2">排版实例</a>
|
||
<ul>
|
||
<li><a href="#section2-1">例1：论语学而篇第一</a></li>
|
||
<li><a href="#section2-2">例2：英文排版</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#section3">附录</a>
|
||
<ul>
|
||
<li><a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a></li>
|
||
<li><a href="#appendix2">开源许可</a></li>
|
||
</ul>
|
||
</li>
|
||
</ol>
|
||
|
||
<h2 id="section1">一、关于 <i class="serif">Typo.css</i></h2>
|
||
|
||
<p><i class="serif">Typo.css</i> 的目的是，在一致化浏览器排版效果的同时，构建最适合中文阅读的网页排版。</p>
|
||
<h4>现状和如何去做：</h4>
|
||
|
||
<p class="typo-first">排版是一个麻烦的问题 <sup><a href="#appendix1"># 附录一</a></sup>，需要精心设计，而这个设计却是常被视觉设计师所忽略的。前端工程师更常看到这样的问题，但不便变更。因为在多个 OS 中的不同浏览器渲染不同，改动需要多的时间做回归测试，所以改变变得更困难。而像我们一般使用的
|
||
Yahoo、Eric Meyer 和 Alice base.css 中采用的 Reset 都没有很好地考虑中文排版。<i class="serif">Typo.css</i> 要做的就是解决中文排版的问题。</p>
|
||
|
||
<p><strong><i class="serif">Typo.css</i> 测试于如下平台：</strong></p>
|
||
<pre><code class="language-java">p { color: red }</code></pre>
|
||
<table summary="Typo.css 的测试平台列表" class="ui table">
|
||
<thead>
|
||
<tr>
|
||
<th>OS/浏览器</th>
|
||
<th>Firefox</th>
|
||
<th>Chrome</th>
|
||
<th>Safari</th>
|
||
<th>Opera</th>
|
||
<th>IE9</th>
|
||
<th>IE8</th>
|
||
<th>IE7</th>
|
||
<th>IE6</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>OS X</td>
|
||
<td>✔</td>
|
||
<td>✔</td>
|
||
<td>✔</td>
|
||
<td>✔</td>
|
||
<td>-</td>
|
||
<td>-</td>
|
||
<td>-</td>
|
||
<td>-</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Win 7</td>
|
||
<td>✔</td>
|
||
<td>✔</td>
|
||
<td>✔</td>
|
||
<td>✔</td>
|
||
<td>✔</td>
|
||
<td>✔</td>
|
||
<td>✔</td>
|
||
<td>-</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Win XP</td>
|
||
<td>✔</td>
|
||
<td>✔</td>
|
||
<td>✔</td>
|
||
<td>✔</td>
|
||
<td>-</td>
|
||
<td>✔</td>
|
||
<td>✔</td>
|
||
<td>✔</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Ubuntu</td>
|
||
<td>✔</td>
|
||
<td>✔</td>
|
||
<td>-</td>
|
||
<td>✔</td>
|
||
<td>-</td>
|
||
<td>-</td>
|
||
<td>-</td>
|
||
<td>-</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h4>中文排版的重点和难点</h4>
|
||
|
||
<p>在中文排版中，HTML4 的很多标准在语义在都有照顾到。但从视觉效果上，却很难利用单独的 CSS 来实现，像<abbr title="在文字下多加一个点">着重号</abbr>（例：这里<em class="typo-em">强调一下</em>）。在 HTML4 中，专名号标签（<code><u></code>）已经被放弃，而
|
||
HTML5 被<a href="http://html5doctor.com/u-element/">重新提起</a>。<i class="serif">Typo.css</i> 也根据实际情况提供相应的方案。我们重要要注意的两点是：</p>
|
||
<ol>
|
||
<li>语义：语义对应的用法和样式是否与中文排版一致</li>
|
||
<li>表现：在各浏览器中的字体、大小和缩放是否如排版预期</li>
|
||
</ol>
|
||
<p>对于这些，<i class="serif">Typo.css</i> 排版项目的中文偏重注意点，都添加在附录中，详见：</p>
|
||
<blockquote>
|
||
<b>附录一</b>：<a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a>
|
||
</blockquote>
|
||
<h2 id="section2">二、排版实例：</h2>
|
||
|
||
<p>提供2个排版实例，第一个中文实例来自于来自于<cite class="typo-unique">张燕婴</cite>的《论语》，由于古文排版涉及到的元素比较多，所以采用《论语》中《学而》的第一篇作为排版实例介绍；第2个来自到经典的
|
||
Lorem Ipsum，并加入了一些代码和列表等比较具有代表性的排版元素。</p>
|
||
|
||
<h3 id="section2-1">例1：论语学而篇第一</h3>
|
||
|
||
<p>
|
||
<small><b>作者：</b><abbr title="名丘，字仲尼">孔子</abbr>（
|
||
<time>前551年9月28日－前479年4月11日</time>
|
||
）
|
||
</small>
|
||
</p>
|
||
|
||
<h4>本篇引语</h4>
|
||
|
||
<p>
|
||
《学而》是《论语》第一篇的篇名。《论语》中各篇一般都是以第一章的前二三个字作为该篇的篇名。《学而》一篇包括16章，内容涉及诸多方面。其中重点是「吾日三省吾身」；「节用而爱人，使民以时」；「礼之用，和为贵」以及仁、孝、信等道德范畴。 </p>
|
||
|
||
<h4>原文</h4>
|
||
|
||
<p>子曰：「学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知，而不愠，不亦君子乎？」 </p>
|
||
|
||
<h4>译文</h4>
|
||
|
||
<p>孔子说：「学了又时常温习和练习，不是很愉快吗？有志同道合的人从远方来，不是很令人高兴的吗？人家不了解我，我也不怨恨、恼怒，不也是一个有德的君子吗？」 </p>
|
||
|
||
<h4>评析</h4>
|
||
|
||
<p>宋代著名学者<u class="typo-u">朱熹</u>对此章评价极高，说它是「入道之门，积德之基」。本章这三句话是人们非常熟悉的。历来的解释都是：学了以后，又时常温习和练习，不也高兴吗等等。三句话，一句一个意思，前后句子也没有什么连贯性。但也有人认为这样解释不符合原义，指出这里的「学」不是指学习，而是指学说或主张；「时」不能解为时常，而是时代或社会的意思，「习」不是温习，而是使用，引申为采用。而且，这三句话不是孤立的，而是前后相互连贯的。这三句的意思是：自己的学说，要是被社会采用了，那就太高兴了；退一步说，要是没有被社会所采用，可是很多朋友赞同<abbr
|
||
title="张燕婴">我</abbr>的学说，纷纷到我这里来讨论问题，我也感到快乐；再退一步说，即使社会不采用，人们也不理解我，我也不怨恨，这样做，不也就是君子吗？（见《齐鲁学刊》1986年第6期文）这种解释可以自圆其说，而且也有一定的道理，供读者在理解本章内容时参考。
|
||
</p>
|
||
|
||
<p>此外，在对「人不知，而不愠」一句的解释中，也有人认为，「人不知」的后面没有宾语，人家不知道什么呢？当时因为孔子有说话的特定环境，他不需要说出知道什么，别人就可以理解了，却给后人留下一个谜。有人说，这一句是接上一句说的，从远方来的朋友向我求教，我告诉他，他还不懂，我却不怨恨。这样，「人不知」就是「人家不知道我所讲述的」了。这样的解释似乎有些牵强。</p>
|
||
|
||
<p>总之，本章提出以学习为乐事，做到人不知而不愠，反映出孔子学而不厌、诲人不倦、注重修养、严格要求自己的主张。这些思想主张在《论语》书中多处可见，有助于对第一章内容的深入了解。</p>
|
||
|
||
<h3 id="section2-2">例2：英文排版</h3>
|
||
|
||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
|
||
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
|
||
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
|
||
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
|
||
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
|
||
Ipsum.</p>
|
||
<blockquote>
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||
</blockquote>
|
||
|
||
<h4>The standard Lorem Ipsum passage, used since the 1500s</h4>
|
||
|
||
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
||
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
|
||
|
||
<h4>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h4>
|
||
|
||
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
|
||
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
|
||
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
|
||
velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
|
||
ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
|
||
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur,
|
||
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
|
||
|
||
<h4>List style in action</h4>
|
||
<ul>
|
||
<li>If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence as
|
||
your brother and hope as your sentry.
|
||
<p>如果你希望成功，当以恒心为良友，以经验为参谋，以谨慎为兄弟，以希望为哨兵。</p>
|
||
</li>
|
||
<li>Sometimes one pays most for the things one gets for nothing.
|
||
<p>有时候一个人为不花钱得到的东西付出的代价最高。</p>
|
||
</li>
|
||
<li>Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things
|
||
easily.
|
||
<p>只有有耐心圆满完成简单工作的人，才能够轻而易举的完成困难的事。</p>
|
||
</li>
|
||
</ul>
|
||
|
||
<h4>You may want to create a perfect <code><hr /></code> line, despite the fact that there will never have one
|
||
</h4>
|
||
<hr/>
|
||
<p><abbr title="法国作家罗切福考尔德">La Racheforcauld</abbr> said:
|
||
<mark>"Few things are impossible in themselves; and it is often for want of will, rather than of means, that man fails
|
||
to succeed".
|
||
</mark>
|
||
You just need to follow the browser's behavior, and set a right <code>margin</code> to it。it will works nice as the
|
||
demo you're watching now. The following code is the best way to render typo in Chinese:
|
||
</p>
|
||
</div>
|
||
<!--标签-->
|
||
<div class="m-padding-lr-responsive">
|
||
<div class="ui basic teal left pointing label" th:each="tag : ${blog.tags}" th:text="${tag.name}">SpringBoot</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 small images" style="font-size: inherit">
|
||
<div class="image">
|
||
<!--支付宝打赏-->
|
||
<img src="../static/images/pay_wechat.jpg" th:src="@{/images/pay_wechat.jpg}" alt="" class="ui rounded bordered image" style="width: 140px">
|
||
<div>微信</div>
|
||
</div>
|
||
<div class="image">
|
||
<img src="../static/images/pay_baby.jpg" th:src="@{/images/pay_baby.jpg}" alt="" class="ui rounded bordered image" style="width: 140px">
|
||
<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}">QFMX</span><a href="#" th:href="@{/about}" target="_blank">(联系作者)</a></li>
|
||
|
||
<li>发表时间：<span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd HH:mm')}">2019-10-02 09:08</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 id="conmment-container" 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/800/450?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}">
|
||
你的博客真棒！
|
||
</div>
|
||
<div class="actions">
|
||
<a class="回复" 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/800/450?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}">
|
||
你好呀！
|
||
</div>
|
||
<div class="actions">
|
||
<a class="回复" 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 class="comment">
|
||
<a class="avatar">
|
||
<img src="https://unsplash.it/800/450?image=1005">
|
||
</a>
|
||
<div class="content">
|
||
<a class="author">Elliot Fu</a>
|
||
<div class="metadata">
|
||
<span class="date">Yesterday at 12:30AM</span>
|
||
</div>
|
||
<div class="text">
|
||
<p>This has been very useful for my research. Thanks as well!</p>
|
||
</div>
|
||
<div class="actions">
|
||
<a class="回复">回复</a>
|
||
</div>
|
||
</div>
|
||
<div class="comments">
|
||
<div class="comment">
|
||
<a class="avatar">
|
||
<img src="https://unsplash.it/800/450?image=1005">
|
||
</a>
|
||
<div class="content">
|
||
<a class="author">Jenny Hess</a>
|
||
<div class="metadata">
|
||
<span class="date">Just now</span>
|
||
</div>
|
||
<div class="text">
|
||
Elliot you are always so right :)
|
||
</div>
|
||
<div class="actions">
|
||
<a class="回复">回复</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="comment">
|
||
<a class="avatar">
|
||
<img src="https://unsplash.it/800/450?image=1005">
|
||
</a>
|
||
<div class="content">
|
||
<a class="author">Joe Henderson</a>
|
||
<div class="metadata">
|
||
<span class="date">5 days ago</span>
|
||
</div>
|
||
<div class="text">
|
||
Dude, this is awesome. Thanks so much
|
||
</div>
|
||
<div class="actions">
|
||
<a class="reply">回复</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--*/-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--提交留言表单-->
|
||
<div id="comment-form" class="ui form">
|
||
|
||
|
||
<!--隐含域博客ID-->
|
||
<input type="hidden" name="blog.id" th:value="${blog.id}">
|
||
<!--评论id 初始值为-1 -->
|
||
<input type="hidden" name="parentComment.id" value="-1">
|
||
<div class="field">
|
||
<textarea name="content" cols="30" rows="10" 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 name="nickname" type="text" 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 name="email" type="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 class="ui error message">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--工具条-->
|
||
<div id="toolbar" class="m-fixed m-right-button m-padded" style="display: none">
|
||
<div class="ui vertical icon buttons" >
|
||
<button id="tocButton" type="button" class="ui teal button">目录</button>
|
||
<a href="#conmment-container" class="ui teal button">留言</a>
|
||
<button type="iconbutton" class="ui wc icon button"><i class="weixin icon"></i></button>
|
||
<div id="toTop" href="#nav_menu" class="ui icon button"><i class="chevron up icon"></i></div>
|
||
</div>
|
||
</div>
|
||
<!--目录页面详情-->
|
||
<div class="ui toc-container flowing popup transition hidden" style="width: 270px;border-radius: 6%; padding-right: 20px; background-color:#fffdf5 ">
|
||
<!--js-toc目录生成地点-->
|
||
<ol class="js-toc"></ol>
|
||
</div>
|
||
<!--微信阅读二维码-->
|
||
<div class="ui wc-qr flowing popup transition hidden " style="width: 140px;border-radius: 5%;">
|
||
<div style="text-align: center;font-size:14px;font-weight:bold; color: orange">扫码阅读哦</div>
|
||
<div id="qrcode" style="margin: 5px auto">
|
||
<!-- <img src="./static/images/WeChat.jpg" alt="" class="ui rounded image" style="width: 130px">-->
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<br>
|
||
<br>
|
||
<!--底部-->
|
||
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive ">
|
||
</footer>
|
||
<!--引入所需要的JS-->
|
||
<th:block th:replace="_fragments :: script">
|
||
<!--/*-->
|
||
<!--引入jQuery-->
|
||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
|
||
<!--引入semantic-ui的 JS-->
|
||
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
|
||
<!--引入平滑滚动插件CDN-->
|
||
<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
|
||
<!--引入代码高亮插件 JS-->
|
||
<script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
|
||
<!--映入目录生成插件 JS-->
|
||
<script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
|
||
<!--引入二维码生成插件 JS-->
|
||
<script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
|
||
<!--引入waypoints插件滚动条-->
|
||
<script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/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'
|
||
});
|
||
|
||
/*微信阅读*/
|
||
$('.wc').popup({
|
||
popup : $('.wc-qr'),
|
||
on : 'hover',
|
||
position : 'left center'
|
||
});
|
||
|
||
/*目录插件*/
|
||
tocbot.init({
|
||
/*目录显示区域的地方*/
|
||
tocSelector: '.js-toc',
|
||
/*生成目录的源在哪*/
|
||
contentSelector: '.js-toc-content',
|
||
/*生成目录的级别*/
|
||
headingSelector: 'h1, h2, h3',
|
||
|
||
hasInnerContainers: true,
|
||
});
|
||
/*目录页面显示*/
|
||
$('#tocButton').popup({
|
||
popup : $('.toc-container.popup'),
|
||
on:'click',
|
||
position:'left center'
|
||
});
|
||
|
||
/*二维码生成*/
|
||
|
||
var serurl = "http://172.20.10.6:8080";
|
||
var url = /*[[@{/blog/{id}(id=${blog.id})}]]*/"";
|
||
var qrcode = new QRCode("qrcode", {
|
||
text: serurl+url,
|
||
width: 120,
|
||
height: 120,
|
||
colorDark : "#000000",
|
||
colorLight : "#ffffff",
|
||
correctLevel : QRCode.CorrectLevel.H
|
||
});
|
||
|
||
/*平滑滚动*/
|
||
$('#toTop').click(function () {
|
||
/*0-500毫秒*/
|
||
$(window).scrollTo(0,300);
|
||
});
|
||
|
||
/*waypoint滚动条位置设置*/
|
||
var waypoint = new Waypoint({
|
||
element: document.getElementById('waypoint'),
|
||
handler: function(direction) {
|
||
if(direction=='down'){
|
||
$('#toolbar').show(300);
|
||
}else{
|
||
$('#toolbar').hide(500);
|
||
}
|
||
console.log('Scrolled to waypoint!')
|
||
}
|
||
})
|
||
|
||
//评论表单验证
|
||
$('.ui.form').form({
|
||
fields:{
|
||
title:{
|
||
identifier:'content',
|
||
rules : [{
|
||
type : 'empty',
|
||
prompt:'请输入评论内容！'
|
||
}]
|
||
},
|
||
content : {
|
||
identifier:'nickname',
|
||
rules : [{
|
||
type : 'empty',
|
||
prompt:'请输入你的大名！'
|
||
}]
|
||
},
|
||
type : {
|
||
identifier : 'email',
|
||
rules : [{
|
||
type: 'empty',
|
||
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);
|
||
//清除文本域数据且更改父id
|
||
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);
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
</html> |