在做完一个springboot的个人博客项目，想总结下从数据库建表到完成的对自己有点价值的点，包括碰到的问题及解决过程和方法，希望读者也能找到自己想要的。这篇博客主要是前端页面用到的一些插件及其使用方法。
先讲讲在项目中需要实现什么功能吧。在我的博客项目中，博客的发布需要有MarkDown编辑器，然后博客详情页需要有鼠标的滚动监测，还有一个生成二维码的用于扫描观看此篇博客，还有博客正文的排版插件，代码高亮，平滑滚动，正文的目录生成，动画效果等等。
注意：很多插件都依赖jquery，所以事先务必引入jquery！！！
MarkDown编辑器
先看看效果：
在这个编辑器的左边区域是编写MarkDown语法的区域，右边是展示区域。看实际效果：
官网地址
https://pandao.github.io/editor.md/
其实官网有简要的用法，但是这里还是记录一下怎样简单的使用。
怎么实现呢？
先从官网下载好压缩包，然后在我们springboot程序的resources文件夹下的static目录下新建一个插件文件夹lib，如图：
解压缩后将其中的css等一些文件夹或文件(不是全部)复制进lib目录下新建的editormd目录，如图：
再在需要这个插件的页面中引入css，js还进行一些设置即可：
这里需要注意的是这个js是依赖于jquery的，所以在这个js之前得先声明jquery，比如我使用cdn形式的jquery:
然后在自定义的script标签中初始化编辑器：
<script>
// 初始化markdown编辑器
// 里面的path是基于static定位的(在thymeleaf动态页面中基于static，要不然还是写我注释的那个path)
var testEditor;
$(function() {
testEditor = editormd("md-content", {
width : "100%",
height : 640,
syncScrolling : "single",
//path : "../../static/lib/editormd/lib/"
path : "/lib/editormd/lib/"
});
});
</script>
在正式的body标签中还得声明一个id为md-content的div：
<!--style="z-index: 1 !important;" 代表叠放层次,当全屏时,编辑器会位于所有组件上方-->
<div id="md-content" style="z-index: 1 !important;">
<textarea name="content" placeholder="博客内容" th:text="*{content}" style="display: none;">
</textarea>
</div>
排版插件
官网地址：https://github.com/sofish/typo.css
怎么使用？
下载下来后解压其中的html是用来演示的，css取出来放置于项目的css目录，并在想要用插件的页面引用。
并在想要格式化排版的div加入两个class，如图：
注意：使用时可能会与你自身使用的UI前端框架有一定冲突(效果没那么好)，比如我博客项目使用的Semantic UI ，怎么解决？在这个typo.css中将作用与全局的全改为只作用于typo的div即可。
动画插件
官网：https://daneden.github.io/animate.css/
介绍：让某个标签块显示时有动画效果，如渐变等。
怎么使用？
下载解压后将其中的animate.css复制进css目录然后引用。然后在你想要有动画效果的元素的class中加animated,然后再加一个你选择的动画效果如fadeIn 如：
代码高亮
官网：https://github.com/PrismJS/prism
怎么使用？
在官网：选择你使用的语言如Java,JavaScript等，还有主题色如黑色，还有可以选择一些插件如显示行数等，然后下载css和js即可，再加入css和js文件夹，最后引用。
接下来的步骤是将代码包含在
目录生成
官网：http://tscanlin.github.io/tocbot/
怎么使用？
先自己写一个在网页右下部的小工具栏：
使用SemanticUI的小工具栏：
<!--网页侧边的小工具条 要定义为绝对布局，无论怎样滑动都在一个地方
style="display:none" 表示默认不显示
-->
<div id="toolbar" class="m-fixed m-right-bottom m-padded"
style="display: none">
<div class="ui vertical icon buttons">
<!--toc作用只是标明这个button,用作点击事件的识别-->
<button class="toc ui 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>
然后是弹出的目录栏(js-toc就是生成的目录的位置)：
<!--点击工具条中目录后左侧弹出的
然后目录生成是需要插件的（Tocbot）
使用插件方式，引入js,css,然后js代码进行初始化
不过注意：这个生成目录时所有的标题都必须有id属性，即h标签必须有id属性
默认插件样式还是不行，就需要在tocbot.css中修改
-->
<div class="top-container ui flowing popup transition hidden"
style="width: 250px !important;">
<ol class="js-toc">
</ol>
</div>
然后使用query的弹出功能，将目录的弹出位置控制在这个小组件的上部：
$(".toc.button").popup({
popup : $(".top-container.popup"),
on : 'click',
position : 'top 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',
// For headings inside relative or absolute positioned containers within content.
hasInnerContainers : true,
});
可以看出初始化中的tocSelector即为生成目录的地方（一个ol标签），contentSelector 是值从哪个div中获取目录，headingSelector 是指h1,h2,h3生成目录。看我的正文内容：
这样基本可以了。
二维码生成
官网：http://davidshimjs.github.io/qrcodejs/
这个插件可以根据一些信息自动生成二维码，和上个插件一样，先得弄出一个弹出框：
点击这个按钮后弹出下面这个div:
<!--点击微信后弹出的
直接引用js
-->
<div id="qrcode" class="wechat-qr ui flowing popup transition hidden "
style="width: 130px !important;">
<!--<img src="img/dragonCat3.gif" alt="" class="ui rounded image" style="width: 120px !important;" />-->
</div>
弹出得js:
$(".wechat").popup({
popup : $(".wechat-qr"),
position : 'left center'
});
然后老规矩先引用js后初始化：
<script>
// 这里最后部署的公网的域名这里要改
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
});
</script>
这个初始化中得serurl 和url 在是我在项目中想要作为二维码得信息得，你实际想要扫描出啥内容由text指定。
平滑滚动
官网：https://github.com/flesler/jquery.scrollTo
这个插件的作用在于可以在你指定的时间内滑动到指定的位置。
怎么用呢？
这里不用下载直接使用cdn形式即可：
<script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
使用方式也很简单(官网中有介绍)：
$(element).scrollTo(target[,duration][,settings]);
这里的element值可以滑动的元素，如window,一般也是使用window的用来滑动整个窗口。
看实际案例：
我这里项目还是使用那个小工具栏中的一个按钮：
最下面的那个向上符号点击后触发：
$("#toTop-button").click(function() {
// 500是滑动上去的时间
$(window).scrollTo(0, 500);
});
第一个参数的0代表滚动到最顶部，500代表500毫秒后滑倒顶部
滚动监测
官网：http://imakewebthings.com/waypoints/
为什么使用这个？
我的小工具栏并不是在刚刚进入博客详情就需要显示的，而是滑动到正文页面才开始显示，这个功能就需要使用这个插件了。
怎么使用?
下载后引入其中的js，然后在js中声明：
// 滚动监测
var waypoint = new Waypoint({
// 根据id定位
element: document.getElementById('waypoint'),
handler: function(direction) {
if (direction == 'down') {
// jq的显示方法
$('#toolbar').show(100);
} else { // up向上
// 500毫秒后消失
$('#toolbar').hide(500);
}
}
})
这个其中的element: document.getElementById('waypoint')指的是监测谁的滚动，比如我这里，监测的是正文区域：
然后再 handler后的方法中的：
if (direction == 'down') {
// jq的显示方法
$('#toolbar').show(100);
} else { // up向上
// 500毫秒后消失
$('#toolbar').hide(500);
}
代表当方向相对于监测对象向下时，工具条显示，向上时消失。
140
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
