首页 > 其他 > 详细

博客园优化

时间:2019-08-12 20:38:27      阅读:104      评论:0      收藏:0      [点我收藏+]

看板娘

技术分享图片

网站下载

把live2d.js
waifu-tips.js
waifu.css
这三个文件传到博客园文件上
最后在博客园设置里配置以下代码即可,放html框即可
最后别忘了修改文件的地址,改成自己上传的文件的地址哦

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D</title>
     
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/Emcikem/waifu.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/Emcikem/waifu.css">
    <div class="waifu" id="waifu">
        <div class="waifu-tips" style="opacity: 1;"></div>
        <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
        <div class="waifu-tool">
            <span class="fui-home"></span>
            <span class="fui-chat"></span>
            <span class="fui-eye"></span>
            <span class="fui-user"></span>
            <span class="fui-photo"></span>
            <span class="fui-info-circle"></span>
            <span class="fui-cross"></span>
        </div>
    </div>
    <script src="https://files.cnblogs.com/files/Emcikem/live2d.js"></script>
    <script src="https://files.cnblogs.com/files/Emcikem/waifu-tips.js"></script>
    <script type="text/javascript">initModel()</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>

视频上传

代码

只要修改aid即可,改成哔哩哔哩的av的数字

<div class="video">
<iframe src="//player.bilibili.com/player.html?aid=40626770&cid=95969626&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

博客园css后台配置

#cnblogs_post_body .video{
    height: 0;
    padding-bottom: 56.25%;  /* 16:9 */
    position: relative;
    width: 100%;
}

#cnblogs_post_body .video iframe{
position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

因为markdown的代码提交后会自动被转换为html代码,而已经包含了html的代码将不会被转换,因此可以用设计html的方法在文章中插入视频。

博客园优化

原文:https://www.cnblogs.com/Emcikem/p/11342072.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!