页面插件集成
引入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.
我这里是通过判断锁定的文本是在向下滚动,还是向向上滚动,来显示或隐藏右侧按钮。
大概就是加了这些插件,我觉得最有意思的还是那个动画效果😁