个人博客项目--插件集成

博客发布页

用Markdown编写博客内容
在此链接https://pandao.github.io/editor.md/下载该插件。
将下载的压缩包解压，在工程里新建lib/editormd

将解压后的css,fonts,images,languages,lib,plugins,editormd.min.js和editormd.js复制到该路径下，并在博客发布页引入资源

<link rel="stylesheet" href="../static/lib/editormd/css/editormd.min.css">

<script src="../static/lib/editormd/editormd.min.js"></script>

然后根据实例中的simple.html复制相关代码

!--                将博客内容改成特有markdown编辑模式-->
                <div class="field">
<!--                    style="z-index: 1 !important;"这里是为了markdown编辑器放大后不会与底部产生叠放的效果-->
                    <div id="md-content" style="z-index: 1 !important;">
                        <textarea placeholder="博客内容" name="content" style="display:none">
                            #### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;
                        </textarea>
                    </div>
                </div>


<script>
    // 初始化markdown
    var contentEditor;
    $(function() {
        contentEditor = editormd("md-content", {
            // 因为文本区有一个外层div，这里可100%
            width   : "100%",
            height  : 640,
            syncScrolling : "single",
            path    : "../static/lib/editormd/lib/"
        });

        /*
        // or
        testEditor = editormd({
            id      : "test-editormd",
            width   : "90%",
            height  : 640,
            path    : "../lib/"
        });
        */
    });
  </script>

博客详情页

内容排版

typo.css
下载链接
跟上文一样先做资源引入
仿照实例，在正文内容最外面包裹的div上增加class=“typo typo-selection”，并且在typo.css中给属性加上.typo。在正文中的表格，考虑到页面自适应问题，在table标签上加上class=“ui table”
如：

<table class="ui table" summary="Typo.css 的测试平台列表">

动画效果

animate.css
点此下载
先引入资源，在需要动画效果的地方加上animated 样式效果(fadeIn)
样式展示的链接

代码高亮

PrismJS
点此下载
展示效果
在需要的地方加上以下代码：

<pre><code class="language-css">p { color: red }</code></pre>

目录生成

在界面设计中往往需要一些可以方便查看目录，回到开头等小功能，这里是做了一些工具条

<!--    制作一个方便阅读和显示的工具条-->
    <div class="ui vertical icon buttons">
        <button type="button" class="ui teal button">目录</button>
        <a href="#comment-container" class="ui teal button">留言</a>
        <button class="ui icon button"><i class="weixin icon"></i> </button>
        <a href="#" class="ui icon button"><i class="chevron up icon"></i></a>
    </div>

如果需要完全在鼠标上下滑动过程中，依然让这个工具条位置固定

<!--    制作一个方便阅读和显示的工具条-->
    <div class="m-padding m-fixed m-right-bottom">
        <div class="ui vertical icon buttons ">
            <button type="button" class="ui teal button">目录</button>
            <a href="#comment-container" class="ui teal button">留言</a>
            <button class="ui icon button"><i class="weixin icon"></i> </button>
            <a href="#" class="ui icon button"><i class="chevron up icon"></i></a>
        </div>
    </div>

css样式

/*将工具条固定在页面上*/
/*z-index: 10 !important;是为了防止被typo.css覆盖，这个数字越大代表优先级别越高*/
.m-fixed {
    position: fixed !important;
    z-index: 10 !important;
}
.m-right-bottom {
    bottom: 0 !important;
    right: 0 !important;
}

目录功能

1. 先开启一个弹窗功能，仿照赞赏打钱模块

<!--    开启目录功能-->
    <div class="ui toc-container flowing popup transition hidden">
        开启目录功能
    </div>

	<script>
    $('.toc.button').popup({
        popup: $('.toc-container.popup'),
        on: 'click',
        position: 'left center'
    });
</script>

2. 根据文章内容自动生成目录
   Tocbot
   功能展示
   注意项：
   Make sure rendered headings have id attributes, some markdown libraries (like marked) already do this. If you need to do this client side see this script.
   确保每个h标签都有id属性
   点此下载
   还是先引入资源，再初始化

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',
    });

js-toc定义目录生成的位置

    <div class="ui toc-container flowing popup transition hidden" style="width: 250px !important;">
        <ol class="js-toc">

        </ol>
    </div>

js-toc-content表明给哪段文字生成目录， headingSelector: 'h1, h2, h3’表明标题级别只作用于h1,h2和h3标签。

二维码生成

二维码弹窗功能

仿照关于我页面将微信弹窗功能先做出来

生成二维码

qrcode.js
点此下载
引入资源
再初始化代码,根据官方文档复制代码

<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
	text: "http://jindo.dev.naver.com/collie",
	width: 128,
	height: 128,
	colorDark : "#000000",
	colorLight : "#ffffff",
	correctLevel : QRCode.CorrectLevel.H
});
</script>

复制完代码后，在开启微信功能图片中增加id="qrcode"的属性。

平滑滚动

jquery.scrollTo
点此下载
也可以直接CDN引入

<script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>

滚动侦测

这个小工具条在最上面的时候不显示，滑动到下面某一位置才显示
Waypoints
点此下载
用法：

var waypoint = new Waypoint({
  element: document.getElementById('waypoint'),
  handler: function(direction) {
    console.log('Scrolled to waypoint!')
  }
})

设计业务逻辑，当下滑时以500ms过渡时间显示工具条

<div id="toolbar" class="m-padding m-fixed m-right-bottom" style="display: none">

同时，补充工具条的id属性，style="display: none"表明默认情况（最顶端）不显示工具条。

错误提示，上图的hidden并不是一个函数，应该改成hide