Django博客用到的插件-看板娘、背景特效、OwO表情、图片查看器、自动生成目录等

Django博客用到的插件

所有需要用到的文件

https://www.liboer.top/media/covers/plugins.rar

和风天气

去和风天气申请免费自定义插件，有js引入即可。

看板娘

{
     #看板娘容器#}
<div class="pio-container right">
    <div class="pio-action"></div>
    <canvas id="pio" width="200" height="250"></canvas>
</div>



<link rel="stylesheet" href="{% static 'css/pio.css' %}">

<script src="{% static 'js/pio.js' %}"></script>
<script src="{% static 'js/l2d.js' %}"></script>
<script>

    function night(data){
     
        document.body.setAttribute('data-theme', 'dark')
        document.body.classList.remove('white')
        document.body.classList.add('dark')

    }




    var pio = new Paul_Pio({
     
    "mode": "fixed",
     "tips": true,
    "hidden": true,
    "content": {
     
        "welcome": ["欢迎来到大聪明博客！", "今天天气不错，一起来玩吧！", "博主每天都有些折腾记录，欢迎前往他的小窝阅读~"],
        "custom": [
            {
     "selector": ".comment-form", "text": "欢迎参与本文评论，别发小广告噢~"},
            {
     "selector": ".home-about", "text": "在这里可以了解博主的日常噢~"},
            {
     "selector": ".RSS", "text": "在这里可以订阅博主噢~"},
            {
     "selector": ".post-item a", "type": "read"},
            {
     "selector": ".post-content a, .page-content a", "type": "link"}
        ]
    },
    "night": "night()",
    "model": ["{% static 'models/koharu/model.json' %}"]

});
</script>

LightBox图片查看器

<div class='exmple' align="center"><img class="spotlight" src="{img[0]}" alt="{img[1]}" ></div>


<script src="{% static 'js/spotlight.bundle.js' %}"></script>

音乐播放器

# 容器
<div id="player"  class="aplayer"></div>



{
     #音乐#}
<link rel="stylesheet" href="{% static 'css/dist_APlayer.min.css' %}">
    
    
    
<script src="{% static 'js/dist_APlayer.min.js' %}"></script>
<script>
const ap = new APlayer({
     
    container: document.getElementById('player'),
    fixed: true,
    autoplay: true, //自动播放
    audio: [
    {
     
        name: 'The Song Of Doremi',
        artist: '林澜叶',
        url: 'http://music.163.com/song/media/outer/url?id=1358848433',
        cover: 'http://p1.music.126.net/Ax-zrmAPBrASWxT92t3fdw==/109951164000242827.jpg?param=130y130',
    },
   	{
     
      	name: '阳光甚好，微风不噪',
        artist: '何石',
        url: '.mp3',
        cover: '.ico',
    } 

   ]
});
ap.init();
</script>

OwO表情

# 容器
<div class='OwO'>
</div>



<link rel="stylesheet" href="{% static 'css/OwO.min.css' %}">
    
    
    
    <script>
        var OwO_demo = new OwO({
     
            {
     #logo: 'OωO表情',#}
            logo: '表情',
            container: document.getElementsByClassName('OwO')[0],
            target: document.getElementById('content'),
            api: window.location.origin + "{% static 'OwO.json' %}",
            position: 'down',
            width: '100%',
            maxHeight: '250px'
        });
    </script>

禁用开发者工具

{
     #禁用开发者工具#}
{
     #<script src='{% static 'js/disable-devtool.min.js' %}'></script>#}


<script>
    DisableDevtool({
     disableMenu: false})
    loadRightMenu();
</script>

公祭日全站变黑

{
     #<script src="{% static 'js/grayscale.js' %}"></script>#}

<script>
    grayscale($("body"));
</script>

字体提标

font-awesome

sweet弹窗

sweetalert

自动生产目录

# 容器
<div id="article-content" class="article-content example">
    <div id="tocContainer" class="tocContainer toc"></div>
</div>


<link rel="stylesheet" href="{% static 'css/tocbot.css' %}">
    
    
<script src="{% static 'js/tocbot.min.js' %}"></script>
    {
     #    给文章的h标签添加id值#}
    <script>
        var headerEl = 'h1,h2,h3,h4',  //headers
            content = '.article-content',//文章容器
            idArr = {
     };  //标题数组以确定是否增加索引id
        //add #id

        $(content).children(headerEl).each(function () {
     
            //去除空格以及多余标点
            var headerId = $(this).text().replace(/[\s|\~|`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\_|\+|\=|\||\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\：|\，|\。]/g, '');

            headerId = headerId.toLowerCase();
            if (idArr[headerId]) {
     
                //id已经存在
                $(this).attr('id', headerId + '-' + idArr[headerId]);
                idArr[headerId]++;
                $(this).attr('class', 'juzhong');
            } else {
     
                //id未存在
                idArr[headerId] = 1;
                $(this).attr('id', headerId);
                $(this).attr('class', 'juzhong');

            }
        });
        tocbot.init({
     
            {
     #添加到哪里#}
            tocSelector: '.tocContainer',
            {
     #针对那个id标签#}
            contentSelector: '.article-content',
            {
     #滚动跟随#}
            positionFixedClass: 'is-position-fixed',
            positionFixedSelector: '.aside-article-catalog',
            {
     #// 需要解析的标题#}
            headingSelector: headerEl,
        });
        controlSidebar();
    </script>

背景特效

<script type="text/javascript" color="255,69,0" opacity='0.7' zindex="-1" count="100"
        src="{% static 'js/canvas-nest.min.js' %}"></script>

输入框烟花特效

<!--输入框烟花特效---><script type="text/javascript" src="{% static 'js/commentTyping.js' %}"></script>