SSM实训：11、页面插件集成

Spring Boot开发小而美的个人博客-李哥

1、博客发布页面

编辑器-Markdown

• 下载地址：https://pandao.github.io/editor.md/
  
• 拷贝到项目配置
  
  
  
  

2、博客详情页面

内容排版-typo.css

• 下载地址:https://github.com/sofish/typo.css

• 拷贝到项目配置
  
  

动画-animate.css

• 地址:https://daneden.github.io/animate.css/
  

代码高亮-prism

• 下载地址:https://github.com/PrismJS/prism

• 拷贝到项目配置
  
  
  

右侧按钮视图

目录生成-Tocbot

• 下载地址：https://tscanlin.github.io/tocbot/

二维码生成-qrcode.js

• 1.采取图片二维码
  

• 2.插件下载地址：https://davidshimjs.github.io/qrcodejs/

• 添加到项目配置
  
  
  
  

平滑滚动-jquery.scrollTo

• https://github.com/flesler/jquery.scrollTo

滚动侦测-waypoints

• 下载地址： https://imakewebthings.com/waypoints

• 添加到项目配置中
  

3、实现代码

<!--  内容排版（2）  -->
                <div id="content" class="typo typo-selection m-padded-lr-responsive m-padded-tb-large">
                    <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>
                    <table class="ui table" summary="Typo.css 的测试平台列表">
                        <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>