2021-03-27 17:29:56 +08:00
<!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" >
2021-03-28 02:14:25 +08:00
< div class = "content" > < a href = "#" class = "header" th:text = "${blog.user.nickname}" > QFMX< / a > < / div >
2021-03-27 17:29:56 +08:00
< / 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 > 在中文排版中， < 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 > 的《论语》， ， ；
Lorem Ipsum， < / p >
< h3 id = "section2-1" > 例1： < / h3 >
< p >
< small > < b > 作者：< / b > < abbr title = "名丘，字仲尼" > 孔子< / abbr > （
< time > 前551年9月28日－ < / 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 > 的学说， ， ； ， ， ， ， ， ？ （ ） ， ，
< / 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" >
2021-03-28 02:14:25 +08:00
< li > 作者:< span th:text = "${blog.user.nickname}" > QFMX< / span > < a href = "#" th:href = "@{/about}" target = "_blank" > (联系作者)< / a > < / li >
2021-03-27 17:29:56 +08:00
< 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 >
