Blog post page

Writing blog content with Markdown
stay This link https://pandao.github.io/editor.md/ Download the plug-in.
Unzip the downloaded compressed package and create a new lib/editormd in the project

Copy the extracted css,fonts,images,languages,lib,plugins,editormd.min.js and editormd.js to this path, and introduce resources on the blog publishing page

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

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

Then copy the relevant code according to simple.html in the example

!--                Change blog content to unique markdown Edit mode-->
                <div class="field">
<!--                    style="z-index: 1 !important;"This is for markdown When the editor is enlarged, it will not overlap with the bottom-->
                    <div id="md-content" style="z-index: 1 !important;">
                        <textarea placeholder="Blog content" 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>
    // Initialize markdown
    var contentEditor;
    $(function() {
        contentEditor = editormd("md-content", {
            // Because the text area has an outer div, it can be 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>

Blog details page

Content layout

typo.css
Download link
As above, do resource introduction first
Follow the example, add class = "typo typo selection" on the div wrapped outside the body content, and add. Typo to the attribute in typo.css. In the table in the main body, class = "ui table" is added to the table tag in consideration of page adaptation
For example:

<table class="ui table" summary="Typo.css List of test platforms">

Animation effect

animate.css
Click here to download
First introduce resources and add animated style effects (fadeIn) where animation effects are needed
Style display link

Code highlighting

PrismJS
Click here to download
Display effect
Add the following code where required:

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

Directory generation

In the interface design, you often need some small functions that can easily view the directory and go back to the beginning. Here are some toolbars

<!--    Make a toolbar easy to read and display-->
    <div class="ui vertical icon buttons">
        <button type="button" class="ui teal button">catalogue</button>
        <a href="#Comment container "class =" UI Teal button "> leave a message</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>

If you need to completely slide up and down the mouse, still fix the position of the toolbar

<!--    Make a toolbar easy to read and display-->
    <div class="m-padding m-fixed m-right-bottom">
        <div class="ui vertical icon buttons ">
            <button type="button" class="ui teal button">catalogue</button>
            <a href="#Comment container "class =" UI Teal button "> leave a message</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 Style

/*Pin the toolbar to the page*/
/*z-index: 10 !important;To prevent being overwritten by typeo.css, the higher the number, the higher the priority*/
.m-fixed {
    position: fixed !important;
    z-index: 10 !important;
}
.m-right-bottom {
    bottom: 0 !important;
    right: 0 !important;
}

Directory function

1. First open a pop-up window function to imitate the appreciation cash module

<!--    Enable directory function-->
    <div class="ui toc-container flowing popup transition hidden">
        Enable directory function
    </div>

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

1. Automatically generate directory according to article content
   Tocbot
   Function display
   Notes:
   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.
   Ensure that each h tag has an id attribute
   Click here to download
   You should first import resources and then initialize them

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 defines the location of directory generation

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

        </ol>
    </div>

JS TOC content indicates which text to generate a directory for. Headingselector: 'h1,h2, h3' indicates that the title level only works on h1,h2 and h3 tags.

QR code generation

QR code pop-up function

Follow the example of the wechat pop-up function on my page

Generate QR code

qrcode.js
Click here to download
Introduce resources
Then initialize the code and copy the code according to the official document

<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>

After copying the code, add the attribute id="qrcode" in the picture of opening wechat function.

Smooth scrolling

jquery.scrollTo
Click here to download
CDN can also be introduced directly

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

Rolling detection

This little toolbar is not displayed at the top, but only when it is slid to a position below
Waypoints
Click here to download
Usage:

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

Design the business logic, and display the toolbar with a transition time of 500ms when sliding

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

At the same time, the id attribute of the toolbar is supplemented. style="display: none" indicates that the toolbar is not displayed by default (at the top).

Error prompt: hidden in the figure above is not a function, but should be changed to hide