SpringBoot开发一个小而美的个人博客（二） 前端页面（二）

​​​​​​页面插件集成

引入MarkDown文本编辑器

下载地址：Editor.md - 开源在线 Markdown 编辑器

下载解压后将这几个文件拖到项目里面

 然后在发布博客页面引入css和js文件

用法可以参照simple.html

 根据id进行绑定就可以了。 如果编辑器有部分区域被页面其他元素遮挡。可以加一个样式，

 <div id="md-content" style="z-index: 1 !important;">

这个表示放在最上层。

内容排版

插件下载 GitHub - sofish/typo.css: 中文网页重设与排版：一致化浏览器排版效果，构建最适合中文阅读的网页排版

在博客详情页面将typo.css文件引入

参照typo.html，直接添加  class="typo typo-selection" 就可以了。

<div id="wrapper" class="typo typo-selection">

可以根据自己需要修改css样式，比如在移动端显示的时候代码块没有横向的滚动条。添加一个

overflow: auto;  就可以了。

 动画效果

 animate  中文网 Animate中文网 – Animate安装、Animate使用、Animate下载

                cdn  https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css

有很多有意思的动态效果。

引入css文件后，给指定的元素加上指定的动画样式名就可以了

<div class="animated fadeInUp"></div>

目录生成

Tocbot 下载地址 Tocbot

要注意的就是要确保每个标题都有id，就是每个h标签都有id

tocbot.init({
       
        tocSelector: '.js-toc', // 生成的目录
    
        contentSelector: '.js-toc-content',  //生成目录的内容在哪里

        headingSelector: 'h1, h2, h3',
       
        hasInnerContainers: true,
        });
        $('#toTop-button').click(function(){
            $(window).scrollTo(0,1000); 
        });

二维码生成

qrcodejs 下载地址 GitHub - davidshimjs/qrcodejs: Cross-browser QRCode generator for javascript

var qrcode = new QRCode("qrcode", {
            text: "http://www.runoob.com",  //页面地址
            width: 128,
            height: 128,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });

然后想把生成的二维码放在哪里就在哪里加一个  id="qrcode"

滚动条

平滑滚动 scrollTo   cdn:https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.1/jquery.scrollTo.min.js

就是页面右边的回到顶部。

 $('#toTop-button').click(function(){
     $(window).scrollTo(0,1000); //第一个参数是位置，第二个参数是时间
 });

滚动检测  

waypoints 下载地址：GitHub - imakewebthings/waypoints: Waypoints is a library that makes it easy to execute a function whenever you scroll to an element.

我这里是通过判断锁定的文本是在向下滚动，还是向向上滚动，来显示或隐藏右侧按钮。

 大概就是加了这些插件，我觉得最有意思的还是那个动画效果😁

SpringBoot开发一个小而美的个人博客（一） 前端页面（一）_舒克、舒克的博客-CSDN博客