zoukankan      html  css  js  c++  java
  • 博客园美化之添加卡通人物和文章目录

    添加卡通人物

    静态效果图

    代码实现

    <!-- 左下角live2d效果 -->
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    
    <script>
        L2Dwidget.init({
            "model": {
                jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
                "scale": 1
            },
            "display": {
                "position": "left",
                "width": 150,
                "height": 300,
                "hOffset": 0,
                "vOffset": -20
            },
            "mobile": {
                "show": true,
                "scale": 0.5
            },
            "react": {
                "opacityDefault": 0.7,
                "opacityOnHover": 0.2
            }
        });
    </script>
    
    <!--
    其他可选的模型:
    黑猫:https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
    萌娘:https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
    白猫:https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
    狗狗:https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
    小可爱:https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
    小可爱:https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
    -->
    

    将上述代码添加到博客园的页脚HTML代码中,关于如何给博客园添加自定义js代码,可以查看 博客园Markdown代码块添加复制功能 这篇博客。

    添加文章目录

    效果图

    代码实现

    <!-- 目录-->
    <link href="https://files.cnblogs.com/files/strongmore/catalog.css" rel="stylesheet">
    <script src="https://files.cnblogs.com/files/strongmore/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://files.cnblogs.com/files/strongmore/catalog.js"></script>
    

    添加到页脚HTML代码中,现在这几个文件是在我的博客园下的,最好将文件添加到自己的博客园下,默认是查找html中h3,h4,h5标签,可以改成自己想要的。

    参考

    美化你的博客 | 来看这篇教程
    【分享】博客美化(6)为你的博文自动添加目录
    如何在博客园首页设置卡通人物

  • 相关阅读:
    lnmp环境搭建
    Git常用命令
    博客园写随笔环境搭建
    Win常用软件
    Docker环境搭建
    ESP-8266 RTOS 环境搭建
    查看Linux信息
    博客园markdown语法
    Java后台技术(TDDL)
    Java后台技术(Dubbo入门)
  • 原文地址:https://www.cnblogs.com/strongmore/p/15076930.html
Copyright © 2011-2022 走看看